Intestazione, menu e piè di pagina

Dai alla pagina una struttura vera come i siti web reali: un'intestazione con menu in alto e un piè di pagina in basso.

Te lo mostro: ogni sito web ha le stesse parti

Guarda qualsiasi sito grande: in alto c’è un header con un nome e un menu, al centro c’è il contenuto, e in basso un footer con le cose piccole. HTML ha tag dedicati per queste parti:

<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> – l’intestazione: il nome del sito e il menu. È uguale su ogni pagina.
<nav> – la navigazione, cioè il menu con i link.
<main> – il contenuto principale, diverso su ogni pagina.
<footer> – il piè di pagina: chi ha fatto il sito, contatti, l’anno.

💡

Visivamente, per ora non cambierà molto – questi tag non si vedono da soli. Allora perché scriverli? Perché portano ordine nel codice: browser, motori di ricerca e screen reader li usano per capire cosa è menu e cosa è contenuto. E soprattutto – nelle prossime lezioni li stileremo, così il menu sembrerà un menu vero.

Ora tocca a te 💪

Su index.html, avvolgi il contenuto esistente in queste parti: un <header> in alto con <h1> e <nav> (link a entrambe le pagine), un <main> al centro con il resto del contenuto, e un <footer> in basso.
Fai lo stesso sulla seconda pagina. Header e footer devono essere esattamente uguali su entrambe le pagine – copiali e basta.
Salva, aggiorna, clicca in giro: il menu funziona da entrambe le pagine?

🏫 Sito web della scuola – soluzione (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>

🙋 Sito web personale – soluzione (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 di viaggio – soluzione (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>

⚽ Sito web del club – soluzione (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>

✅

Controlla da solo: Entrambe le pagine hanno lo stesso nome e menu in alto, un footer in basso, e il menu ti fa passare da una pagina all’altra. Struttura fatta – ora possiamo immergerci nell’aspetto!

Cosa porti via da questa lezione

Una pagina ha parti: <header> (intestazione con menu), <main> (contenuto), <footer> (piè di pagina).
Il menu è un <nav> con link, ed è uguale su ogni pagina.
L’ordine nel codice = la base su cui costruire l’aspetto.