Definice odkazů v HTML se provádí pomocí prvku a. Předtím než vám ukážu jeho použití, zde jsou některá obecná upozornění k hyperodkazům. Určitě si pečlivě zvažte název odkazu. S obyčejným zurück obvykle nikdo nepomůže. (Pokud návštěvník přichází z externí stránky, obvykle neví, co znamená zurück). Snažte se vybírat popisné texty odkazů.
Hyperodkazy v HTML vždy následují stejný princip.
<a href="videos.html">Aktuální videa</a>
Prvku a je přiřazeno atribut href. Tento href pak očekává cíl odkazu jako hodnotu. V předchozím příkladu bylo odkazováno na soubor videos.html. Tento soubor se nachází ve stejném adresáři jako HTML soubor, ve kterém byl odkaz definován.
Při definování hyperodkazů platí stejná pravidla, která byla představena v souvislosti s vkládáním obrázků.
Můžete definovat nejen odkazy v rámci projektu. Hyperodkazy lze také nastavit směrem k externím souborům a doménám.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
Text mezi otevíracím <a> a uzavíracím </a> je konečný text odkazu. Standardně bývá tento text v prohlížečích zobrazen podtržen.
Určení cílového okna
Pokud kliknete na hypertextový odkaz, otevře se cílové místo odkazu v aktuálním okně prohlížeče. To obvykle v pořádku. Nicméně může nastat situace, kdy jste například nastavili odkaz směrem k externí doméně. Pokud návštěvník klikne na tento odkaz, cílové místo by mělo být otevřeno v novém okně nebo panelu prohlížeče. Výhoda tohoto postupu: Váš web zůstává otevřen v pozadí.
Neměli byste však každý hypertextový odkaz na vaší stránce otevírat v externím okně, protože by to rychle iritovalo návštěvníky.
Pomocí atributu target prvku a lze stanovit cílové okno, ve kterém má být zobrazeno dané místo odkazu. HTML nabízí na začátek tři standardní hodnoty pro target.
• _blank – Cílové místo se zobrazí v novém okně prohlížeče.
• _self – Otevře cílové místo v aktuálním okně prohlížeče.
• _parent – Zde lze z rámečku vystoupit. (Všimněte si, že v HTML5 rámečky nejsou podporovány. Navíc by se tato technika už neměla používat, protože pro ni dnes existují lepší alternativy. Kdo se chce podrobně seznámit s rámečky, najde například na stránce http://de.wikipedia.org/wiki/Frame_(HTML) informace).
• _top – To se také používá v souvislosti s rámečky. Můžete pomocí toho zobrazit cílové místo mimo soubor rámečku.
Zde máte příklad, jak použít atribut target:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
V tomto případě by se cílové místo http://www.psd-tutorials.de otevřelo v novém okně/tabu. Stejný efekt byste dosáhli, pokud byste místo rezervovaného názvu _blank použili smyšlený název jako halligalli. Pokud však používáte target, doporučuji skutečně raději volit jeden z rezervovaných názvů.
Stanovení základního místa odkazu
V hlavičce souboru HTML můžete stanovit tzv. základní místo odkazu. Takové místo odkazu zajistí, že veškerá cílová místa se zobrazí v určitém okně prohlížeče. To je samozřejmě opět zejména zajímavé v souvislosti s rámečky.
To je samozřejmě také praktické, pokud například chcete nechat všechny odkazy zobrazovat novém okně prohlížeče pomocí _blank. Představte si seznam odkazů. Pokud chcete, aby bylo jejich cílové místo vždy otevřeno v novém okně, může to vypadat 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ždé a definici musíte přiřadit atribut target.
Jak vidíte, to není příliš efektivní. Ještě méně efektivní to bude, pokud se o několika měsících rozhodnete, že cílová místa nechcete otevírat v novém okně. Pak byste museli upravit atributy target všech odkazů. Tomu lze předejít pomocí zmíněné základní místa pro odkazy. Toto místo se definuje pomocí prvku base uvnitř hlavičky. Elementu base se pak přiřadí atribut target s požadovanou hodnotou. Zde máte příklad, jak by to mohlo vypadat:
<!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šetříte tím spoustu klávesových zkratk.
Definování kotvy
Jak již víte, jak vytvářet odkazy na jiné soubory. Stejně tak lze ale vytvořit tzv. kotvy uvnitř jednoho souboru HTML a poté na tyto kotvy odkazovat. Praktické je to například u rozsáhlých stránek. Tak můžete na začátku dokumentu definovat obsah, pomocí kterého se návštěvníci mohou přesunout na pro ně relevantní místa, aniž by museli posouvat okno prohlížeče.
Kotvy se vytvářejí pomocí prvku a. Kotvy však nedostávají vlastnost href, ale přiřazuje se jim atribut name.
<a name="seitenanfang">Obsah</a> <a name="kapitel1">Obsah kapitola 1</a> <p>Zde následuje spousta textu.</p> <a name="kapitel2">Obsah kapitola 2</a> <p>Zde následuje spousta textu.</p>
Jména kotvy můžete volit libovolně. Nicméně vám doporučuji, abyste si zvolili co nejkratší název, používali pouze malá písmena a vyhýbali se speciálním znakům.
Pro odkazování na kotvu definujete běžný hyper odkaz, stejně jako bylo ukázáno na začátku tohoto tutoriálu.
<a href="#seitenanfang">Na začátek stránky</a>
Jako hodnotu atributu href se přiřadí název kotvy. Zde je klíčové, že názvu kotvy je předřazeno znaménko #.
Můžete odkazovat na kotvy i mezi soubory. V následujícím příkladu předpokládám, že existuje soubor news.htm, který je ve stejném adresáři jako hlavní soubor HTML. V souboru news.htm byla definována kotva seitenanfang. Abyste na ni odkázali, za názvem cílového souboru (news.htm) se napíše znaménko #. K tomu se opět připojí název kotvy.
<a href="news.htm#seitenanfang">Na začátek stránky</a>
Takto snadno můžete vytvářet odkazy na kotvy v libovolném souboru.
