Afbeeldingen zijn een essentieel onderdeel van webdesign. Ze maken een webpagina aantrekkelijk voor een bezoeker. Ze kunnen eenvoudig worden opgenomen in een HTML-document met behulp van de <img> tag.

• src: vereist attribuut. De waarde is het pad naar de afbeeldingslocatie. Het pad kan absoluut en relatief zijn;
• alt: vereist attribuut. Biedt alternatieve tekst die kan worden weergegeven wanneer de afbeelding niet kan worden weergegeven;
• width en height: specificeert de afbeeldingsgrootte in pixels. Zonder deze attributen wordt een afbeelding weergegeven in zijn oorspronkelijke grootte.

alt Attribuut

De afbeeldingsbeschrijving moet informatief en betekenisvol zijn. Het helpt om de afbeelding te beschrijven voor mensen die visueel gehandicapt zijn of deze niet kunnen zien. Op deze manier zal de browser het alt attribuut lezen, en kan een gebruiker begrijpen waarom een website deze afbeelding heeft.

Laten we het volgende voorbeeld voorstellen. Je hebt een bron over paardenraces. Je wilt laten zien hoe deelnemers zich voorbereiden op de race.

Slechte waarde voor het alt attribuut zal zijn:

Goede waarde voor het alt attribuut zal zijn:

De alt-tekst "Een man op een paard" is te algemeen en mist context. Het biedt een basisbeschrijving, maar het geeft geen nuttige details over de scène of het doel van de afbeelding.

src Attribuut

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

Absoluut Pad

Het specificeert de volledige URL van het afbeeldingsbestand op de webserver. Bijvoorbeeld:

Het betekent dat het afbeeldingsbestand zich bevindt op de link https://example.com/images/image.jpg op het internet. Iedereen kan de afbeelding openen via deze link.

Inspecteer alsjeblieft het volgende echte voorbeeld in de code sandbox hieronder:

Opmerking

Om de bestandsstructuur te bekijken, sleep de schuifregelaar aan de linkerkant van de code sandbox interface. In de linkerbovenhoek vind je een hamburgermenu vertegenwoordigd door drie strepen. Door op deze knop te klikken, navigeer je naar de bestandsorganisatie.

Relatief Pad

Het specificeert de locatie van het afbeeldingsbestand relatief ten opzichte van het huidige document. Bijvoorbeeld:

Dit betekent dat het image.jpg bestand zich bevindt in de images directory.

Inspecteer het echte voorbeeld in de code sandbox hieronder. Je zult de images map vinden, die het sun.png bestand bevat.

Opmerking

Om het verschil tussen relatieve en absolute paden samen te vatten: een absoluut pad vertegenwoordigt de daadwerkelijke link die iedereen kan gebruiken om toegang te krijgen tot een afbeelding. Aan de andere kant is een relatief pad een link binnen de context van je eigen project. Het verwijst naar een lokale afbeelding en pad die iedereen binnen het project kan openen.