Tot nu toe zou jullie beelddefinitie er ongeveer zo uit moeten zien:
<img src="images/logo.png" alt="PSD-Tutorials.de" />
Aan het img-element kunnen (en moeten) echter enkele attributen worden toegewezen. Ten eerste is er de alt. De hier gedefinieerde tekst wordt weergegeven door de browser als de afbeelding - om welke reden dan ook - niet geladen kon worden.
Helaas leidt het gebruik van het alt-attribuut vaak tot misverstanden. Het alt-attribuut is in feite uitsluitend bedoeld voor het geval dat de afbeelding niet wordt weergegeven. Sommige browsers tonen echter de waarde van het alt-attribuut in een tooltip-venster wanneer je met de muis over de afbeelding gaat.
Dit gedrag is onjuist. Voor dergelijke tooltips is het attribuut title bedoeld. Een passende definitie zou er als volgt uitzien:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Het logo van PSD-Tutorials.de" />
In dit geval overschrijft de waarde van title die van alt.
Afmetingen
In HTML worden afmetingen tegenwoordig vaak niet langer door attributen, maar met behulp van CSS bepaald. De definitie van afmetingen valt hier echter niet onder. Hoogte en breedte worden nog steeds gedefinieerd met de attributen width en height. Hierbij nog een voorbeeld:
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Het logo van PSD-Tutorials.de" width="200" height="150" />
Als er geen eenheid wordt opgegeven bij width of height, worden de numerieke waarden door de browser geïnterpreteerd als pixels. In het voorgaande voorbeeld is de afbeelding dus 200 pixels breed en 150 pixels hoog. Ook een percentage is mogelijk.
<img src="images/logo.png" alt="PSD-Tutorials.de" title="Het logo van PSD-Tutorials.de" width="20%" height="15%" />
De percentages hebben betrekking op de beschikbare weergaveruimte. Als er geen afmetingen worden opgegeven, tonen browsers de afbeeldingen in hun originele grootte.
Afbeeldingen en tekst alinea's
Als je afbeeldingen combineert met doorlooptekst, moet je oppassen.
<p><img src="logo.png" alt="" width="180" height="150" /> Deze tekst wordt naast de afbeelding weergegeven.</p>
Het img element is een zogenaamd inline-element. Afbeeldingen kunnen dus direct in de tekst worden geplaatst. Als de afbeelding hoger is dan de regelhoogte, zal de tekst door de browser binnen de regel worden uitgelijnd. Standaard wordt de tekst onderaan uitgelijnd ten opzichte van de afbeelding.
De uitlijning kon in oudere HTML-versies worden aangepast met het attribuut align. Gebruik dit echter niet meer, omdat dit verwijderd is uit de HTML5-standaard. Gebruik in plaats daarvan de mogelijkheden die CSS biedt. Hierdoor kun je bijvoorbeeld de tekst om de afbeelding laten stromen.
Een lange beschrijving
HTML biedt de mogelijkheid om een uitgebreide beschrijving aan een afbeelding toe te voegen. Dit is handig wanneer een afbeelding daadwerkelijk verdere toelichting nodig heeft. Je kunt de aanvullende informatie op verschillende plaatsen opslaan en ernaar verwijzen.
De aanvullende informatie kan op verschillende locaties staan.
<img src="bild1.png" alt="Diagram 1" title="Diagram 1" longdesc="#diagramm" />
Hier wordt ervan uitgegaan dat er binnen de pagina een gebied met de ID diagramm is.
De meest gebruikelijke methode is waarschijnlijk dat de informatie wordt opgeslagen in een externe bestand.
<img src="bild1.png" alt="Diagram 1" longdesc="diagramm1.htm" />
Momenteel is er echter nog geen goede ondersteuning vanuit browsers op dit gebied. Bovendien lijkt dit attribuut de browserfabrikanten voor de vraag te stellen hoe ze het gemakkelijk kunnen implementeren.
Omdat dit bijvoorbeeld in Firefox niet echt mooi en duidelijk is opgelost. Bezoekers van normale websites zien niet meteen dat een afbeelding een longdesc-attribuut heeft. Ze moeten eerder met de rechtermuisknop op de afbeelding klikken.
In het contextmenu verschijnt vervolgens de optie Beschrijving weergeven. Als je hierop klikt, wordt de aanvullende informatie die in longdesc is opgegeven weergegeven. Zoals gezegd, dit werkt zo in Firefox, maar elegant is het zeker niet.
Opera heeft het overigens op een vergelijkbare manier opgelost. Als je in deze browser met de rechtermuisknop op de afbeelding klikt, verschijnt de invoer Lange Beschrijving.
Deze leidt dan naar de opgegeven aanvullende informatie.
De WC3 stelt bovendien voor om de lange beschrijving in de vorm van een Data-URL op te geven.
<img src="logo.png" alt="W3C" longdesc="data:text/html;charset=utf-8;,%3C!DOCTYPE%20html%3E %3Chtml%3E%3Chead%3E%3Ctitle%3EBeschrijving%20van%20het%20W3C-logo%3C/title%3E%3C/head%3E %3Cbody%3E%3Cp%3EEen%20blauwe%20hoofdletter%20%22W%22%20met%20positieverbetering%20zodat%20het%20 een%20blauwe%203%20raakt,%20gevolgd%20door%20een%20zwarte%20schaduw%20van%20een%20witte%20 hoofdletter%20C,%20allemaal%20op%20een%20witte%20achtergrond%3C/body%3E%3C/html%3E" />
Als je nog geen ervaring hebt met deze Data-URL's, vind je uitgebreide informatie hierover op http://de.wikipedia.org/wiki/Data-URL.
Definiëren van afbeeldingsbeschrijvingen
Tot nu toe waren er in HTML geen mogelijkheden om onderschriften en beeldgroepen te definiëren. Dit aspect is echter veranderd met HTML5. Hier werden namelijk de twee nieuwe elementen figure en figcaption geïntroduceerd.
Om het vooraf te zeggen: figure is niet uitsluitend bedoeld voor gebruik in combinatie met afbeeldingen. In feite kan het element worden gebruikt voor allerlei elementen die een document aanvullen. Dit kunnen naast afbeeldingen bijvoorbeeld diagrammen, codevoorbeelden en video's zijn.
Naast figure is er ook nog figcaption. Hiermee kunnen inhoud die voor bepaalde gebruikersgroepen niet leesbaar is, worden voorzien van een alternatieve beschrijving.
Hier is een voorbeeld van het gebruik van de twee elementen figure en figcaption:
<figure> <img src="logo.jpg" width="200" height="150" alt="PSD-Tutorials.de" /> <figcaption>Dit is ons nieuwe logo.</figcaption> </figure>
Een blik op het resultaat in de browser levert het volgende resultaat op:
Hoe de browsers omgaan met de twee elementen blijft uiteindelijk aan hen overgelaten. In principe kunnen jullie de weergave natuurlijk wel weer beïnvloeden met behulp van CSS.
Binnen een figure-element kunnen willekeurig veel afbeeldingen of andere elementen worden ingevoegd. Er mag echter slechts één figcaption-element in een figure-element aanwezig zijn. Ook hiervoor weer een voorbeeld:
<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>Dit is ons nieuwe logo.</figcaption> </figure>
Op deze manier kunnen jullie dus ook meerdere afbeeldingen in een figure-element plaatsen.
Met name met het oog op de logische structurering van websites of inhoud zijn er tal van vernieuwingen in HTML5. Deze zullen jullie gedurende deze serie natuurlijk ook uitgebreid leren kennen.
