Obrázky

Obrázkami môžeme značne osviežiť vzhľad našej webovej stránky.

Každý obrázok musí obsahovať atribút src, ktorý nám označuje zdroj obrázku, alebo inak nazývanú aj adresu k obrázku, a atribút alt, pomocou ktorého špecifikujeme názov obrázku. Src je kľúčový atribút, bez ktorého by sme obrázok nezobrazili, zatiaľčo ak nevyplníme alt, HTML štruktúra nebude valídna, no vyobrazenie obrázku nám to neovplyvní. Alt nám predovšetkým slúži ako textová informácia, čo sa na obrázku nachádza, v prípade, že nie je možné obrázok načítať, zobrazí sa nám jeho názov.

Je taktiež možné vopred definovať rozmery obrázku pomocou aribútov width (šírka) a height (výška). Jednotlivé hodnoty sa udávajú bez jednotiek a automaticky sa používajú pixely.

<img src="obrazok.jpg" alt="Obrázok" width="100" height="100" />

Možeme zvoliť niekoľko typov formátov, pričom medzi najčastejšie sa používa formát PNG, JPG, GIF alebo SVG. Pri používaní ikoniek sa odporúča použitie takzvaného icofontu.

PNG

Pri formáte PNG je možné požiť priesvitné pozadie.

<img src="http://egara.net/fwd/wp-content/uploads/2018/09/funny_unicorn_by_terudocd31hzw2.png" alt="Unicorn" width="695" height="743" />

JPG

Používa sa zväčša ako klasická fotografia alebo plne vyplnený obrázok. Nie je možné vytvoriť priesvitné pozadie.

<img src="http://egara.net/fwd/wp-content/uploads/2018/09/e1f23aa3b090ee89096bf60662e3f875.jpg" alt="Unicorn" width="590" height="443" />

GIF

Používa sa pre definovanie animovaného obrázku.

<img src="http://egara.net/fwd/wp-content/uploads/2018/09/1500128556_siiiiiiiii.gif" alt="Unicorn" width="200" height="150" />

SVG

Takzv. vektorový obrázok, ktorý po zmene rozmerov zachováva kvalitu.

<img src="http://egara.net/fwd/wp-content/uploads/2017/09/unicorn.svg" alt="Unicorn" />

Icofont

Sada ikôn pre oživenie webu, ako aj pre lepšie definovanie UI (User Interface – užívateľský zážitok). Nedefinuje sa pomocou klasického obrázku, ale pomocou typu písma, kedy sú ikony reprezentované špeciálnymi znakmi.

Napr. http://fontawesome.io/ kde je vopred definovaná sada ikôn, alebo https://www.flaticon.com/ kde si užívateľ môže vybrať jeden či viacero z možných balíčkov, či dokonca vytvoriť si vlastnú sadu z ponúknutých ikôn.

Použitie FontAwesome

Stiahnite si ikonovú sadu zo stránky a načítajte CSS súbor do stránky umiestnením daného kódu do hlavičky <head>

<link rel="stylesheet" href="cesta/k/font-awesome/css/font-awesome.min.css">

Po načítaní súboru môžete smelo začať používaním ikôn tým, že na ich určené miesto v HTML kóde napíšete nasledujúcí kód:

<i class="fa fa-snowflake-o" aria-hidden="true"></i>

Pre zmenu ikony stačí upraviť triedu elementu podľa inštrukcií z web stránky: http://fontawesome.io/icons/ kde sa vám zobrazí príslušný kód po vybraní si ikony.


Testové otázky

  • Ako definujem obrázok na stránke a aké musí mať atribúty?
  • Aké sú najčastejšie používané formáty obrázkov?
  • Je výhodné používať SVG obrázky? Ak áno, prečo?
  • Kedy používam jednotlivé formáty obrázkov?
  • Akým spôsobom viem zobraziť ikonu na stránke?