Uitdaging: Werken met Afbeeldingen
Veeg om het menu te tonen
Doel
Oefenen met het gebruik van het absolute pad voor afbeeldingen in HTML.
Opdracht
Zorg ervoor dat het src-attribuut van de eerste afbeelding het absolute pad gebruikt. Je vindt de afbeelding op:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png
Gebruik het absolute pad voor het src-attribuut van de tweede afbeelding. Toegang tot de afbeelding hier:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png
Specificeer de juiste waarde voor het alt-attribuut voor beide afbeeldingen. Onthoud dat de alt-waarde essentieel is om context te bieden wanneer afbeeldingen niet laden of voor gebruikers die schermlezers gebruiken.
index.html
Hint
- Gebruik de
<img>-tag om een afbeelding weer te geven; - Gebruik het
src-attribuut om de locatie van de afbeelding op te geven; - Gebruik het
alt-attribuut om beschrijvende tekst voor de afbeelding toe te voegen; - Gebruik het
width-attribuut om de breedte van de afbeelding te bepalen; - Gebruik het
height-attribuut om de hoogte van de afbeelding te bepalen.
Oplossing
<!DOCTYPE html>
<html lang="en">
<head>
<title>Challenge: Images</title>
</head>
<body>
<!-- Image one -->
<img
src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png"
alt="Emotion that opens the mouth"
width="256"
height="256"
/>
<!-- Image two -->
<img
src="https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png"
alt="Emotion that shows the tongue"
width="256"
height="256"
/>
</body>
</html>
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 4. Hoofdstuk 2
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Sectie 4. Hoofdstuk 2