HTML 3: Afbeeldingen

Afbeeldingen zeggen meer dan woorden

Wat zou het web zijn zonder afbeeldingen? Het zou één saaie dode tekst zijn. Gelukkig kunnen we met HTML ook afbeeldingen in onze pagina opnemen. Probeer het gebruik van afbeeldingen echter te beperken. Een aantal afbeeldingen bij een lange tekst zijn een leuke visuele ondersteuning maar te veel afbeeldingen maken je website onoverzichtelijk en het zal tevens langer duren om je pagina te laden. Het meest gebruikte formaat is .jpg of .jpeg, verder is er .gif voor bewegende afbeeldingen en ook .png voor transparante plaatjes.

De img tag

Je kan afbeeldingen in HTML weergeven door de img tag. Hierin zit dan het attribuut src die naam de afbeelding op je site verwijst.

De bovenstaande code zal de afbeelding afb.png weergeven op een grootte van 20 x 20 pixels. Tevens is het verplicht om het attribuut alt in je img tag te steken. Deze beschrijving zal te voorschijn komen als je afbeelding niet wordt gevonden of als afbeeldingen uitstaan in het browser van de bezoeker.

De grootte van afbeeldingen aanpassen

Zoals ik al vertelde kun je de grootte van je afbeeldingen aanpassen door gebruik te maken van width en height. Je moet er wel rekening mee houden dat je afbeeldingen hierdoor soms lelijk worden. Er wordt geen rekening gehouden met de aspectratio. Daarom raad ik je aan om altijd de default grootte. Je kunt je afbeeldingen wel verkleinen door gebruik te maken van Photoshop of via het gratis programma PIXresizer

Afbeeldingen gebruiken als hyperlinks

Je kan ook je afbeelding gebruiken om mensen door te sturen naar een volgende pagina.

Ik voegde wel het border="0" attribuut toe aan de afbeelding anders krijg je afbeeldingen met lelijke borders.
Wat zijn hyperlinks?

Afbeelding als pagina achtergrond

Je kan ook afbeeldingen gebruiken als achtergrond voor je pagina. Dit doe je door in de body tag het attribuut background te plaatsen.