Construir un sitio, no solo una página

30 min

Intermedio

De una página a un sitio

Un sitio web normalmente está formado por varias páginas relacionadas — no hace falta poner toda la información en una sola. Por ejemplo:

sitio/
├── index.html
├── contacto.html
├── sobre-mi.html
└── galeria.html

Cada archivo es una página HTML completa por sí sola (con su propio <!DOCTYPE>, <head>, etc.), y se conectan entre sí con los enlaces que ya conocés de la Lección 6 y las rutas de la Lección 7.

Diseñar la navegación

Antes de escribir el HTML de cada página, conviene dibujar cómo se conectan entre sí:

              INICIO
             /   |   \
            /    |    \
      SOBRE MI  GALERÍA  CONTACTO

Esa navegación se repite, igual, en el <nav> de cada una de las páginas:

<nav>
    <a href="index.html">Inicio</a>
    <a href="sobre-mi.html">Sobre mí</a>
    <a href="galeria.html">Galería</a>
    <a href="contacto.html">Contacto</a>
</nav>

Una ruta no es texto decorativo

Un enlace <a href="contacto.htm"> (sin la "l" final) cuando el archivo real se llama contacto.html no funciona — el navegador no adivina, busca exactamente lo que escribiste. Antes de dar una página por terminada, conviene probar cada enlace, uno por uno, cliqueando de verdad.

Proyecto final: tu propio sitio

Esta última parte no se resuelve acá adentro del navegador — se arma como un conjunto real de archivos, en una carpeta propia, con un editor de código (como los que ya usaste en las lecciones, pero por tu cuenta). Tu sitio tiene que tener:

☐ Al menos 5 páginas
☐ Una página principal (index.html) y una de contacto
☐ Navegación interna que conecte todas las páginas
☐ Al menos un enlace externo
☐ Imágenes, todas con alt
☐ Al menos una imagen con ruta relativa (no una URL completa)
☐ Contenido multimedia (audio, video, o un iframe embebido)
☐ Un formulario de contacto, con los labels bien asociados
☐ Estructura semántica (header/nav/main/footer) en cada página

Cuando termines, probá cada enlace de verdad, uno por uno — es la forma más simple y más efectiva de encontrar una ruta mal escrita.

HTML antes de CSS

Ya podés construir la estructura de un sitio web. Sabés estructurar contenido, organizar información, crear enlaces, trabajar con archivos e imágenes, incorporar multimedia, crear formularios, organizar una página semánticamente, y tener en cuenta accesibilidad.

Ahora viene una pregunta distinta: ¿cómo hacemos para que nuestro sitio se vea como queremos? Eso es trabajo de CSS — la próxima unidad.