ARCHIV

HTML (4) - odkazy

Jednotlivé stránky, které už umíme, mohou být sice zajímavé, ale asi největší silou HTML jsou odkazy. Dnes se naučíme, jak odkazy vytvářet.

1.7.2004 15:00 | Pavel Kácha | Články autora | přečteno 46652×

Odkazy se vyznačují pomocí značky <a></a>, odkazy musí mít koncové tagy. Mezi značky <a> a </a> vložíme text nebo obrázek, který má fungovat jako odkaz. Vlastnosti odkazů můžeme nastavit pomocí různých atributů, nejznámějším a nejpoužívanějším atributem je u odkazů určitě href="", který určuje, kam má odkaz směřovat. Takže odkaz na adresář linuxového softwaru by mohl vypadat třeba takhle:

<a href="http://www.linuxsoft.cz/">
Adresář linuxového softwaru
</a>

Tento kousek kódu vytvoří takovýhle odkaz:

Adresář linuxového softwaru

Jako hodnotu atributu href="" můžete zadat absolutní URL (předchozí příklad) nebo relativní URL (např.: ./index.html). Relativní URL se zadává stejně jako v shellu, takže myslím není třeba nějak více rozebírat. Jen připomenu, že . znamená aktuální adresář a .. znamená nadřazený adresář.

Další důležitý atribut je name="", který nám umožní definovat návěští pro navigaci po jednotlivých částech dokumentu. Pěkným příkladem jsou třeba odkazy na diskuzy a související články, které můžete vidět u hlavičky každého článku na linuxsoftu.

Ukážeme si, jak se takový odkaz dá udělat. Nejdříve si vytvoříme návěští, na které budeme odkazovat.

<a name="diskuze">
diskuze
</a>

A teď už nám nic nebrání v tom, abysme si vytvořili odkaz, který nás přesune k diskuzi (do místa, kde je vytvořené návěští). Odkaz na návěští je speciální tím, že má v hodnotě href="" jméno stránky a návěští oddělené # (hash). Odkaz tedy bude ve tvaru:

<a href="clanek.html#diskuze">
Jdi na diskuzi
</a>

Pokud se budeme přesouvat jen v rámci jedné stránky, nemusíme uvádět její jméno, odkaz tedy bude ve tvaru:

<a href="#diskuze">
Jdi na diskuzi
</a>

Použití návěští jsem snad vysvětlil dostatečně, ale ještě vás musím upozornit, že návěští jsou citlivá na velikost písmen. Takže diskuse, DISKUSE a DiSkUsE jsou tři různá návěští (doporučuji používat jen malá písmena pro všechny značky HTML).

Stejně jako můžete vytvořit návěští pomocí atributu name, můžete ho vytvořit i pomocí atributu id. Použití je totožné, ale musíte si dávat pozor, abyste v jedné stránce neměli stejnou hodnotu u dvou a více atributů name nebo id. Návěští musí zkrátka být v celé stránce jedinečné.

Další atributy, které jsou povolené pro odkazy najdete v tabulce:

Tím jsme probrali všechny "statické" atributy a teď přijdou na řadu dynamické. Kromě metod, které už dobře znáte z předchozích dílů přibyly u odkazů dvě nové metody: onfocus a onblur.

Teším se na vás u dalšího dílu, kde se podíváme na obrázky. Čekám na vaše připomínky a komentáře v diskuzi.

Verze pro tisk

DISKUZE Otevírání odkazů v novém okně 1.7.2004 21:23 Petr Zajíc Re: Otevírání odkazů v novém okně 3.7.2004 02:13 Pavel Kácha   Re: Otevírání odkazů v novém okně 18.10.2004 02:20 Daniel Ševčík Atribut target 2.7.2004 10:14 Vasek Re: Atribut target 3.7.2004 02:38 Pavel Kácha Matoucí názorné ukázky 18.10.2004 02:16 Daniel Ševčík Zobrazit označené Zobrazit vše Příspívat do diskuze mohou pouze registrovaní uživatelé.