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 18 sesiones 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 una hora y sigue una estructura habitual, adaptable al contenido. Un concepto sencillo deja más tiempo para practicar; semántica, formularios o depuración pueden necesitar una demostración más larga.
- Recupera · 5 min
- Aprende y observa · 10–20 min
- Practica · 30–40 min
- Cierra · 5 min
Tres sesiones por semana, seis semanas, dieciocho horas. Cada bloque de teoría termina con un «Ahora tú», y cada dos o tres sesiones hay una tarea mayor que hace avanzar el mismo proyecto. Aproximadamente dos tercios de la práctica ocurren sobre ese 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 semanal
| Semana | Bloque temático | Práctica central y entregable semanal | Horas |
|---|---|---|---|
| Semana 1 | El editor y el documento HTML | Entorno, reparación de HTML roto y primera página propia | 3 h |
| Semana 2 | Texto, listas, enlaces y navegación | Interpretación de información, sitio multipágina y laberinto de rutas | 3 h |
| Semana 3 | Imágenes y semántica estructural | Criterio de alt, refactorización de div soup y auditoría con DevTools |
3 h |
| Semana 4 | Tablas e integración | Tablas accesibles, celdas combinadas y marcado completo de una página desconocida | 3 h |
| Semana 5 | Formularios accesibles | Formulario comercial progresivo y auditoría de uno defectuoso | 3 h |
| Semana 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 |
El reparto real del tiempo es aproximadamente este, y conviene que lo sepas desde el principio:
| En qué se va la unidad | Horas |
|---|---|
| Explicación y demostraciones | 5–6 h |
| Ejercicios guiados | 7–8 h |
| Proyecto incremental | 3–4 h |
| Depuración, validación y revisión por pares | 1–2 h |
No son dieciocho horas explicando etiquetas.
Sesiones de la unidad
Cada sesión es una clase, con su propia página.
18 sesiones
Semana 1 · El editor y el documento HTML
Semana 2 · Texto, listas, enlaces y navegación
Semana 3 · Imágenes y semántica estructural
Semana 4 · Tablas e integración
Semana 5 · Formularios accesibles
Semana 6 · Depuración, validación y coevaluación