HTML lernen (1): Einführungskurs

HTML-Grundlagen: Bilder und Pfade: HTML-Grundlagen: Bilder einfügen

∅ 4.5 / 19 Bewertungen

HTML-Grundlagen: Bilder einfügen

Auf dieser Seite

In HTML lassen sich sehr einfach Grafiken einbinden. Zwei Grafikformate, die von allen gängigen Browsern unterstützt werden, sind das GIF- und JPEG-Format. (Mehr dazu im Modul "Aufbau einer Web-Site") Setzen Sie Grafiken jedoch immer gezielt ein, denn "weniger ist manchmal mehr". Je mehr Grafiken eine Seite enthält, desto länger dauert der Ladevorgang. Eine Grafik sollte nicht größer sein als 30 KBytes, idealerweise ist sie höchstens 5 KBytes groß.

Grafik einbinden: Grafiken können in ein HTML-Dokument über die Anweisung <img src="Dateiname"> direkt eingebunden werden.

Aufgabe: Das etwas weiter unten abgebildete Bild (engl. image) 'delphin.gif' soll in die HTML-Datei 'delphin.htm' eingesetzt werden.

  • Als erstes legen Sie die HTML-Datei delphin.htm an. Geben Sie folgenden HTML-Code als Grundgerüst ein:

Beispiel:

<html>
<head>
<title>Alles über Delphine </title>
</head>
<body bgcolor="#ffffff">


</body>
</html>

Jetzt soll das Bild delphin.gif in die Datei eingebunden werden.

  • Dazu müssen Sie das Bild der beiden springenden Delphine auf Ihrer Festplatte im gleichen Verzeichnis wie die HTML-Datei speichern.

50080_delphin.gif

Delphin

Das funktioniert bei Windows-Rechnern folgendermaßen:

  • Klicken Sie mit der rechten Maustaste auf das Bild.

  • Wählen Sie den Befehl "Grafik speichern" (engl. Save Image).

  • Geben Sie das Verzeichnis an, in das Sie das Bild speichern möchten. (das gleiche, in dem die Datei delphin.htm liegt.)

Für die Mac-Anwender:

  • Klicken Sie auf das Bild und halten Sie die Maustaste gedrückt.

  • Wählen Sie den Befehl "Grafik speichern" (engl. Save Image).

  • Geben Sie den Ordner an, in dem Sie das Bild speichern möchten. Das ist derselbe Ordner, in dem die Datei delphin.htm liegt.

Nachdem Sie das Bild auf Ihrer Festplatte gespeichert haben, können Sie es in die HTML-Datei delphin.htm einbinden. Der Befehl, den Sie dazu im Body eingeben müssen, lautet folgendermaßen:
<img src="delphin.gif">
Schauen wir uns das Ergebnis im Browser an:

50081_delphinbr.gif

Delphin im Browser

Im <img src=-...>-Tag können die Attribute alt, align und border optional verwendet werden.

alt="[Text]"

Gibt den Text an, wenn die Bildanzeige im Browser deaktiviert wurde und erscheint kurzzeitig beim Laden der Grafik, wenn die Bildanzeige im Browser eingeschaltet ist. Dieses Attribut sollten Sie immer angeben. Dieser Alt-Tag wird nämlich auch verwendet, um in Text-basierten Browsern die Bilder zu ersetzen.

align="[Position]"

Bestimmt die horizontale und vertikale Ausrichtung. Dies spielt bei Bildern, die innerhalb eines Textes eingebunden sind, eine Rolle. Damit kontrollieren Sie den Textfluß um das Bild.

border="[Stärke in Pixel]"

Umrahmt die Grafik. Fehlt diese Angabe, erhält die Grafik keinen Rahmen. Wenn Sie die Grafik verlinken, dann erhält dieser Rahmen entweder die Farbe, die Sie für Links definiert haben, oder standardmäßig blau. Wenn Sie diesen Rahmen nicht anzeigen möchten, sollten Sie border="0" setzen.

width="[Breite in Pixeln]"

Bestimmt die Breite der Grafik. Geben Sie hier die richtige Breite der Grafik in Pixeln an, da ansonsten das Bild verzerrt wird.

height="[Höhe in Pixeln]"

Bestimmt die Höhe der Grafik. Hier sollten Sie auch die richtige Breite der Grafik in Pixeln angeben, sonst wird das Bild verzerrt.

Breite und Höhe von Grafiken sollten immer angegeben werden.