HTML a odkazy

Odkazům jsem věnoval samostatnou kapitolu, jelikož se jedná o důležité prvky stránek, bez kterých se většina webů neobejde. Odkazy jsou pak ty části webu, na které lze kliknout.

TagVýznam tagu
aOdkaz; to, co je uzavřeno v tomto tagu, je odkaz (tag je párový).

Příklad:<a>Já jsem odkaz</a>

Zobrazme si tento příklad v prohlížeči a najeďme na něj myší. Tak co, kliká? Nekliká.

Aby šlo na odkaz kliknout, musíme k tagu a přidat důležitý atribut href. Ten určuje, co se po kliknutí stane – kam se dostaneme.

AtributVýznam atributu
hrefUdává adresu místa, na které se po kliknutí na odkaz dostaneme.

Celý zápis pak bude vypadat takto:<a href="">Já jsem odkaz</a>

Pokud si tento zápis nyní zobrazíme v prohlížeči, bude text podtržený a po najetí myší na něj se objeví ručička.

Mezi uvozovky atributu href potom napíšeme adresu, na kterou se chceme po kliknutí na odkaz dostat. Adresa může být internetová stránka nebo soubor (např. obrázek). Měli bychom ji psát bez diakritiky a mezer.

Adresu můžeme psát jako absolutní, nebo jako relativní.<a href="http://www.seznam.cz/">Seznam</a>

Toto je příklad absolutní adresy. Pozor, je potřeba, abychom to psali i s tím http://.

Máme-li v počítačí složku a v ní HTML soubory, třeba prvni.html a druhy.html, a chceme z prvního odkázat na ten druhý, stačí do prvního napsat:<a href="druhy.html">Já jsem odkaz vedoucí na druhou stránku</a>

Pokud bychom pak měli složku a v ní soubor prvni.html a další složku se souborem druhy.html, odkazovali bychom z prvního souboru na druhý:

<a href=“nazev-slozky/druhy.html“>Odkaz vedoucí na soubor druhy.html</a>

Z druhého souboru na první:<a href="../prvni.html">Odkaz vedoucí na soubor prvni.html</a>

Všimneme si v zápisu dvou teček (..), pomocí kterých se dostáváme vždy o jednu úroveň výše.

Výše uvedené vysvětlení je pouze jakýsi nástin rozdílu mezi relativní a absolutní adresou, ale pro pochopení podstaty snad stačí (alespoň já si to myslím :-)). Možná časem vyrobím srozumitelnější návod.

Pokud odkazujeme na soubory na svém počítači, budeme používat relativní adresy. Odkazy nám tak budou fungovat vždy; ať už máme stránky na svém disku nebo na serveru – společná část adresy (ta přední) se totiž doplní automaticky.

Tvorba menu

Známe už odkazy a tagy pro tvorbu seznamu. Můžeme si tedy ukázat, jak se vytvoří takové menu.

Mějme složku a v ní třeba následující soubory index.html, matematika.html, strevlici.html a kontakt.html, které tvoří náš web. My tyto soubory nyní provážeme pomocí menu.

Otevřeme si soubor index.html a napíšeme do něj

<ul>
  <li>Úvod</li>
  <li>Matematika</li>
  <li>Střevlíci</li>
  <li>Kontakt</li>
</ul>

Nyní máme vytvořen základ menu pomocí seznamu. Teď do něj napasujeme odkazy.

<ul>
  <li><a href=“index.html“>Úvod</a></li>
  <li><a href=“matematika.html“>Matematika</a></li>
  <li><a href=“strevlici.html“>Střevlíci</a></li>
  <li><a href=“kontakt.html“>Kontakt</a></li>
</ul>

Tag pro odkaz musí obalovat přímo dané slovo (slova). Tag li totiž nemůžeme napsat do odkazu.
Názvy souborů musíme psát přesně – i co se velkých a malých písmen týká.
My se u názvů souborů budeme držet doporučené konvence.

<li><a href=“index.html“>Úvod</a></li> – správný zápis
<a href=“index.html“><li>Úvod</li></a> – špatný zápis

Odkazem však nemusí být jen text, ale i obrázek.

Celé menu nyní nakopírujeme i do dalších souborů, které tvoří náš web. Máme tak provázány všechny HTML soubory navzájem. Vím, že menu zřejmě nevypadá dle Vašich představ, ale vzhled potom upravíme dle konkrétních požadavků pomocí CSS.

Názornější by bylo pro menu místo tagu ul použít tag menu (vykresluje se stejně, tag li pro položky je potom shodný), ale v některých verzích HTML (XHTML) není tento tag obsažen. Je to nelogické a trochu škoda. Tag ul je vždy dobře.

Záložky a klikací mapy si necháme na později.

Jiří Šarišský
Latest posts by Jiří Šarišský (see all)

Související příspěvky:

Přehled tagů Tabulky Co je HTML Obrázky