HTML Intermedio
Dominar las siguientes etiquetas y conceptos intermedios te permitirá construir páginas web mucho más ricas en funcionalidades y contenido, sentando una base sólida para el diseño responsivo y la interactividad con CSS y JavaScript.
¿De que trata?
HTML Intermedio se refiere a un conjunto de etiquetas y conceptos más avanzados que te permiten construir páginas web más complejas, interactivas y ricas en contenido. Una vez que dominas la estructura básica (<html>, <head>, <body>, encabezados, párrafos), el HTML intermedio te equipa con las herramientas para:
Recopilar información del usuario (formularios).
Organizar datos de manera estructurada (tablas, listas).
Conectar tu página a otros recursos (enlaces).
Incorporar elementos visuales y auditivos (imágenes, multimedia).
Mejorar la semántica y accesibilidad de tu contenido.
Mientras que el HTML básico es el esqueleto, el HTML intermedio añade los órganos vitales y los sistemas internos para que la página sea funcional y útil.
¿Cómo se hace el HTML Intermedio?
Para trabajar con HTML intermedio, seguirás usando un editor de texto y un navegador, pero ahora con un enfoque en la interactividad y la organización de datos.
1. Formularios (<form>)
¿De qué trata? Los formularios son esenciales para permitir que los usuarios ingresen datos en una página web. Piensa en ellos como cuestionarios o herramientas de entrada de información: inicios de sesión, registros, comentarios, búsquedas, etc.
¿Cómo se hace? La etiqueta principal es <form>, que define el área del formulario. Dentro de ella, utilizas diferentes tipos de elementos de entrada (<input>) y otras etiquetas para botones, áreas de texto, listas desplegables, etc.
<form action="procesar.php" method="POST">: Define el formulario.
action: La URL a la que se envían los datos del formulario cuando se envía.
method: El método HTTP para enviar los datos (GET para datos en la URL, POST para datos en el cuerpo de la petición).
<label for="id_input">: Asocia un texto descriptivo a un control de formulario. Mejora la accesibilidad.
<input type="...">: El elemento más versátil. El atributo type define el tipo de entrada.
type="text": Campo de texto simple.
type="password": Campo de texto oculto.
type="email": Para direcciones de correo, con validación básica de formato.
type="number": Para números.
type="date": Selector de fecha.
type="checkbox": Casilla de verificación (múltiples selecciones).
type="radio": Botón de opción (una única selección de un grupo, necesitan el mismo name).
type="submit": Botón para enviar el formulario.
type="reset": Botón para restablecer el formulario.
type="file": Para subir archivos.
<textarea>: Para entradas de texto multilínea.
<select> y <option>: Para listas desplegables.
<button type="submit">: Un botón más versátil que input type="submit".
HTML:
2. Tablas (<table>)
¿De qué trata? Las tablas se utilizan para mostrar datos tabulares (filas y columnas). Son ideales para información estructurada como listas de productos, calendarios, resultados financieros, etc.
¿Cómo se hace? La etiqueta principal es <table>. Dentro de ella, defines filas (<tr>), celdas de encabezado (<th>) y celdas de datos (<td>).
<table>: Define la tabla.
<thead>: Contiene las filas de encabezado de la tabla.
<tbody>: Contiene las filas de datos de la tabla.
<tfoot>: Contiene las filas de pie de página de la tabla (resúmenes, totales).
<tr>: Define una fila de tabla (table row).
<th>: Define una celda de encabezado (table header).
<td>: Define una celda de datos (table data).
colspan: Atributo para que una celda ocupe varias columnas.
rowspan: Atributo para que una celda ocupe varias filas.
HTML:
3. Listas (<ul>, <ol>, <dl>)
¿De qué trata? Las listas se usan para agrupar elementos relacionados. Vimos las básicas (<ul> y <ol>). HTML intermedio añade listas de definición.
¿Cómo se hace?
<dl> (Definition List): Una lista de definiciones.
<dt> (Definition Term): El término a definir.
<dd> (Definition Description): La descripción o definición del término.
4. Enlaces (<a>) Avanzados
¿De qué trata? Más allá de enlaces simples a otras páginas, puedes crear anclas, enlaces para descargar archivos o para enviar correos.
¿Cómo se hace? El atributo href es clave.
target="_blank": Abre el enlace en una nueva pestaña o ventana del navegador.
Anclas (#): Enlaza a una sección específica dentro de la misma página (usando el atributo id en el elemento de destino).
mailto:: Para iniciar un correo electrónico.
tel:: Para iniciar una llamada telefónica (en dispositivos móviles).
download: Atributo que sugiere al navegador descargar el recurso en lugar de navegar a él.
HTML:
5. Imágenes (<img>) Avanzadas y Multimedia
¿De qué trata? Permite insertar imágenes de manera más controlada y añadir videos y audio directamente en la página, sin necesidad de plugins.
¿Cómo se hace?
Imágenes responsivas (<picture>, srcset, sizes): Para mostrar diferentes versiones de una imagen según el tamaño de pantalla o la resolución.
figure y figcaption: Para agrupar una imagen con su leyenda semánticamente.
<video>: Para incrustar videos.
<audio>: Para incrustar archivos de audio.
controls: Muestra los controles de reproducción del navegador.
autoplay: Reproduce automáticamente (a menudo bloqueado por navegadores).
loop: Reproduce en bucle.
muted: Silencia el audio/video por defecto.
preload="metadata": Carga solo la metadata del video para inicio rápido.
<source>: Permite especificar múltiples formatos de video/audio para asegurar compatibilidad.