Testen Sie Ihre Fähigkeiten: HTML-Bilder

Ziel dieses Fähigkeitstests ist es zu überprüfen, ob Sie Bilder und wie man sie in HTML einbettet verstehen.

Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.

Wenn Sie nicht weiterkommen, können Sie uns über einen unserer Kommunikationskanäle kontaktieren.

Aufgabe 1

In dieser Aufgabe möchten wir, dass Sie ein Bild von Blaubeeren in die Seite einbetten. Sie müssen:

  • Den Pfad zum Bild in ein geeignetes Attribut einfügen, um es auf der Seite einzubetten. Das Bild heißt blueberries.jpg und befindet sich in einem Ordner innerhalb des aktuellen Ordners, der images heißt.
  • Einen Alternativtext in ein geeignetes Attribut einfügen, um das Bild zu beschreiben, für Personen, die es nicht sehen können.
  • Dem <img>-Element eine geeignete width und height geben, damit es im korrekten Seitenverhältnis angezeigt wird und genug Platz auf der Seite bleibt, um es darzustellen. Die intrinsische Größe des Bildes beträgt 615 x 419 Pixel.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

Aufgabe 2

In dieser Aufgabe haben Sie bereits ein vollwertiges Bild, aber wir möchten, dass Sie ein Tooltip hinzufügen, das angezeigt wird, wenn das Bild überflogen wird. Sie sollten einige passende Informationen in das Tooltip setzen.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.

Aufgabe 3

In dieser Aufgabe erhalten Sie sowohl ein vollwertiges Bild als auch einen Beschriftungstext. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Beschriftung verknüpfen.

Versuchen Sie, den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:

Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.