Testen Sie Ihre Fähigkeiten: HTML-Bilder

In dieser Aufgabe möchten wir, dass Sie ein Bild von Blaubeeren auf der 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 ist unter dem Pfad https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true verfügbar.
• Einen alternativen Text in ein geeignetes Attribut einfügen, um das Bild für Personen zu beschreiben, die es nicht sehen können.
• Dem <img>-Element eine geeignete width geben, damit es im richtigen 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.

Um zu beginnen, können Sie auf "Play" im untenstehenden Codeblock klicken, um das Beispiel im MDN Playground zu bearbeiten, oder laden Sie den Ausgangspunkt für diese Aufgabe herunter und arbeiten Sie lokal in Ihrem eigenen Editor.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit dem Reset-Button im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie die Lösung am Ende des Abschnitts ansehen.

<h1>Basic image embed</h1>

<img />

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

* {
  box-sizing: border-box;
}

img {
  border: 1px solid black;
}

<h1>Basic image embed</h1>

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

In dieser Aufgabe haben Sie bereits ein vollständiges Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der erscheint, wenn Sie mit der Maus über das Bild fahren. Sie sollten geeignete Informationen in den Tooltip einfügen.

Um zu beginnen, können Sie auf "Play" im untenstehenden Codeblock klicken, um das Beispiel im MDN Playground zu bearbeiten, oder laden Sie den Ausgangspunkt für diese Aufgabe herunter und arbeiten Sie lokal in Ihrem eigenen Editor.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit dem Reset-Button im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie die Lösung am Ende des Abschnitts ansehen.

<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" />

<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" />

In dieser Aufgabe wird Ihnen sowohl ein vollständiges Bild als auch etwas Bildunterschriftstext bereitgestellt. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Bildunterschrift verbinden.

Um zu beginnen, können Sie auf "Play" im untenstehenden Codeblock klicken, um das Beispiel im MDN Playground zu bearbeiten, oder laden Sie den Ausgangspunkt für diese Aufgabe herunter und arbeiten Sie lokal in Ihrem eigenen Editor.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit mit dem Reset-Button im MDN Playground löschen. Wenn Sie wirklich nicht weiterkommen, können Sie die Lösung am Ende des Abschnitts ansehen.

<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;
}

<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>