Odkazy

Odkazy jsou základem hypertextovosti Internetu. Bez odkazů by se uživatel nikam nedostal. V textu jsou odkazy vizuálně odlišeny, standardně je to barevným odlišením a podtržením. Při přejetí myši přes odkaz se mění kurzor (obvykle ze šipky na tlapičku), kliknutím je odkaz aktivován a dochází k přesměrování.

Pro odkaz se používá element a. Jeho atributem je href. Ten udává, kde je umístěn cílový dokument (tedy na kterou stránku odkaz směřuje). Samotné umístění pak zadáváme absolutní nebo relativní cestou.

Odkaz na jinou stránku

Absolutní odkaz

Absolutní odkaz se používá pro odkázání na dokument umístěný na jiném serveru, např. jako odkaz na jinou stránku. Odkaz na jinou stránku musí vždy obsahovat http://.

<a href="http://www.webtvorba.cz">WEBtvorba.cz</a>

Hodnotou atributu href je tedy adresa cílového dokumentu (v tomto případě http://www.webtvorba.cz). Zobrazovaný a klikatelný text bude WEBtvorba.cz.

Relativní odkaz

Relativní odkaz použijeme, pokud odkazujeme v rámci stránky. Při použití relativního odkazu prohlížeč sám doplňuje URL stránky, z které je odkazováno. Pokud tedy odkazujeme na dokument nacházející se ve stejném adresáři, stačí napsat jen jméno souboru.

<a href="uvod.htm">úvod</a>

Pokud se dokument nachází v jiném adresáři, musíme do URL zahrnout celou cestu od místa, kde se cesty k odkazovanému a odkazujícímu dokumentu začaly odlišovat.

<a href="fotky/zvirata/zirafy.htm">fotky žiraf</a>

Pokud se budeme chtít dostat v adresářové struktuře o úroveň výš, použijeme k tomu dvou teček, tj. ... Pokud bychom tedy chtěli ze stránky zirafy.htm (viz. výše) odkázat na stránku fialky.htm, která je uložená v adresáři rostliny a ten se nachází v adresáři fotky (tj. na stejné vyšší úrovni jako adresář zvirata, použijeme zápis:

<a href="../rostliny/fialky.htm">fotky fialek</a>

Odkaz na konkrétní místo dokumentu

Někdy je dobré odkazovat i na části stránky, to se hodí jednak pokud je stránka delší — pak v úvodu použijeme odkazy na její jednotlivé častí a dále pokud z jiné stránky potřebujeme použít odkaz na přesně určenou část stránky (aby uživatel nemusel hledat). Pro označení místa, na které chceme odkázat použijeme atruibut id, v odkazu potom použijeme jako vždy atribut href, který ale bude tentokrát začínat hash-markem #. Často se toto používá také při odkazování na začátek stránky.

<a href="#zacatek">zpět na začátek</a>

Stejným způsobem pak odkazujeme i z jiné stránky, jen musíme přidat klasickám způsobem odkaz na celý dokumet a za něj odkaz na konkrétní místo.

<a href="svetadily.htm#evropa">Evropa</a>

Takový odkaz můžeme dát někam nakonec stránky, po kliknutí prohlížeč sám „odroluje” tak, že se element odznačený příslušným názvem dostane do horní části okna prohlížeče.

Pozn.: Odkazovaná část dokumentu se do horní části okna pochopitelně nedostane v případě, že pokračování stránky není dostatečně dlouhé k zaplnění celého okna prohlížeče (bude pak někde uvnitř okna…).

Část dokumentu, na kterou takto odkazujeme označíme takto (v našem případě budeme odkazovat na hlavní nadpis stránky):

<h1 id="zacatek">Hlavní nadpis stránky</h1>

Otevření odkazu v novém okně

K otevření odkazu v novém okně slouží atribut target s hodnotou _blank. V novém okně se obvykle otvírají odkazy, které směřují na „cizí stránky”. Otevírat v novém okně odkazy na vlastní stránky (tím myslím například otevírání položek menu v novém okně) je naprostý nesmysl. Vlastně samotné otevírání odkazů v novém okně si myslím, že je nesmysl, uživatel je snad natolik inteligentní, aby se sám rozhodl, jestli si otevře odkaz v novém nebo ve stejném okně. Bohužel jakmile určíme otevření v novém okně uživatel již tuto možnost volby nemá, což si myslím není dobré.

<a href="http://www.webtvorba.cz" target="_blank">WEBtvorba.cz</a>

Pozn.: Atribut target není povolen v XHTML 1.0 Strict, v Transitional ano.

Titulek odkazu

Každý odkaz by měl mít svůj titulek. Tím je text, který uživateli přiblíží, kam vlastně odkaz směřuje. Titulek se zobrazí při najetí kursoru myši na odkaz. Titulky odkazů jsou důležité také např. pro čtecí zařízení, umožňují lepší orientaci na webu.

<a href="http://www.webtvorba.cz" title="Úvodní stránka tohoto webu (WEBtvorba.cz)">WEBtvorba.cz</a>

Vypadat to bude takto: WEBtvorba.cz