Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Uitdaging: Werken met Afbeeldingen | Werken met Media en Tabellen
Ultimate HTML

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

index.html

Hint
expand arrow
  1. Gebruik de <img>-tag om een afbeelding weer te geven;
  2. Gebruik het src-attribuut om de locatie van de afbeelding op te geven;
  3. Gebruik het alt-attribuut om beschrijvende tekst voor de afbeelding toe te voegen;
  4. Gebruik het width-attribuut om de breedte van de afbeelding te bepalen;
  5. Gebruik het height-attribuut om de hoogte van de afbeelding te bepalen.
Oplossing
expand arrow
<!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?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 2

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Sectie 4. Hoofdstuk 2
some-alt