Bilder

Bevor man Bilder auf eine Homepage setzt, sollte man sie zuerst nachbearbeiten, z.B. die Größe ändern, um die Ladezeit zu verringern. Dazu kann man z.B. die Freeware XnView verwenden.

Quellcode:

Bilder vom Dateityp „gif“, „jpg“ oder „png“ fügt man mit folgendem Befehl ein:

<img src="verzeichnis/name.dateityp" alt="Bild von..." />

„img“ ist die Abkürzung für „image“ (Bild) und „src“ steht für „source“ (Quelle).

Beachte:

• Der img-Tag sollte mit einem Slash geschlossen werden.
• Ein alternativer Text für das Bild sollte im img-Tag mit alt=“…“ angegeben werden.

Beispiel: Das Originalbild ist 600 Pixel breit und 400 Pixel hoch.
Übrigens stammt dieses lizenzfreie Foto von der Plattform Pixabay.

Größe:
Innerhalb des img-Tags kann man angeben, in welcher Breite (= width) und in welcher Höhe (= height) das Bild angezeigt werden soll.
Die Größe kann in Pixeln oder in Prozent angegeben werden.

Beispiel:
Das ursprüngliche Bild soll in einer Breite von 300 Pixeln und einer Höhe von 200 Pixel zu sehen sein.

<img src="..." width="300" height="200" /> oder <img src="..." width="50%" height="50%" />

Ergebnis:

Ausrichtung:
Die Ausrichtung des Bildes erfolgt genauso wie bei Texten. Infos dazu findet auf der Seite Absätze.

Fließtext um Bilder

Mit https://html.carl-orff-gym.de/css/ kann man Text um ein Objekt, z.B. um ein Bild fließen lassen.

Beispiel:
Der Text soll rechts um das Bild fließen. Zwischen dem Bild und dem Text soll ein Abstand von 15 Pixel sein.
Beachte, dass mit „left“ gemeint ist, dass das Bild links vom Text steht. „margin-right“ bedeutet, dass rechts vom Bild etwas Platz gelassen wird.

<p>
<img src="..." alt="Sunset" width="300" height="200" style="float: left; margin-right: 15px;" />
Rechts vom Bild steht der Text.
</p>

Das Ergebnis im sieht so aus.