HTML pre začiatočníkov - odkazy a obrázky, 4.diel

Chcete vedieť do stránky vkladať obrázky a hypertextové odkazy? Alebo ich chcete spolu rovno kombinovať. Ak áno, tak si prečítajte tento diel seriálu o HTML.

Vkladanie obrázkov a odkazov v HTML je ďalšou základnou požiadavkou programátora internetových stránok.

Odkazy

Hypertextové odkazy nás vždy presmerujú na požadované URL. Povedzme, že URL vašej stránky je http://www.moja-stranka.sk/. Ak niekto príde na vašu stránku automaticky by mal byť presmerovaný na súbor index.html(iba, ak predpokladáme základné nastavenia). URL dostane tvar: http://www.moja-stranka.sk/index.html. Ak však na stránku umiestnime odkaz, ktorého zdrojový kód má vyzerať nasledovne:

<a href="http://www.moja-stranka.sk/odkaz.html">Odkaz</a>

Tak by nás mal odkázať na súbor odkaz.html kde už môžete váš kód stránky zmeniť. V odkaze som uviedol celé URL ale nieje to nutné. Taktiež je lepšie používať odkazy v tvare:

<a href="odkaz.html">Odkaz</a>

Ak by sme odkaz však na servere mali uložený povedzme v zložke odkazy vyzeral by nasledovne:

<a href="odkazy/odkaz.html">Odkaz</a>

Alebo je tu ešte možnosť vypísať celé URL ale je to úplne zbytočné a tak budeme používať iba odkazy priamo na súbory uložené na servere. Odkazy s URL použijeme ak budete chcieť odkázať na nejakú inú stránku. Príklad je uvedení hore ako prvý iba stačí zadať URL inej stránky ako je vaša a odkaz je funkčný. Odkazom môžeme ešte pridať atribúť target. Target môže obsahovať nasledujúce hodnoty:
_blank - stránka sa otvorí v novom okne
_parent - stránka sa otvorí vo frame v ktorom je odkaz použitý
_self - stránka sa otvorí v nových framoch a zruší úroveň framov
_top - stránka sa otvorí v tom istom okne ako je otvorená bez framov

O framoch si budeme rozprávať v ďalších častiach ale ich používanie neodporúčam. Ak chcete použiť atribút target stačí použiť nasledujúci zdrojový kód:

<a href="odkaz.html" target="_blank">Odkaz</a>

---

Obrázky

Obrázky a ich vkladanie do kódu je možné jednoducho pomocou tohoto kódu:

<img src="obrazok.jpg" alt="môj obrázok">

Povinné atribúty sú src čo je vlastne cesta k obrázku ak ho nemáte uložený na servery môžete použiť kľudne aj URL k obrázku. Alt slúži ako alternatívny popis k obrázku a je dôležitý. Ako? To sa dozviete v praxi, ale ak to chcete vedieť teraz navštívte rubriku SEO. Ak by ste mali problémy s obrázkom, konkrétne s jeho veľkosťou stačí mu definovať dva atribúty a to width(šírka) a height(výška). Obrázok s definovanými rozmermi musí mať nasledujúci kód.

<img src="obrazok.jpg" width="300" height="200" alt="môj obrázok">

Ako vidíte teraz obrázok dostal svoje požadované rozmery.

---

Kombinujeme

Obrázok môže byť zároveň aj odkazom ako plno iných viditeľných tagov. Obrázok a odkaz môžeme kombinovať nasledovne.

<a href="odkaz.html">

<img src="obrazok.jpg" width="300" height="200" alt="môj obrázok">

</a>

Po kliknutí na obrázok sa odkážeme na link odkaz.html. Nemožno si teraz nevšimnúť, že obrázok s odkazom má okolo seba rám, ktorý treba odstrániť a to jednoducho. Stačí do obrázku napísať atribút border.

<a href="odkaz.html">

<img src="obrazok.jpg" width="300" height="200" border="0" alt="môj obrázok">

</a>

Obrázok teraz odkazuje na stránku odkaz.html a nemá okolo seba žiadny rám.

Nabudúce si ukážeme čo to je validita a prečo by sme ju mali dodržovať.

Alternatívne verzie:

Autor: PaBi3 · Kategória: Webdesign · Dátum: 06.05.2005 14:42