UD1 · Guía y taller práctico
HTML: estructura y contenido de la Web
HTML no describe cómo se ve una página, sino qué representa cada parte de su contenido. Durante seis sesiones de tres horas recorremos el lenguaje completo —texto, listas, enlaces, imágenes, semántica, tablas y formularios— construyendo un sitio multipágina real sin una sola línea de CSS.
Antes de empezar
- Necesitas
- Visual Studio Code con la extensión HTMLHint instalada.
- Un navegador moderno con DevTools: Chrome, Firefox o Edge.
- El validador oficial del W3C, en validator.w3.org.
- Una carpeta de trabajo local para el proyecto, con copia de seguridad.
- Debes saber
- Manejo básico del sistema de archivos: crear carpetas, guardar y mover ficheros.
¿Qué vas a aprender?
Al usar una web percibimos textos, imágenes, menús, formularios, botones o tablas. El navegador, sin embargo, necesita una información más determinante que su apariencia:
¿Qué representa cada elemento?
Un título no es un texto grande. Un menú no es un puñado de palabras seguidas. Una imagen no es un archivo colocado en pantalla.
HTML es el lenguaje con el que describimos la estructura y el significado del contenido. En esta unidad aprenderás a escribir documentos modernos, organizados, semánticos y accesibles.
Todavía no vamos a preocuparnos de que sean bonitos. Eso llega con CSS, en la unidad siguiente. Primero hay que construir bien la estructura.
Aprender HTML no consiste en memorizar cien etiquetas, dado que la lista está publicada y se consulta. Consiste en decidir qué significa cada trozo de información. Por eso la unidad no avanza recitando etiquetas, sino planteando decisiones: ¿esto es una lista o un párrafo?, ¿esta imagen informa o decora?, ¿esto es una tabla o solo lo parece?
Cómo es cada sesión
Cada sesión dura tres horas y combina una explicación breve con trabajo práctico y comprobaciones. HTML se aprende escribiéndolo, corrigiéndolo y discutiéndolo, no escuchando la lista de etiquetas.
- Recuerda el punto de partida
- Se explica
- Se trabaja
- Cierre
Los tiempos de los pasos son orientativos. Avanza cuando puedas comprobar y explicar el resultado. La ayuda se retira poco a poco: primero copias, después completas, después reparas y al final decides sin pistas. Cada paso deja algo comprobable antes de pasar al siguiente.
Al final de cada sesión hay una ampliación con dos retos para quien termine antes. No son más de lo mismo: trabajan sobre material ajeno y piden justificar decisiones por escrito, de modo que no se resuelven tecleando deprisa.
Una sesión por semana, seis semanas, dieciocho horas. Aproximadamente dos tercios de la práctica ocurren sobre tu propio proyecto y un tercio sobre código ajeno, para demostrar que la decisión se puede transferir a un contexto nuevo.
Cuando aparece un concepto nuevo, la progresión habitual es esta:
- Ejemplo resuelto
- Ejemplo incompleto
- Problema parecido
- Problema nuevo
El proyecto de la unidad
Durante las próximas semanas construirás progresivamente un pequeño sitio web. El tema lo eliges tú: una empresa ficticia, una tienda, una asociación, un evento, un videojuego, un proyecto tecnológico, tu portfolio, o cualquier otra propuesta que acuerdes con el profesor.
Al terminar tendrás algo parecido a esto:
mi-web/
│
├── index.html
├── productos.html
├── acerca.html
├── contacto.html
│
└── img/
├── portada.webp
├── producto-1.webp
└── producto-2.webpNo vas a recibir el proyecto terminado para completar huecos. Lo construirás a medida que aprendas HTML.
PixelStore
Los ejemplos de estos apuntes usan siempre la misma empresa ficticia —una tienda de componentes y periféricos para desarrolladores— para que se entiendan en contexto. Tú aplica cada idea a tu tema.
Dos condiciones para toda la unidad
Condición 1 · cero CSS
Durante estas seis semanas está prohibido escribir estilos: ni ficheros .css, ni etiquetas <style>, ni atributos style="...".
No es un capricho. Si puedes maquillar el resultado, la tentación es resolver los problemas de estructura con apariencia. Sin CSS, la única forma de que un documento se entienda es que esté bien estructurado. Tu web va a parecerte fea, y esa es exactamente la idea: lo que se evalúa no es cómo se ve, sino qué significa.
Condición 2 · la IA se usa para entender, no para entregar
- Antes de preguntar: escribe qué crees que ocurre y qué has comprobado.
- Pregunta: pide una explicación o pistas, no que rehaga la actividad. Ejemplo: «Creo que esta jerarquía falla porque salto de
h1ah3. Explícame qué debería revisar sin darme el documento completo». - Después: cierra la respuesta y realiza una modificación diferente sin volver a preguntar.
Si una IA escribe <article> y tú no sabes justificar por qué no es un <section>, todavía no has aprendido HTML. La prueba será siempre hacer un cambio pequeño y explicarlo.
Plan de trabajo por sesiones
| Sesión | Contenido de las tres horas | Práctica central y entregable | Horas |
|---|---|---|---|
| Sesión 1 | El editor y el documento HTML | Entorno, reparación de HTML roto y primera página propia | 3 h |
| Sesión 2 | Texto, listas, enlaces y navegación | Interpretación de información, sitio multipágina y laberinto de rutas | 3 h |
| Sesión 3 | Imágenes y semántica estructural | Criterio de alt, refactorización de div soup y auditoría con DevTools |
3 h |
| Sesión 4 | Tablas e integración | Tablas accesibles, celdas combinadas y marcado completo de una página desconocida | 3 h |
| Sesión 5 | Formularios accesibles | Formulario comercial progresivo y auditoría de uno defectuoso | 3 h |
| Sesión 6 | Depuración, validación y coevaluación | HTML forense, cierre del proyecto y revisión por pares | 3 h |
| Total | Sitio multipágina validado y revisado | 18 h |
Durante las dieciocho horas alternarás explicaciones, ejercicios guiados, trabajo en tu sitio y revisión de código. Si completas una sesión antes, puedes continuar con el siguiente bloque una vez comprobado el resultado.
Sesiones de la unidad
Cada sesión es una clase, con su propia página.
6 sesiones