Marc Semper Lloret
← HTML: estructura y contenido de la Web

Sesión 12 · Semana 4

Reto de integración · del contenido al HTML

Hoy · Hoja de ruta

  1. 1. Recupera: Decide qué estructura expresa cada relación sin recibir una lista de etiquetas.
  2. 2. Haz: Convierte una especificación desconocida en una página HTML completa.
  3. 3. Comprueba: Justifica las decisiones y modifica una de ellas ante un requisito nuevo.

Antes de empezar · 5 minutos, sin apuntes

  1. ¿Cómo compruebas que una fila con colspan no rompe la cuadrícula?
  2. ¿Por qué una tabla muy combinada puede ser difícil de entender?
  3. Decide si un horario, una navegación y una ficha de contacto necesitan tabla, lista o estructura semántica.

La decisión viene antes que la etiqueta

En las dos sesiones anteriores aprendiste a construir tablas. Hoy la tabla vuelve a ser solo una opción entre muchas. Antes de escribir cada bloque, formula estas preguntas:

  1. ¿Este contenido se entiende por sí solo o forma parte de otro?
  2. ¿Es navegación, una acción o información?
  3. ¿Existe orden, jerarquía o cruce de fila y columna?
  4. ¿La decisión expresa significado o solo intenta colocar algo visualmente?

Paso 1 · Un fragmento resuelto

La especificación dice: «Una introducción explica el evento y después aparecen tres ventajas sin orden». La decisión es un apartado con encabezado, párrafo y lista no ordenada. No se elige por cómo quedará colocado, sino por la relación entre los datos.

Paso 2 · Completa el marcado

Recibes este contenido: «Cómo participar» contiene tres pasos que deben seguirse en orden. Completa los cuatro huecos sin añadir contenedores innecesarios:

<_____>
  <h2>Cómo participar</h2>
  <_____>
    <li>Inscríbete</li>
    <li>Confirma tu correo</li>
    <li>Presenta tu entrada</li>
  </_____>
</_____>

Compara tu solución con un compañero y justificad el elemento exterior y el tipo de lista antes de verla resuelta.

Ver una solución razonada

<section> agrupa un apartado temático con encabezado propio y <ol> expresa que los pasos tienen un orden. Las etiquetas de cierre corresponden a esos dos elementos.

Tarea 11 · Marca una página que nunca has visto

Una asociación local necesita una página para anunciar una jornada de puertas abiertas. Solo recibes esta especificación, no las etiquetas:

  • nombre de la jornada y una frase introductoria;
  • enlaces a inicio, programa, ponentes y contacto;
  • tres actividades, cada una con título, imagen, descripción y enlace para ampliar información;
  • una lista ordenada con los pasos de inscripción;
  • una pequeña comparativa de tres talleres con hora, duración y plazas;
  • una acción para enviar la inscripción y un enlace para descargar las normas;
  • información complementaria sobre accesibilidad del recinto;
  • autoría y contacto de la asociación.

Antes de programar, dibuja el árbol del documento y anota al lado de cada región qué relación expresa. Después escribe el HTML completo. La página debe incluir navegación, una jerarquía de encabezados, listas, imágenes con alternativa adecuada, una tabla pequeña, acciones y regiones semánticas. Nadie te dirá qué etiqueta corresponde a cada punto.

Objetivo mínimoDocumento completo, válido y con cada relación principal marcada correctamente.
Si lo tienesAñade una cuarta actividad que se entienda por sí sola sin reestructurar las demás.
RetoRecibes una versión móvil dibujada en una columna: explica por qué no deberías cambiar el HTML para reproducirla.

Transfiérelo a tu proyecto

Revisa ahora productos.html. Añade una comparativa real solo si sus valores necesitan fila y columna para entenderse. Si no existe ese cruce, usa la estructura adecuada y deja un comentario justificando por qué no has creado una tabla.

Checkpoint · fin de la sesión 12 y de la semana 4

  • Has convertido una especificación nueva en un árbol antes de escribir etiquetas.
  • Puedes justificar navegación, jerarquía, listas, imágenes, tabla, acciones y regiones.
  • Has aplicado un cambio nuevo sin rehacer el documento.
  • Tu proyecto contiene una tabla únicamente si los datos realmente tienen dos coordenadas.

Antes de cerrar · 2 minutos, sin mirar

  1. ¿Qué pregunta haces antes de elegir una etiqueta?
  2. ¿Qué diferencia una acción de un enlace?
  3. ¿Qué parte del reto te obligó a recuperar un concepto anterior?
Ver respuestas

1 · Qué relación o significado expresa ese contenido; la etiqueta viene después.

2 · La acción provoca un cambio y se marca como botón; el enlace lleva a otro destino.

3 · La respuesta depende de tu proceso, pero debe nombrar un concepto y dónde lo aplicaste, no limitarse a «todo».

Demostración del profesor · la estructura no se maquilla

Compara tres diseños del documento integrado de esta semana. Comprueba que la navegación, las regiones y la tabla no cambian: solo cambia cómo se presentan.

Microprueba semanal 4 · 5–10 minutos

Individual, sin IA y sin apuntes.

  1. Dibuja el árbol semántico de una noticia con navegación, imagen, datos relacionados y una acción.
  2. Escribe solo el bloque de datos usando una tabla accesible si corresponde.
  3. Justifica dos decisiones y cambia una cuando el profesor modifica el requisito.