Testen Sie Ihre Fähigkeiten: HTML-Bilder

Das Ziel dieses Fähigkeitstests ist es, zu bewerten, 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 sich über einen unserer Kommunikationskanäle an uns wenden.

Aufgabe 1

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

  • Den Pfad zum Bild in ein entsprechendes 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 namens images.
  • Alternativen Text in ein entsprechendes Attribut einfügen, um das Bild für Personen zu beschreiben, die es nicht sehen können.
  • Dem <img>-Element eine passende width und height zuweisen, damit es im korrekten Seitenverhältnis angezeigt wird und genügend 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 Startpunkt 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 vollständig ausgestattetes Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der erscheint, wenn das Bild mit der Maus berührt wird. Sie sollten einige passende Informationen in den Tooltip einfügen.

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

Laden Sie den Startpunkt 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 vollständig ausgestattetes Bild als auch einen Bildunterschriftstext. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Bildunterschrift verknüpfen.

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

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