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 | přečteno 36509×

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:

Atribut Hodnota Význam
hreflang zkratky označující jazyk, např.: en, cz, sk Specifikuje jazyk, ve kterém je napsána cílová stránka; LZE POUŽÍT JEN POKUD JE NASTAVEN I ATRIBUT href=""
type nějaký MIME TYPE Určuje typ souboru, na který směřuje odkaz
rel např.: Start, Search nebo Index Určuje typ informace, na kterou směřuje odkaz - tomuto atributu se budeme věnovat podrobně později
rev např.: Start, Search nebo Index Určuje typ informace (opačný vztah k atributu rel; používá se na ozančení reverzního odkazu) - tomuto atributu se budeme věnovat podrobně později
charset např.: iso-8859-2, nebo UTF-8 Určuje kódovaní odkazu
lang zkratky označující jazyk, např.: en, cz, sk Hodnotou atributu určujeme jazyk, kterým je psaný odkaz. Podle zvoleného jazyka se aktivují různé konvence používané v konkrétních jazycích (např.: francouzské uvozovky).
dir rtl Určuje směr textu zprava doleva.
ltr Určuje směr textu zleva do prava.
title libovolný text Určuje titulek odkazu, který se ve většině prohlížečích zobrazí jako bublinková nápověda po najetí kurzoru na odkaz.
style příkazy jazyka CSS, např. color : red; Pomocí tohoto atributu můžete nadefinovat, jak se má zobrazit určitý logický styl . Můžete využít všechny možnosti, které CSS nabízí.
shape default, rect, circle, poly Používá se při práci s klikacími mapami, probereme později
coords rect, circle, poly Používá se při práci s klikacími mapami, probereme později
target Název rámce Odkaz se zobrazí v definovaném rámu
_blank Dokument se zobrazí v novém okně
_self Dokument se zobrazí ve stejném okne
_parent tabindexDokument se zobrazí v okně nebo rámu, který obsahuje nejbližší nadřazený element <frameset>
_top Dokument se nahraje do celého okna, rámy se zruší.
tabindex číslo Číslo, podle kterého ziskavají odkazy zaměření při mačkaní klávesy Tab.
accesskey písmeno Stisknutí Alt + definované písmeno spustí odkaz, ke kterému je definováno.

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.

Povolené atributy spojené s JS v odkazech
Atribut Význam
onfocus Příkazy zadané jako hodnota proběhnou při tom, když odkaz získá zaměření.
onblur Příkazy zadané jako hodnota proběhnou při tom, když odkaz ztratí zaměření.
onclick Příkazy zadané jako hodnota proběhnou při kliknutí na element
ondblclick Příkazy zadané jako hodnota proběhnou při dvojkliku na element
onmousedown Příkazy zadané jako hodnota proběhnou při stisku tlačítka myši na element
onmouseup Příkazy zadané jako hodnota proběhnou po stisku tlačítka myši (po uvolnění tlačítka) na element
onmouseover Příkazy zadané jako hodnota proběhnou při přejetí kurzoru nad elementem
onmousemove Příkazy zadané jako hodnota proběhnou při pohybu kurzoru nad elementem
onmouseout Příkazy zadané jako hodnota proběhnou poté, co kurzor opustí prostor nad elementem
onkeypress Příkazy zadané jako hodnota proběhnou při stisku klávesy na klávesnici
onkeydown Příkazy zadané jako hodnota proběhnou při pohybu klávesy dolů (událost nastane ještě před úplným stisknutím klávesy)
onkeyup Příkazy zadané jako hodnota proběhnou při pohybu klávesy nahoru (událost nastane až při návratu klávesy do nestisknutého stavu)

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.

Online verze článku: http://www.linuxsoft.cz/article.php?id_article=239