Bilder einbinden


Schritt 1: Lokale Bilder referenzieren

Kopieren Sie die Datei plan.jpg auf Ihren lokalen Rechner:

Download plan.jpg

Erzeugen Sie eine Seite, in der Sie zwei <img>-Elemente hinterlegen: das erste Bild soll das Bild plan.jpg sein. Referenzieren Sie im zweiten <img>-Element eine Datei plan2.jpg, die nicht auf Ihrer Festplatte zu finden ist.
Belegen Sie bei beiden Elementen auch die Attribute alt und title mit sinnvollen Inhalten.

Schritt 2: Bildergröße verändern

Kopieren Sie das erste <img>-Element aus dem ersten Schritt noch zweimal auf die Seite. Setzen Sie die Attribute width und height in den drei identischen <img>-Elementen wie folgt:

  • 1. Bild: Breite 450 Pixel, Höhe 450 Pixel
  • 2. Bild: Breite 800 Pixel, Höhe 200 Pixel
  • 3. Bild: Breite 800 Pixel

Vergleichen Sie die Darstellung der Bilder im Browser. Was folgern Sie daraus für die Bedeutung der beiden Attribute?

Schritt 3: Bilder von einem Server referenzieren
Referenzieren Sie in einer HTML-Seite das Bild, das im Internet unter der folgenden URL gespeichert ist: www.hdm-stuttgart.de/dp/content/images/labore/crossmedia.jpg
Hinterlegen Sie für das Bild auch sinnvolle Werte für die Attribute alt und title.