Testen Sie Ihre Fähigkeiten: HTML-Bilder

Ziel dieses Fähigkeitstests ist es, zu beurteilen, ob Sie Bilder und deren Einbettung in HTML 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 auf der Seite einbetten. Sie müssen:

  • Den Pfad zum Bild in einem geeigneten Attribut hinzufü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.
  • Einige alternative Texte in einem geeigneten Attribut hinzufügen, um das Bild für Menschen, die es nicht sehen können, zu beschreiben.
  • Dem <img>-Element eine passende Breite und Höhe geben, damit es im richtigen Seitenverhältnis angezeigt wird und genügend Platz auf der Seite verbleibt, um es anzuzeigen. 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 voll funktionsfähiges Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der erscheint, wenn die Maus über das Bild bewegt wird. Sie sollten einige geeignete Informationen in den Tooltip einfügen.

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 voll funktionsfähiges Bild als auch einen Bildunterschriftstext. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Bildunterschrift verbinden.

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.