Eddig a képdefiníciód valahogy így kellene kinézzen:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Az img-elemhez azonban néhány attribútumot (és kell is) hozzárendelni. Először is van a alt. Ezt a szöveget a böngésző jeleníti meg, ha a kép – bármilyen okból – nem töltődött be.
Sajnos az alt-attribútummal kapcsolatban gyakran félreértések merülnek fel. Az alt-attribútum valójában kizárólag a kép megjelenésének elmaradására szolgál. Néhány böngésző azonban megjeleníti az alt-attribútum értékét egy eszköztipp ablakban, ha az egérrel a képre húzzák.
Ez a viselkedés helytelen. Az ilyen eszköztippekhez inkább a title attribútum szolgál. A megfelelő definíció így néz ki:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logó" />
Ebben az esetben a title értéke felülírja az alt értékét.
Méretek megadása
A HTML-ben napjainkban a stíluslapok (CSS) segítségével sok minden megoldódik. A méretek megadása azonban nem ebbe a kategóriába tartozik. A magasság és a szélesség továbbra is a width és height attribútumokkal kerül meghatározásra. Ismét egy példa:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logó" width="200" height="150" />
Ha nincs mértékegység megadva a width vagy height esetén, a böngésző a számértékeket pixelekként értelmezi. Tehát az előző példában a kép 200 pixel széles és 150 pixel magas. Lehetséges még a százalékos megadás is.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="PSD-Tutorials.de logó" width="20%" height="15%" />
A százalékos értékek a rendelkezésre álló megjelenítési térre vonatkoznak. Ha nincsenek méretek megadva, a böngésző az eredeti méretű grafikákat jeleníti meg.
Képek és szöveges bekezdések
Ha képeket folyamatos szöveggel kombinálsz, ügyelj oda figyelmesen.
<p><img src="logo.png" alt="" width="180" height="150" /> Ez a szöveg a kép mellett jelenik meg.</p>
Az img az úgynevezett Inline elem. A grafikák közvetlenül elhelyezhetők a szövegben. Ha a kép magasabb, mint a sor magassága, a böngésző a szöveget az adott sorba igazítja. Alapértelmezés szerint a szöveg az aljára van igazítva a képhez képest.
A bekezdésig álláskor szabályozni lehetett az elhelyezést az align attribútummal az idősebb HTML verziókban. Kérlek, ne használd ezt a funkciót többé, mivel eltávolításra került az HTML5 szabványból. Ehelyett a CSS által kínált lehetőségeket használd. Például szöveg köré tudod illeszteni a képet a CSS használatával.
Hosszú leírás
A HTML lehetőséget biztosít számotokra, hogy egy képhez részletes leírást adjatok meg. Ez mindig hasznos, amikor egy képhez valóban magyarázatra van szükség. Az extra információkat különböző helyeken tárolhatjátok és hivatkozhattok rájuk.
Ezek az extra információk különböző helyeken lehetnek.
<img src="bild1.png" alt="Diagramm 1" title="Diagramm 1" longdesc="#diagramm" />
Ebben az esetben feltételezzük, hogy az oldalon van egy terület az id="diagramm".
A leggyakoribb megoldás talán az, amikor az információkat egy külső fájlban tárolják.
<img src="bild1.png" alt="Diagramm 1" longdesc="diagramm1.htm" />
A böngésző-támogatás ezen a területen azonban még nem tökéletes. Ráadásul úgy tűnik, hogy ennek az attribútumnak a használata a böngészőgyártókat azzal a kérdéssel szembesíti, hogy hogyan tudnák könnyen implementálni.
Mert ez például a Firefox böngészőben nem tűnik igazán szépnek és magyarázónak. Ha egy képnek van longdesc-attribútuma, a normál látogatók kezdetben nem fogják észrevenni. Inkább a képre kell jobb egérgombbal kattintaniuk.
A kontextusmenüben ekkor a "Leírás megjelenítése" opció jelenik meg. Ha erre kattintanak, akkor a longdesc-nál meghatározott extra információ lesz látható. Ahogy mondtam, ez így működik a Firefoxban, de elegánsnak nem nevezném.
Amúgy az Opera nagyon hasonlóan oldotta meg ezt. Ha ebben a böngészőben jobb gombbal kattintasz a képre, látható lesz a Hosszú Leírás bejegyzés.
Ez aztán vezet a megadott további információkhoz.
A WC3 továbbá javasolja, hogy a Hosszú leírást Data-URL formájában adják meg.
<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" />
Ha még nem szereztél tapasztalatokat ezekkel a Data-URL-ekkel, a részletes információkat megtalálod itt: http://de.wikipedia.org/wiki/Data-URL.
Képaláírások meghatározása
Eddig az HTML-ben nem volt lehetőség képaláírások és képcsoportok meghatározására. Éppen ez a szempont változott meg az HTML5-tel. Itt ugyanis bevezetésre kerültek az új figure és figcaption elemek.
Előre vetítve: a figure nem kizárólag a grafikus elemekkel való együttműködésre szolgál. Valójában az elem bármely dokumentumot kiegészítő elemként használható. Ezek lehetnek képek mellett például diagramok, kód példák és videók.
A figure mellett van még a figcaption is. Ezen keresztül lehet olyan tartalmakat ellátni alternatív leírással, melyeket bizonyos felhasználói csoportok számára nem olvashatóak.
Itt egy példa a figure és figcaption elemek használatára:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Ez a mi új logónk.</figcaption> </figure>
A böngészőben a következő eredményt kapod:
Amint a böngészők kezelik a két elemet, az végül is az ő dolguk. Alapvetően természetesen megint módosíthatod a megjelenítést CSS-sel.
Egy figure elemen belül tetszőlegesen sok képet vagy más elemet lehet beilleszteni. Azonban egy figure elemen belül csak egy figcaption elem lehet. Erre ismét egy példa:
<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>Ez a mi új logónk.</figcaption> </figure>
Így több képet is beillessz a figure elembe.
Főleg az internetes oldalak és tartalmak logikus szerkezete szempontjából az HTML5-ben számos újdonság található. Ezeket persze ennek a sorozatnak a folyamán részletesen meg fogod ismerni.
