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 46458×
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.
Verze pro tisk
|
Příspívat do diskuze mohou pouze registrovaní uživatelé.
|
|
Vyhledávání software
Vyhledávání článků
28.11.2018 23:56 /František Kučera Prosincový sraz spolku OpenAlt se koná ve středu 5.12.2018 od 16:00 na adrese Zikova 1903/4, Praha 6. Tentokrát navštívíme organizaci CESNET. Na programu jsou dvě přednášky: Distribuované úložiště Ceph (Michal Strnad) a Plně šifrovaný disk na moderním systému (Ondřej Caletka). Následně se přesuneme do některé z nedalekých restaurací, kde budeme pokračovat v diskusi.
Komentářů: 1
12.11.2018 21:28 /Redakce Linuxsoft.cz 22. listopadu 2018 se koná v Praze na Karlově náměstí již pátý ročník konference s tématem Datová centra pro business, která nabídne odpovědi na aktuální a často řešené otázky: Jaké jsou aktuální trendy v oblasti datových center a jak je optimálně využít pro vlastní prospěch? Jak si zajistit odpovídající služby datových center? Podle jakých kritérií vybírat dodavatele služeb? Jak volit vhodné součásti infrastruktury při budování či rozšiřování vlastního datového centra? Jak efektivně datové centrum spravovat? Jak co nejlépe eliminovat možná rizika? apod. Příznivci LinuxSoftu mohou při registraci uplatnit kód LIN350, který jim přinese zvýhodněné vstupné s 50% slevou.
Přidat komentář
6.11.2018 2:04 /František Kučera Říjnový pražský sraz spolku OpenAlt se koná v listopadu – již tento čtvrtek – 8. 11. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma umění a technologie, IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
4.10.2018 21:30 /Ondřej Čečák LinuxDays 2018 již tento víkend, registrace je otevřená.
Přidat komentář
18.9.2018 23:30 /František Kučera Zářijový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 20. 9. 2018 od 18:00 v Radegastovně Perón (Stroupežnického 20, Praha 5). Tentokrát bez oficiální přednášky, ale zato s dobrým jídlem a pivem – volná diskuse na téma IoT, CNC, svobodný software, hardware a další hračky.
Přidat komentář
9.9.2018 14:15 /Redakce Linuxsoft.cz 20.9.2018 proběhne v pražském Kongresovém centru Vavruška konference Mobilní řešení pro business.
Návštěvníci si vyslechnou mimo jiné přednášky na témata: Nejdůležitější aktuální trendy v oblasti mobilních technologií, správa a zabezpečení mobilních zařízení ve firmách, jak mobilně přistupovat k informačnímu systému firmy, kdy se vyplatí používat odolná mobilní zařízení nebo jak zabezpečit mobilní komunikaci.
Přidat komentář
12.8.2018 16:58 /František Kučera Srpnový pražský sraz spolku OpenAlt se koná ve čtvrtek – 16. 8. 2018 od 19:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát jsou tématem srazu databáze prezentaci svého projektu si pro nás připravil Standa Dzik. Dále bude prostor, abychom probrali nápady na využití IoT a sítě The Things Network, případně další témata.
Přidat komentář
16.7.2018 1:05 /František Kučera Červencový pražský sraz spolku OpenAlt se koná již tento čtvrtek – 19. 7. 2018 od 18:00 v Kavárně Ideál (Sázavská 30, Praha), kde máme rezervovaný salonek. Tentokrát bude přednáška na téma: automatizační nástroj Ansible, kterou si připravil Martin Vicián.
Přidat komentář
Více ...
Přidat zprávičku
Poslední diskuze
31.7.2023 14:13 /
Linda Graham iPhone Services
30.11.2022 9:32 /
Kyle McDermott Hosting download unavailable
13.12.2018 10:57 /
Jan Mareš Re: zavináč
2.12.2018 23:56 /
František Kučera Sraz
5.10.2018 17:12 /
Jakub Kuljovsky Re: Jaký kurz a software by jste doporučili pro začínajcího kodéra?
Více ...
|