Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Challenge: Work With Images | Arbeiten mit Medien und Tabellen
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 4. Kapitel 2

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 4. Kapitel 2
some-alt