Obrázky a odkazy

1. Obrázky a odkazy

2. Obrázky - značka • Tak ako každý element na HTML stránke aj obrázok má svoju značku • Značka pre vloženie obrázka do stránky je <img /> • Ako vidíme zo zápisu značky, táto značka je nepárová • Sama o sebe by však nemala význam, preto k nej musíme pridať nejaké vlastnosti (atribúty)

3. Atribúty značky img • src – cesta k súboru • width – šírka obrázku • height – výška obrázku • align – zarovnanie a obtekanie obrázku • border – hrúbka rámčeka obrázku • title – titulok obrázku • alt – alternatívny text obrázku

4. Atribút src • Hodnota atribútu (to je to, čo píšeme medzi úvodzovky) je cesta k obrázku • Cestu môžeme zadávať: • Absolútne – teda celú cestu ako URL (adresu) – napr. http://www.sme.sk/imgs/logo4.gif • Relatívne – cestu zadávame vzhľadom na polohu obrázku voči súboru stránky

5. .. .. .. stranka.htm stranka.htm stranka.htm obrazok.jpg img img obrazok.jpg cars obrazok.jpg .. .. .. stranka.htm obrazok.jpg obrazok.jpg obrazok.jpg stranky stranky stranka.htm kratke stranka.htm Relatívna cesta src="obrazok.jpg" src="img/obrazok.jpg" src="img/cars/obrazok.jpg" src="obrazok.jpg" src=“../obrazok.jpg" src=“../../obrazok.jpg"

6. Atribúty width a height • Atribúty width a height určujú rozmery obrázku – width šírku a heigth výšku • Hodnoty týchto atribútov sa môžu zadávať číselne alebo percentuálne • Napríklad width="500" height="200" nastaví šírku obrázka na 500 pixelov a výšku na 200 pixelov • Napríklad width="50%" height="20%" nastaví šírku obrázka na 50% zo stránky a výšku na 20% zo stránky (resp. nadradeného elementu – napr. tabuľky) • Ak nezadáte jeden z rozmerov obrázku, prehliadač stránok si ho sám dopočíta tak aby sa neporušil pomer strán obrázku

7. Atribút align • Atribút align slúži na nastavenie zarovnania a obtekania obrázku • Môže mať hodnoty: • left – zarovnanie doľava a obtekanie textu sprava • right – zarovnanie doprava a obtekanie textu zľava

8. Atribúty border, alt a title • Hodnota atribútu border je číslo, ktoré určuje hrúbku rámčeka okolo obrázka v pixeloch • Hodnota atribútu alt je text, ktorý sa zobrazí v prípade, že sa obrázok nepodarilo zobraziť na stránke • Rovnako sa tento text používa v čítačkach stránok pre slepcov • Hodnota atribútu title je text, ktorý sa zobrazí v prípade, že nad obrázkom podržíme kurzor myši

9. Odkazy - značka • Tak ako každý element na HTML stránke aj odkaz má svoju značku • Značka pre vloženie odkazu do stránky je <a>..... </a> • Ako vidíme zo zápisu značky, táto značka je párová • Sama o sebe by však nemala význam, preto k nej musíme pridať nejaké vlastnosti (atribúty)

10. Atribúty značky a • href – cesta k stránke, ktorú chceme zobraziť po kliknutí na odkaz • title – titulok odkazu • target – cieľ otvorenia odkazu • name – definícia záložky (kotvy) na stránke

11. Atribút href • Hodnota atribútu href (hypertext reference – hypertextový odkaz) je adresa stránky resp. súboru, ktorý chceme po kliknutí na odkaz otvoriť • Adresu môžeme zadávať: • Absolútne – teda celú cestu ako URL (adresu) – napr. http://www.spseke.sk/studium (!!! musí sa začínať http://) • Relatívne – cestu zadávame vzhľadom na polohu súboru/stránky voči súboru aktuálnej stránky podobne ako je to u obrázku

12. Atribúty target a title • Hodnota atribútu title je text, ktorý sa zobrazí v prípade, že nad odkazom podržíme kurzor myši • Ak v značke a neuvedieme atribút target, naša stránka po kliknutí na odkaz zmizne a otvorí sa nová stránka • Ak v značke a uvedieme v atribúte target hodnotu _blank (target="_blank") naša stránka po kliknutí na odkaz ostane otvorená a nová stránka sa otvorí v novom okne

13. Atribút name • Atribútom name definujeme v texte záložky na ktoré sa (z iného miesta v stránke) bude dať po kliknutí na odkaz „skočiť“ • Definuje sa podobne ako odkaz ale bez textu, na ktorý sa dá kliknúť <a name="odsek1"></a>

14. Atribút name (2) • Odkaz na takúto záložku potom definujeme takto: <a href="#odsek1">Skok na prvý odsek</a> • Takéto odkazy sa väčšinou používajú pri dlhých stránkach, kde je potrebné efektívne sa pohybovať medzi jej jednotlivými časťami • Môžete to vidieť napríklad v obsahu článku na Wikipédii