Home » Školení » Tvorba WWW – HTML » Hypertextové odkazy

Hypertextové odkazy

Hypertextové odkazy jsou v podstatě to, co dělá internet internetem. Odkazy se starají o pohyb mezi stránkami, pohyb v rámci jedné stránky a umožňují vyvolávat různé akce.


a

Odkaz (z angl.anchor). Vše, co je mezi značkami <a> a </a> bude sloužit jako odkaz (tzn. bude klikatelné).

<a href=“index.html“>Hlavní stránka</a>

se zobrazí jako klikatelný nápis Hlavní stránka. Uvnitř elementu se může objevit skoro cokoliv (např. obrázek, který tak bude celý sloužit jako odkaz). Uvnitř odkazu nesmí být:

  • další odkaz (tag <a>),
  • formulář (tag <form>),
  • tabulka (ta<gtable>) uvnitř odkazu nefunguje jako odkaz a podobně se mohou chovat i jiné složité tagy.

Atributy

  • href: cíl odkazu = URL
  • name: jméno záložky = libovolné jméno
  • target: cílový rám = jméno rámu
  • rel:druh odkazu = několik vyjmenovaných hodnot
  • hreflang: jazyk cíle = kód jazyka
  • ping: měření prokliků = sledovací adresa

Odkaz na stránku

Tag pro odkazy je velmi jednoduchý: <a>. Do parametru href zadáme cestu k souboru. Takže syntaxe by mohla vypadat následovně:

<a href=“stranka.htm“>odkaz na stránku</a>

Ohraničený text zmodrá, zobrazí se podtržený a při najetí se kurzor změní na pacičku. Kliknutím se otevře soubor zadaný v parametru HREF. Pro zadání cesty platí stejná pravidla jako u obrázků a zrovna tak jako obrázek, i odkaz může mít svou popisku.

<a href=“stranka.htm“ title=“popiska“>odkaz na stránku</a>

Dále se dá nastavit místo otevření cíle a to pomocí parametru TARGET, který nabývá hodnot _top, _blank a „název“.

<a href=“stranka.htm“ target=“_top“>odkaz na stránku </a>
<!– stránka se otevře v tom samém okně –>
<a href=“stranka.htm“ target=“_blank“>odkaz na stránku </a>
<!– stránka se otevře v novém okně –>
<a href=“stranka.htm“ target=“nazev“>odkaz na stránku </a>
<!– definovatelné, pouze pokud používáte rámy (frames), ke kterým se dostaneme –>

Pokud odkazujete na jinou webovou stránku, nesmíte zapomenout vyplnit adresu kompletní, to znamená včetně http:// na začátku. V opačném případě si bude HTML myslet, že hledaný soubor je u vás na webu, což skončí samozřejmě chybou.

Odkaz na soubor

Musíte si uvědomit, že mezi *.html souborem, archívem ZIP nebo herním instalátorem není v podstatě žádný rozdíl. Pouze když napíšete do prohlížeče adresu html souboru, tak ho prohlížeč umí zobrazit a zobrazí ho. V ostatních případech nabídne soubor ke stažení. Proto odkaz na soubor vytvoříte úplně stejně, jako odkaz na jinou webovou stránku. Do parametru HREF zadáte cestu k danému souboru.

<a href=“soubor.zip“>odkaz na soubor </a>

Prohlížeč ovšem umí zobrazovat i jiné soubory než html. Mezi ty patří třeba obrázky, proto pokud klepnete na odkaz vedoucí na obrázek, s největší pravděpodobností se vám místo stáhnutí zobrazí. Obejít se to dá klepnutím pravým tlačítkem na soubor a vybráním Uložit odkaz/cíl jako. Na tento fakt se v některých případech vyplatí upozornit i uživatele vašeho webu, pokud jim nabízíte obrázky ke stažení.

Kotvy

Kotvy odkazují na konkrétní místa na té samé nebo jiné stránce.

<a href=“#nazevkotvy“>Odkaz</a><a name=“nazevkotvy“>Kotva</a>

Druhý řádek vytváří kotvu (může i nemusí obsahovat titulek), tedy místo na které se snažíme odkázat. A ten první je samotný odkaz (ten samozřejmě titulek obsahovat musí, jinak by nebyl vidět). Je zde ještě druhá možnost, jak definovat kotvy, a to pomocí jednoznačné identifikace elementu, k čemuž využijeme parametr ID. ID můžete přidělit jakémukoliv prvku na stránce.

<div id=’komentar535′>nějaký komentář </div>

Identifikátor musí být unikátní pro jednu stránku, nesmí se opakovat pro více prvků. Pro NAME platí to samé, v praxi ale nedodržení tohoto pravidla dokáže napáchat mnohem větší neplechu u ID. Jeho využití je velice hojné, nejen v případě kotev.

Odkaz na toto se vytvoří stejným způsobem <a href=’#komentar535′>odkaz</a>. Této kotvě se říká spíše fragment a to proto, že na rozdíl od kotvy neukazuje na jedno místo na stránce, ale definuje rovnou celý útržek stránky. Oba způsoby fungují naprosto ekvivalentně, nicméně používání fragmentů opět zlepšuje logickou strukturu stránky.

Obrázek jako odkaz

Opět velmi jednoduché. Do tagu <a> vložte místo titulku obrázek pomocí tagu <img>. Pokud tak učiníte, zjistíte, že se kolem obrázku vytvořil modrý rámeček. Ten zrušíte parametrem BORDER, kterému dáte hodnotu 0.

<a href=“stranka.htm“><img src=“obrazek.jpg“ border=“0″></a>

Formátování odkazů

Odkazy se dají formátovat úplně stejně jako normální text. Tedy pomocí tagu <font>.

<font color=“red“ size=“5″ face=“arial“>
<a href=“stranka.htm“><b>odkaz na stránku</b></a>
</font>

Tento odkaz bude tlustě, arialem, velikostí 5, ale překvapivě bude pořád modrý. Je to tak standardně nastavené kvůli odlišení od ostatního textu. Tímto způsobem s tím nic nenaděláme, ale pomocí CSS se toho dá ovlivnit ještě mnohem více.