Afbeeldingen

Afbeeldingen spelen een cruciale rol bij het verbeteren van de visuele aantrekkingskracht en het overbrengen van informatie op webpagina's. In HTML worden afbeeldingen ingevoegd met de <img>-tag.

Afbeeldingen invoegen

De <img>-tag wordt gebruikt om afbeeldingen in een HTML-document te plaatsen. In tegenstelling tot de meeste HTML-tags heeft de <img>-tag geen sluitende tag en is deze zelfsluitend.
Voorbeeld:

<img src="image.jpg" alt="Description of the image">

In het bovenstaande voorbeeld:

• De <img>-tag wordt gebruikt om een afbeelding in te voegen;
• Het src-attribuut specificeert de bron (URL) van het afbeeldingsbestand;
• Het alt-attribuut biedt alternatieve tekst voor de afbeelding. Deze tekst wordt weergegeven als de afbeelding niet kan worden geladen of voor toegankelijkheidsdoeleinden.

Voordat we een praktijkvoorbeeld bekijken, is het belangrijk om de essentiële attributen van de img-tag te begrijpen en hoe deze de inhoud beïnvloeden.

Afbeeldingsattributen

1. src: Geeft de bron (URL) van het afbeeldingsbestand op. Dit attribuut is vereist om de afbeelding met de <img>-tag weer te geven;
2. alt: Biedt alternatieve tekst voor de afbeelding. De tekst die is opgegeven in het alt-attribuut wordt weergegeven als de afbeelding niet kan worden geladen of voor toegankelijkheidsdoeleinden. Dit is essentieel voor gebruikers die schermlezers gebruiken of in situaties waarin de afbeelding niet kan worden weergegeven;
3. width: Geeft de breedte van de afbeelding op in pixels of als percentage van de bovenliggende container;
4. height: Geeft de hoogte van de afbeelding op in pixels of als percentage van de bovenliggende container;
5. title: Biedt extra informatie over de afbeelding. Dit wordt vaak weergegeven als een tooltip wanneer de gebruiker met de muis over de afbeelding beweegt.
   Voorbeeld:

In het bovenstaande voorbeeld:

• De <img>-tag voegt een afbeelding toe aan een webpagina;
• Het src-attribuut specificeert de bron-URL van het afbeeldingsbestand;
• Het alt-attribuut stelt de alternatieve tekst voor de afbeelding in;
• Het width-attribuut stelt de breedte van de afbeelding in;
• Het height-attribuut stelt de hoogte van de afbeelding in;
• Het title-attribuut biedt extra informatie over de afbeelding.

Videotutorial