Afbeeldingen Toevoegen in HTML

Afbeeldingen maken webpagina's aantrekkelijker. Je kunt een afbeelding invoegen met de <img>-tag.

Belangrijke attributen:

• src: verplicht. Pad naar het afbeeldingsbestand (absoluut of relatief);
• alt: verplicht. Tekst die wordt weergegeven als de afbeelding niet kan worden geladen, ook gebruikt door schermlezers;
• width / height: grootte in pixels. Zonder deze attributen wordt de afbeelding op originele grootte weergegeven.

alt-attribuut

De alt-tekst moet de afbeelding duidelijk beschrijven en nuttige context geven.

Stel je het volgende voorbeeld voor. Je hebt een bron over paardenraces. Je wilt laten zien hoe de deelnemers zich voorbereiden op de race.

Slechte alt-tekst:

Betere alt-tekst:

De verbeterde versie biedt echte context en helpt visueel gehandicapte gebruikers te begrijpen wat de afbeelding toont.

src-attribuut

Het src-attribuut kan zowel absolute als relatieve paden gebruiken om de locatie van het afbeeldingsbestand op te geven.

Absoluut pad

Een volledige URL die verwijst naar een online afbeelding.

Iedereen kan via deze volledige link toegang krijgen tot de afbeelding.

Bekijk het volgende echte voorbeeld.

• View the Code
• Open the Live Page

Relatief pad

Verwijst naar een afbeelding binnen je projectmap.

Dit betekent dat image.jpg is opgeslagen in de map images naast je HTML-bestand.

Bekijk het echte voorbeeld hieronder. Je vindt de map images, die het bestand sun.png bevat.

• View the Code
• Open the Live Page