Dosud by měla vaše definice obrázku vypadat zhruba takto:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Elementu img by měla být přidělena (a měla by být) některá atributy. Prvním z nich je alt. Tento definovaný text se zobrazí prohlížečem, pokud obrázek – z jakéhokoli důvodu – nelze načíst.
Bohužel v souvislosti s atributem alt dochází opakovaně k nedorozuměním. Atribut alt slouží výhradně pro případ, že se obrázek nezobrazí. Některé prohlížeče však hodnotu atributu alt zobrazí v okně s popiskem, pokud na obrázku pohybujete myší.
Toto chování je chybné. Pro popisky je určen spíše atribut title. Příslušná definice by vypadala následovně:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo z PSD-Tutorials.de" />
V tomto případě hodnota atributu title překrývá hodnotu alt.
Velikostní údaje
V HTML se v současné době mnoho věcí již neřeší prostřednictvím atributů, ale pomocí CSS. Definice velikostních údajů však k tomu nepatří. Výška a šířka se stále definují pomocí dvou atributů width a height. Zde je opět příklad:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo z PSD-Tutorials.de" width="200" height="150" />
Pokud u atributu width nebo height neuvedete jednotky, prohlížeč interpretuje číselné hodnoty jako pixely. V předchozím příkladu je tedy obrázek široký 200 pixelů a vysoký 150 pixelů. Můžete také použít procentní vyjádření.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logo z PSD-Tutorials.de" width="20%" height="15%" />
Procentuální údaje se vztahují k dostupnému zobrazovacímu prostoru. Pokud nebudou uvedeny žádné velikostní údaje, prohlížeče zobrazí grafiky v jejich původní velikosti.
Obrázky a textové odstavce
Pokud umisťujete obrázky ve spojení s plynulým textem, opatrně.
<p><img src="logo.png" alt="" width="180" height="150" /> Tento text se zobrazí vedle obrázku.</p>
Element img je tzv. inline element. Grafiku lze tedy umístit přímo do textu. Jestliže je obrázek vyšší než výška řádku, text bude prohlížečem zarovnán uvnitř řádku. Výchozí zarovnání textu je spodní zarovnání k obrázku.
Způsob zarovnání bylo možné ovlivnit v starších verzích HTML pomocí atributu align. Prosím, nepoužívejte tento atribut, protože byl odstraněn ze standardu HTML5. Místo toho využijte možnosti, které vám poskytuje CSS. Tak můžete například obrázek obklopit textem.
Podrobný popis
HTML vám umožňuje přidat k obrázku podrobný popis. To je vždy praktické, pokud k obrázku skutečně potřebujete nějaké vysvětlení. Informace můžete uložit na různých místech a na ně odkazovat.
Informace mohou být uloženy na různých místech.
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
Předpokládá se, že na stránce existuje oblast s ID diagramm.
Nejčastěji se informace ukládají do externího souboru.
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
Problémy zde však spočívají v nedostatečné podpoře prohlížečů. Navíc se zdá, že tento atribut klade prohlížečovým výrobcům otázku, jak by ho mohli jednoduše implementovat.
Jelikož to není zcela elegantní řešení, například ve Firefoxu. Pokud má obrázek atribut longdesc, běžní návštěvníci stránek to nejprve nepoznají. Místo toho musí na obrázek kliknout pravým tlačítkem myši.
V kontextovém menu uvidíte položku Zobrazit popis. Pokud na ni kliknete, zobrazí se dodatečné informace uvedené v longdesc. Jak jsem řekl, v Firefoxu to funguje, elegantní to však rozhodně není.
Opera to mimochodem vyřešila velmi podobně. Když v tomto prohlížeči kliknete na obrázek pravým tlačítkem myši, uvidíte položku Dlouhý popis.
Tento odvozený popis pak vede ke specifikovaným dodatečným informacím.
WC3 navrhuje navíc uvést dlouhý popis ve formě adresy 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" />
Pokud jste s těmito adresami Data-URL dosud neměli zkušenosti, najdete podrobné informace na adresě http://de.wikipedia.org/wiki/Data-URL.
Definování popisů obrázků
Dosud v HTML neexistovaly žádné možnosti definovat popisky k obrázkům a seskupení obrázků. Právě tento aspekt se změnil s HTML5. Zde byly totiž zavedeny nové elementy figure a figcaption.
Abych to předeslal: figure není určeno výhradně pro použití v kombinaci s grafikou. Ve skutečnosti lze tento prvek použít pro všechny prvky, které doplňují dokument. Moh
