Cabeçalho, menu e rodapé · Programa com Martin

Dá à tua página uma estrutura a sério como os sites reais: um cabeçalho com menu em cima e um rodapé em baixo.

Vou mostrar-te: todos os sites têm as mesmas partes

Olha para qualquer site grande: em cima há um cabeçalho com um nome e um menu, no meio há conteúdo, e em baixo há um rodapé com as coisas pequenas. O HTML tem 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> – o cabeçalho: o nome do site e o menu. É igual em todas as páginas.
<nav> – navegação, ou seja, o menu com ligações.
<main> – o conteúdo principal, diferente em cada página.
<footer> – o rodapé: quem fez o site, contactos, o ano.

💡

Visualmente, por agora não vai mudar muito – estas etiquetas não são visíveis por si. Então para quê escrevê-las? Porque trazem ordem ao teu código: browsers, motores de busca e leitores de ecrã usam-nas para saber o que é menu e o que é conteúdo. E o melhor – nas próximas lições vamos estilizá-las, por isso o menu vai parecer um menu a sério.

Agora és tu 💪

Em index.html, envolve o teu conteúdo existente nestas partes: um <header> em cima com um <h1> e um <nav> (ligações para as tuas duas páginas), um <main> no meio com o resto do conteúdo, e um <footer> em baixo.
Faz o mesmo na tua segunda página. O cabeçalho e o rodapé devem ser exatamente iguais nas duas páginas – copia-os.
Guarda, atualiza, clica à volta: o menu funciona nas duas páginas?

🏫 Site da escola – solução (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>

🙋 Site pessoal – solução (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>

🌍 Diário de viagens – solução (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>

⚽ Site de clube – solução (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>

✅

Verifica tu: As duas páginas têm o mesmo nome e menu em cima, um rodapé em baixo, e o menu muda-te entre páginas. A estrutura está feita – agora podemos mergulhar no aspeto!

O que ficas a saber desta lição

Uma página tem partes: <header> (cabeçalho com menu), <main> (conteúdo), <footer> (rodapé).
O menu é um <nav> com ligações, e é igual em todas as páginas.
A ordem no teu código = a base sobre a qual podes construir o aspeto.