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 47319×
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:
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.