Definícia odkazov sa vykonáva v HTML prostredníctvom prvku a. Predtým než vám ukážem jeho použitie, niekoľko všeobecných pokynov týkajúcich sa hypertextových odkazov. Určite si vyberte dobré texty odkazov. Obvykle nikomu nezabudne jednoduchý späť. (Keďže návštevník prichádza z externého webu, obvykle nevie, čo znamená späť). Snažte sa vybrať popisné texty odkazov.
Hypertextové odkazy v HTML vždy nasledujú rovnaký princíp.
<a href="videos.html">Aktuálne videá</a>
Prvku a sa priradzuje atribút href. Tento href zas očakáva ako hodnotu cieľ odkazu. V predchádzajúcom príklade bol vykonaný odkaz na súbor videos.html. Tento súbor sa nachádza v rovnakom priečinku ako súbor HTML, v ktorom bol definovaný hypertextový odkaz.
Pri definovaní hypertextových odkazov platia inak rovnaké pravidlá, ktoré boli predstavené v súvislosti s vkladaním obrazových súborov.
Môžete definovať nielen interné odkazy projektu. Hypertextové odkazy možno nastaviť aj na externé súbory a domény.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Text medzi otváracím <a> a uzavieracím </a> je nakoniec textom odkazu. Štandardne je tento text prehliadačmi zobrazovaný podčiarknutý.
Definovanie cieľovej oblasti
Keď kliknete na hypertextový odkaz, cieľová oblasť sa otvorí v aktuálnom okne prehliadača. To je obvykle úplne v poriadku. Avšak môže sa stať, že ste nastavili odkaz na externú doménu. Ak návštevník klikne na tento odkaz, cieľová oblasť by sa mala otvoriť v novom okne alebo paneli prehliadača. Výhodou tohto riešenia je, že vaša webová stránka zostane otvorená na pozadí.
Nemali by ste však otvárať každý hypertextový odkaz na vašej stránke v externom okne, pretože návštevníci by sa mohli rýchlo unaviť.
Pomocou atribútu target prvku a sa dá určiť cieľové okno, v ktorom sa má zobraziť daná cieľová oblasť. V HTML existujú štandardné hodnoty pre target.
• _blank – Cieľová oblasť sa zobrazí v novom okne prehliadača.
• _self – Otvorí cieľovú oblasť v aktuálnom okne prehliadača.
• _parent – Tu sa dá prejsť z rámca. (Upozorňujeme, že rámce nie sú podporované v HTML5. V každom prípade by sa táto technika už nemala používať, pretože existujú lepšie alternatívy. Kto chce bližšie preskúmať rámce, nájde napríklad na stránke http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top – Toto sa tiež používa v súvislosti s rámcami. Pomocou neho môžete otvoriť cieľovú oblasť mimo sady rámceov.
Ukážka využitia atribútu target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
V tomto prípade by sa cieľová oblasť http://www.psd-tutorials.de otvorila v novom okne/paneli. Rovnaký efekt by ste dosiahli aj tým, že by ste namiesto rezervovaného mena _blank použili fiktívne meno ako halligalli. Ak však používate target, odporúčam skutočne použiť jedno z rezervovaných mien.
Určenie základnej oblasti odkazov
V časti head súboru HTML môžete definovať tzv. základnú oblasť odkazov. Takáto základná oblasť zabezpečí, že všetky cieľové oblasti budú zobrazené v určitom okne prehliadača. Aj to je samozrejme zaujímavé najmä v súvislosti s rámcami.
Toto je však praktické aj v prípade, že chcete napríklad zobraziť všetky odkazy pomocou _blank v novom okne prehliadača. Predstavte si zoznam odkazov. Ak chcete, aby sa cieľové oblasti vždy otvárali v novom okne, vyzerá to takto:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Každej definícii a musíte priradiť atribút target.
Ako vidíte, nie je to veľmi efektívne. Ešte menej efektívne by to bolo v prípade, ak by ste sa o pár mesiacov rozhodli, že cieľové oblasti nechcete otvárať v novom okne. Potom by ste museli upraviť atribúty target všetkých odkazov. Tomu sa však dá zabrániť pomocou vyššie uvedenej základnej oblasti cieľového okna. Tá sa definuje pomocou prvku base v rámci head sekcie. Prvok base sa priradzuje atribút target s požadovanou hodnotou. Tu máte príklad, ako by to mohlo vyzerať:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Ušetríte týmto veľa práce s písaním.
Definovanie kotiev
Už ste videli, ako vytvoriť hypertextové odkazy na iné súbory. V HTML súbore je však tiež možné definovať tzv. kotvy a následne vytvoriť odkazy na tieto kotvy. Je to praktické napríklad pri rozsiahlych stránkach. Na začiatku dokumentu je možné definovať obsahovú časť, cez ktorú môžu návštevníci preskočiť na miesta, ktoré sú pre nich relevantné, bez toho, aby museli posúvať oknom prehliadača.
Kotvy sa vytvárajú pomocou prvku a. Avšak kotvy nie sú priradené atribútu href, ale atribútu name.
<a name="seitenanfang">Obsah</a> <a name="kapitel1">Obsah kapitoly 1</a> <p>Tu nasleduje veľa textu.</p> <a name="kapitel2">Obsah kapitoly 2</a> <p>Tu nasleduje veľa textu.</p>
Meno kotvy môžete zadávať ľubovoľne. Odporúčam však, aby ste si vybrali čo najkratšie meno, použili len malé písmená a preskočili špeciálne znaky.
Na odkazovanie na kotvu definujete normálny hypertextový odkaz, ako bolo uvedené na začiatku tohto návodu.
<a href="#seitenanfang">Na začiatok stránky</a>
Atribútu href je priradený názov kotvy ako hodnota. Tu je však rozhodujúce, že pred názvom kotvy je pridaný kľúčový znak.
Môžete tiež nastaviť odkazy na kotvy medzi súbormi. V ďalšom príklade predpokladám, že existuje súbor news.htm, ktorý je v rovnakom adresári ako samotný HTML súbor. V súbore news.htm bola definovaná kotva seitenanfang. Na ňu odkazujete tak, že za názvom cieľového súboru (news.htm) pridáte kľúčový znak. Na to nadväzuje názov kotvy.
<a href="news.htm#seitenanfang">Na začiatok stránky</a>
Takto si môžete jednoducho nastaviť odkazy na kotvy v ľubovoľnom súbore.
