Zpět na seznam článků     Číst komentáře (0)     Verze pro tisk

HTML pro začátečníky 4 - Odkazy

Autor: Tomigun   
29.4.2004

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

Líbil se Vám článek?
Budeme potěšeni, pokud vás zaujme také reklamní nabídka

Social Bookmarking

     





Hodnocení/Hlasovalo: 2.25/4

1  2  3  4  5    
(známkování jako ve škole)