Testen Sie Ihre Fähigkeiten: HTML-Bilder

Bilder 1

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

Um die Aufgabe zu erfüllen:

1. Fügen Sie den Pfad zum Bild in ein passendes Attribut ein, um es auf der Seite einzubetten. Das Bild heißt blueberries.jpg und ist unter dem Pfad https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/blueberries.jpg?raw=true verfügbar.
2. Fügen Sie einen alternativen Text in ein passendes Attribut ein, um das Bild für Menschen zu beschreiben, die es nicht sehen können.
3. Geben Sie dem <img>-Element ein width-Attribut von 400 und ein passendes height-Attribut, damit es im richtigen Seitenverhältnis angezeigt wird und beim Laden kein Neuladen verursacht. Die intrinsische Größe des Bildes beträgt 615 x 419 Pixel.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<h1>Basic image embed</h1>

<img />

<p>You should see a picture of some blueberries above.</p>

body {
  background-color: white;
  color: #333333;
  font:
    1em / 1.4 "Helvetica Neue",
    "Helvetica",
    "Arial",
    sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  border: 1px solid black;
}

Der aktualisierte Inhalt sollte so aussehen:

<h1>Basic image embed</h1>

<img src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/blueberries.jpg?raw=true"
     alt="blueberries" width="400" height="273" />

<p>You should see a picture of some blueberries above.</p>

Bilder 2

In dieser Aufgabe haben Sie bereits ein voll funktionsfähiges Bild, wir möchten jedoch, 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.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<h1>Basic image title</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Several tall evergreen trees called larches" />

Für diese Aufgabe haben wir keinen fertigen Inhalt bereitgestellt, da er genauso aussieht wie der Ausgangspunkt.

<h1>Basic image title</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/larch.jpg?raw=true"
  alt="Several tall evergreen trees called larches"
  title="And now, Number 1, The Larch" />

Bilder 3

In dieser Aufgabe erhalten Sie sowohl ein voll funktionsfähiges Bild als auch einen Beschriftungstext. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Beschriftung verbinden.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<h1>Image and caption</h1>

<img
  src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
  alt="An abstract flaming fox wrapping around a blue sphere"
  width="446"
  height="460" />
The 2019 Firefox logo

figcaption {
  font-style: italic;
}

Der aktualisierte Inhalt sollte so aussehen:

<h1>Image and caption</h1>

<figure>
  <img
    src="https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/firefox.png?raw=true"
    alt="An abstract flaming fox wrapping around a blue sphere"
    width="446"
    height="460" />
  <figcaption>The 2019 Firefox logo</figcaption>
</figure>

• Zurück
• Übersicht: Inhalte mit HTML strukturieren
• Weiter