#1 Odkaz
Jakékoli odkazy na webové stránce jsou vždy tzv. hyperlinky. Odkazy mají svojí funkčnost – po kliknutí na odkaz je uživatel přesměrován na jiný dokument, potažmo stránku. Obvykle se při najetí myši na odkaz změní ikona na ikonu ukazatele (ruka s ukazováčkem). Odkazem může být cokoli, od textu přes obrázek po nadpis.
Struktura odkazu
Odkaz definuje tag <a>, ukončuje ho tag </a>.
<a href="link">Klikatelný prvek</a>
Nejdůležitější část odkazu je však atribut href, který udává URL adresu, kam bude odkaz směřovat. Následně se už v prvku nachází pouze viditelný prvek – nejčastěji text nebo obrázek, přičemž po kliknutí na něj je uživatel přesměrován. Například takto:
<a href="index.html">Odkaz na hlavní stránku</a>
#2 Adresa odkazu
Odkaz může být relativní, tedy se pohybuje v rámci složky webu, nebo absolutní, který definuje přesnou adresu – doménu a stránku.
Relativní URL
URL, které je relativní, se pohybuje výhradně v rámci složky, ve které se web nachází.
| Cesta | Definice |
|---|---|
| ../soubor.html | Soubor se nachází ve vyšším adresáři než-li je aktuální soubor |
| ./soubor.html | Soubor se nachází ve stejném adresáři jako je aktuální soubor |
| /soubor.html | Soubor se nachází v :root adresáři („složka webu“) |
| soubor.html | Soubor se nachází ve stejném adresáři jako je aktuální soubor |
<a href="/sablona/prvni.html">Odkaz na šablonu</a>
<a href="index.html">Odkaz na hlavní stránku</a>
Absolutní URL
Absolutní URL obsahuje v cestě vše, včetně domény a protokolu. Z valné většiny se používá k odkazování na jiné stránky – sociální sítě, jiné weby atd. Na vnitřní odkazování se většinou nepoužívá.
<a href="https://piskod.cz">Odkaz na náš web</a>
<a href="https://instagram.com">Odkaz na instagram</a>
#3 Atribut target
V základu je nastavený odkaz, aby se otevřel v okně a záložce, na které právě uživatel je. Atribut target může toto měnit, a to následovně:
- _self – defaultně, otevírá odkaz ve stejném okně a záložce
- _blank – otevře odkaz v novém okně nebo záložce (na základě prohlížeče)
- _parent – otevírá dokument v nadřazené skupině
- _top – otevře dokument ve zcela novém okně
<!-- Odkaz, který se otevře ve stejném okně -->
<a href="index.html">Link</a>
<!-- Odkaz, který se otevře v novém okně -->
<a href="index.html" target="_blank">Link</a>