Obrázok a jeho atribúty
V tejto kapitole si ukážeme, ako si do stránky vložíme ďalší štandardný prvok – obrázok. Tag pre obrázok funguje na podobnom princípe ako odkaz. Samotný tag pre obrázok ešte nezaručí, že sa nejaký obrázok zobrazí, je nutné pomocou atribútu na to určenom zadefinovať, ktorý obrázok sa má zobraziť.
Obrázok určuje nepárová značka img (image – obrázok). Nie je nutné, aby bol tento tag párový, pretože ak by aj bol (ako a alebo p), medzi otvárací a uzatvárajúci tag by sa nepísal žiadný kód. Obrázok totižto neobsahuje žiadny text na zobrazenie na stránke, zobrazuje sa iba daný obrázok (kdežto medzi tagmi a alebo p text definovaný v obsahu tagu sa aj zobrazuje). Kľúčový atribút pre tento tag je atribút src (source – zdroj), v ktorom sa definuje URL adresa obrázku, ktorý chceme zobraziť. Podobne ako sme použili odkaz na obrázok v predchádzajúcej kapitole, vyskúšame si teraz daný obrázok zobraziť priamo na našej stránke. Použijeme teda na to tag img s atribútom src, ktorého hodnota bude tá istá URL adresa, ktorú sme použili aj ako cieľ odkazu na druhý obrázok. Za objektom (obrázkom) použijeme krátky text pre opis obrázka :
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
<p>Obrazok c.1 - koniiik</p>
Text je sám o sebe veľmi jednoduchý pre načítanie a zobrazenie na webstránke. Obyčajný textový súbor, ktorý obsahuje množstvo strán plných textu, má sám o sebe malú veľkosť (pár kilobajtov (KB)). Naopak obrázok väčších rozmerov (väčšie rozlíšenie napr. 1920x1080) má podstatne väčšiu veľkosť, niekedy aj viac ako jeden megabajt (MB). Načítavanie obrázkov na stránke je tým pádom podstatne pomalšie a náročnejšie. Možno sa vám niekedy stalo, že ste klikli na stránku, ktorá obsahovala veľký počet obrázkov vo veľkom rozlíšení. Po načítaní stránky už niektoré obrázky boli načítané/zobrazené, ale niektoré z nich sa len načítavali za behu. Zobrazovali sa postupne od hora dole postupným načítavaním riadkov obrázka.
Tým, že je obrázok sám o sebe veľký, môže niekedy jeho prehnaná veľkosť alebo veľký počet obrázkov na danej stránke spôsobiť, že sa obrázky z nejakého zlyhania počas načítavania nenačítajú a nezobrazia. Tento prípad je dosť problematický pre vzhľad webstránky, pretože na danom mieste, kde sme na stránke očakávali zobrazenie obrázka (objekt s nie malými rozmermi), by zostalo prázdno. Druhý prípad, kedy môže nastať tento moment je pri zadaní zlej URL adresy, resp. jej neskoršej zmene. URL adresu zadávame ako hodnotu atribútu aj v odkaze. Ak daný odkaz prestane po čase (ako bola webstránka naprogramovaná) fungovať (URL adresa sa stane neaktívnou), na aktuálnej stránke to nebude vidieť. Textový odkaz sa zobrazí, nebude iba fungovať zobrazenie cieľa. Ak sa však zmení URL adresa, ktorá bola použitá ako hodnota atrubútu src pri nejakom obrázku, obrázok sa nenačíta a táto situácia bude viditeľná hneď po načítaní stránky.
Aj pre tento prípad vznikol atribút, ktorý slúži aj ako bližší popis obrázka, ale aj ako text, ktorý sa zobrazí v prípade, že obrázok sa nenačíta (URL neexistuje, obrázok jeho vlastník zmaže a pod.). Tento atribút má meno alt (alternative – alternatíva) a jeho hodnotou je text. Skúsme si náš predchádzajúci kód skopírovať dva razy, ale v druhom prípade obrázka dáme schválne zlú URL adresu a použijeme atribút alt, aby sme videli jeho význam a správanie :
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
<p>Obrazok c.1 - koniiik</p>
<br><br>
<img src="http://zla_url_adresa" alt="Obrazok kona">
<p>Obrazok c.2 - zobrazi sa text z atributu alt</p>
Element obrázok môže byť zakomponovaný, resp. byť súčasťou obsahu rôznych tagov. Časté použitie je, že je vo vnútri tagu a. Na stránke tým vznikne obrázok, ktorý je sám o sebe aj odkazom, čiže sa dá naň kliknúť a presmeruje nás niekam inam alebo vyvolá nejakú akciu. Použitie je jednoduché, vo vnútri tagu a použijeme tag img. V nasledujúcej ukážke použijeme aj atribút title, takže keď sa zobrazíte myšou ponad link (text+obrázok), mal by sa zmeniť kurzor na prst a rovnako by sa mal zobraziť popis odkazu. Okrem obrázku je v tagu pre odkaz použitý aj text, takže odkazom bude aj text aj obrázok súčasne :
<a href="http://www.google.sk" target="_top" title="Klikni a Googli!">Klikni !
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg">
</a>
Doteraz sme si hovorili vo väčšine o textových elementoch. Druh písma, jeho veľkosť, farbu a šírku elementu, v ktorom sa text nachádza, budeme môcť meniť neskôr pomocou jazyka CSS, ktorý si preberieme v nasledujúcom semestri. Tag img je netextový element, ktorý má svoju vlastnú veľkosť (rozmer – plochu, ktorú zaberá na stránke). Všetko ohľadom pozícií elementov (rozloženie na stránke, poloha od krajov atď.) na stránke a ich rozmerov (výška, šírka) sa riadi pixelmi. Obrazovka/displej zariadenia (PC, tablet, mobil) má svoje rozlíšenie. To je dané dvomi číslami, napríklad 1920x1080 alebo 640x480. Prvé číslo značí šírku (width) a druhé výšku (height). Výsledok tohto súčinu je počet zobrazovaných bodov na obrazovke (pixelov). Rovnaký rozmer majú aj obrázky, náš obrázok koňa má rozlíšenie 403x403. To znamená, že na šírku zaberá na obrazovke 403 pixelov a rovnako aj na výšku. Ak by sme mali rozlíšenie obrazovky 403x403, tento obrázok by vyplnil presne našu obrazovku. Ak by sme mali rozlíšenie 806x806, pri umiestnení nášho obrázku do jedného z rohov by jeho kraje siahali presne do obrazovky.
Element img obsahuje atribúty width (šírka) a height (výška), ktorými môžeme určit jeho rozmery, teda plochu, ktorú bude zaberať. V nasledujúcej ukážke použijeme tri rôzne veľkosti pre náš obrázok, aby sme videli rozdiel. V prvom prípade použijeme zobrazenie 1:1, čiže náš obrázok bude taký veľký, ako v skutočnosti je. Pri druhom použijeme menšie rozmery a pri treťom väčšie. Ak sa rozmery zadané v týchto atribútoch nezhodujú s originálnym rozmerom obrázka, obrázok sa neorezáva ani sa nedopĺňa nejakou plochou, jednoducho sa roztiahne (zväčší) alebo stiahne (zmenší). Hodnota týchto atribútov je len číslo, ktorým sa myslí počet pixelov :
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg" height="403" width="403">
<br>
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg" height="300" width="150">
<br>
<img src="http://images.boomsbeat.com/data/images/full/30918/horse_2-jpg.jpg" height="600" width="500">