HTML a CSS pre začiatočníkov (časť 10): Grafika pre web (02)

Doteraz by mala byť vaša definícia obrázka približne nasledovná:

<img src="images/logo.png" alt="PSD-Tutorials.de" />

Niektoré atribúty môžu byť (a mali by byť) pridelené prvku img. Po prvé alt. Text definovaný tu bude zobrazený prehliadačom v prípade, že obrázok nebude načítaný – z akéhokoľvek dôvodu.

Nanešťastie dochádza v súvislosti s atribútom alt opakovane k nedorozumeniam. Atribút alt slúži výlučne v prípade, že sa obrázok nezobrazuje. Niekedy však niektoré prehliadače zobrazia hodnotu atribútu alt vo vyskakovacom okne, ak kurzor myši zotrvá na obrázku.

Toto správanie je nesprávne. Na takéto vyskakovacie okná je určený skôr atribút title. Príslušná definícia by vyzerala takto:

<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo od PSD-Tutorials.de" />

V tomto prípade hodnota title prekryje hodnotu atribútu alt.

Veľkostné udania

V súčasnosti sa v HTML veľa rieši pomocou CSS, veľkostné udania však nie. Výška a šírka sa stále definujú pomocou atribútov width a height. Ukážeme si na tom príklad:

<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo od PSD-Tutorials.de" width="200" height="150" />

Ak neuvádzate jednotku v width alebo height, prehliadač interpretoval hodnoty čísel ako pixely. V predchádzajúcom príklade je obrázok široký 200 pixelov a vysoký 150 pixelov. Možné je aj uvedenie percenta.

<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo od PSD-Tutorials.de" width="20%" height="15%" />

Obrázky a odseky textu

Ak umiestnite obrázky v kombinácii s plynulým textom, buďte opatrní.

<p><img src="logo.png" alt="" width="180" height="150" /> Tento text sa zobrazí vedľa obrázka.</p>

img je tzv. inline prvok. Grafiky tak môžu byť priamo umiestnené v texte. Ak je obrázok vyšší ako výška riadku, text sa od prehliadača zarovná v rámci riadku. Štandardne je text zarovnaný vnútorne pod obrázkom.




align. Prosím, už nepoužívajte, pretože bol odstránený z HTML5 štandardu. Naopak použite možnosti, ktoré poskytuje CSS. Tak môžete napríklad zobraziť text okolo obrázka.

Podrobný popis

HTML vám umožňuje poskytnúť detailný popis k obrázku. Je vždy užitočný, ak k obrázku naozaj patrí ďalšie vysvetlenie. Môžete ukladať dodatočné informácie v rôznych častiach a odkazovať na ne.

Dodatočné informácie môžu byť umiestnené na rôznych miestach.

<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagramm" />

diagramm.

Možno najpoužívanejším spôsobom bude varianta, kedy sú informácie uložené v externom súbore.

<img src="bild1.png" alt="Diagram 1" longdesc="diagramm1.htm" />

Skutočne pekné a intuitívne to nie je, napríklad v prehliadači Firefox. Ak obrázok obsahuje atribút longdesc, bežní návštevníci stránok to na prvý pohľad nevidia. Musia skôr kliknúť pravým tlačidlom myši na obrázok.





V kontextovom menu sa zobrazí možnosť zobraziť popis. Kliknutím na tento odkaz sa zobrazí dodatočná informácia uvedená v atribúte longdesc. Ako som už spomenul, funguje to v Firefoxe, ale rozhodne to nie je elegantné.

Opera má mimochodom rovnaké riešenie. Ak kliknete v tomto prehliadači pravým tlačidlom myši na obrázok, uvidíte položku Dlhý popis.





Ďalej vedie k uvedeným dodatočným informáciám.

WC3 navrhuje tiež uviesť dlhý popis vo forme Data-URL.

<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E
%3Chtml%3E%3Chead%3E%3Ctitle%3EDescription%20of%20the%20W3C%20Logo%3C/title%3E%3C/head%3E
%3Cbody%3E%3Cp%3EA%20blue%20capital%20letter%20%22W%22%20with%20kerning%20so%20it%20
touches%20a%20blue%203%2C%20followed%20by%20a%20black%20shadow%20of%20a%20white%20
capital%20letter%20C%20all%20on%20a%20white%20background%3C/body%3E%3C/html%3E" />

Ak ešte nemáte skúsenosti s týmito Data-URL adresami, nájdete podrobné informácie na adrese http://de.wikipedia.org/wiki/Data-URL.

Definovanie popisov obrázkov

Doteraz HTML neposkytoval žiadne možnosti pre definovanie popisov obrázkov a zoskupení obrázkov. Presne tento aspekt sa zmenil s HTML5. Tu boli zavedené dve nové prvky, a to figure a figcaption.

Aby sme to naznačili: figure nie je určený výlučne na použitie v kombinácii s grafikou. V skutočnosti je tento element použiteľný pre všetky prvky, ktoré dopĺňajú dokument. Môžu to byť okrem obrázkov napríklad diagramy, príklady kódu a videá.

Okrem figure existuje aj figcaption. Pomocou neho je možné obsah, ktorý nie je čitateľný pre určité skupiny používateľov, vybaviť alternatívnym popisom.

Tu je príklad použitia oboch prvkov figure a figcaption:

<figure>
   <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" />
   <figcaption>Toto je naše nové logo.</figcaption>
</figure>

Pohľad na výsledok v prehliadači poskytuje nasledujúci výsledok:

Ako s týmito dvoma prvkami prejdú prehliadače, je nakoniec na nich. V zásade však môžete opäť ovplyvniť zobrazenie pomocou CSS.

V rámci elementu figure je možné vložiť ľubovoľný počet obrázkov alebo iných prvkov. Však v jednom elemente figure smie byť iba jeden element figcaption. Tu je opäť príklad:

<figure>
   <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" />
   <img src="logo_gross.jpg" width="400" height="250" alt="PSD-Tutorials.de" />
   <figcaption>Toto je naše nové logo.</figcaption>
</figure>

Týmto spôsobom môžete tiež vložiť viac obrázkov do elementu figure.

Špeciálne pri logickom usporiadaní webových stránok a obsahu HTML5 obsahuje mnoho noviniek. Túto sériu samozrejme dôkladne spoznáte v priebehu tohto cyklu.