4. Odkazy

Při vytváření odkazu je třeba určit:

• URL dokumentu, na který bude odkaz ukazovat,
• čím bude odkaz zobrazen na stránce.

Základní podoba části zdrojového textu s odkazem je:

  <A href="URL">text odkazu</A>

V prohlížeči je potom text odkazu nějakým způsobem zvýrazněn (obvykle podtržen a zobrazen jinou barvou). URL udává buď internetovou adresu (např. http://www.fce.vutbr.cz) nebo nějaký konkrétní soubor.

Odkazy s kotvou – viz skripta.

Příklad 4.1

Následující stránky se otevřou v aktuálním okně prohlížeče. Zpět se můžeme vrátit tlačítkem Back.

Navštivte webové stránky
<A href="http://www.fce.vutbr.cz">Fakulty stavební</A>
<A href="http://www.vutbr.cz">Vysokého učení technického</A>
v Brně.

Pokud bychom chtěli, aby se dokument reprezentovaný odkazem otevřel ve specifikovaném okně prohlížeče, použijeme atribut target. Např.

  <A href="URL" target="napoveda"> text odkazu </A>

zobrazí dokument specifikovaný jeho URL v okně se jménem napoveda. Pokud toto okno neexistuje, tak se otevře nové. Speciální hodnota atributu target="_blank" nám dokument zobrazí v novém nepojmenovaném okně. Atribut target nachází své uplatnění především u dokumentů s rámy (viz skripta).

Příklad 4.2

Následující dokumenty se otevřou vždy v novém okně prohlížeče.

Navštivte webové stránky
<A href="http://www.fce.vutbr.cz" target="_blank">Fakulty stavební</A>
<A href="http://www.vutbr.cz" target="_blank">Vysokého učení technického</A> v Brně.

Příklad 4.3

Hypertextový odkaz může být též reprezentován obrázkem. Předpokládejme, že ve složce images, která je podsložkou aktuální složky, máme uložen obrázek znak_vut.gif. Poznamenejme, že atribut alt značky <IMG> zamezí případným problémům uživatelů, kteří mají vypnuté zobrazování obrázků (hodnota tohoto atributu se potom zobrazí jako nápovědný text).

<A href="http://www.vutbr.cz" target="_blank">
<IMG src="images/znak_vut.gif" alt="VUT Brno"></A>

Příklad 4.4

Pokud bychom chtěli potlačit automatické orámování obrázku, který je hypertextovým odkazem, nastavíme hodnotu atributu border značky <IMG> na nulu.

<A href="http://www.vutbr.cz" target="_blank">
<IMG src="images/znak_vut.gif" border="0" alt="VUT Brno"></A>

Příklad 4.5

Hypertextový odkaz může ukazovat i na nějaký lokální dokument – např. jinou HTML stránku, obrázek apod. Předpokládejme, že ve složce images, která je podsložkou aktuální složky, máme uložen obrázek pernstejn1.jpg.

Hrad <A href="images/pernstejn1.jpg">Pernštejn</A>, skrytý v lesích
východního okraje Českomoravské vrchoviny, patří k nejvýznamnějším
a nejkrásnějším moravským hradům.

1. Označte myší zdrojový text libovolné ukázky.
2. Vybraný text zkopírujte do clipboardu.
3. Klikněte myší do textového pole uvedeného níže a text sem z clipboardu vložte.
4. Zdrojový text můžete libovolně upravit.
5. Poté klikněte na tlačítko Ukázat. V okně náhledu se vám zobrazí dokument, jehož zdrojový text byl zapsán v textovém poli.
6. Pokud je třeba, aby se dokument otevřel v novém okně, stačí kliknout na tlačítko Ukázat v novém okně.
7. Tlačítkem Vybrat vše se označí veškerý text zapsaný v textovém poli.
8. Tlačítkem Smazat můžete obsah celého textového pole vymazat.

Náhled: