Testen Sie Ihre Fähigkeiten: HTML-Bilder

Aufgabe 1

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

Um die Aufgabe abzuschließen:

1. Fügen Sie den Pfad zum Bild in ein geeignetes Attribut ein, um es auf der Seite einzubetten. Das Bild heißt blueberries.jpg, und es 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 alternativen Text in ein geeignetes Attribut ein, um das Bild zu beschreiben, für Personen, die es nicht sehen können.
3. Geben Sie dem <img>-Element ein width-Attribut von 400 und ein geeignetes height-Attribut, damit es im korrekten Seitenverhältnis angezeigt wird und beim Laden kein Neurendering verursacht. Die intrinsische Größe des Bildes beträgt 615 x 419 Pixel.

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

<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="blueberries" width="400" height="273" />

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

Aufgabe 2

In dieser Aufgabe haben Sie bereits ein funktionsreiches Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der angezeigt wird, wenn das Bild mit der Maus berührt wird. Sie sollten einige geeignete 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 erhalten Sie sowohl ein funktionsreiches Bild als auch einen Bildunterschriftstext. 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