Stručný úvod do jazyka HTML
Vkládání hypertextových odkazů
 Tisk

Vkládání hypertextových odkazů


Že nevíte, co je to hypertextový odkaz neboli hyperlink? Ale ano, víte, jen to většinou nazýváte odkazy. Ano, není to nic složitějšího, pouhý odkaz.


Hypertextový odkaz (hyperlink) může odkazovat na jinou část téže stránky nebo na jinou stránku. Hypertextový odkaz je vymezen párovou značkou <a> </a>. Text, který je napsán mezi počáteční a koncovou částí značky bude po zobrazení v prohlížeči oproti okolnímu textu barevně zvýrazněn, podtržen a po najetí ukazatelem myši na tento text se změní tvar ukazatele. Tento implicitní formát textu můžeme samozřejmě měnit, např. pomocí značek, které byly uvedeny dříve.


Odkazy v rámci jedné stránky

Tyto odkazy se používají například pro zpřehlednění „dlouhých“ stránek. V takovém případě na začátku stránky uvedete stručný „obsah“. Z jednotlivých položek pak odkážete na příslušné části stránky.Dalším užitím mohou být např. poznámky pod čarou.


Jak na to?

Nejprve je nutné označit v textu místo, na které budete odkazovat. Tomuto místu říkáme záložka. Pro definování záložky používáme značku <a> </a> s atributem name. Hodnotou tohoto atributu je text (jméno záložky). Situace je ilustrována ukázkou vlevo.


V tomto případě nejprve definuji na začátku dokumentu záložku zacatek a na konci dokumentu záložku konec takto:


<a name="zacatek"> </a>

<a name="konec"> </a>


Jestliže máte definovány záložky, můžete na začátek stránky (do „obsahu“) napsat hypertextové odkazy na tyto záložky. Opět použijte značku <a> </a>, tentokrát se dvěma atributy. První z nich - href - určuje cíl hypertextového odkazu. V našem případě zadáte jména záložek #konec a #zacatek. Aby prohlížeč poznal, že se jedná o záložku, a ne o jinou stránku, musí být před jménem záložky uveden znak #. Druhým atributem je title, jehož hodnotou je popisek, který se objeví po najetí ukazatelem myši nad text odkazu.


A ted již náš příklad:

<a name="zacatek"> </a>


Hyperlink pro skok na konec:

<a href="#konec" title="Informace o..."> Skok na konec </a>

<br><br><br><br><br><br><br><br><br><br><br>

<br><br>


Hyperlink pro skok na zacatek:

<a href="#zacatek" title="Informace o...">

Skok na zacatek </a>

<a name="konec"> </a>


Viz. ukázka


Značky <br> jsou do příkladu zařazeny proto, aby byl vidět efekt „skoku“ na konec (resp. začátek) dokumentu.


Odkazy v rámci různých stránek

Při vytváření hypertextového odkazu na jinou stránku zadejte jako hodnotu atributu href adresu příslušné stránky. Situaci ilustruje příklad

První hypertextový odkaz využívá absolutní URL adresu (včetně cesty), druhý relativní adresu. Rozdíl je v tom, že relativní adresa se vztahuje k aktuální adrese právě zobrazované stránky. V našem příkladu to znamená, že stránka se nachází v aktuální složce příslušného WWW serveru.

Poznámka:

Budeme velmi stručně ilustrovat problematiku absolutních a relativních hypertextových odkazů.

Odkaz umístěný ve stránce index.htm

<a href="osobni.html">Osobní stránka</a>

Takto napsaný relativní odkaz hledá stránku osobni.htm v téže složce jako je stránka, z níž odkazujeme.

Odkaz umístěný ve stránce index.htm.

<a href="karel/osobni.html">Osobní stránka</a>

Takto napsaný relativní odkaz hledá stránku osobni.html ve složce, která je podsložkou, v níž se nachází stránka z které odkazujeme.

Odkaz umístěný ve stránce index.htm.

<a href="../../osobni.html">Osobní stránka</a>

Pomocí dvou teček a lomítka naopak stoupáme ve struktuře složek vzhůru. Tento příklad tedy znamená, že prohlížeč bude stránku osobni.htm hledat o dvě složky výše než je stránka, z níž na ni odkazujeme.

Absolutní odkazy používejte při odkazování mimo váš web, relativní používejte při odkazech v rámci vašeho webu.


A dá se to zkombinovat?

Může se stát, že se chcete odkázat na nějakou část jiné stránky. V tomto případě přidáte za URL adresu stránky jméno záložky včetně znaku #. Například chcete-li odkázat na záložku poznamka na stránce soubor.htm, lze napsat:


<a href="soubor.html#poznamka" title="Informace o…">text odkazu</a>


Viz. ukázka


Jde to ještě úplně jinak?


Odkaz na email

Jako cíl hypertextového odkazu lze uvést také odkaz na adresu elektronické pošty:


<a href="mailto:vrbik@kvd.zcu.cz">Připomínky</a>


V tomto případě se spustí poštovní program nainstalovaný ve Windows jako primární a je možno rovnou psát text zprávy.


Odkaz na soubor

Kromě elektronické pošty a WWW stránky může být odkazem také jakýkoli jiný soubor, např. archiv.zip. Rozdíl je v tom, že zatímco stránka je načtena a zobrazena, v tomto případě se zobrazí dialogové okno pro stažení souboru a je možno provést stažení souboru a uložení na lokální disk nebo spuštění přímo z internetového serveru (např. pokud budete odkazovat na soubor s příponou doc a na vašem PC bude nainstalovaný MS Word).


Příslušný HTML kód je:


<a href="archiv.zip">Stáhněte si z archivu</a>


Viz.

Obrázek jako odkaz

V předchozích případech byl vždy ve značce <a> </a> uveden text hypertextového odkazu. To, co prohlížeč zobrazí jako hypertextový odkaz, může být kombinace textu a obrázku, nebo jen obrázek, nebo jakýkoliv jiný objekt.


Pokud chcete, aby odkazem byl obrázek, napište:


<a href="http"//www.zcu.cz">

<img src="znak_zcu.png">

</a>


Ilustrace je na ukázce    vlevo.

V tomto případě je soubor s obrázkem uložen ve stejné složce jako aktuální stránka. Lze uvést absolutní nebo relativní cestu, tedy např. „obrazek.jpg“ nebo „http://www.nasweb.cz/obrazek.jpg“. O vkládání obrázků je podrobnější zmínka v článku Vkládání obrázků.