Sección 2.1: Etiquetas de Encabezado
Las etiquetas de encabezado en HTML5 son fundamentales para estructurar y dar jerarquía a tu contenido. Van desde <h1> (encabezado de nivel 1) hasta <h6> (encabezado de nivel 6), siendo <h1> el más importante y <h6> el menos importante. Estas etiquetas se utilizan para resaltar títulos y subtítulos en tu página web. Aquí tienes un ejemplo: <h1>Este es un encabezado de nivel 1</h1><h2>Este es un encabezado de nivel 2</h2><h3>Este es un encabezado de nivel 3</h3>
Sección 2.2: Listas y Enlaces
Las listas y enlaces son componentes clave para la navegación y organización del contenido en tu página web.
Listas no ordenadas: Se crean con la etiqueta <ul> y se componen de elementos de lista <li>. Aquí tienes un ejemplo: <ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li></ul>
Listas ordenadas: Utiliza la etiqueta <ol> para crear listas ordenadas. Al igual que las listas no ordenadas, también usas <li> para los elementos de lista. Ejemplo: <ol> <li>Primer elemento</li> <li>Segundo elemento</li> <li>Tercer elemento</li></ol>
Enlaces: Los enlaces se crean con la etiqueta <a>. Para que un enlace funcione, debes proporcionar el atributo «href» con la URL de destino. Aquí tienes un ejemplo: <a href=»https://www.ejemplo.com»>Visitar Ejemplo.com</a>
Sección 2.3: Ejercicios Resueltos
Encabezados y Títulos: Crea una página HTML que contenga un título principal (usando <h1>) y tres subtítulos (usando <h2>, <h3>, y <h4>) que describan tus pasatiempos o intereses.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mis Pasatiempos</title>
</head>
<body>
<h1>Mis Pasatiempos Favoritos</h1>
<h2>Pintura al óleo</h2>
<h3>Senderismo en la montaña</h3>
<h4>Cocina internacional</h4>
</body>
</html>
Listas de Compras: Crea una lista no ordenada que contenga cinco elementos de tu lista de compras en una tienda de comestibles.
<ul>
<li>Manzanas</li>
<li>Leche</li>
<li>Pan integral</li>
<li>Huevos</li>
<li>Verduras frescas</li>
</ul>
Sitio Web de Recetas: Crea una lista ordenada de tres recetas de cocina con enlaces a páginas web externas. Utiliza la etiqueta <a> para enlazar a sitios web de recetas.
<ol>
<li><a href="https://www.receta1.com">Receta de Sopa de Tomate</a></li>
<li><a href="https://www.receta2.com">Receta de Risotto de Champiñones</a></li>
<li><a href="https://www.receta3.com">Receta de Tarta de Manzana</a></li>
</ol>
Estos ejercicios te permitirán practicar el uso de etiquetas de encabezado, listas y enlaces, componentes fundamentales para la estructura y la navegación en una página web HTML5.
Sección 2.4: Imágenes y Multimedia
HTML5 ofrece una variedad de elementos para mostrar imágenes y multimedia en una página web. Aquí se detallan algunos de los elementos más comunes:
Elemento de Imagen <img>: Este elemento se utiliza para mostrar imágenes en una página web. Debes proporcionar el atributo «src» con la URL de la imagen que deseas mostrar. Ejemplo:
<img src="imagen.jpg" alt="Descripción de la imagen">Elemento de Audio <audio>: Permite la reproducción de audio en la página web. Utiliza el elemento <source> dentro de <audio> para definir diferentes formatos de audio para la compatibilidad con varios navegadores. Ejemplo:
<audio controls>
<source src="cancion.mp3" type="audio/mpeg">
<source src="cancion.ogg" type="audio/ogg">
Tu navegador no admite la reproducción de audio.
</audio>
Elemento de Video <video>: Similar al elemento de audio, pero se utiliza para mostrar videos. Debes proporcionar varios formatos de video para la compatibilidad cruzada. Ejemplo:
<video controls width="400" height="300">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Tu navegador no admite la reproducción de video.
</video>
Sección 2.5: Formularios y Entradas de Usuario
Los formularios son fundamentales para la recopilación de datos y la interacción con los usuarios en una página web. HTML5 proporciona una variedad de elementos para crear formularios:
Elemento de Formulario <form>: Este elemento se utiliza para crear un formulario que envía datos a un servidor. Puedes especificar el método de envío, como GET o POST, y la URL del servidor de destino.
<form action="procesar.php" method="post">
<!-- Campos del formulario se agregan aquí -->
</form>
Elemento de Entrada de Texto <input>: Permite a los usuarios ingresar texto. Puedes usar el atributo «type» para especificar el tipo de entrada, como texto, contraseña, email, etc.
<input type="text" name="nombre" placeholder="Tu nombre">Elemento de Área de Texto <textarea>: Proporciona un área de texto de múltiples líneas para que los usuarios escriban comentarios más largos.
<textarea name="comentario" rows="4" cols="50">Escribe tu comentario aquí.</textarea>Elemento de Botón <button>: Se utiliza para crear botones en formularios que pueden enviar o restablecer datos.
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
Sección 2.6: Ejercicios Resueltos
Mostrar una Imagen: Crea una página web que muestre una imagen de tu elección utilizando la etiqueta <img>. Asegúrate de incluir el atributo «src» con la URL de la imagen y proporciona una descripción usando el atributo «alt».
<img src="imagen.jpg" alt="Una hermosa imagen">Reproductor de Audio: Agrega un reproductor de audio a tu página web. Utiliza la etiqueta <audio> y proporciona dos fuentes de audio diferentes, una en formato MP3 y otra en formato OGG.
<audio controls>
<source src="cancion.mp3" type="audio/mpeg">
<source src="cancion.ogg" type="audio/ogg">
Tu navegador no admite la reproducción de audio.
</audio>
Formulario de Contacto: Crea un formulario de contacto que incluya campos para el nombre, el correo electrónico y un mensaje. Utiliza los elementos <form>, <input>, y <textarea>.
<form action="procesar.php" method="post">
<input type="text" name="nombre" placeholder="Tu nombre">
<input type="email" name="email" placeholder="Tu correo electrónico">
<textarea name="mensaje" rows="4" cols="50" placeholder="Escribe tu mensaje aquí."></textarea>
<button type="submit">Enviar</button>
</form>
Botones en Formulario: Agrega botones «Enviar» y «Restablecer» a tu formulario. Utiliza la etiqueta <button>.
<button type="submit">Enviar</button>
<button type="reset">Restablecer</button>
Estos ejercicios te ayudarán a comprender cómo incorporar imágenes, audio y video, así como la creación de formularios con entradas de usuario en tus páginas web.
