Ing. Antony Chitay
¡Bienvenido a la guía de HTML para nuestro curso de Programación Web! Aquí encontrarás una serie de ejemplos básicos que te ayudarán a entender cómo construir diferentes partes de una página web. Desde encabezados y párrafos hasta formularios con diversos tipos de campos, esta guía cubre los componentes esenciales de HTML que necesitarás.
Cada sección incluye el código HTML y cómo se ve en la práctica, para que puedas ver claramente cómo se traduce el código en elementos visuales. Utiliza este documento como una referencia rápida mientras trabajas en tus proyectos y aprende a construir páginas web efectivas. ¡Vamos a sumergirnos en el mundo del HTML y a crear cosas geniales juntos!
Elemento básicos para la construcción de sitios web
Este documento muestra ejemplos básicos de HTML para aprender los conceptos fundamentales.
Estructura Básica de un Documento HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Página Web</title>
</head>
<body>
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un párrafo introductorio sobre el contenido del sitio.</p>
</body>
</html>
Bienvenido a mi sitio web
Este es un párrafo introductorio sobre el contenido del sitio.
Encabezados y Párrafos
<h1>Encabezado de Nivel 1</h1>
<h2>Encabezado de Nivel 2</h2>
<h3>Encabezado de Nivel 3</h3>
<p>Este es un párrafo de ejemplo. Los párrafos son bloques de texto en HTML.</p>
Encabezado de Nivel 1
Encabezado de Nivel 2
Encabezado de Nivel 3
Este es un párrafo de ejemplo. Los párrafos son bloques de texto en HTML.
Enlaces y Listas
<p>Visita <a href="https://www.ejemplo.com">Ejemplo.com</a> para más información.</p>
<h2>Lista Ordenada</h2>
<ol>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
</ol>
<h2>Lista No Ordenada</h2>
<ul>
<li>Elemento uno</li>
<li>Elemento dos</li>
<li>Elemento tres</li>
</ul>
Visita Ejemplo.com para más información.
Lista Ordenada
- Primer elemento
- Segundo elemento
- Tercer elemento
Lista No Ordenada
- Elemento uno
- Elemento dos
- Elemento tres
Imágenes
<h2>Imagen de Ejemplo</h2>
<img src="https://www.ejemplo.com/imagen.jpg" alt="Descripción de la imagen" width="300">
Imagen de Ejemplo
Tablas
<h2>Tabla de Ejemplo</h2>
<table border="1">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Ana</td>
<td>25</td>
<td>Madrid</td>
</tr>
<tr>
<td>Carlos</td>
<td>30</td>
<td>Barcelona</td>
</tr>
</table>
Tabla de Ejemplo
| Nombre | Edad | Ciudad |
|---|---|---|
| Ana | 25 | Madrid |
| Carlos | 30 | Barcelona |
Formularios
<h2>Formulario de Contacto</h2>
<form action="/enviar" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre"><br><br>
<label for="email">Correo Electrónico:</label>
<input type="email" id="email" name="email"><br><br>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje"></textarea><br><br>
<input type="submit" value="Enviar">
</form>
Formulario de Contacto
Tipos de Elementos Input en un Formulario
<h3>Texto</h3>
<label for="text-input">Nombre:</label>
<input type="text" id="text-input" name="nombre"><br><br>
<h3>Contraseña</h3>
<label for="password-input">Contraseña:</label>
<input type="password" id="password-input" name="password"><br><br>
<h3>Correo Electrónico</h3>
<label for="email-input">Correo Electrónico:</label>
<input type="email" id="email-input" name="email"><br><br>
<h3>Número</h3>
<label for="number-input">Edad:</label>
<input type="number" id="number-input" name="edad" min="0" max="120"><br><br>
<h3>Teléfono</h3>
<label for="tel-input">Teléfono:</label>
<input type="tel" id="tel-input" name="telefono"><br><br>
<h3>URL</h3>
<label for="url-input">Sitio Web:</label>
<input type="url" id="url-input" name="website"><br><br>
<h3>Fecha</h3>
<label for="date-input">Fecha de Nacimiento:</label>
<input type="date" id="date-input" name="fecha-nacimiento"><br><br>
<h3>Hora</h3>
<label for="time-input">Hora de Cita:</label>
<input type="time" id="time-input" name="hora-cita"><br><br>
<h3>Color</h3>
<label for="color-input">Color Favorito:</label>
<input type="color" id="color-input" name="color-favorito"><br><br>
<h3>Checkbox</h3>
<label>
<input type="checkbox" name="suscribirse"> Suscribirse al boletín
</label><br><br>
<h3>Radio</h3>
<p>Género:</p>
<label>
<input type="radio" name="genero" value="masculino"> Masculino
</label><br>
<label>
<input type="radio" name="genero" value="femenino"> Femenino
</label><br><br>
<h3>Selector de Archivos</h3>
<label for="file-input">Subir archivo:</label>
<input type="file" id="file-input" name="archivo"><br><br>
<h3>Selector de Rango</h3>
<label for="range-input">Nivel de Satisfacción:</label>
<input type="range" id="range-input" name="satisfaccion" min="0" max="10"><br><br>
<h3>Botón de Envío</h3>
<input type="submit" value="Enviar">
Texto
Contraseña
Correo Electrónico
Número
Teléfono
URL
Fecha
Hora
Color
Checkbox
Radio
Género:
Selector de Archivos
Selector de Rango
Botón de Envío
Comentarios en HTML
<!-- Este es un comentario en HTML -->
El comentario anterior no se verá en el navegador.
