StarHTML HTML-Wissen Bilder einfügen und formatieren
Bilder einfügen und formatieren
Bilder auf Internet-Seiten sind immer GIF- oder JPEG-Dateien (Dateiendung .gif oder .jpg/.jpeg). Andere Formate
werden von den meisten Browsern nicht verstanden.
Einfügen von Bildern
Bilder werden an der gewünschten Stelle mit <img src="*"> eingebunden
(img = image = Bild, src = source = Quelle). Anstelle von * geben Sie die Bild-Datei an:
Quelle des Bildes | das müssen Sie einsetzen | Beispiel |
auf fremden Server |
[Adresse des Bildes mit "http://"] |
im selben Verzeichnis des Servers |
[Dateiname] |
Datei im Ober- Verzeichnis des Servers |
../[Dateiname] |
../logo.gif |
in einem Unterverzeichniss |
[Verzeichnis]/[Dateiname] |
bilder/logo.gif |
Im Fließtext sieht das so aus:
Das Bild setzt auf der Zeile auf und fügt so einen Abstand zur oberen Zeile ein.
Formatieren eines Bildes
Hinter src="*" können noch Optionen erscheinen und auch beliebig miteinander kombiniert werden:
Nicht vergessen: Optionen sind weitere Befehle innerhalb des selben Tags!
alt="*" |
(alt = alternative) Wenn der Nutzer das automatische Laden der Bilder im Browser abgeschaltet
hat, erscheint anstatt der Bilder nur ein Rahmen, der diesen Alternativtext * enthält. |
width=* height=* |
Hinter width= (Breite) bzw. height= (Höhe) können sie eine
bestimmte Größe des Bildes in Pixeln erzwingen. Normalerweise wird ein Bild in der
Originalgröße angezeigt. So können sie aber ein quadratisches Bild zum langen Rechteck machen,
vergrößern oder verkleinern.
Wenn Sie entweder nur Breit oder nur Höhe angeben, wir die andere Seite proportional angepasst.
Auch wenn Sie ein Bild in Originalgröße einbinden möchten, ist es empfehlenswert die
Größenangaben zu verwenden, da der Browser dadurch in der Lage ist, die Seite schneller aufzubauen.
Beachten Sie, das ein vom Browser vergrößertes Bild sehr gerastert wirkt. Wenn Sie eine Bild-Datei immer
verkleinert einbinden, sollten Sie sie gleich durch ein kleineres Abbild ersetzen, dass in Originalgröße
angezeigt werden kann. Das spart Speicherplatz und Ladezeit.
|
hspace=* vspace=* |
(hspace = horizontal space = horizontaler Abstand, vspace = vertical space = vertikaler Abstand)
Mit hspace=* bzw. vspace=* legen Sie den Abstand des Bildes zu seiner Umgebung in Pixeln fest.
(hspace waagerecht; vspace senkrecht) |
border=0 |
(border = Umrandung) Wenn Sie Bilder als Verweis markieren, erscheint ein farbiger Rahmen
um das Bild. Dieser kann oft sehr störend wirken, dann sollten Sie im Bild-Tag die Option border=0 einfügen,
damit wird dieser Rahmen unterdrückt. |
zwei Beispiele:
<img src="logo.gif" alt="meine Wolke" width=200 height=100>
<a href="firma.htm"><img src="logo.gif" border=0></a>
Außerdem können Sie mit der Option align=[left/right] Bilder ausrichten (align = Ausrichtung, left = links, right
= rechts ). Der Text fließt dann an der Seite um das Bild herum. Soll der Text zwar anfangs neben dem Bild
entlangführen, dann aber unter dem Bild weitergehen, setzen Sie an das Ende des Textes neben dem Bild
<br clear=all>. Beispiel:
<img src="baum.gif" align=left> Dieser Text steht neben dem Bild.
<br clear=all> Und dieser unter dem Bild.
Text zunächst neben dem Bild. Er beginnt an der rechten oberen Ecke,
da das Bild nach links ausgerichtet ist. Ein Abstand von 20 Pixeln zur Umgebung bewirkt gute Lesbarkeit.
Und nun wird darunter weitergeschrieben.
Praxistips:
Gewöhnen Sie ich an, jedes Bild mit einem Alternativ-Text auszurüsten und immer Höhe und Breite des Bildes
anzugeben, auch wenn es in der Originalgröße angezeigt werden soll. (siehe Guter HTML-Stil)
Bilder brauchen wesentlich mehr Speicherplatz als die eigentliche Internet-Seite. Reduzieren Sie in Ihren Bild-Dateien
gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Bilder in eine einzige
HTML-Datei.
Sollten Sie ein Bild einbinden wollen, das größer als 50 kB ist (und Sie es nicht weiter verkleinern können), erstellen
Sie besser mit ihrem Bildbearbeitungsprogramm ein kleineres Abbild, binden Sie dieses ein und markieren Sie es als
Verweis zum Original. (siehe auch Webgrafik)
Detaillierte Informationen über die Unterschiede zwischen GIF- und JPEG-Bildern finden Sie unter
GIF/JPEG im Vergleich. Einige nützliche Bilder für ihre
Homepage sind in StarHTML bereits enthalten.
|