Tecnología y Digitalización · 3° ESO · Creación de Contenidos y Diseño Web · 2o Trimestre

Estructura de Documentos Web con HTML

Los alumnos aprenden a estructurar el contenido de una página web utilizando etiquetas HTML semánticas.

• Competencias Clave LOMLOE
• LOMLOE: ESO - Creación de contenidos digitales
• LOMLOE: ESO - Comunicación y colaboración

Sobre este tema

HTML y CSS son los idiomas de la web: el primero estructura el contenido y el segundo define su apariencia. Este tema introduce a los alumnos de 3º de ESO en los fundamentos de estos lenguajes de marcado, ensenando a separar la semantica del contenido de su representacion visual, un principio de diseno que facilita el mantenimiento, la accesibilidad y la adaptacion a distintos dispositivos.

Desde el marco de la LOMLOE, la creacion de contenidos digitales es una competencia clave que va mas alla de usar herramientas existentes: implica comprender su logica subyacente. Los alumnos aprenden a estructurar una pagina con etiquetas semanticas, a aplicar estilos con CSS y a entender como el diseno responsivo garantiza que la informacion sea accesible desde cualquier dispositivo, democratizando el acceso al conocimiento.

Programar una pagina web real es una de las actividades de aprendizaje activo mas motivadoras para el alumnado de esta edad. Cuando el proyecto tiene un proposito genuino, como presentar un proyecto de clase, crear una galeria de arte o documentar una investigacion, la motivacion para dominar HTML y CSS es intrinseca y no necesita estimulos artificiales.

Preguntas clave

1. ¿Por qué es importante separar el contenido de la presentación visual en la web?
2. ¿Cómo contribuye el uso de etiquetas HTML semánticas a la accesibilidad de una página?
3. ¿Qué elementos básicos son esenciales para la estructura de cualquier documento HTML?

Objetivos de Aprendizaje

• Identificar las etiquetas HTML semánticas esenciales para estructurar un documento web básico (DOCTYPE, html, head, body, h1-h6, p, a, img).
• Explicar la función de las etiquetas semánticas en la organización del contenido y su impacto en la accesibilidad web y el SEO.
• Clasificar diferentes tipos de contenido web (encabezados, párrafos, enlaces, imágenes) y seleccionar la etiqueta HTML semántica apropiada para cada uno.
• Crear un documento HTML simple que estructure correctamente el contenido de una página web utilizando etiquetas semánticas.

Antes de Empezar

Conceptos básicos de Internet y la World Wide Web

Por qué: Los alumnos necesitan comprender qué es Internet y cómo funciona la web para entender el propósito de crear documentos web.

Introducción a la programación y la lógica

Por qué: Una comprensión básica de la lógica de programación ayuda a asimilar la estructura de etiquetas y la sintaxis de HTML.

Vocabulario Clave

Etiqueta HTML semántica	Una etiqueta HTML que describe su significado al navegador y al desarrollador, indicando la función del contenido que encierra (ej. <article>, <nav>).
Estructura de documento	La organización jerárquica y lógica del contenido dentro de un archivo HTML, definida por el uso de etiquetas de apertura y cierre.
Elemento HTML	Un componente individual de un documento HTML, que generalmente consta de una etiqueta de apertura, contenido y una etiqueta de cierre (ej. <p>Texto del párrafo</p>).
Atributo HTML	Información adicional que se proporciona a una etiqueta HTML para modificar su comportamiento o proporcionar metadatos (ej. el atributo 'href' en la etiqueta <a>).

Atención a estas ideas erróneas

Idea errónea común

Creer que HTML sirve para dar estilo a las paginas web.

Qué enseñar en su lugar

HTML define la estructura y el significado del contenido: que es un titulo, que es un parrafo, que es una lista. El estilo es responsabilidad de CSS. Mezclar ambos roles, usando atributos de estilo directamente en HTML, crea codigo dificil de mantener. La separacion de responsabilidades es un principio fundamental del desarrollo web profesional.

Idea errónea común

Pensar que hacer una pagina web requiere herramientas de pago o programas especializados.

Qué enseñar en su lugar

Un editor de texto basico y un navegador son suficientes para crear y visualizar paginas HTML y CSS. Abrir un archivo de texto con extension .html en el navegador desmitifica inmediatamente la creacion web y hace el aprendizaje accesible para cualquier alumno con un ordenador.

Idea errónea común

Asumir que el diseno responsivo es opcional o un extra avanzado.

Qué enseñar en su lugar

Mas de la mitad del trafico web mundial proviene de dispositivos moviles. Una pagina que no se adapta a pantallas pequenas excluye a una parte mayoritaria de los usuarios. El diseno responsivo es un requisito basico de calidad, no una opcion avanzada, y las media queries son una herramienta al alcance de cualquier principiante.

Ideas de aprendizaje activo

Aprendizaje Basado en Proyectos (ABP): Mi primera pagina web real

Cada alumno crea una pagina web sobre un tema de su eleccion usando solo HTML y CSS, sin herramientas de edicion visual. Debe incluir una estructura semantica correcta, estilos propios y al menos una adaptacion al movil mediante una media query basica. El resultado se comparte con el grupo para retroalimentacion entre pares.

90 min·Individual

Reto de maquetacion: Reproduce el diseno

Se muestra una captura de pantalla de un diseno web y los grupos deben replicarlo usando solo HTML y CSS. La comparacion entre las soluciones de distintos grupos revela la variedad de enfoques validos para llegar al mismo resultado visual.

60 min·Parejas

Inspeccion de codigo: Aprende del navegador

Usando las herramientas de desarrollador del navegador, los alumnos inspeccionan el HTML y CSS de paginas web reales que admiran. Identifican las tecnicas usadas, las copian en un entorno local y experimentan modificando los valores para entender el efecto de cada propiedad.

45 min·Individual

Debate formal: ¿Debe haber una estetica web universal?

Se presentan webs de distintos paises y culturas con estilos radicalmente distintos. Los alumnos debaten si existe una estetica web universal, si las convenciones de usabilidad son culturales o universales, y como se equilibra la creatividad visual con la accesibilidad y la facilidad de uso.

35 min·Toda la clase

Conexiones con el Mundo Real

• Los desarrolladores web utilizan HTML semántico para construir sitios de noticias como El País o BBC, asegurando que los lectores de pantalla puedan interpretar correctamente los titulares, artículos y secciones, mejorando la experiencia para personas con discapacidad visual.
• Las agencias de marketing digital emplean la estructura semántica de HTML para optimizar el posicionamiento en buscadores (SEO) de las páginas de productos de tiendas online como Zara o Amazon, ayudando a que los motores de búsqueda comprendan la relevancia del contenido y lo muestren a los usuarios adecuados.

Ideas de Evaluación

Boleto de Salida

Entrega a cada alumno una tarjeta con un fragmento de contenido (ej. 'Título principal de la página', 'Un enlace a la página de contacto'). Pide que escriban la etiqueta HTML semántica correcta para ese contenido y una breve justificación de por qué la eligieron.

Verificación Rápida

Muestra en pantalla un documento HTML simple con etiquetas genéricas (ej. <div> para todo). Pregunta a los alumnos: '¿Qué etiquetas semánticas podríamos usar para mejorar la estructura y accesibilidad de este código?'. Anota sus sugerencias en la pizarra.

Pregunta para Discusión

Plantea la pregunta: '¿Por qué es más beneficioso para un sitio web usar <nav> para la navegación principal en lugar de un <div> genérico?'. Fomenta un debate donde los alumnos expliquen las ventajas de la semántica para la accesibilidad y el SEO.

Preguntas frecuentes

¿Que son las etiquetas semanticas de HTML5 y por que importan?

Las etiquetas semanticas como header, nav, main, article, section, aside y footer describen el proposito del contenido, no solo su apariencia. Mejoran la accesibilidad para usuarios con lectores de pantalla, facilitan la indexacion por parte de los buscadores y hacen el codigo mas legible para otros desarrolladores.

¿Como funciona el modelo de caja de CSS?

En CSS, cada elemento se representa como una caja con cuatro capas: el contenido, el relleno o padding, el borde y el margen exterior. Entender como estas capas interactuan es fundamental para controlar el espaciado y la distribucion de los elementos en una pagina. Es uno de los conceptos que mas confusion genera en principiantes.

¿Que es el diseno responsivo y como se implementa en CSS?

El diseno responsivo adapta el layout de una pagina al tamano de la pantalla del dispositivo. Se implementa principalmente con media queries, que aplican reglas CSS distintas segun condiciones como el ancho de la ventana, y con unidades relativas como porcentajes y em en lugar de pixeles fijos.

¿Como contribuyen los proyectos web reales al aprendizaje activo de HTML y CSS?

Aprender HTML y CSS memorizando etiquetas es ineficiente y desmotivador. Cuando el alumno tiene un proposito real, como publicar una galeria de sus trabajos o crear la web de un proyecto escolar, cada etiqueta y propiedad que aprende resuelve un problema concreto. El aprendizaje es inmediato, contextualizado y mucho mas duradero.