HTML pro začátečníky 4 - Odkazy
Zdroj: SOOM.cz [ISSN 1804-7270]
Autor: Tomigun
Datum: 29.4.2004
Hodnocení/Hlasovalo: 2.25/4
Odkazy (linky, hyperlinky) jsou prvky, bez kterých by internetové prezentace takřka
nemohly existovat. Jsou nutností pro provázání jednotlivých stránek na webu, potažmo
i na celém internetu...
Odkazy (linky, hyperlinky) jsou prvky, bez kterých by internetové prezentace takřka
nemohly existovat. Jsou nutností pro provázání jednotlivých stránek na webu, potažmo
i na celém internetu. Jejich využití ovšem sahá mnohem dál, např. odkazy na soubory,
zasílání e-mailů atd. HTML samozřejmě na toto pamatuje a přináší nám vcelku jednoduchý
způsob "přeměňování" prvků na odkazy. My se na něj nyní podíváme.
Tvoření odkazů
Aby se daný prvek stal odkazem, je nutné ho uzavřít do párové značky
<a href></a>,
kde A je vlastní značka a HREF parametr definující cíl, na který značka odkazuje.
Hodnotou parametru HREF může být jakýkoli binární soubor (videoklip, ZIP archiv, aj.)
nebo URL. Pokud budeme na naší stránce např. potřebovat odkaz na jiný HTML dokument,
bude vypadat takto:
<a href="stranka.html">Toto je odkaz na další stránku</a>
Text, který je uzavřen mezi počáteční a ukončovací značkou, se v prohlížeči zobrazí
jako odkaz - standardně bude podtržen a zobrazen modře, pokud barvu nezměníte ve
značce BODY. Když na tento text kliknete, načte prohlížeč do aktuálního nebo definovaného
okna (viz dále) soubor
stranka.html, pokud se nachází v aktuálním adresáři.
Odkazem může být i obrázek či kombinace textu a obrázku. Syntaxe je:
<a href="stranka.html">
<img src="obr.gif">
</a>
Daný obrázek bude kolem sebe mít rámeček o šířce dvou bodů, pokud to nezakážete
parametrem
border="0" ve
značce IMG.
Je třeba poznamenat, že text ohraničený značkou A může být jakýmkoli způsobem
dostupným v HTML formátován, nebude na něj mít vliv pouze nastavení barvy značkou FONT,
protože ta je definována parametrem LINK ve značce BODY.
S těmito znalostmi již můžeme vytvořit jednotlivé stránky našeho webu a provázat
je pomocí odkazů. Aby to bylo účelné, musíme samozřejmě v každém dokumentu uvést
odkazy na ostatní, aby nebylo nutné se vždy vracet na stránku s odkazy. Toto se dá
vyřešit pomocí rámů, ale ty popíšu až v některé další lekci.
Typy odkazů
Odkaz na soubor
Toto téma jsem začal v předešlé kapitole, kde šlo o soubor
stranka.html, který
se nacházel ve stejném adresáři jako stránka, na níž byl umístěn odkaz. Pokud se cílový
soubor nachází v jiném adresáři, je třeba definovat cestu:
<a href="/data/texty/stranka.html">Odkaz</a>
Může však jít i o stránku na jiném serveru, v tom případě cestu definujeme pomocí URL:
<a href="http://www.web.cz/data/texty/stranka.html">Odkaz</a>
Když kliknete na tento odkaz, načte se do prohlížeče soubor
stranka.html na
internetovém serveru
www.web.cz v adresáři
data/texty/.
Tento odkaz:
<a href="http://www.web.cz">Odkaz</a>
zobrazí titulní stránku daného serveru.
Dalším typem odkazu je binární soubor, tedy jakýkoli soubor, který není stránkou HTML:
<a href="soubor.zip">Odkaz</a>
Pokud na takovýto odkaz kliknete, zobrazí se dialogové okno s dotazem, co má
prohlížeč se souborem udělat. Pokud zvolíte uložení na disk, soubor se začne z
internetového serveru stahovat.
Ještě jedno upozornění - v parametru HREF definujte pouze relativní cestu, tedy takovou,
která se vztahuje na umístění cílového souboru vzhledem ke stránce s odkazem.
Elektronická pošta z prohlížeče
Často budete potřebovat, aby vám návštěvníci stránky mohli poslat e-mail. Toho dosáhnete
použitím odkazu s definovanou elektronickou adresou parametrem HREF. Obecná syntaxe
je:
<a href="mailto:e-mail">Odkaz</a>
přičemž "e-mail" definuje elektronickou adresu, tedy např.:
<a href="mailto:admin@web.cz">Odkaz</a>
Po kliknutí na odkaz předá prohlížeč e-mailovou adresu klientu el. pošty, který
je nastaven jako výchozí na počítači návštěvníka.
Odkaz na jiné místo v dokumentu
Někdy musíme vyřešit situaci, jak se orientovat v dlouhém dokumentu. HTML nám
naštěstí umožňuje odkázat se na jiné místo na té samé stránce.
Na začátek uvedu jednoduchý příklad takovéto struktury, kterou následně vysvětlím:
<body>
<a href="#kapitola1">Instalace programu</a><br>
<a href="#kapitola2">Obsluha programu</a><br>
...
<a name="#kapitola1"></a>
<h1>Instalace programu</h1>
...
<a name="#kapitola2"></a>
<h1>Obsluha programu</h1>
...
</body>
Nahoře jsou odkazy na jednotlivé kapitoly. Jak je vidět, definují se podobně jako
odkazy na externí soubory, jen se před ně přidá znak
# a následuje název kapitoly.
Někde ve zdrojovém kódu pak musí existovat zarážka ve tvaru
<a name="#nazev_kapitoly"></a>,
kterou po kliknutí na odkaz prohlížeč vyhledá a od ní stránku zobrazí. Dovnitř
této značky se obvykle nic nedává - slouží pouze jako zarážka.
Další parametry odkazů
Zde se zmíním o dvou parametrech - TITLE a TARGET.
Parametr
title slouží k
definování doplňkového komentáře odkazu, což je bublinka, která se může zobrazit
nad odkazem podobně jako popiska u obrázku. Hodnotou parametru je samozřejmě text
bublinky. Pokud je odkazem obrázek, má v zobrazování přednost jeho popiska.
Parametr
target více popíšu
v lekci o rámech, zde uvedu pouze použití v případě, že chcete, aby se po kliknutí
na odkaz otevřela cílová stránka v novém okně. Toho dosáhnete uvedením
target="_blank"
S odkazy již umíme pracovat, v další lekci popíšu práci s tabulkami.
Tomigun