Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Challenge: Work With Images | HTML-Formulare und Benutzereingaben
Ultimatives HTML

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

index.html

Hinweis
expand arrow
  1. Das <img>-Tag verwenden, um ein Bild anzuzeigen;
  2. Das src-Attribut verwenden, um den Speicherort des Bildes anzugeben;
  3. Das alt-Attribut verwenden, um einen beschreibenden Text für das Bild bereitzustellen;
  4. Das width-Attribut verwenden, um die Bildbreite festzulegen;
  5. Das height-Attribut verwenden, um die Bildhöhe festzulegen.
Lösung
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>
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 1. Kapitel 18

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Abschnitt 1. Kapitel 18
some-alt