Cabecera, menú y pie de página · Programa con Martin

Dale a tu página una estructura de verdad como la de los sitios web reales: una cabecera con menú arriba y un pie de página abajo.

Te lo muestro: todo sitio web tiene las mismas partes

Mira cualquier sitio web grande: arriba hay una cabecera con un nombre y un menú, en el centro hay contenido, y abajo hay un pie de página con lo pequeño. HTML tiene etiquetas dedicadas para estas partes:

<body>
  <header>
    <h1>Website Name</h1>
    <nav>
      <a href="index.html">Home</a>
      <a href="second-page.html">Second Page</a>
    </nav>
  </header>

  <main>
    <h2>Here's the main content</h2>
    <p>Everything the page is about.</p>
  </main>

  <footer>
    <p>Made by Jake, 2026</p>
  </footer>
</body>

<header> – la cabecera: el nombre del sitio web y el menú. Es igual en todas las páginas.
<nav> – la navegación, es decir, el menú con enlaces.
<main> – el contenido principal, diferente en cada página.
<footer> – el pie de página: quién hizo el sitio, datos de contacto, el año.

💡

Visualmente, por ahora no cambiará mucho – estas etiquetas no se ven por sí solas. ¿Entonces para qué escribirlas? Porque aportan orden a tu código: navegadores, buscadores y lectores de pantalla las usan para saber qué es un menú y qué es contenido. Y lo mejor – en las próximas lecciones las estilaremos, así que el menú se verá como un menú de verdad.

Ahora tú 💪

En index.html, envuelve tu contenido existente en estas partes: un <header> arriba con un <h1> y un <nav> (enlaces a tus dos páginas), un <main> en el centro con el resto del contenido, y un <footer> abajo.
Haz lo mismo en tu segunda página. La cabecera y el pie de página deben ser exactamente iguales en ambas páginas – solo cópialos.
Guarda, actualiza, haz clic: ¿funciona el menú desde ambas páginas?

🏫 Sitio web del colegio – solución (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Elementary</title>
  </head>
  <body>
    <header>
      <h1>Riverside Elementary School</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="lunch-menu.html">Lunch Menu</a>
      </nav>
    </header>

    <main>
      <img src="images/school.jpg" alt="Our school building">
      <h2>About Our School</h2>
      <p>Our school has stood in Riverside for 120 years.</p>

      <h2>Clubs</h2>
      <ul>
        <li>floorball</li>
        <li>ceramics</li>
        <li>coding</li>
      </ul>
    </main>

    <footer>
      <p>Made by the 4th grade class, 2026</p>
    </footer>
  </body>
</html>

🙋 Sitio web personal – solución (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Jake Miller</title>
  </head>
  <body>
    <header>
      <h1>Jake Miller</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="about-me.html">More About Me</a>
      </nav>
    </header>

    <main>
      <img src="images/me.jpg" alt="Me with a soccer ball">
      <h2>What I Like</h2>
      <p>Soccer, Minecraft, and building websites.</p>
    </main>

    <footer>
      <p>Made by Jake, 2026</p>
    </footer>
  </body>
</html>

🌍 Diario de viajes – solución (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Where We've Been</title>
  </head>
  <body>
    <header>
      <h1>Where We've Been 🌍</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="trips.html">All Trips</a>
      </nav>
    </header>

    <main>
      <h2>Last Trip: The Mountains</h2>
      <img src="images/mountains.jpg" alt="View from the summit">
      <p>Three days of walking, one wrong turn, and a hundred wild berries.</p>
    </main>

    <footer>
      <p>Journal kept by the Miller family, 2026</p>
    </footer>
  </body>
</html>

⚽ Sitio web del club – solución (index.html)

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Riverside Eagles FC</title>
  </head>
  <body>
    <header>
      <h1>Riverside Eagles FC</h1>
      <nav>
        <a href="index.html">Home</a>
        <a href="roster.html">Roster</a>
      </nav>
    </header>

    <main>
      <img src="images/team.jpg" alt="Team photo">
      <h2>Recent Results</h2>
      <ol>
        <li>Eagles – Hawks 3 : 1</li>
        <li>Falcons – Eagles 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>Riverside Eagles FC · training Tue & Thu at 5:00 PM</p>
    </footer>
  </body>
</html>

✅

Compruébalo tú: Ambas páginas tienen el mismo nombre y menú arriba, un pie de página abajo, y el menú te cambia de página. La estructura está lista – ¡ahora podemos meternos con cómo se ve!

Lo que te llevas de esta lección

Una página tiene partes: <header> (cabecera con menú), <main> (contenido), <footer> (pie de página).
El menú es un <nav> con enlaces, y es igual en todas las páginas.
El orden en tu código = la base sobre la que puedes construir el aspecto.