Lycos: Einführung in das Internet

Tripod-HTML-Kurs (2)

Tripod-HTML-Kurs (1): Bilder einbinden

Bilder einbinden geht ganz einfach! Sie brauchen lediglich ein Beispielbild dazu. In Browsern darstellbare Bildformate, die keine Plugins benötigen, sind jpeg und gif.

Sie können sich jedes Bild aus dem Internet auf Ihren Rechner speichern, indem Sie mit der rechten Maustaste auf das Bild klicken und dann den Menüpunkt "Grafik speichern unter ..." anwählen und ein entsprechendes Verzeichnis auf Ihrem Rechner auswählen.

Einbinden geht dann einfach mit

<img src="beispiel.gif">

Dabei bedeutet:
beispiel.gif ist der Name des Bildes. Befindet sich das Bild nicht in demselben Verzeichnis, in dem auch die Datei mit dem HTML-Quelltext steht, müssen Sie zusätzlich den Pfad zu dem Verzeichnis angeben in dem das Bild steht.
Beispiel:

<img src="./Bilder/beispiel.gif">

Etwas Text

Da aus vielerlei Gründen Bilder im Browserfenster u.U. nicht angezeigt werden, ist es gut eine kleine Beschreibung des Bildes mitzuliefern. Vielleicht hat ja jemand seine Grafikfunktion beim Browser ausgeschaltet, um nur den Text zu betrachten.
Einen Alternativtext geben Sie folgendermaßen an:

<img src="beispiel.gif" alt="Ein Volleyball">

Damit eine Webseite schneller geladen wird, sollten Sie auch die Höhe ("Height") und die Breite ("Width") des Bildes in Pixeln angeben. Damit wird für das Bild der dementsprechende Platz bereitgestellt und muß nicht erst aus der Grafikdatei selbst herausgelesen werden.

<img src="beispiel.gif" alt="Ein Volleyball" width="50" height="100">

Für Ihre Homepage

Angewendet auf unser Beispiel:

<H1>Das ist meine Homepage!</H1>
Meine Hobbies sind HTML <B>und</B> Volleyball.

<H2>Informationen über HTML</H2>
Ich mache zur Zeit einen HTML-Kurs.

<H2> Informationen über Volleyball</H2>
Schon seit vielen Jahre spiele ich <i>Volleyball</i>.

<p> Ein Bild von mir:<p>

<img src="beispiel.gif alt="Mein Portrait" width="50" height="200">