Nauč sa HTML od základov – 4. diel: Odkazy a navigácia v HTML

Reklama

Vitajte v ďalšej časti nášho seriálu o HTML. Dnes sa budeme venovať odkazom a navigácii, čo sú kľúčové komponenty každej webovej stránky. Odkazy (hyperlinky) umožňujú používateľom prechádzať medzi rôznymi stránkami alebo časťami webu, zatiaľ čo navigačné prvky pomáhajú štruktúrovať obsah a zlepšujú používateľský zážitok. Naučíme sa, ako vytvárať odkazy na iné webové stránky, interné stránky, dokumenty a dokonca konkrétne časti tej istej stránky.

Vytváranie odkazov pomocou značky <a>

Odkaz v HTML sa vytvára pomocou značky <a> (anchor), ktorá je základom pre prepojenie stránok na internete. Každý odkaz obsahuje atribút href (hypertext reference), ktorý určuje cieľ odkazu.

Základná syntax:

<a href="https://www.example.com">Kliknite sem a navštívte stránku</a>

V tomto príklade:

• <a>: Táto značka vytvára odkaz.
• href="https://www.example.com": Atribút href určuje URL adresu stránky, na ktorú vedie odkaz.
• Text odkazu: „Kliknite sem a navštívte stránku“ je text, ktorý sa zobrazí ako klikateľný odkaz na stránke.

Typy odkazov

Existuje viacero typov odkazov, ktoré môžete vytvoriť v HTML, a každý z nich slúži na iný účel.

Externé odkazy

Externé odkazy odkazujú na iné webové stránky mimo vašej vlastnej stránky.

Príklad:

<a href="https://www.google.com">Prejdite na Google</a>

V tomto prípade je URL absolútna, čo znamená, že odkaz smeruje na úplne inú doménu mimo vašej stránky.

Interné odkazy

Interné odkazy vedú na iné stránky v rámci tej istej webovej stránky alebo domény. Používajú relatívne cesty k súborom.

Príklad:

<a href="kontakt.html">Kontaktujte nás</a>

Tento odkaz vedie na internú stránku kontakt.html v rámci tej istej webovej stránky. Nemusíte zadávať úplnú URL, pretože súbor sa nachádza na rovnakom serveri.

Odkazy na e-maily

Pomocou HTML môžete tiež vytvárať odkazy, ktoré automaticky otvoria e-mailový klient používateľa s predvyplnenou e-mailovou adresou.

Príklad:

<a href="mailto:priklad@example.com">Pošlite nám e-mail</a>

Keď používateľ klikne na tento odkaz, otvorí sa predvolený e-mailový klient s predvyplnenou adresou priklad@example.com.

Odkazy na súbory

Odkazy môžete použiť aj na prepojenie so súbormi na stiahnutie, ako sú PDF dokumenty alebo obrázky.

Príklad:

<a href="dokumenty/sprava.pdf" download>Stiahnite si našu správu</a>

V tomto prípade odkaz umožňuje používateľovi stiahnuť súbor sprava.pdf. Atribút download zabezpečuje, že sa súbor stiahne namiesto toho, aby sa otvoril v prehliadači.

Navigácia v rámci stránky (kotvy)

Ak máte dlhú webovú stránku, môžete používateľom umožniť rýchle preskakovanie medzi rôznymi sekciami pomocou kotiev (anchor links). Tie fungujú tak, že odkazujú na konkrétne časti stránky označené atribútom id.

Príklad:

1. Najprv vytvoríme sekciu, na ktorú chcete odkazovať, a pridáme jej identifikátor id:

<h2 id="sekcia1">Toto je sekcia 1</h2>
<p>Obsah sekcie 1.</p>

2. Potom vytvoríme odkaz, ktorý odkazuje na túto sekciu:

<a href="#sekcia1">Prejdite na sekciu 1</a>

Kliknutím na tento odkaz prejdete priamo na sekciu 1 na tej istej stránke.

Otvorenie odkazu na novej karte

Ak chcete, aby sa odkaz otvoril v novej karte, pridajte k značke <a> atribút target="_blank".

Príklad:

<a href="https://www.example.com" target="_blank">Otvoriť v novej karte</a>

Tvorba navigačného menu

Navigačné menu je dôležitým prvkom každej webovej stránky, ktorý umožňuje používateľom ľahko prechádzať medzi rôznymi časťami stránky. Navigačné menu môžete vytvoriť pomocou zoznamu nečíslovaných položiek <ul> a odkazov <a>.

Príklad:

<ul>
  <li><a href="index.html">Domov</a></li>
  <li><a href="o-nas.html">O nás</a></li>
  <li><a href="sluzby.html">Služby</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

V predchádzajúcom texte sme si ukázali jednoduchý príklad navigačného menu. Tento jednoduchý zoznam odkazov vytvára horizontálne menu, kde jednotlivé položky odkazujú na rôzne stránky v rámci webu. Teraz sa pozrime, ako môžeme pridať niekoľko vylepšení a ďalšie praktické informácie o vytváraní odkazov a navigačných štruktúr.

Horizontálne a vertikálne navigačné menu

Keď vytvoríme navigačné menu pomocou nečíslovaného zoznamu <ul>, položky zoznamu sa v predvolenom nastavení zobrazia vertikálne, každá na samostatnom riadku. Ak chcete zmeniť zobrazenie navigácie na horizontálne menu, môžete použiť CSS.

Príklad horizontálneho menu pomocou CSS:

<ul style="list-style-type: none;">
  <li style="display: inline;"><a href="index.html">Domov</a></li>
  <li style="display: inline;"><a href="o-nas.html">O nás</a></li>
  <li style="display: inline;"><a href="sluzby.html">Služby</a></li>
  <li style="display: inline;"><a href="kontakt.html">Kontakt</a></li>
</ul>

V tomto príklade:

• list-style-type: none;: Tento CSS štýl odstráni bodky, ktoré sa predvolene zobrazujú pred položkami zoznamu.
• display: inline;: Zabezpečí, že jednotlivé položky zoznamu sa zobrazia vedľa seba (horizontálne), namiesto toho, aby sa zobrazovali na samostatných riadkoch (vertikálne).

Pridanie aktívnej položky navigácie

Pri vytváraní navigačného menu môžete zdôrazniť položku, ktorá reprezentuje aktuálnu stránku, na ktorej sa používateľ nachádza. To pomáha používateľom orientovať sa na webe a vedieť, na ktorej časti stránky sú.

Príklad:

<ul>
  <li><a href="index.html" class="active">Domov</a></li>
  <li><a href="o-nas.html">O nás</a></li>
  <li><a href="sluzby.html">Služby</a></li>
  <li><a href="kontakt.html">Kontakt</a></li>
</ul>

A v CSS môžete pridať štýl pre aktívnu položku:

.active {
  font-weight: bold;
  color: red;
}

Týmto spôsobom sa zvýrazní text odkazu, ktorý predstavuje aktuálnu stránku.

Navigačné prvky a prístupnosť

Prístupnosť (angl. accessibility) je dôležitým aspektom moderného webového vývoja. Odkazy a navigačné prvky by mali byť optimalizované tak, aby ich mohli používať všetci používatelia, vrátane tých so zrakovým postihnutím, ktorí používajú čítačky obrazovky.

Tipy pre prístupnosť:

1. Používajte textovo bohaté odkazy: Namiesto odkazov typu „kliknite sem“ použite zrozumiteľné texty, ktoré jasne hovoria, kam odkaz vedie.

• Namiesto: „Kliknite sem“
• Použite: „Zobraziť naše služby“

1. Alt atribúty pre obrázkové odkazy: Ak používate obrázky ako odkazy, vždy pridajte alternatívny text cez atribút alt, ktorý popíše, čo sa stane po kliknutí na obrázok.
2. Tab index pre lepšiu navigáciu: Používajte atribút tabindex, aby používatelia mohli pomocou klávesy Tab jednoducho prechádzať cez odkazy na stránke.

<a href="index.html" tabindex="1">Domov</a>
<a href="o-nas.html" tabindex="2">O nás</a>

Úloha pre vás

Na základe toho, čo ste sa naučili o odkazoch a navigácii, vytvorte HTML stránku, ktorá obsahuje:

• Externý odkaz na inú webovú stránku.
• Interný odkaz na inú stránku v rámci vášho webu.
• E-mailový odkaz, ktorý umožní používateľom rýchlo napísať e-mail.
• Navigačné menu s horizontálnym zobrazením a štýlovaním pre aktívnu položku.

Príklad kódu:

<!DOCTYPE html>
<html lang="sk">
<head>
  <meta charset="UTF-8">
  <title>Moja stránka s navigáciou</title>
  <style>
    ul {
      list-style-type: none;
    }
    li {
      display: inline;
      margin-right: 10px;
    }
    .active {
      font-weight: bold;
      color: blue;
    }
  </style>
</head>
<body>

  <h1>Vitajte na mojej stránke</h1>

  <ul>
    <li><a href="index.html" class="active">Domov</a></li>
    <li><a href="o-nas.html">O nás</a></li>
    <li><a href="sluzby.html">Služby</a></li>
    <li><a href="kontakt.html">Kontakt</a></li>
  </ul>

  <p><a href="https://www.google.com" target="_blank">Prejdite na Google</a></p>
  <p><a href="mailto:info@example.com">Napíšte nám e-mail</a></p>

</body>
</html>

Záver 4. časti

V tejto časti sme sa naučili, ako vytvárať rôzne typy odkazov a ako používať navigačné prvky na štruktúrovanie webovej stránky. Správna navigácia je kľúčová pre zlepšenie používateľského zážitku a pomáha vašim návštevníkom jednoducho prechádzať cez rôzne časti vášho webu.

Pokračujte v seriáli:

• 5. diel: Tvorba tabuliek v HTML.

Teraz, keď ste zvládli prácu s odkazmi a navigáciou, ste pripravení prejsť na ďalší krok – vytváranie a formátovanie tabuliek v HTML. V ďalšej časti si ukážeme, ako používať tabuľky na zobrazenie údajov na stránke.

Reklama