Toto je 6. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 6. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Hypertextové odkazy jsou textové řetězce, obrázky nebo jiné HTML prvky umožňující procházení na další dokumenty. Odkazovat můžete na dokumenty v rámci jednoho uložiště nebo na externí dokumenty nebo i na různé části v rámci jednoho dokumentu. Takový odkaz se nazývá kotva.
Odkaz se zapisuje mezi párový tag <a>. Tento tag se dále rozšiřuje o povinný atribut href, do kterého zapisujeme název dokumentu nebo adresu webu, kam má odkaz vést. Dále lze tag rozšířit například o atribut target, neboli cíl zobrazení. Pomocí tohoto atributu můžeme určit, zda se nám má odkaz otveřít ve stejném nebo v novém okně. Další atributy naleznete v HTML specifikaci.
<a href="dokument.html">Odkaz na další dokument</a><a href="http://cs.webdev.wiki">Odkaz na webovou stránku</a><a href="dalsi-dokument.html"><img src="obrazek.gif" alt="Obrázek jako odkaz"></a><a href="dokument.html" target="_blank">Odkazovaný dokument se otevře v novém okně</a>
Kotvy slouží jako odkazy na různé části dokumentů, především v případě, že se jedná o velmi rozlehlé dokumenty. Takto můžete uživatelům ulehčit a zrychlit procházení vašimi dokumenty.
Před vytvořením odkazu je nutné danou kotvu nejdřív v dokumentu definovat. Určíte ji tak, že u elementu na který chceme odkazovat přidáte atribut id (id = nazevKotvy). Element může být umístěn nad i pod odkazem.
Název kotvy poté uvedete v odkazu v atributu href. Před název kotvy je nutné vložit znak křížku #. Díky tomuto znaku jednoduše ve zdrojovém kódu poznáte, že daný odkaz odkazuje na kotvu.
<h3 id="kotva">Nadpis s kotvou</h3><a href="#kotva">Odkaz na nadpis pomocí kotvy</a>
Výsledek:
Kliknutím na text "Odkaz na nadpis pomocí kotvy" se posunete v rámci dokumentu na nadpis s id kotva
Odkázat lze na kotvu také přímo do jiného dokumentu. Stačí pouze za název dokumentu v atributu href přidat název kotvy.
<a href="dalsi-dokument.html#kotva">Kotva v jiném dokumentu</a>
Výsledek:
Kliknutím na odkaz se přesunete na dokument s názvem dalsi-dokument.html a zároveň přímo na prvek s id kotva.
Abychom v textu dokumentu našli odkazy snadněji, jsou odlišeny od ostatního textu barvou. V základním nastavení dokumentu se odkazy zobrazí následujícími barvami.
Nenavštívený - na odkaz se ještě nekliklo
Navštívený - na odkaz bylo v minulosti již kliknuto
Aktivní - tohoto stavu si obvykle nevšimneme, protože prohlížeč přejde na odkazovanou stránku nebo dokument
