Explicación del concepto
Esta lección presenta la forma básica de un documento HTML y explica por qué la estructura es importante antes de aplicar estilos o scripts. Construirás una página pequeña con un encabezado, un párrafo corto y un esquema de documento claro, luego verificarás que el marcado sea fácil de leer y tenga sentido en el navegador. El objetivo es comprender de qué es responsable HTML: describir el contenido, no la decoración. Al final, deberías sentirte cómodo leyendo una página simple y escribiendo una desde cero sin adivinar dónde van las etiquetas.
Dónde poner el código
- Comienza con variables y entradas. Coloca el marcado en secciones semánticas con una estructura clara.
- Añade la lógica de procesamiento en la sección central.
- Termina con la salida y una validación rápida.
Referencia de comandos
- Abre la página en un navegador e identifica qué parte representa el título del documento, el encabezado principal y el texto del cuerpo.
- Añade un elemento de contenido más, como un segundo párrafo o una lista corta, sin romper la estructura.
- Verifica que cada etiqueta de apertura tenga una etiqueta de cierre correspondiente donde sea necesario.
- Explica en una oración por qué HTML se trata de estructura y significado, no de estilo visual.
Guía paso a paso
- Lee el documento de arriba abajo y etiqueta el propósito de `html`, `head`, `title`, `body` y `main`.
- Ejecuta el código inicial y confirma que el encabezado y el párrafo aparecen en el navegador.
- Añade un pequeño cambio de contenido, como actualizar el texto del encabezado o añadir un segundo párrafo.
- Revisa el marcado en busca de sangría y anidamiento claro para que la estructura sea fácil de seguir.
- Termina con una verificación rápida: ¿la página tiene un título, contenido visible y un orden lógico?
Ejercicios prácticos
- Crea una página de introducción personal simple con un encabezado, dos párrafos y un título de página.
- Reemplaza el texto de ejemplo con contenido para una página de aterrizaje de curso o una sección de bienvenida de portafolio.
- Construye la misma página de nuevo de memoria sin copiar el ejemplo.
Retos de código
- Crea una página un poco más grande con `header`, `main` y `footer` manteniendo la estructura ordenada.
- Compara una versión desordenada y una versión con sangría limpia del mismo HTML, luego explica cuál es más fácil de mantener y por qué.
Mini tareas de práctica
- Escribe una oración que describa lo que hace la etiqueta `title`.
- Añade un nuevo elemento dentro de `main` y recarga la página.
- Verifica el documento en busca de sangría limpia y etiquetas coincidentes.
Error común
Skipping input validation or mixing logic/output in one unstructured block.
Mini reto de la vida real
Build a small real-life example for this lesson topic using 3 clear steps: input, process, output.