Utmaning: Arbeta med bilder
Svep för att visa menyn
Mål
Öva på att använda den absoluta sökvägen för bilder i HTML.
Uppgift
Säkerställ att src-attributet för den första bilden använder den absoluta sökvägen. Du hittar bilden på:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png
Använd den absoluta sökvägen för src-attributet på den andra bilden. Åtkomst till bilden här:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png
Ange lämpligt värde för alt-attributet för båda bilderna. Kom ihåg att alt-värdet är avgörande för att ge kontext om bilderna inte kan laddas eller för användare som förlitar sig på skärmläsare.
index.html
Tips
- Använd
<img>-taggen för att visa en bild; - Använd attributet
srcför att ange bildens plats; - Använd attributet
altför att tillhandahålla beskrivande text för bilden; - Använd attributet
widthför att definiera bildens bredd; - Använd attributet
heightför att definiera bildens höjd.
Lösning
<!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>
Var allt tydligt?
Tack för dina kommentarer!
Avsnitt 4. Kapitel 2
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Avsnitt 4. Kapitel 2