← Úroveň 1 – Stavitel

Lekce 4 z 12 ⏱ 25 minut

Odkazy a druhá stránka

Web přestane být jen jedna stránka. Vytvoříš druhou a propojíš je odkazy.

Ukaž mi to: odkaz

Odkaz – to klikací, co tě přenese jinam – se dělá značkou <a>:

<!-- Odkaz na jinou stránku tvého webu -->
<a href="jidelnicek.html">Jídelníček</a>

<!-- Odkaz někam ven na internet -->
<a href="https://www.zsbrno.cz">Web naší skutečné školy</a>

Druhá stránka webu

Tvůj web zatím má jen index.html. Přidáme druhou stránku – je to jen další soubor ve stejné složce:

  1. Ve VS Code vytvoř nový soubor. Pojmenuj ho podle projektu, třeba jidelnicek.html, o-mne.html, vylety.html nebo soupiska.html. Zase malá písmena, bez mezer a háčků.

  2. Vlož do něj celou kostru stránky (stejnou jako v 1. lekci) a dej mu vlastní <title>, <h1> a nějaký obsah.

  3. Propoj stránky odkazy: na index.html přidej odkaz na novou stránku a na novou stránku odkaz zpátky – třeba <a href="index.html">Zpět domů</a>.

Teď ty 💪

Vytvoř druhou stránku a obě propoj. Aspoň jeden odkaz veď taky někam ven na internet.

🏫 Stránky školy – řešení (jidelnicek.html) 
<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Jídelníček – ZŠ Moravany</title>
  </head>
  <body>
    <h1>Jídelníček na tento týden</h1>
    <ul>
      <li>Pondělí: rajská s těstovinami</li>
      <li>Úterý: kuře s rýží</li>
      <li>Středa: buchtičky se šodó 🎉</li>
      <li>Čtvrtek: guláš s knedlíkem</li>
      <li>Pátek: rybí filé s bramborem</li>
    </ul>
    <p><a href="index.html">← Zpět na hlavní stránku</a></p>
  </body>
</html>

A na index.html přidej:

<p><a href="jidelnicek.html">Podívej se na jídelníček</a></p>
🙋 Osobní stránky – řešení (o-mne.html) 
<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Víc o mně – Kuba</title>
  </head>
  <body>
    <h1>Víc o mně</h1>
    <p>Chodím do 4. B, mám psa Rockyho a sbírám kartičky fotbalistů.</p>
    <p>Nejradši poslouchám <a href="https://www.youtube.com">písničky na YouTube</a>.</p>
    <p><a href="index.html">← Zpět domů</a></p>
  </body>
</html>
🌍 Cestovatelský deník – řešení (vylety.html) 
<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Všechny výlety – Kam jsme vyrazili</title>
  </head>
  <body>
    <h1>Všechny naše výlety</h1>
    <ol>
      <li>Šumava – přechod hřebene</li>
      <li>Chorvatsko – ostrov Krk</li>
      <li>Praha – muzeum a Petřín</li>
    </ol>
    <p>Plánujeme podle <a href="https://mapy.cz">mapy.cz</a>.</p>
    <p><a href="index.html">← Zpět na hlavní stránku</a></p>
  </body>
</html>
⚽ Web klubu – řešení (soupiska.html) 
<!doctype html>
<html lang="cs">
  <head>
    <meta charset="UTF-8">
    <title>Soupiska – FK Sokol Nebovidy</title>
  </head>
  <body>
    <h1>Soupiska týmu</h1>
    <ul>
      <li>Kuba – brankář (kapitán)</li>
      <li>Matěj – obrana</li>
      <li>Ondra – záloha</li>
      <li>Tomáš – útok</li>
    </ul>
    <p>Los soutěže najdeš na <a href="https://www.fotbal.cz">fotbal.cz</a>.</p>
    <p><a href="index.html">← Zpět na hlavní stránku</a></p>
  </body>
</html>
✅

Kontrola: Klikneš na odkaz na hlavní stránce → otevře se druhá stránka. Klikneš na „Zpět” → jsi zase doma. Tvůj web má poprvé víc než jednu stránku!

Co si z téhle lekce odnést

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu