Menu
Znovu připomínám, že zatím jsme ve fázi tvorby obsahu, nikoli vizuálního provedení. Takže pro tyhle účely vytvoříme menu velmi jednoduše. Třeba vezmeme ten náš soupis stránek a už si vymyslíme názvy souborů:
Webová prezentace "Moje kočky"
- hlavní stránka - index.html
- kočka Bětuš - betus.html
- kočka Maruš - marus.html
- kocour John - john.html
- kočka Delisa - delisa.html
- kočka Vendul - vendul.html
- kocour Max - max.html
- kocour Čert - cert.html
- kočka Toníček - tonda.html
- další zvířata u nás doma - dalsi.html
Názvy souborů
Základní pravidlo: v názvech souborů nepoužívejte diakritiku, pro jistotu ani velká písmena (ono by to s nimi šlo, ale servery bývají case sensitive a mohly by s tím být problémy, takhle to bude jednodušší) a také nepoužívejte mezery.
První, tu hlavní stránku, pojmenujte index.html.
Vytvoření menu
Výše uvedený soupis označíme XHTML značkami tak, aby to byl plnohodnotný seznam a z jednotlivých řádků uděláme odkazy na dané soubory. To znamená, že to co má "klikat", zavřeme do tagů <a> a </a>. K té první části toho tagu přidáme nezbytný atribut href, jehož hodnotou bude relativní cesta k souboru, na který má odkaz vést. Přidáme taky atribut title; co napíšeme jako hodnotu tohoto atributu, zobrazí se v "bublině" při najetí na odkaz.
<ul>
<li>
<a href="index.html" title="úvodní strana webu">úvod</a></li>
<li>
<a href="betus.html" title="o Bětušce">kočka Bětuš</a></li>
<li>
<a href="marus.html" title="o Marušce">kočka Maruš</a></li>
<li>
<a href="john.html" title="o Johnovi">kocour John</a></li>
<li>
<a href="delisa.html" title="o Delince">kočka Delisa</a></li>
<li>
<a href="vendul.html" title="o Vendulce">kočka Vendul</a></li>
<li>
<a href="max.html" title="o Maxíkovi">kocour Max</a></li>
<li>
<a href="cert.html" title="o Čertíkovi">kocour Čert</a></li>
<li>
<a href="tonda.html" title="o Toníčkovi">kočka Toníček</a></li>
<li>
<a href="dalsi.html" title="o křečkovi, racích a rybičkách">
další zvířata</a></li>
</ul>
Tenhle zdrojový kód doplním na začátek té naší první stránky, která pak bude vypadat takhle. Samozřejmě že kromě prvního odkazu budou ostatní dávat chybu, protože ty stránky jsme ještě neudělali. (V mém příkladu jsou občas jiné názvy souborů, protože to musím ukládat víckrát v různých fázích, tak se nenechte zmást ;-).)
