Lección 1: Estructura HTML

MÓDULO 1: FUNDAMENTOS

El Esqueleto de la Web

Imagina que vas a construir una casa. Antes de pintar las paredes (CSS) o poner electricidad (JavaScript), necesitas los cimientos y las vigas. HTML es esa estructura.

1. ¿Cómo "habla" HTML?

HTML funciona mediante etiquetas. Una etiqueta es una instrucción para el navegador que va entre signos < y >.

La mayoría de las etiquetas funcionan como un Sándwich:

🍞 <etiqueta> (Abre el sándwich)
Aquí va el contenido (carne, queso, texto...)
🍞 </etiqueta> (Cierra el sándwich con una barra inclinada)

2. La Estructura Sagrada (Boilerplate)

Copia este código. Es el mínimo necesario para que una página exista. Analicémoslo línea por línea:

<!-- 1. El DNI del documento -->
<!DOCTYPE html>

<!-- 2. El contenedor principal -->
<html lang="es">

  <!-- 3. EL CEREBRO (Head) -->
  <head>
    <meta charset="UTF-8">
    <title>Mi Primera Web</title>
  </head>

  <!-- 4. EL CUERPO (Body) -->
  <body>
    <h1>Bienvenido a mi mundo</h1>
    <p>Esta es mi primera página creada desde cero.</p>
  </body>

</html>

3. Desglose para Principiantes

1. <!DOCTYPE html>
Es un aviso al navegador: "Oye, Chrome/Firefox, voy a usar HTML moderno (HTML5)". Si no lo pones, la página podría verse rara.
2. <head> (La Cabeza)
Aquí va lo que el usuario NO ve directamente en la página, pero es vital.
Ejemplo: El título que aparece en la pestañita del navegador (<title>) o la configuración para que se vean las ñ y tildes (charset="UTF-8").
3. <body> (El Cuerpo)
Aquí va TODO lo que quieres que el usuario vea: textos, fotos, videos, botones. Si escribes algo fuera del body, es un error grave.

🛠️ Tu Misión

Crea una carpeta en tu escritorio llamada "MiWeb".
Abre el Bloc de Notas (Windows) o TextEdit (Mac).
Copia el código de arriba y pégalo.
IMPORTANTE: Al guardar, ponle de nombre index.html (no .txt).
Abre ese archivo con tu navegador (doble clic). ¡Felicidades, eres programador web!

← Volver Siguiente Lección →