HTML no es un programa de dibujo ni un documento de Word. Es un lenguaje de marcas: etiquetas que dicen qué función cumple cada trozo de texto. El navegador, al leer esas marcas, construye un árbol (el DOM) y lo muestra con un estilo por defecto bastante pobre. Ese aspecto pobre no es un fallo: es la prueba de que el contenido ya existe antes de decorarlo. En esta lección el objetivo es ese árbol, no el color.
El curso trabaja sin servidor. Guardas index.html en una carpeta y lo abres con el navegador. La barra de direcciones muestra entonces un protocolo file://, no https://. Con file:// no hay PHP, ni base de datos, ni «publicar» de verdad: hay un archivo en tu disco, en el pendrive o en la carpeta del aula. Eso basta para aprender la estructura y, más adelante, para entregar el bloque A. El alojamiento en un servidor se explica en la lección 11; no hace falta conexión para escribir HTML correcto.
Un archivo HTML5 de este curso empieza por <!DOCTYPE html>. Esa línea no es una etiqueta con cierre: avisa al navegador de que use el modo estándar y no el de compatibilidad con páginas antiguas. Después va <html lang="es">. El atributo lang dice el idioma principal. Un lector de pantalla y el corrector del navegador lo usan; no es un adorno. Dentro viven dos bloques: head y body.
En head va lo que no se lee como contenido de la página, pero la identifica: <meta charset="utf-8"/> y <title>. UTF-8 permite escribir «Duero», «ñ» y «ciencia» sin caracteres rotos. El title es el texto de la pestaña y, el día de mañana, el de la pestaña del buscador: no lo dejes en «Documento sin título». En body va lo que la persona lee.
Puedes construir toda la página con div. El navegador la mostrará igual. La diferencia aparece cuando otra persona —o tú, tres semanas después— tiene que entender el archivo, y cuando una tecnología de apoyo recorre la página por regiones. Por eso el decreto, al pedir webs usables y accesibles, encaja con etiquetas de estructura: header (cabecera visible), nav (enlaces de salto), main (contenido principal, uno por página), section (bloque temático con su título), footer (cierre: autor, licencia, aviso de que es una copia local).
article sirve si el bloque tendría sentido solo, por ejemplo una noticia de la Semana de la Ciencia que podrías copiar a otra página. aside es un complemento, no el tema central: un recordatorio de aforo al margen. No hace falta usarlas todas en la primera entrega. Sí hace falta no usar header para «poner un fondo» ni footer solo porque quieres letra pequeña.
Los títulos no son «letras grandes». Son el índice de la página. Hay un h1, el tema de esa página: «Semana de la Ciencia». Cada sección de main lleva un h2. Si una sección se parte, sus apartados son h3. No se salta de h1 a h3 porque «el h2 me queda grande». No se usa un h1 por cada diapositiva mental: eso es otra página o un h2. El laboratorio de esta lección cuenta los h1 y exige exactamente uno.
Un enlace <a href="programa.html"> busca programa.html en la misma carpeta que el archivo actual. href="media/plano.svg" entra en la subcarpeta media. href="../index.html" sube un nivel. Esas rutas funcionan en file:// y seguirán funcionando si más adelante copias la carpeta a un hosting, porque no mencionan ni el disco C: ni tu nombre de usuario. Una ruta absoluta de Windows (C:\Users\Ana\Desktop\foto.jpg) se rompe en el ordenador del aula y en cualquier servidor. En este curso está prohibida en las entregas.
El ancla href="#lugar" apunta a un elemento con id="lugar" en la misma página. Sirve para el menú de una página larga. El id no se repite. El href del ancla lleva almohadilla; el id, no.
El color, la columna y el tipo de letra son CSS: lección 2. Un gestor de contenidos que «escriba solo» este HTML es la lección 3: el CMS no sustituye a HTML, lo genera. Imagen, audio y un LED simulado entran en la lección 4. Si hoy metes un style enorme o un img sin alt, la página puede verse, pero estás mezclando capas que el bloque A quiere separar para poder corregirlas.
Orden de trabajo que sí se sostiene: (1) escribir el texto en bruto, (2) marcar título, secciones y pie, (3) poner lang, charset y title, (4) enlazar solo con rutas relativas, (5) abrir el archivo desde el navegador y leer la pestaña y el esquema, (6) pasar el comprobador del laboratorio. Guardar con extensión .html. El bloc de notas a veces guarda .txt si no eliges «todos los archivos»: el navegador mostraría entonces el código en vez de la página.
DOCTYPE. La primera línea. No se cierra. Pide al navegador el modo estándar.
lang. Atributo de html. En este curso, es. No traduce la página; declara el idioma.
charset. Dentro de meta. utf-8 para tildes y eñes. Va en el head.
head. Metadatos: título de la pestaña, codificación, más adelante el enlace al CSS. No es la cabecera visible.
body. Lo que se lee. Aquí viven header, main y footer.
h1. El título de esta página, uno solo. No es «la letra más grande»: es el tema.
section. Trozo temático con su propio título, normalmente un h2.
href relativo. Busca el destino desde la carpeta del archivo actual, no desde tu escritorio.
id. Identificador único para un ancla. Sin almohadilla. No se repite en la página.
file://. Protocolo de abrir un archivo local. No hay servidor, ni DNS, ni cuenta.
Cada caso es una entrega realista del proyecto del IES Duero. Lee la situación antes de mirar la decisión.
Situación. La página se llama index.html y en la pestaña se lee index.html.
No conviene. Dejar el title por defecto porque «total, se ve el h1».
Decisión. Escribir el title con el acto y el centro, distinto del nombre de archivo.
Por qué: El title no es un adorno del head: es el nombre que queda en la pestaña, en el historial y en un marcador. Quien ya está dentro de la página ve el h1; quien tiene diez pestañas abiertas solo ve el title. Si ambos dicen index.html, no se distingue el acto del IES de cualquier otro archivo.
Situación. Hay un nav con «Lugar» pero el href es lugar, sin almohadilla, y el id no existe.
No conviene. Crear lugar.html vacío para que el enlace «no falle».
Decisión. Usar href="#lugar" e id="lugar" en la section.
Por qué: Un href sin almohadilla pide otro archivo, no un salto dentro de este. Crear lugar.html vacío finge que el menú funciona y abre una segunda página sin contenido. Con href="#lugar" e id="lugar" el mismo documento lleva al sitio, y la entrega sigue siendo un solo HTML.
Situación. Hay dos main: uno para el programa y otro para el mapa.
No conviene. Porque los dos son importantes.
Decisión. Un solo main. El mapa, si es complemento, va en una section o en un aside dentro de ese main.
Por qué: La región main es una sola, aunque el programa y el mapa sean los dos importantes. Las tecnologías de apoyo ofrecen «saltar al contenido»; con dos main el salto no sabe cuál es el principal. El mapa cabe en una section o en un aside dentro de ese único main.
Situación. El bloc de notas guardó Semana de la Ciencia.txt y el navegador enseña las etiquetas.
No conviene. Renombrar a ojo sin mirar si sigue siendo texto plano con otro nombre.
Decisión. Guardar como index.html, codificación UTF-8, y comprobar que el icono abre el navegador.
Por qué: La extensión le dice al sistema qué programa debe abrir el archivo. .txt pide mostrar caracteres, así que el navegador enseña las etiquetas en vez de interpretarlas. Guardar como index.html en UTF-8 no cambia el texto a mano: cambia el tipo, y hay que comprobar que el icono abre el navegador.
Las ocho piezas son el contenido de la Semana de la Ciencia del IES Duero (Aranda de Duero). Se repiten en el bloque A para que compares decisiones, no para que copies el mismo archivo doce veces. Debajo va el documento marcado, listo para abrirlo en local, y la lectura de cada pieza.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Semana de la Ciencia · IES Duero</title>
<!-- Capa de esta lectura: lección 01. El texto del acto no cambia; cambia la decisión. -->
</head>
<body>
<header>
<p>IES Duero · Aranda de Duero</p>
<h1>Semana de la Ciencia</h1>
</header>
<nav aria-label="En la página">
<a href="#b1">Apertura en el salón de actos</a>
<a href="#b2">Taller de luz</a>
<a href="#b3">Taller de temperatura</a>
<a href="#b4">Visita al patio meteorológico</a>
<a href="#b5">Datos en la pizarra</a>
<a href="#b6">Preguntas</a>
<a href="#b7">Créditos y licencia de los materiales</a>
<a href="#b8">Cómo llegar</a>
</nav>
<main>
<section id="b1">
<h2>Apertura en el salón de actos</h2>
<p>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.</p>
</section>
<section id="b2">
<h2>Taller de luz</h2>
<p>En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.</p>
</section>
<section id="b3">
<h2>Taller de temperatura</h2>
<p>Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).</p>
</section>
<section id="b4">
<h2>Visita al patio meteorológico</h2>
<p>Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.</p>
</section>
<section id="b5">
<h2>Datos en la pizarra</h2>
<p>Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.</p>
</section>
<section id="b6">
<h2>Preguntas</h2>
<p>Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.</p>
</section>
<section id="b7">
<h2>Créditos y licencia de los materiales</h2>
<p>El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.</p>
</section>
<section id="b8">
<h2>Cómo llegar</h2>
<p>Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.</p>
</section>
</main>
<footer><p>Material del departamento de Tecnología para el acto. Copia local, file://.</p></footer>
</body>
</html>A las 17:00 se abre el salón, no el laboratorio. El h1 de la página es el nombre del acto; este taller es un h2. Hay que decir el aforo (120 butacas) y que no se reserva sitio por mensaje: se entra por orden hasta completar. Quien llegue a las 17:20 oye el inicio, así que el primer párrafo no puede depender de un chiste que solo entiende quien estaba en la fila. El enlace interno #apertura permite saltar desde el nav.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
En el laboratorio de física hay una fotorresistencia de demostración. La página no enciende el sensor: explica la hora (17:30) y el grupo máximo (16 personas). El detalle del pin GPIO se cuenta en la lección 4 con un LED simulado; aquí, en la estructura, basta un párrafo y una lista de dos normas: no tocar la protoboard y anotar la lectura en el cuaderno, no en el móvil de otra persona.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
Segundo grupo, misma franja, aula de al lado. Si los dos talleres se mezclan en un solo párrafo, nadie sabe a qué puerta ir. Van en sections distintas, cada una con su h2. La temperatura se mide con un sensor digital de demostración del departamento; la página no publica la marca como si fuera un anuncio, solo el lugar y la duración (25 minutos).
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
Si llueve, este bloque se cae. Por eso el texto tiene la alternativa escrita (vídeo de tres gráficos en el salón), no un «ya veremos». En HTML la alternativa es una frase dentro de la misma section, no una imagen que sustituye al aviso. Plano general: el patio está detrás del gimnasio, puerta verde.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
Al final se apuntan tres números: luz, temperatura y aforo real. Son una lista ordenada si el orden es el del acto, o desordenada si son datos sueltos. Elegimos ol porque se leen en ese orden en la puesta en común. Cada li es una frase corta, no un párrafo disfrazado.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
Diez minutos. El heading es h2 «Preguntas», no h1: la página ya tiene dueño. Se recuerda que no hay turno de fotos al alumnado. Esa frase es texto, no un icono. Quien imprima la página en blanco y negro tiene que leerla igual.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
El footer nombra al departamento de tecnología del IES Duero y dice que los textos de esta página son del centro para el acto. No se pega música ni fotos de banco de imágenes. Si más adelante hay un plano, será un SVG hecho en clase. La licencia concreta se estudiará en el bloque B; aquí basta no atribuirse lo que no es del instituto.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
Calle San Francisco, Aranda de Duero. El autobús urbano deja en la plaza; desde allí, seis minutos a pie. No incrustamos un mapa de un proveedor externo: exige red y cookies. Un párrafo con la referencia basta, y en la lección 7 el mismo dato cabe en el cartel. La ruta relativa no interviene; esto es contenido, no un archivo.
Desde esta lección. En estructura, cada bloque es una section con h2 y un id estable para el nav. No conviertas el bloque en un segundo h1.
| Criterio | Aún no | En proceso | Conseguido | Notable |
|---|---|---|---|---|
| Estructura | Un bloque de texto | Hay h1 y párrafos | header, main, footer, un h1 | Además nav con anclas e ids únicos |
| Codificación | No hay charset ni lang | Uno de los dos | lang=es y utf-8 | title distinto del nombre de archivo |
| Rutas | Hay una ruta de disco | Rutas rotas | Relativas y archivos juntos | Se prueba la carpeta en otro sitio |
| Esquema | Varios h1 | h1 y algún h3 suelto | h1 y h2 sin saltos | El nav refleja los h2 |
| Apertura local | No abre | Abre mostrando etiquetas | Abre como página | Se explica file:// con una frase |
Un documento con doctype, lang, charset, title, un h1 y regiones. Los enlaces son relativos. El aspecto puede esperar a la lección 2.
Abre cada pregunta, responde en el cuaderno y después mira la solución. El párrafo «Por qué» es la parte que se estudia.
Respuesta. El esquema de títulos. Aunque el navegador la pinte, hay dos temas compitiendo y el nav no puede fiarse del nivel.
Por qué: h1 no describe tamaño. Describe «de qué va esta página». Un taller es una parte, así que es h2. El comprobador del laboratorio cuenta los h1 precisamente para pillar este caso, que a simple vista no duele.
Respuesta. Porque el navegador tiene que saber cómo interpretar los bytes del archivo. El editor y el navegador son programas distintos.
Por qué: Sin la marca, un archivo guardado en UTF-8 puede leerse con otra codificación y romper «Aranda» o «científica». La etiqueta no cambia los bytes: declara cuáles son. Por eso se comprueba en el código, no solo «abriendo a ver si se ve».
Respuesta. Si programa.html viajó en la misma carpeta y si el href es relativo, no absoluto.
Por qué: file:// no «busca en el ordenador». Resuelve la ruta desde el archivo. Si el href lleva un usuario de Windows, solo funciona en ese equipo. La carpeta completa es la unidad de entrega, no el HTML suelto.
En la vida real
Escribes y dibujas aquí mismo: no hay salto a otro módulo. La misma herramienta, a pantalla completa, está en l01-html-y-estructura-de-una-pagina.html y en el marco (útil si el navegador permite file:// en iframes).
Crea una carpeta semana-ciencia con un index.html del acto de tu centro (puede ser ficticio, situado en tu localidad de CyL). Debe tener header, nav con dos anclas, main con dos secciones y footer. Ábrelo con file:// en otro equipo o en otra carpeta copiada y comprueba que los anclas siguen. Una buena entrega nombra el sitio en el title y no usa ninguna ruta que empiece por una letra de disco.
reto_id: bach1-tic-L01