Estructura HTML básica con metadatos y estilos

¡Hola! Ya tienes la carpeta del proyecto con index.html y styles.css. En la lección anterior separaste sus funciones: HTML organiza la página y CSS controla su aspecto. Ahora prepararás index.html para que el navegador sepa qué idioma usa, cómo interpretar sus caracteres, qué mostrar en la pestaña y dónde encontrar la hoja de estilos. Todavía no necesitas añadir los párrafos ni diseñar la tipografía de tu página de robótica.

La estructura que sostiene la página

Un documento HTML comienza con <!doctype html>, una declaración que indica al navegador que debe interpretar el archivo como HTML moderno. Después viene <html>, el elemento que contiene el documento. Dentro de él hay dos partes con funciones diferentes:

• <head> guarda información sobre la página, como su título de pestaña y el enlace al CSS.
• <body> contiene lo que aparecerá dentro de la página, como los textos y la imagen que agregarás más adelante.

Mira cómo se genera esta estructura en Visual Studio Code. El video utiliza un atajo para escribirla, pero lo importante es reconocer las partes que produce.

La información que va en <head>

Para esta página usarás dos etiquetas <meta>. charset="UTF-8" permite interpretar correctamente caracteres como la «ó» de robótica. La configuración viewport hace que el navegador móvil use el ancho de su pantalla como referencia; no sustituye el diseño adaptable que puedas hacer después con CSS.

También escribirás un <title>. Aunque está dentro de <head>, su texto sí se ve en la pestaña del navegador, no como encabezado dentro de la página. Por último, <link> indicará dónde está styles.css. Como los dos archivos están juntos en la misma carpeta, basta con escribir su nombre en href.

La siguiente captura permite ver la diferencia entre los dos tipos de título. El texto de <title> está en la pestaña; el de <h1> aparece en el área de contenido. Por ahora escribirás solo el primero.

Escribe la base de index.html

Abre index.html en Visual Studio Code y escribe este documento. Puedes usar el atajo del video y completar lo que falte, o copiar la estructura y revisarla línea por línea.

<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Robótica | Tecnología en movimiento</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>

Guarda el archivo. Observa tres decisiones concretas:

• lang="es" declara que el idioma principal de la página será español. Va en la etiqueta de apertura <html>, no en <head>.
• El nombre dentro de href="styles.css" coincide exactamente con el archivo que creaste. style.css —sin la segunda s— sería otro nombre.
• <body> está vacío a propósito. El título principal, el subtítulo, los párrafos, la lista, el botón y la imagen se incorporarán en las próximas lecciones.

No necesitas escribir contenido dentro de styles.css todavía: el enlace ya deja preparada la conexión. El archivo HTML conservará la estructura y el archivo CSS podrá encargarse después de la presentación.

Comprueba lo que preparaste

Abre index.html en un navegador. Deberías ver una página vacía y, en la pestaña, «Robótica | Tecnología en movimiento». La página vacía no es un error: aún no hay contenido en <body>.

Si quieres confirmar también que el enlace al CSS funciona, puedes hacer una prueba temporal. Escribe lo siguiente en styles.css, guarda ambos archivos y actualiza el navegador:

html {
  background-color: #eaf2ff;
}

El fondo debería volverse azul muy claro. Después, borra esa regla y vuelve a guardar styles.css; solo era una comprobación, no una elección de diseño para la página final. Si el color no cambia, revisa que ambos archivos estén en la misma carpeta, que el nombre styles.css coincida con href y que hayas actualizado la pestaña del navegador.

Ya tienes la estructura base: idioma declarado, metadatos de caracteres y pantalla, título de pestaña y enlace a la hoja de estilos. En la próxima lección prepararás el contenido breve sobre robótica que ocupará el cuerpo de la página.