Obrázky a Obrázky a odkazyodkazy

Obrázky - značkaObrá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)

Atribúty značky imgAtribú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

Atribút srcAtribú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

Relatívna cestaRelatívna cesta

stranka.htm

obrazok.jpg

..

stranka.htm

img

..

obrazok.jpg

stranka.htm

img

..

cars

obrazok.jpg

stranka.htm

obrazok.jpg

..

src="obrazok.jpg" src="img/obrazok.jpg" src="img/cars/obrazok.jpg"

src="obrazok.jpg" src=“../obrazok.jpg" src=“../../obrazok.jpg"

obrazok.jpg

stranky

..

stranka.htm

obrazok.jpg

stranky

..

kratke

stranka.htm

AtribAtribúty width a heightú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

Atribút alignAtribú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

Atribúty border, alt a titleAtribú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

Odkazy - značkaOdkazy - 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)

Atribúty značky aAtribú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

Atribút hrefAtribú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

Atribúty target a titleAtribú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

Atribút nameAtribú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>

Atribút name (2)Atribút name (2)

• Odkaz na takúto záložku potom definujeme takto:

<a href="#odsek1">Skok na prvý odsek</a><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