Testen Sie Ihre Fähigkeiten: HTML-Bilder

Aufgabe 1

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

Um die Aufgabe abzuschließen:

1. Fügen Sie den Pfad zum Bild in ein entsprechendes 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/images/blueberries.jpg?raw=true verfügbar.
2. Fügen Sie einigen Alternativtext in ein entsprechendes Attribut ein, um das Bild für Personen zu beschreiben, die es nicht sehen können.
3. Geben Sie dem <img>-Element eine geeignete width, 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.

<h1>Basic image embed</h1>

<img />

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

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

Aufgabe 2

In dieser Aufgabe haben Sie bereits ein voll ausgestattetes Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der erscheint, wenn mit der Maus über das Bild gefahren wird. Sie sollten einige passende Informationen in den Tooltip einfügen.

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

Aufgabe 3

In dieser Aufgabe stellen wir Ihnen sowohl ein vollständig ausgestattetes Bild als auch einen Bildunterschriftstext zur Verfügung. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Bildunterschrift verknüpfen.

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

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter