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 1. Kapitel 18
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Abschnitt 1. Kapitel 18