2. Obrázky a pozadie

 Na začiatok by bolo dobré povedať si niečo o obrázkoch.

Druhy formátov obrázkov

Obrázky uverejnené na webovej stráke môžu byť rôznych formátov a vlastností. Na to, aby sme ich vedeli správne použiť, potrebujeme tieto vlastnosti pochopiť. Najčastejšie sa budeme stretávať s obrázkami JPG, GIF a PNG.

Formát JPG

Formát .jpg je vhodný pre ukladanie fotografií a obrázkov s veľkou farebnou hĺbkou. JPG  neumožňuje ukladať priehľadné alebo animované obrázky, preto je najvhodnejší pre fotografiu. Pri vytváraní obrázku v .jpg formáte je možné nastaviť mieru kompresie, čím sa zároveň zmení kvalita zobrazovaného obrázka ale i veľkosť. Je vhodné nájsť najlepší kompromis. Kvalita pre dostatočnú informatívnu hodnotu a veľkosť pre rýchle zobrazovanie na webovej stránke.

Obrázky vo formáte JPG je možné upravovať v grafických editoroch ako Gimp, Irfanview, Xnview a pod.

Obrázky vo formáte .jpg sa skladajú z pixelov. Čím je počet pixelov väčší, tým obraz pôsobí detailnejšie a ostrejšie.  

obr.1 - originál (2000x1339 px)

obr.2 - výrez vrcholu ( 743 x 478  px)

obr.3 - zväčšený výrez vrcholu - viditeľné pixely   

 obr. 4 - Obrázok zväčšený na maximum, kde sú viditeľné jednotlivé pixely 

Formát GIF

pozn. Treba si uvedomiť, že takáto animácia sa skladá z množstva obrázkov, ktoré vytvárajú dojem pohybu. Skúste sa zamerať na ľavú prednú nohu bežiaceho koňa smerom z prava - do ľava a všimnúť si, ako sa noha posúva medzi jednotlivými obrázkami. 

 pozn. Animované obrázky .gif si môžete vyskúšať vytvoriť aj vy napríklad na webovej lokalite https://gifmaker.me/, alebo v programe Gimp použítím vrstiev.

Videonávod - vytvorenie obrázka s priehľadnosťou, vhodného na animáciu v programe GIMP

Videonávod - Vytvorenie animácie ,gif z pripraveného obrázka v programe GIMP

výsledný animovaný .gif z videonávodu vyššie

Formát PNG

Tento formát sa hodí najmä na ilustrovanú grafiku, pričom si zachováva priehľadnosť. Voľne dostupným editorom pre ilustrovanú grafiku je napr. program Inkscape.

Ako príklad dobre poslúži logo našej školy. Jedná sa o formát .png a vzhľadom  k tomu, že okolie trojuholníka je priehľadné, obrázok splynie s pozadím.

pozn. Ak by sme logo uložili vo formáte .jpg bez priehľadnosti, dostali by sme napríklad takýto výsledok, čo by nevyzeralo moc dobre.

Umiestnenie obrázka v HTML

V HTML sa obrázky vkladajú nepárovým tagom IMG, ktorý má jeden povinný a mnoho voliteľných parametrov. Povinný je src, čiže umiestnenie obrázku.

Základný zápis pre umiestnenie obrázka

<img src="nejaky_obrazok.jpg">

Zápis s použitím voliteľných parametrov

<img border="3" src="nejaky_obrazok.jpg" alt="moj_obrazok" style="float: right;" width="80" height="60">

pozn. alt znamená popis obrázku, border je šírka ohraničenia v pixeloch v základe nastavená na čiernu farbu, style="float: right;" určuje umiestnenie obrázka do prava, width je šírka a height je výška v pixeloch.

úloha:    V html editore PSpad si vyskúšajte umiesňovanie obrázka vľavo, v strede, v pravo. Vyskúšajte rôzne druhy ohraničenia - border, popisu obrázka a vyskúšajte si, čo spôsobí vlastné nastavenie parametrov width a height. Obrázok bežiaceho koňa si môžete stiahnuť tu -  beziaci_kon.gif.

Videonávod - umiestnenie obrázkov a ich formátovanie

Farby a pozadie v HTML

Farba sa dá v HTML zapísať týmito spôsobmi:

  Generátor kódov pre  zápis HTML farieb: