Hlavička, menu a patička · Programuj s Martinem

Dáš stránce strukturu jako mají opravdové weby: hlavičku s menu nahoře a patičku dole.

Ukaž mi to: každý web má stejné části

Podívej se na jakýkoli velký web: nahoře je hlavička s názvem a menu, uprostřed obsah a dole patička s drobnostmi. HTML má pro tyhle části vlastní značky:

<body>
  <header>
    <h1>Název webu</h1>
    <nav>
      <a href="index.html">Domů</a>
      <a href="druha-stranka.html">Druhá stránka</a>
    </nav>
  </header>

  <main>
    <h2>Tady je hlavní obsah</h2>
    <p>Všechno, o čem stránka je.</p>
  </main>

  <footer>
    <p>Vyrobil Kuba, 2026</p>
  </footer>
</body>

<header> – hlavička: název webu a menu. Je na každé stránce stejná.
<nav> – navigace, tedy menu s odkazy (navigation = navigace).
<main> – hlavní obsah, na každé stránce jiný.
<footer> – patička: kdo web vyrobil, kontakt, rok.

💡

Na pohled se zatím nic moc nezmění – tyhle značky nejsou vidět. Tak proč je psát? Protože dělají v kódu pořádek: prohlížeč, vyhledávače i hlasové čtečky díky nim ví, co je menu a co obsah. A hlavně – v příštích lekcích je nastylujeme, takže menu bude vypadat jako opravdové menu.

Teď ty 💪

Na stránce index.html zabal dosavadní obsah do těchto částí: nahoru <header> s <h1> a <nav> (odkazy na obě tvoje stránky), doprostřed <main> se zbytkem obsahu, dolů <footer>.
Udělej to samé na své druhé stránce. Hlavička a patička mají být na obou stránkách úplně stejné – zkopíruj si je.
Ulož, obnov, proklikej: menu funguje z obou stránek?

🏫 Stránky školy – řešení (index.html)

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>ZŠ Moravany</title>
  </head>
  <body>
    <header>
      <h1>Základní škola Moravany</h1>
      <nav>
        <a href="index.html">Domů</a>
        <a href="jidelnicek.html">Jídelníček</a>
      </nav>
    </header>

    <main>
      <img src="obrazky/skola.jpg" alt="Budova naší školy">
      <h2>O naší škole</h2>
      <p>Naše škola stojí v Moravanech už 120 let.</p>

      <h2>Kroužky</h2>
      <ul>
        <li>florbal</li>
        <li>keramika</li>
        <li>programování</li>
      </ul>
    </main>

    <footer>
      <p>Stránky vyrobili žáci 4. B, 2026</p>
    </footer>
  </body>
</html>

🙋 Osobní stránky – řešení (index.html)

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Kuba Novák</title>
  </head>
  <body>
    <header>
      <h1>Kuba Novák</h1>
      <nav>
        <a href="index.html">Domů</a>
        <a href="o-mne.html">Víc o mně</a>
      </nav>
    </header>

    <main>
      <img src="obrazky/ja.jpg" alt="Moje fotka s míčem">
      <h2>Co mě baví</h2>
      <p>Fotbal, Minecraft a stavění webů.</p>
    </main>

    <footer>
      <p>Vyrobil Kuba, 2026</p>
    </footer>
  </body>
</html>

🌍 Cestovatelský deník – řešení (index.html)

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Kam jsme vyrazili</title>
  </head>
  <body>
    <header>
      <h1>Kam jsme vyrazili 🌍</h1>
      <nav>
        <a href="index.html">Domů</a>
        <a href="vylety.html">Všechny výlety</a>
      </nav>
    </header>

    <main>
      <h2>Poslední výlet: Šumava</h2>
      <img src="obrazky/sumava.jpg" alt="Výhled z Poledníku">
      <p>Tři dny chůze, jedno bloudění a stovka borůvek.</p>
    </main>

    <footer>
      <p>Deník píše rodina Novákova, 2026</p>
    </footer>
  </body>
</html>

⚽ Web klubu – řešení (index.html)

<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>FK Sokol Nebovidy</title>
  </head>
  <body>
    <header>
      <h1>FK Sokol Nebovidy</h1>
      <nav>
        <a href="index.html">Domů</a>
        <a href="soupiska.html">Soupiska</a>
      </nav>
    </header>

    <main>
      <img src="obrazky/tym.jpg" alt="Společná fotka týmu">
      <h2>Poslední výsledky</h2>
      <ol>
        <li>Sokol Nebovidy – Lipová 3 : 1</li>
        <li>Rohatec – Sokol Nebovidy 2 : 2</li>
      </ol>
    </main>

    <footer>
      <p>FK Sokol Nebovidy · trénujeme út a čt od 17:00</p>
    </footer>
  </body>
</html>

✅

Kontrola: Obě stránky mají nahoře stejný název a menu, dole patičku, a menu tě přepíná mezi stránkami. Struktura hotová – teď už se můžeme pustit do vzhledu!

Co si z téhle lekce odnést

Stránka má části: <header> (hlavička s menu), <main> (obsah), <footer> (patička).
Menu je <nav> s odkazy a je na všech stránkách stejné.
Pořádek v kódu = základ, na kterém se dá stavět vzhled.