Vytváranie hypertextových odkazov

Úvod Odkazy na rovnakú stránku Odkazy na mail

Úvod

Hypertextové odkazy sú odkazy na stránky, obrázky alebo dokumenty na ktoré sa chceme odkázať.

Hypertextové odkazy vytvárame kontajnerovým elementom <a>. Nikdy nevkladajte jeden odkaz do druhého. Povinným atribútom elementu <a> je href, ktorý má hodnotu URL odkazovanej veci. URL čiže adresa dokumentu, ktorý chceme použiť, musíme ešte uzavrieť do úvodzoviek ("").

Príklad:

<a href="http://www.ycon.org">YcoN – tvorba stránok</a>

YcoN – tvorba stránok

Odkaz nemusí byť len konkrétna www stránka(www.ycon.org) ale môže to byť aj odkaz na vašu stránku niekde v priečinku, kde budete mať texty o vás. Tým nemyslím hlavnú stránku.

Hlavná stránka, ktorú zapisujeme v našom prípade ako index.html sa používa všeobecne pre všetky servre. Väčšina servrou má za úlohu po zadaní cesty napríklad www.ycon.org zobraziť stránku s názvom index.html, index.htm, index.php, ktorá je uložená na serveri. Ďalšie potrebné texty o tejto téme sa dozviete na odkaze ako zavesiť stránku na internet.

Teda ak máme uloženú stránku onas.html v tom istom priečinku ako index.html môžeme adresu stránky zadať priamo ako v nasledujúcom príklade:

<a href="onas. html">O nás</a>

O nás

Odkazy na rovnakú stránku

Odkazy na rovnakú stránku vytvárame vtedy, keď máme stránku s veľa sekciami a chceme aby užívateľ vedel čo sa v našich sekciách nachádza. Poprípade keď ho nadpis zaujme aby sa tam mohol po kliknutí premiestniť. Funguje to podobne ako vo Worde zoznam(obsah).

Ako prvé si musíte označiť sekciu stránky na ktorú chceme odkazovať. Takýto odkaz vznikne vložením elementu <a> a v ňom atribútom name. Názov sekcie môže byť ľubovoľný, ale nemôže začínať číslicov ako napríklad 12, ale naopak môže obsahovať pomlčku (-), podtržník(_), bodku(.) a dvojbodku(:). Napríklad sekcia.1, S12 sú správne.

Sekcia na ktorú budeme odkazovať

<a name="aktualizacia">Aktualizácia</a>
<p>16.1.2007</p>

Aktualizácia

16.1.2007

Keď máme označenú sekciu môžeme vytvoriť odkaz na ňu. Odkaz vytvoríme rovnako ako klasický odkaz s tým rozdielom že do atribútu name vložíme pred meno sekcie na ktorú chceme odkazovať (mriežku)# na začiatok.

<a name="#aktualizacia">Aktualizácia</a>

Tieto odkazy môžete vidieť aj na mojej stránke ako tie tlačítka „hore“, ktoré postačení vás premiestnia na vrchnú časť stránky.

<a name="hore"/>

- týmto elementom označíme vrch stránky a vložím ho hneď pod otváracím tag <body>, aby sa stránka zobrazila úplné celá.

<a href="#hore">Hore</a>

- týmto elementom odkážeme aby po kliknutí prešiel na vrch stránky.

Ale často krát sa stane, že potrebujete odkázať na inú stránku a to priamo na sekciu. Jednoducho za URL pridáte #sekcia.

<a name="www.ycon.org/index.html#aktualizacia">Aktualizácia</a>

Odkazy na mail

Odkazy na mail vidíme skoro na každej lepšej stránke. Sú dva typy odkazov na mail jedni sú pomocou HTML a programu návštevníka(Outlook) alebo pomocou formulára v HTML či dokonca PHP. Teraz si preberieme spôsob prvý čiže pomocou HTML a programu návštevníka, lebo je asi najjednoduchší. Jednoducho zoberieme element <a> a do atribútu href vložíme formulku mailto: za ktorou bude nasledovať mailova adresa, na ktorú sa mail odošle.

<a href="mailto:ycon@ycon.org">Moj mail</ a>

Ako asi každý vie pri písaní mailov by sme mali písať predmet správy. V HTML kóde ho zapisujme ako atribút title tým pádom správny odkaz na mail by mal vyzerať takto:

<a href=mailto:ycon@ycon.org title="Odkaz zo stránky">Moj mail</ a>

Odkazy ako obrázok

Do elementu <a> môžeme uzavrieť ľubovoľný text ale aj obrázok. Určite ste si všimli že keď uzavriete text do elementu >a> tak sa zmení svoje formátovanie. Poväčšine je modré a podčiarknuté. Toto isté sa stane aj s obrázkom.

Keď uzavrieme obrázok do elementu <a> vznikne okolo obrázka modrý rámik. Tieto zmeny sa dejú preto aby návštevník vedel že sa jedná o odkaz. Všetky tieto zmeny sa dajú zmeniť. Ak by vás zaujímalo ako na to stačí si prečítať nejaký článok o CSS a o zmenách v hypertextových textoch. Jednoduchý obrázok pripojíme následovne:

<a href="#hore"><img src="hore.jpg" /></a>

Viac o obrázkoch sa dozviete v tlačítku grafika stránky/obrázok.

Odkaz v novom okne

Hypertextový odkaz môžeme otvoriť aj v novom okne prehliadača. Túto maličkosť dosiahneme atribútom target(cieľ) do ktorého vpíšeme hodnotu _blank – v čistom okne. Takéto odkazy väčšinou tvoríme keď chceme odkázať na inú stránku.

<a href="www.ycon.org" target="_blank">YcoN – tvorba stránok</a>

Partneri:

Horoscope