Bijna iedere webpagina bevat afbeeldingen. Dit kunnen foto's, tekeningen, knoppen, balken of zelfs hele achtergronden zijn. Een afbeelding opnemen in je HTML-code is niet moeilijk.

Je gebruikt hiervoor de IMG-tag (img staat voor Image), in combinatie met het attribuut src (staat voor Source). De HTML-code komt er dan als volgt uit te zien:

Met deze regel wordt de afbeelding getoond. De img-tag heeft geen eind-tag.

Horizontale uitlijning

Net zoals je tekst kunt uitlijnen, kan ook een afbeelding uitgelijnd worden. Je kunt een afbeelding links, rechts of in het midden uitlijnen. Om de afbeelding links of rechts op de pagina te positioneren gebruik je het attribuut align.

De waarden worden dan respectievelijk left of right. Wil je de afbeelding in het midden hebben, dan gebruik je de tags <center> en </center>.

Verticale uitlijning

Soms moet er tekst rondom de afbeelding komen te staan. Om de afbeelding te positioneren ten opzichte van die tekst, moet het attribuut align="X" worden toegevoegd aan de <img>-tag.

De X kan drie waarden hebben, te weten top, middle of bottom.

Bij de waarde top wordt de eerste tekstregel uitgelijnd met de bovenkant van de afbeelding.

Gebruik je de waarde middle dan wordt de tekstregel met het midden van de afbeelding uitgelijnd.

De waarde bottom tenslotte lijnt de tekstregel uit met de onderkant van de afbeelding.

Deze tekst begint zoals je ziet bovenaan. De code is <img src="/blabla.jpg" align="top">En dan de tekst.

Deze tekst begint in het midden van de afbeelding. De code is <img src="/blabla.jpg" align="middle">En dan de tekst.

Deze tekst begint onderaan. De code is <img src="/blabla.jpg" align="bottom">En dan de tekst.

Witruimte rondom een afbeelding

Soms is het storend dat er te weinig witruimte is tussen de afbeelding en de tekst. Om dit te veranderen kun je gebruik maken van de attributen hspace="X" en vspace="X", waarbij de X een waarde heeft die ligt tussen de 1 en 100.

hspace (horizontal space) wordt gebruikt om een witruimte te maken rechts en links van de afbeelding terwijl met vspace (vertical space) een witruimte wordt gecreeërd boven en onder de afbeelding. De waarde X geeft aan om hoeveel pixels het gaat.

WIDTH en HEIGHT

Behalve dat het mogelijk is de afbeelding te positioneren, kun je de afbeelding ook vergroten of verkleinen via HTML-code. Meestal is dit nodig wanneer afbeeldingen worden gebruikt in tabellen en frames, opdat alles netjes past.

Om de grootte van de afbeelding te controleren voeg je de attributen width="X" en height="X" toe aan de <img>-tag :

Deze afbeelding zal precies 77 pixels breed zijn en 100 pixels hoog. Links en rechts zal er zowiezo 3 pixels plaats zijn voor er andere inhoud kan beginnen. Boven en onder zal er ook 3 pixels plaats tussen zijn.

Alternatieve tekst

Wanneer een afbeelding om welke reden dan ook, niet kan weergegeven worden door de browser, kun je in de plaats een alternatieve tekst opgeven.

Deze tekst komt in het attribuut alt te staan. Ook spraakbrowsers maken gebruik van de tekst die je hier opgeeft, door deze voor te lezen. Zo krijgt een visueel gehandicapte bezoeker toch nog informatie over de afbeelding die hij of zij niet (goed) kan zien :

Aandachtspunten

Afbeeldingen op webpagina's gebruiken klinkt zeer aanlokkelijk, maar overdrijf er niet mee; enkele raadgevingen omtrent het gebruik van afbeeldingen zijn hier wel op zijn plaats:

1. De enige geschikte bestandsformaten voor afbeeldingen op het web zijn gif, jpeg en png. Gebruik nooit het bmp-formaat.
   gif is beperkt tot 256 kleuren en leent zich uitstekend voor logo's of cliparts.
   Voor foto's kies je voor jpeg dat 16,7 miljoen kleuren ondersteunt.
   png is het nieuwste formaat waarin de beste eigenschappen van gif en jpeg zijn verenigd.
2. Hou de bestandsgrootte in de gaten. Hoe kleiner de afbeelding, hoe sneller de bezoeker ze te zien zal krijgen.
   Enkele praktische tips:
   
   - Maak de afbeelding niet groter dan 600 x 400 pixels.
   - Beperk de resolutie tot 72 dpi.De resolutie is de afstand tussen de pixels. Hoe hoger de resolutie, hoe meer pixels op een oppervlak.
   - Gebruik een zich herhalend motief als achtergrondkleur bij voorkeur dan een groot bestand.
   - Gebruik thumbnails waar het kan. Thumbnails zijn kleine afbeeldingen waarop geklikt kan worden om de grote afbeelding te zien.
   


3. Gebruik enkel afbeeldingen als het moet: vaak wordt er nogal kwistig omgesprongen met allerlei (al dan niet bewegende) cliparts die men (gratis) van het web plukt. Dit komt de professionaliteit van je site zeker niet ten goede. Gebruik afbeeldingen die de context helpen verduidelijken.

Afbeelding als link

Op veel websites zijn de nodige knoppen te vinden waarop kan worden geklikt. Deze knoppen bestaan vaak niet alleen uit tekst.

Het zijn meestal kleine afbeeldingen die door de browser worden geladen. Om een afbeelding 'aanklikbaar' te maken, moeten we ervoor zorgen dat de afbeelding als hyperlink aanzien wordt.

Hiervoor gebruiken we gewoon de <A>-tag met het href-attribuut. In plaats van tekst tussen de <A>-tags te plaatsen, plaatsen we de code voor de afbeelding ertussen:

Je zult zien dat er een (blauwe) rand verschijnt rondom de afbeelding; deze duidt aan dat de afbeelding een link is waarop geklikt kan worden. Wil je deze (lelijke) rand niet, dan moet je bij de img-tag het attribuut border="0" toevoegen.

Het volgende deel van de cursus is Tabellen in HTML.
Tabellen helpen je om informatie overzichtelijk weer te geven.