Linky

→ používajú sa na presmerovanie na inú HTML stránku

→ link môže byť: text, obrázok, sekcia, určitá oblasť

Syntax

→ <a> definuje link

//index.html

Target atribút

Target môže mať hodnotu:

_self - otvorí stránku v rovnakom okne
_blank - otvorí stránku v novom okne
_parent - otvorí stránku v rodičovskom okne
_top - otvorí stránku v plnej šírke okna

//index.html

Paragraf ako link

//index.html

<p><a target="_blank" href="url">Tento text je vložený</a></p>

Obrázok ako link

//index.html

Odkaz na e-mailovú adresu

//index.html

<a href="mailto:someone@example.com">Send email</a>

Tlačítko ako odkaz

//index.html

<button onclick="document.location='index.html'">HTML Tutorial</button>

Title odkazu

→ Keď prejdeme kurzorom po odkaze ukáže sa nám text, ktorý sme definovali ako hodnotu atribútu

//index.html

<button onclick="document.location='index.html'" title="Toto je odkaz">HTML Tutorial</button>

Štádia odkazov

→ :link → definuje ako link vyzerá na stránke

→ :hover → definuje ako link vyzerá, keď prejdeme cezeň kurzorom

→ :active → definuje ako link vyzerá, keď naň klikneme

→ :visited → definuje ako link vyzerá na stránke

//styles.css

a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}

Záložka

→ Ak pridáme id prvku, tak sa naň môžeme odvolávať odkazom

→ Dokument musí byť rozsiahlejší, aby sme videli, že nás daný link naozaj odkazuje na prvok s id

//index.html

<h2 id="C4">HTML Tutorial</h2>
...
<a href="#C4">Odkaz na HTML Tutorial</a>

Zhrnutie

<a> definuje link=odkaz
href upresňuje adresu odkazu
target upresňuje, kde sa má daný obsah zobraziť
mailto: adresa@gmail.com v href atribúte otvorí užívateľov mail