Challenge: Work With Images
Swipe um das Menü anzuzeigen
Ziel
Übung zur Verwendung des absoluten Pfads für Bilder in HTML.
Aufgabe
Sicherstellen, dass das src-Attribut des ersten Bildes den absoluten Pfad verwendet. Das Bild ist zu finden unter:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/adik.png
Verwendung des absoluten Pfads für das src-Attribut des zweiten Bildes. Zugriff auf das Bild hier:
https://content-media-cdn.codefinity.com/courses/c468052d-6d47-4677-b1d1-fb11ace719b1/meadia-%26-tables/joking.png
Angabe des passenden Werts für das alt-Attribut beider Bilder. Beachte, dass der alt-Wert wichtig ist, um Kontext bereitzustellen, falls Bilder nicht geladen werden können oder für Nutzer, die auf Screenreader angewiesen sind.
index.html
Hinweis
- Das
<img>-Tag verwenden, um ein Bild anzuzeigen; - Das
src-Attribut verwenden, um den Speicherort des Bildes anzugeben; - Das
alt-Attribut verwenden, um einen beschreibenden Text für das Bild bereitzustellen; - Das
width-Attribut verwenden, um die Bildbreite festzulegen; - Das
height-Attribut verwenden, um die Bildhöhe festzulegen.
Lösung
<!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>
War alles klar?
Danke für Ihr Feedback!
Abschnitt 4. Kapitel 2
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Abschnitt 4. Kapitel 2