5. lekce - odkazy

Právě odkazy vytváří ze stránek takzvaný hypertext, neboli spleť textů či stránek propojenou pomocí odkazů. Tagem pro odkaz je <a> zobrazený text odkazu</a> , nejběžnějším atributem (parametrem) tohoto tagu je href (hypertext reference - hypertextový odkaz). Odkazovat je možné na jinou adresu, stránku, na záložku v delším textu nebo soubor:

Ve zdroji stránky (html) vypadají tagy pro odkazy například takto:
odkaz na stránku, která je umístěná ve stejné složce jako stránka s odkazem:
<a href="vtipy.html"> vtipy </a>
V první závorce (parametr href) je použit název stránky, která se má po kliknutí na odkaz otevřít, mezi závorkami je text, který se zobrazí na stránce a na který se kliká. (Pokud je stránka v jiné složce, použije se cesta k ní, o tom později, zatím máme všechny soubory v jedné složce.) Název otevírané stránky je uvedený v uvozovkách, ty sice nejsou v HTML povinné, ale kvůli případnému přechodu na XHTML bude lepší je psát.

odkaz na jinou adresu:
<a href="http://www.microsoft.com"> odkaz na Microsoft </a>
(http - hypertext transfer protocol - protokol pro přenos hypertextů)
Princip je stejný - v první závorce je zapsaná adresa a mezi počátečním a koncovým tagem text, který se zobrazí na stránce (po kliknutí na tento text se otvírá zadaná adresa).

odkaz na soubor (znáte určitě ze sekcí download nejrůznějších stránek :-), otevře se nabídka Otevřít nebo Uložit):
<a href="1kolo.zip"> zadání 1. kola </a>
<a href="mario.exe"> Mario </a>
V první závorce je název souboru, na který se odkazuje (opět případně s cestou k souboru) a mezi závorkami opět popisný text, na který se kliká.

V delších textech, kde by bylo potřeba hodně listovat, se používá odkaz na záložku:
- na místech, kam se má "skočit", je potřeba pojmenovat záložku: <a name="blondyny">
- na pojmenovanou záložku lze potom odkázat: <a href="#blondyny">Vtipy o blondýnkách</a>
Všimněte si znaku #, který se u tohoto typu odkazů používá (je možné odkázat i na záložku v jiné stránce).

Vlastnosti odkazů

Vlastnosti odkazů budeme upravovat v souboru stylů (css), chceme-li upravit barvu textu, pozadí odkazů a další vlastnosti textu podle minulých lekcí, mohou vlastnosti vypadat například takto:

a { text-decoration: none; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px;}
a:link {color:red; background-color: Navy;}
a:visited {color:white; background-color: Black;}
a:hover {color:red; background-color: Fuchsia;} a:active {color:red; background-color: Lime;}


Jednotlivé řádky mají následující význam:
a - určuje vlastnosti všude, kde se vyskytuje tag a (také například a name - definice záložek, viz výše) - text-decoration: none znamená, že odkaz nebude podtržený
Následují takzvané pseudoelementy nebo pesudotřídy (říká se jim tak proto, že takové tagy neexistují), určující vlastnosti odkazů při různých událostech:
a:link - nenavštívený odkaz
a:visited - již navštívený odkaz
a:hover - odkaz, na který "najela myš"
a:active - aktivní odkaz - je na něj kliknuto myší, nebo je vybraný tabelátorem
Pořadí řádků ve stylu je důležité, pokud má odkaz dvě události (například je aktivní a zároveň je na něm myš), potom platí vlastnosti té události (pseudoelementu), která je uvedena později (stejně jako u jiných vlastností). Zrovna tak, pokud určíte například vlastnosti tagu a, budou přidány (nebo přepsány již uvedené) vlastnosti dalších elementů (například vlastnosti a:link). Pokud kliknete na odkaz a poté se vrátíte zpět, zůstává použitý odkaz jako aktivní, dokud nekliknete někde jinde. Navštívené odkazy zůstávají jako navštívené v závislosti na nastavení prohlížeče - konkrétně jeho historie. Chcete-li zrušit vlastnost "navštívení" odkazů, potom je potřeba vymazat historii prohlížeče (například v IE: Nástroje - Možnosti Internetu, záložka Obecné). Není povinné určovat vlastnosti všech pseudoelementů, autoři často definují jen a:link a a:hover.

Název školy:	Základní škola, Hradec Králové, M. Horákové 258
Název projektu:	EU peníze školám
Číslo projektu:	CZ.1.07/1.4.00/21.2575
Téma:	Tvorba WWW stránek
Název:	VY_32_INOVACE_05_10B_tvorba www5
Autor:	Pavel Petr

Použité zdroje: Není-li uvedeno jinak, jsou všechny ilustrační obrázky dílem autora.