Hittills bör din bilddefinition se ut ungefär så här:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Till img-elementet kan (och bör) dock vissa attribut tilldelas. Först och främst finns alt. Den här definierade texten visas av webbläsaren om bilden - av vilken anledning som helst - inte kunde laddas.
Tyvärr leder användningen av alt-attributet ofta till missförstånd. Alt-attributet används faktiskt enbart när bilden inte kan visas. Vissa webbläsare visar dock värdet av alt-attributet i ett verktygstipsfönster när muspekaren placeras över bilden.
Detta beteende är felaktigt. För sådana verktygstips är det snarare attributen title som är avsedda. En korrekt definition skulle se ut så här:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logotypen från PSD-Tutorials.de" />
I det här fallet går värdet för title före värdet för alt.
Storleksanvisningar
Numera används CSS för att lösa mycket i HTML. Men definitionen av storlekar är inte en av dem. Höjd och bredd definieras fortfarande med hjälp av attributen width och height. Här är ett exempel:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logotypen från PSD-Tutorials.de" width="200" height="150" />
Om inga enheter anges för width eller height tolkar webbläsaren siffrorna som pixelmått. I det tidigare exemplet är bilden alltså 200 pixlar bred och 150 pixlar hög. Procentandelar är också möjliga.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Logotypen från PSD-Tutorials.de" width="20%" height="15%" />
Procentandelarna hänvisar till den tillgängliga visningsytan. Om inga storleksanvisningar ges, visar webbläsarna grafiken i dess originalstorlek.
Bilder och textstycken
När du placerar bilder i kombination med löpande text måste du vara försiktig.
<p><img src="logo.png" alt="" width="180" height="150" /> Den här texten visas bredvid bilden.</p>
img är en s.k. inline-element. Grafik kan därför placeras direkt i texten. Om bilden är högre än radhöjden, kommer texten att justeras inom raden av webbläsaren. Som standard justeras texten nertill i förhållande till bilden.
Textens placering kunde tidigare styras med attributet align i äldre HTML-versioner. Använd inte detta längre eftersom det har tagits bort från HTML5-standarden. Använd istället CSS-möjligheterna som finns. På så sätt kan du t.ex. låta bilden flyta runt texten.
En långbeskrivning
HTML ger dig möjligheten att lägga till en utförlig beskrivning för en bild. Det är alltid praktiskt när en bild faktiskt behöver några förklaringar. Du kan spara tilläggsinformationen på olika platser och hänvisa till den.
Tilläggsinformationen kan finnas på olika platser.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagram" />
Här antas det att det finns en avsnitt på sidan med ID:t diagram.
Den vanligast förekommande varianten är förmodligen den där informationen sparas i en extern fil.
<img src="bild1.png" alt="Diagram 1" longdesc="diagram1.htm" />
Dock saknas det ännu stöd för detta i webbläsarna. Dessutom verkar detta attribut ställa webbläsartillverkarna inför frågan om hur de kan genomföra det på ett enkelt sätt.
Eftersom det inte är särskilt snyggt eller självförklarande i t.ex. Firefox. Om en bild har ett longdesc-attribut märker inte vanliga användare detta till en början. De måste istället högerklicka på bilden med musen.
I det sammanhanget visas sedan alternativet Visa beskrivning i kontextmenyn. Klickar man på det visas tilläggsinformationen som angetts med longdesc. Som sagt, det fungerar så i Firefox, men det är säkert inte särskilt elegant.
Opera har förresten löst det på ett liknande sätt. Om man högerklickar på bilden i denna webbläsare, visas posten Lång beskrivning.
Detta leder sedan till de angivna extrainformationerna.
W3C rekommenderar dessutom att ange den långa beskrivningen i form av en 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" />
Om ni ännu inte har erfarenhet av dessa data-URL:er, hittar ni utförlig information om dem på http://de.wikipedia.org/wiki/Data-URL.
Definiera bildbeskrivningar
Hittills har det inte funnits några möjligheter i HTML att definiera bildtexter och bildgrupper. Det är exakt detta aspekt som har ändrats med HTML5. Här har nämligen de två nya elementen figure och figcaption introducerats.
För att klargöra: figure är inte enbart avsett för användning i samband med grafik. Faktum är att elementet kan användas för alla element som kompletterar ett dokument. Det kan vara bilder, diagram, kodexempel och videor, bland annat.
Förutom figure finns också figcaption. Genom detta element kan innehåll som inte är läsbart för vissa användargrupper försettas med en alternativ beskrivning.
Här är ett exempel på användningen av de två elementen figure och figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Det här är vår nya logotyp.</figcaption> </figure>
Efter att ha sett resultatet i webbläsaren får man följande resultat:
Hur webbläsarna hanterar de båda elementen är i slutändan upp till dem. Generellt sett kan man dock naturligtvis åter påverka utseendet med CSS.
Inom ett figure-element kan man infoga hur många bilder eller andra element man vill. Men endast ett figcaption-element får finnas i ett figure-element. Ännu ett exempel finns här:
<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>Det här är vår nya logotyp.</figcaption> </figure>
På detta sätt kan man även inkludera flera bilder i ett figure-element.
Särskilt med hänsyn till den logiska strukturen hos webbplatser eller innehåll finns det många nyheter i HTML5. Dessa kommer ni också att lära er detaljerat längre fram i denna serie.
