odkazy

Odkazy

<a href="cílová stránka nebo soubor">text nebo obrázek na který klikneme</a>

Odkaz je první značka, u které budeme používat specifické parametry:

href - stránka, která se má zobrazit po kliknutí na odkaz, případně obrázek nebo jiný soubor, jenž se má otevřít či stáhnout
title (nepovinný) - titulek zobrazující se po najetí myší
target (nepovinný) - pouze pro otevření do jiného okna

Příklady html kódu odkazů v menu, v textu, na obrázcích, tlačítkách apod.

Odkazy mohou být umístěny:

v bloku - řádkové či sloupcové menu
```
<nav>
  <a href="index.htm">Úvod</a>
  <a href="pyramidy.htm">Pyramidy</a>
  <a href="zahrady.htm">Visuté zahrady</a>
</nav>
```
Odkazy tvořící sloupcové menu mohou být pod sebou, aniž by bylo nutné použít značky pro ukončení řádku, mohou být zobrazeny s odrážkami, aniž by byly vloženy do položek skutečného seznamu, odkazy tvořící řádkové menu mohou vypadat jako tabulka, aniž by byly vloženy do skutečné tabulky, mohou mít obrázek na pozadí vytvářející dojem tlačítka apod. Toto vše lze zajistit pomocí CSS.
v textu - v odstavci, v nadpisech, v seznamech, v tabulkách, apod.
```
<p>Nejstarším ze <a href="index.htm">sedmi divů</a> jsou pyramidy.</p>
```
Formát a způsob zobrazení lze nastavit ve stylech. Odkazy v navigačním menu mohou mít jiný styl než odkazy v textu. Pro tento účel se využívá kontextuální definice stylů - definice stylu značky umístěné uvnitř jiného prvku.

na obrázcích, tlačítkách, apod.

<a href="mapa.gif"><img src="mapka.gif" width="300" height="200" alt=""></a>
<a href="tisk.htm" title="Klikněte pro vytištění">
  <input type="button" value="Tisk">
</a>

mohou otevírat obrázky či jiné soubory (např. pdf) do nového okna prohlížeče (parametr target) a mohou být doplněny titulkem (parametr title)

<a href="mapa.gif" target="_blank" title="Kliknutím mapu zvětšíte">
  <img src="mapka.gif" width="300" height="200" alt=""></a>
<a href="navod.pdf" target="_blank" title="Soubor pdf">Návody</a>

Ukázka odkazů v menu, v textu a na obrázcích webové stránky Divy světa

Navigační menu webu

Odkazy na jednotlivé stránky webu umístíme do navigačního bloku nav.

Tyto odkazy mohou být zobrazeny vedle sebe (řádkové menu) nebo pod sebou (sloupcové menu). Jejich uspořádání, velikost, barvy a další vlastnosti určujeme pomocí CSS stylů.

One-page web - href #

Jedním z trendů současného webdesignu je tvorba webových stránek, kde jsou informace uloženy na jedné stránce pod sebou místo na samostatných html stránkách. Tento způsob se hodí pro weby, které obsahují stručné informace doplněné např. obrázky a ikonami.

Po kliknutí na odkaz v menu obvykle dojde k plynulému odrolování dolů na příslušnou část. Plynulé rolování provádí JavaScript, hypertextový odkaz umí „přeskočit” na příslušné místo stránky, tedy prvek označený pomocí parametru id.

Vytvoření odkazu na určité místo stránky

Prvek stránky, na který chceme odkazovat, označíme pomocí parametru id, např.:
<h2 id="socha">Diova socha</h2>
Odkaz na toto místo pak bude:
<a href="historie.htm#socha">Historie - Zeus</a>

ve stránce historie.htm může být odkaz zkráceně:
<a href="#socha">Historie - Zeus</a>

Cíl odkazu - href

Kliknutím na odkaz může být otevřena:

html stránka
<a href="pyramidy.htm">Pyramidy</a>
obrázek
<a href="mapa.gif">mapa</a>
jiný soubor - některé typy souborů prohlížeč otevře (např. pdf), ostatní jsou ke stažení
<a href="file:///web.zip">soubor ke stažení</a>

Absolutní a relativní cesta k cíli odkazu

Absolutní cesta - pouze pro odkazy na jiný web:
<a href="http://www.owebu.org">Vše o webu</a>
Relativní cesta - pro odkazy v rámci téhož webu:
<a href="html/odkazy.htm">Odkazy</a>

Příklady relativní cesty

Bude-li struktura webu např.:
download/ stahni.htm, mapa.gif, web.zip
images/ foto01.jpg, foto02.jpg, foto03.jpg
index.htm
historie.htm
Pak ve stránce index.htm bude:
odkaz na stahni.htm <a href="download/stahni.htm">Stáhni</a>
odkaz na foto01.jpg <a href="images/foto01.jpg">fotografie 1</a>
Ve stránce stahni.htm, která je ve složde download, bude:
odkaz na index.htm <a href="../index.htm">Úvod</a>
odkaz na foto01.jpg <a href="../images/foto01.jpg">fotografie 1</a>

../ znamená o úroveň výš, tedy do nadřazené složky.
../../ o dvě úrovně výš, atd.

Titulek odkazu - title

Titulek se zobrazí při najetí myši na odkaz. Jeho zadání je nepovinné.

<a href="mapa.gif" title="Mapa uspořádání států ve 2.st. př.n.l.">mapa</a>

Ukázka: mapa

Cílové okno otevřeného odkazu - target

Otevření odkazu do nového okna

Odkaz může být otevřen:

do téhož okna - obvyklé odkazy na další stránky webu - parametr target se neuvádí
do nového okna - odkazy na samostatné obrázky či na jiný web - target="_blank"
<a href="images/foto_01.jpg" target="_blank">fotografie 1</a>
<a href="http://www.jakpsatweb.cz/htm/obrazky.html" target="_blank">Jak psát web</a>
Pozn.: Otevření obrázku na popředí stránky a plynulé prohlížení fotografií můžeme lépe vyřešit pomocí JavaScriptu.