Jak udělat web z více stránek

Tenhle díl navazuje na Jak vytvořit první webovou stránku v HTML. Předpokládám, že už máte hotový soubor index.html. Teď k němu přidáme další stránky a propojíme je.

Jak web z více stránek funguje

Je to jednodušší, než se zdá: každá stránka webu je jeden soubor s příponou .html ve stejné složce. Mezi stránkami se přepíná odkazy. Domovská (úvodní) stránka se jmenuje index.html – tu prohlížeč otevře jako první, když někdo přijde na váš web.

Krok 1: Vytvořte druhý soubor

Vedle index.html uložte v editoru nový soubor, třeba kontakt.html, a vložte do něj základní kostru (stejnou jako v prvním návodu). Struktura složky pak vypadá takhle:

📁 muj-web/
├── index.html
└── kontakt.html

Krok 2: Propojte stránky odkazem

Teď stránky spojíme. Na index.html přidáme odkaz na kontakt a na kontakt.html odkaz zpět domů. Odkaz se dělá značkou <a> – stačí název souboru, protože jsou ve stejné složce:

<!-- v souboru index.html -->
<a href="kontakt.html">Přejít na kontakt</a>

<!-- v souboru kontakt.html -->
<a href="index.html">Zpět domů</a>

Kliknutím na odkaz se prohlížeč přepne na druhou stránku – a odtud se stejným způsobem vrátíte zpět. To je celé „přepínání" mezi stránkami webu.

Krok 3: Přidejte společné menu

Aby se dalo skákat mezi všemi stránkami odkudkoli, vložte na každou stránku stejné menu – několik odkazů v <nav>:

<nav>
  <a href="index.html">Domů</a>
  <a href="kontakt.html">Kontakt</a>
</nav>

Časté chyby

• Odkaz nefunguje / stránka nenalezena. Nejčastěji překlep v názvu nebo špatná velikost písmen: Kontakt.html není totéž co kontakt.html.
• Soubory nejsou ve stejné složce. Pak je odkaz jen podle názvu nenajde – buď je dejte k sobě, nebo napište správnou cestu.
• Zapomenutý odkaz zpět. Bez menu nebo odkazu domů návštěvník na podstránce „uvázne".
• Menu jen na jedné stránce. Musí být na všech – jinak z ostatních stránek nikam nevede.

Co dál?

Umíte teď udělat web z libovolného počtu stránek a propojit je. Další na řadě je vzhled: učešte menu a celé stránky pomocí CSS, a přidejte obrázky a hezčí odkazy podle návodu Obrázky a odkazy.