Od provozovatele projektu Rychlost.CZ

Jak odkazovat - odkazy - Začínáme s HTML

vydáno: 04.02.2016, seriál: Začínáme s HTML | komentářů: 0

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.

Ukázka:
HTML
<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>
Použité tagy: <a>, <img>

Kotvy

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.

Ukázka:
HTML
<h3 id="kotva">Nadpis s kotvou</h3>
<a href="#kotva">Odkaz na nadpis pomocí kotvy</a>
Použité tagy: <h3>, <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.

Ukázka:
HTML
<a href="dalsi-dokument.html#kotva">Kotva v jiném dokumentu</a>
Použité tagy: <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.

Barvy odkazů

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 

  • Tip1 Grafický vzhled odkazů lze upravit v CCS souboru.
HTML: návody jak psát html tagy