Pátý díl kurzu o HTML, který je zaměřený na tvorbu odkazů pro webové stránky. Naučíme se odkazovat na jiný server, na jiné místo v dokumentu a vysvětlíme si všechny používané parametry tagu A (anchor).

Co je to odkaz?

Odkaz vlastně definuje prvek, který je umístněný v HTML stránce a který přímo vede k prvku jinému – například k jiné HTML stránce či nějakému souboru. Odkaz funguje tak, že návštěvník stránky na něj klikne a v tomto okamžiku se začne do prohlížeče načítat webová stránka, či stahovat soubor, který je definován právě v tomto odkazu.

Odkaz se definuje pomocí párových tagů, které jsou stejně jako jiné tagy uzavřeny ve špičatých závorkách. Nejčastěji používaná syntaxe je následující:

<a href="odskok_nekam_jinam" name="odkaz_na_stejný_dokument" title="název_odkazu" target="jméno_cíle_odkazu" rel="dopředný_odkaz" rev="zpětny_odkaz">Samotný odkaz</A>

Jak vidíte, syntaxe je docela jednoduchá. Mimo výše uvedené parametry existují například i parametry REV="zpětný_odkaz" a REL="dopředný_odkaz", které se ovšem v praxi vůbec nevyužívají a proto se jimi nebudeme ani zabývat.

Odkaz na externí soubor

Odkazem na externí soubor se myslí jakýkoliv soubor umístněný kdekoli v síti Internet, tzv. že se může nacházet třeba na vašem serveru či na serveru jiném. Uvedeme si několik příkazů odkazů:

Toto je pokusný text, jehož <a href="stranka1.htm">odkaz</a> vede k otevření nové HTML stránky pojmenované jako "Stránka1".

Toto je pokusný text, jehož odkaz vede k otevření nové HTML stránky pojmenované jako "Stránka1" – odkaz na jiný dokument

Toto je pokusný text, jehož <a href="stranka1.zip">odkaz</a> vede k otevření dialogového okna, kde je vám nabídnuto, zdali uvedený soubor uložit nebo spustit.

Toto je pokusný text, jehož odkaz vede k otevření dialogového okna, kde je vám nabídnuto, zdali uvedený soubor spustit nebo uložit. – odkaz na soubor

Odkaz na místo ve stejném dokumentu

Toto je pokusný text, jehož <a href="#zacatek">odkaz</a> vede k narolování prohlížeče na začátek článku

Toto je pokusný text, jehož odkaz vede k narolování prohlížeče na začátek článku – odkaz na začátek této stránky.

Odkaz na místo ve stejném dokumentu funguje tak, že do stránky umístníte odkaz s křížkemm např. <a href="#zacatek"> a na místo, kam má tento odkaz narolovat, umístníte tag <a name="zacatek"></a>. Lze se samozřejmě odkázat i na jiné místo v externím dokumentu – např:
<a href="http://www.domena.cz/soubor.htm#zacatek">Odkaz</a> a do tohoto souboru samozřejmě umístníme tag <a name="zacatek"></a> – do prohlížeče se vám načte tato nová stránka a současně se prohlížeč nastaví na tuto část dokumentu.

K čemu slouží TITLE?

Parametr TITLE v odkazu slouží k tomu, aby se čtenář dozvěděl více podrobností o daném odkazu než na něj klikne – text se objeví při najetí kurzorem myši na odkaz. Popisek TITLE může být neomezeně dlouhý.

<a href="stranka1.htm" TITLE="Pokusná stránka číslo 1">Pokusná stránka 1</a>

Pokusná stránka 1 – podržte kurzor myši nad odkazem

K čemu slouží TARGET?

Pokud jste se již někdy setkali s www stránkou, kde po kliknutí na odkaz se vám otevřeno nové okno prohlížeče místo, aby se stránka načetla do okna prohlížeče stávajícího, to je právě uděláno parametrem Target. Jeho hodnoty jsou následující:

  • _blank – odkaz se otevře do nového okna prohlížeče
  • _top – odkaz se našte do rámce s nejvyšší prioritou. Pokud žádné není, chová se jako _self
  • _parent – odkaz se načte do okna, které je nadřízené oknu aktuálnímu. Pokud žádné není, chová se jako _self
  • _self – odkaz se v případě rámců načte do okna, ze kterého byl odkaz vyvolán.

    <a href="stranka1.htm" TITLE="Pokusná stránka číslo 1" TARGET="_blank">Pokusná stránka 1</a>

    Pokusná stránka 1 – otevře v novém okně

    Odkazy jako obrázky

    Odkazem nemusí být samozřejmě pouze text, ale i klidně obrázek. Za definicí odkazu jednoduše definujeme obrázek a uzavřeme

    <a href="stranka1.htm" TITLE="Pokusná stránka číslo 1" TARGET="_blank"><img src="obrazek.gif"></a>

    – odkaz jako obrázek

    Shrnutí na závěr

    Odkaz definuje prvek, který je umístněný v HTML stránce a který přímo vede k prvku jinému – webové stránce či k souboru. Tag <a> je samozřejmě párový, proto jej nezapomeňte ukončovat tagem </a>, jinak odkaz stále vede dále. Odkaz může vést na část dokumentu v právě otevřeném dokumentu, na dokument umístněný na jiném serveru či na soubor (např. zip), kde vám bude po kliknutí na odkaz nabídnuta možnost, zdali chcete soubor spustit nebo stáhnout. Pokud vede odkaz na obrázek, obrázek se obvykle zobrazí v samotném prohlížeči. Pokud chcete, aby odkaz vedl např. do nového okna prohlížeže, použijte parametr Target s hodnotou _blank.

    Starší komentáře ke článku

    Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

  • 5 Příspěvků v diskuzi

    1. Dobry den, muzete mi prosim poradit jak docilit tohoto:
      Toto je pokusný text, jehož odkaz vede k otevření dialogového okna, kde je vám nabídnuto, zdali uvedený soubor uložit nebo spustit.
      Zde na Vasich strankach to demnostrujete na souboru *.zip, tam to zafunguje, nicmene kdyz chci, aby se stejne choval i *.pdf soubor, nezafunguje to, aspon ne u me, ten pritroubly Explorer pozna, ze ten soubor umi zobrazit sam a zobrazi ho bez ptani, zda se ma ulozit nebo zobrazit. Nevite, jak mu prikazat, aby se na to vzdy zeptal?
      Dekuji, David

    2. Mám dotaz,
      potřebuji odkaz na jednu stránku kvůli efektivnímu použití přesměrovat ne do nového okna (target=“_blank“), ale na novou kartu (do nové záložky). V targetu to ale nejde (nenašel jsem to). Potřebuji tedy šikovný javascript, který neznám…
      Poraďte

    3. Mám problém…
      Vytvořil jsem si v hlavní html složce podsložku (adresář). Do něj jsem po zjištění situace umístil všechny css a designové složky, ale jak to udělat, abych se z podsložky dostal o úroveň výš? Předem děkuji za pomoc…

    4. CRJ: nevim, zdali vam rozumim, ale pokud mate strukturu /root/podlozka a v rootu mate HTML stranku a chcete se odkazat na CSS soubor v podlozce, URL bude „root/podlozka/soubor.css“.

      Pokud mate ten HTML soubor v te podlozce a chcete se opet odkazat na CSS, pak to bude jen „soubor.css“ (protoze HTML soubor je ve stejnem podadresari).

    Odpovědět