Afbeeldingen Toevoegen in HTML
Afbeeldingen maken webpagina's aantrekkelijker. Je kunt een afbeelding invoegen met de <img>-tag.
index.html
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 bieden.
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:
index.html
Betere alt-tekst:
index.html
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.
index.html
Iedereen kan de afbeelding openen via deze volledige link.
Bekijk het volgende echte voorbeeld in de code sandbox hieronder.
Om de mappenstructuur te bekijken, sleep de schuifregelaar aan de linkerkant van de code sandbox-interface. In de linkerbovenhoek vind je een hamburgermenu, weergegeven door drie strepen. Door op deze knop te klikken, navigeer je naar de mappenstructuur.
Relatief pad
Verwijst naar een afbeelding binnen je projectmap.
index.html
Dit betekent dat image.jpg is opgeslagen in de map images naast je HTML-bestand.
Bekijk het echte voorbeeld in de onderstaande code sandbox. Je vindt daar de map images, die het bestand sun.png bevat.
Absolute paden: volledige URL's die overal op het internet werken.
Relatieve paden: lokale projectpaden die binnen je eigen mappenstructuur worden gebruikt.
1. Welke tag kan worden gebruikt om een afbeelding op een website te plaatsen?
2. Welke attribuut is verplicht om op te geven voor een <img/>-tag?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain the difference between absolute and relative paths in more detail?
What are some tips for writing effective alt text for images?
Can you show more examples of using the img tag with different attributes?
Geweldig!
Completion tarief verbeterd naar 2.38Afbeeldingen Toevoegen in HTML
Veeg om het menu te tonen
Afbeeldingen maken webpagina's aantrekkelijker. Je kunt een afbeelding invoegen met de <img>-tag.
index.html
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 bieden.
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:
index.html
Betere alt-tekst:
index.html
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.
index.html
Iedereen kan de afbeelding openen via deze volledige link.
Bekijk het volgende echte voorbeeld in de code sandbox hieronder.
Om de mappenstructuur te bekijken, sleep de schuifregelaar aan de linkerkant van de code sandbox-interface. In de linkerbovenhoek vind je een hamburgermenu, weergegeven door drie strepen. Door op deze knop te klikken, navigeer je naar de mappenstructuur.
Relatief pad
Verwijst naar een afbeelding binnen je projectmap.
index.html
Dit betekent dat image.jpg is opgeslagen in de map images naast je HTML-bestand.
Bekijk het echte voorbeeld in de onderstaande code sandbox. Je vindt daar de map images, die het bestand sun.png bevat.
Absolute paden: volledige URL's die overal op het internet werken.
Relatieve paden: lokale projectpaden die binnen je eigen mappenstructuur worden gebruikt.
1. Welke tag kan worden gebruikt om een afbeelding op een website te plaatsen?
2. Welke attribuut is verplicht om op te geven voor een <img/>-tag?
Bedankt voor je feedback!
