Odkazy

Odkazy na stránkach sú definované pomocou párovej značky <a>, pričom daná značka má povinný atribút href, ktorý pojednáva o tom, kam má byť užívateľ presmerovaný.

<a href="http://egara.net/fwd/">FWD - Front-end Web Development</a>

Pri základnom štýlovaní stránky je možné odkaz rozoznať ako modrý podčiarknutý text. V prípade, že ste daný odkaz už navštívili, zobrazí sa ako fialový.

Ďalšími možnými atribútmi značky <a> sú:

  • download – užívateľ na miesto toho, aby stránku navštívil ju stiahne
  • hreflang – špecifikuje jazyk, v akom je cieľový dokument napísaný
  • media – definuje pre aký typ zariadenia je cieľový dokument prispôsobený
  • rel – hovorí o vzťahu aktuálneho HTML dokumentu a cieľového
  • target – hovorí o tom, kde otvoriť nalinkovaný dokument, či už na aktuálnej stránke alebo ako nový tab či v novom okne

Testové otázky

  • Akým príkazom vytvoríme odkaz?
  • Aké sú nutné atribúty odkazu?
  • Aké ďalšie atribúty poznáme? (aspoň 2)

Odkazy je možné nastýlovať podľa toho, v akom stave sa nachádzajú.

/* odkaz ako taký */
a{
    color: yellow;
}

/* nenavštívený odkaz */
a:link {
    color: red;
}

/* navštívený odkaz */
a:visited {
    color: green;
}

/* nadídenie myšou nad odkaz */
a:hover {
    color: hotpink;
}

/* zakliknutý odkaz */
a:active {
    color: blue;
}

Všetky vlastnosti, ktoré sa aplikujú na odkaz ako taký, sa aplikujú aj na jeho ďalšie stavy, až kým ich neprepíšeme. Čiže ak máme nasledovný kód:

/* odkaz ako taký */
a{
    color: yellow;
    display: inline-block;
    background-color: black;
}

/* nenavštívený odkaz */
a:link {
    color: red;
}

/* navštívený odkaz */
a:visited {
    color: green;
}

/* nadídenie myšou nad odkaz */
a:hover {
    color: hotpink;
}

/* zakliknutý odkaz */
a:active {
    color: blue;
}

tak spôsob zobrazenia a čierne pozadie sa aplikujú aj na nenavštívený odkaz, navštívený odkaz, odkaz nad ktorý sme nadišli myšou a aj zakliknutý odkaz. Keďže ale prepisujeme hodnotu pre zmenu farby textu, tak farba textu pre každý z týchto stavov odkazov je iná.


Testové otázky

  • Ako upravíme dizajn odkazu?
  • Ako upravíme dizajn odkazu, nad ktorý nadídeme myšou?
  • Ako upravíme zakliknutý odkaz?