Testen Sie Ihre Fähigkeiten: HTML-Bilder

Bilder 1

In dieser Aufgabe sollen Sie ein Bild von einigen 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 in die Seite einzubetten. Das Bild heißt blueberries.jpg und ist verfügbar unter dem Pfad https://github.com/mdn/learning-area/blob/main/html/multimedia-and-embedding/tasks/images/images/blueberries.jpg?raw=true.
2. Fügen Sie einen alternativen Text in ein geeignetes Attribut ein, um das Bild für Personen zu beschreiben, 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 erneutes Rendern verursacht. Die intrinsische Größe des Bildes ist 615 x 419 Pixel.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen 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/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 ausgestattetes Bild, aber wir möchten, dass Sie einen Tooltip hinzufügen, der erscheint, wenn das Bild mit der Maus überfahren wird. Sie sollten einige geeignete Informationen in den Tooltip einfügen.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen 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" />

Wir haben keinen fertigen Inhalt für diese Aufgabe 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 wird Ihnen sowohl ein voll ausgestattetes Bild als auch etwas Beschriftungstext zur Verfügung gestellt. Was Sie hier tun müssen, ist, Elemente hinzuzufügen, die das Bild mit der Beschriftung verbinden.

Der Ausgangspunkt der Aufgabe sieht folgendermaßen 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: Strukturierung von Inhalten mit HTML
• Weiter