HTML-Dateien selbst erstellen: Inhaltsverzeichnis

Grafiken

Grafiken für HTML-Dateien

Grafiken referenzieren

Alternativer Text, wenn Grafik nicht anzeigbar ist

Rahmen um Grafiken

Grafiken ausrichten / Text um Grafik fließen lassen

Abstand zwischen Grafik und Umgebung

Grafikbeschriftung

Breite und Höhe von Grafiken erzwingen

Grafik in zwei Versionen laden

Anzeigebeispiele: Grafiken

Grafiken für HTML-Dateien

Grafiken werden in HTML-Dateien per Referenz eingebunden, d.h. mit einem speziellen Verweis auf die entsprechende Grafikdatei.

Unter grafischen Benutzeroberflächen wie MS-Windows können WWW-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Unterstützt werden dabei in der Regel die beiden Dateiformate GIF und JPEG. WWW-Browser für textorientierte Oberflächen (z.B. DOS-Textmodus) müssen einen separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen. Aber auch unter grafischen Oberflächen muß ein separates Programm aufgerufen werden, wenn der Browser das Dateiformat der Grafik nicht unterstützt. Am besten ist es daher, wenn Sie alle Grafiken, die Sie in Ihre HTML-Dateien einbinden wollen, vorher als GIF- oder JPG-Dateien erstellen. Grafiken, die in anderen Formaten vorliegen (z.B. BMP, PCX, DRW, CDR), sollten Sie in GIF- oder JPG-Grafiken konvertieren. Zum Konvertieren gibt es hervorragende Programme, unter MS-Windows z.B. Paintshop Pro oder Hijaak Pro. Verweise zu Grafikprogrammen finden Sie im Abschnitt Grafikprogramme.

Besonders wenn Sie HTML-Dateien für's WWW erstellen, sollten Sie darauf achten, daß die Grafiken nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten und Mißmut beim Anwender. Reduzieren Sie ggfs. die Anzahl der Farben, und stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei.

Weitere Informationen zum Thema Grafiken finden Sie im Dokumentabschnitt Wichtiges rund um HTML.

Seitenanfang

Grafiken referenzieren

Grafikdatei im gleichen Verzeichnis referenzieren

Dabei muß die Grafikdatei im gleichen Verzeichnis abgelegt sein wie die HTML-Datei, in der die Grafikreferenz steht. Für die Grafikeinbindung notieren Sie in der HTML-Datei an der Stelle, wo die Grafik plaziert werden soll, folgenden Befehl.

Beispiel


  Das folgende Bild zeigt meine Freundin:<p>
  <img src="freundin.gif">

Die Grafikreferenz beginnt mit <img src=. Hinter dem Istgleichzeichen geben Sie den Namen der Grafikdatei an, auf die verwiesen wird (im Beispiel: "freundin.gif"). Der Dateiname muß in Anführungszeichen stehen. Der Befehl für die Grafikreferenz endet mit >.

Grafikdatei in anderem Verzeichnis einbinden

Hierbei gibt es zwei Möglichkeiten:

Einbindung mit relativen Pfadnamen (aus Sicht der HTML-Datei, in der die Grafikreferenz steht)
Einbindung mit absoluten Pfadnamen

Beispiel für relative Pfadnamen


  Das folgende Bild zeigt meine Ex-Freundin:<p>
  <img src="alt/freundin.gif">

Die Grafikreferenz beginnt mit <img src=. Hinter dem Istgleichzeichen geben Sie den relativen Pfadnamen und den Namen der Grafikdatei an (im Beispiel: "alt/freundin.gif"). Pfad- und Dateiname müssen in Anführungszeichen eingeschlossen werden. Verzeichnisse werden mit dem normalen Schrägstrich "/" markiert, nicht wie bei DOS mit dem Backslash "\" (auch, wenn der lokale Rechner ein DOS-Rechner ist).
Der Befehl für die Grafikreferenz endet mit >.

Beispiel für absolute Pfadnamen


  Das folgende Bild zeigt meine Ex-Freundin:<p>
  <img src="file://localhost/c:/bilder/alt/freundin.gif">

Die Grafikreferenz beginnt mit <img src=. Hinter dem Istgleichzeichen geben Sie an:

den Protokolltyp
(bei lokalen Verweisen auf gewöhnlichen PCs: "file://",
bei lokalen Verweisen auf WWW-Servern: "http://")
den Namen des Rechners
(bei lokalen Verweisen auf gewöhnlichen PCs: "localhost/",
bei lokalen Verweisen auf WWW-Servern: der eigene Domainenname)
den absoluten Pfadnamen (im Beispiel: "c:/bilder/alt/")
den Namen der Datei, auf die verwiesen wird (im Beispiel: "freundin.gif")

Die gesamte Angabe muß in Anführungszeichen eingeschlossen werden. Verzeichnisse werden mit dem normalen Schrägstrich "/" markiert, nicht wie bei DOS mit dem Backslash "\" (auch, wenn der lokale Rechner ein DOS-Rechner ist).
Der Befehl für die Grafikreferenz endet mit >.

Seitenanfang

Alternativer Text, wenn Grafik nicht anzeigbar ist

Wenn Sie HTML-Dateien für's WWW erstellen, sollten Sie bei Grafikreferenzen sicherheitshalber von der Möglichkeit Gebrauch machen, eine Textalternative zur Grafik mit einzubinden. Der Text wird dann und nur dann angezeigt, wenn die Grafik aus irgendwelchen Gründen (und da gibt es viele!) beim Anwender nicht angezeigt werden kann.

Beispiel


  <img src="dreieck.gif" alt="WARNUNG!">

Der alternativ zur Grafik anzuzeigende Text wird innerhalb des Befehls für die Grafikreferenz notiert. Eingeleitet wird die Anweisung für die Textalternative durch alt=. Dahinter folgt, in Anführungszeichen eingeschlossen, der Alternativtext.

Seitenanfang

Rahmen um Grafiken

Sie können festlegen, daß der Browser einen Rahmen um die Grafik zeichnet.

Beispiel


  <img src="fahrrad.gif" border=20>

Durch die Angabe border= innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert. Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke.

Tip:: wenn Sie Grafiken anstelle von Verweistext in Verweise einbinden, um so "grafische Verweise" anzubieten, können Sie bei der Grafikreferenz border=0 angeben. Ansonsten zeichnet der Browser in der eingestellten Verweisfarbe einen Rahmen um die Grafik, um zu signalisieren, daß es sich um einen Verweis handelt.

Seitenanfang

Grafiken ausrichten / Text um Grafik fließen lassen

Grafiken, die Sie mit dem <img>-Tag referenzieren, können Sie links oder rechts ausrichten. Der umgebende Text fließt dabei um die Grafik. Die Angaben werden aber bislang nur von Netscape und einigen anderen Browsern korrekt interpretiert.

Beispiele


  <img src="warnung.gif" align=left>
  <img src="fahrrad.gif" align=right>

Mit den Angaben align=left bzw. align=right veranlassen Sie den Browser, die Grafik linksbündig bzw. rechtsbündig auszurichten den darauffolgenden Fließtext rechts bzw. links neben der Grafik anzuzeigen und um die Grafik herumfließen zu lassen. Im Zusammenhang damit sind auch die Angaben zum

Abstand zwischen Grafik und Umgebung wichtig.

Um eine Grafik zentriert auszurichten, können Sie bei Netscape folgenden Trick verwenden:

Beispiel


  <center>
  <img src="fahrrad.gif">
  </center>

Seitenanfang

Abstand zwischen Grafik und Umgebung

Sie können bestimmen, wie groß der Abstand zwischen einer Grafik und ihrer Umgebung sein soll.

Beispiel


  <img src="fahrrad.gif" vspace=50 hspace=20>

Durch die Angabe vspace= (Pixel) innerhalb der Grafikreferenz wird der Abstand zum voranstehenden und nachfolgenden Text definiert, mit hspace= (Pixel) der Abstand vom linken Rand.

Seitenanfang

Grafikbeschriftung

Sie können bestimmen, daß der Textabsatz, den Sie im Anschluß an eine Grafikreferenz notieren, als Beschriftungstext für die Grafik interpretiert wird. Bei der Grafikreferenz selbst können Sie bestimmen, wie dieser Text im Verhältnis zur Grafik plaziert werden soll.

Beispiele


  <img src="freundin.gif" align=top>
  Dieser Text beginnt obenbündig rechts neben der Grafik (Beschriftungstext)
  <p>
  Hier beginnt Text unterhalb der Grafik
  <img src="freundin.gif" align=middle>
  Dieser Text beginnt auf mittlerer Höhe der Grafik rechts daneben (Beschriftungstext)
  <p>
  Hier beginnt Text unterhalb der Grafik
  <img src="freundin.gif" align=bottom>
  Dieser Text beginnt untenbündig rechts neben der Grafik (Beschriftungstext)
  <p>
  Hier beginnt Text unterhalb der Grafik

Mit der Angabe align= (siehe Beispiele) erreichen Sie, daß nachfogender Text als Beschriftungstext der Grafik interpretiert wird, und mit den möglichen Wertzuweisungen richten Sie den Beschriftungstext neben der Grafik aus. Nur der unmittelbar folgende Absatz gilt als Beschriftungstext. Wenn Sie einen Absatzbefehl oder einen absatzerzeugendenden Befehl (z.B. eine Überschrift) notieren, beginnt der folgende Absatz unterhalb der Grafik.

Weitere Ausrichtungen von Grafik und Umgebungselementen

Neben den in den obigen Beispielen genannten Ausrichtungen gibt es noch weitere, die bislang nur von Netscape interpretiert werden:
Mit der Angabe align=texttop richten Sie den Beschriftungstext mit der Schriftoberkante obbenbündig zur Grafik aus, auch dann, wenn im Beschriftungstext noch andere Elemente, z.B. weitere Grafiken, vorkommen.
Mit der Angabe align=absmiddle richten Sie den Beschriftungstext absolut mittig zur Grafik aus, auch dann, wenn im Beschriftungstext noch andere Elemente, z.B. weitere Grafiken, vorkommen.
Mit der Angabe align=absbottom richten Sie den Beschriftungstext absolut untenbündig zur Grafik aus, auch dann, wenn im Beschriftungstext noch andere Elemente, z.B. weitere Grafiken, vorkommen.

Mit den drei letzteren Angaben sollten Sie vor allem dann experimentieren, wenn Sie mehrere Grafiken und Beschriftungstext in einer Zeile unterbringen wollen und mit dem Ergebnis der Ausrichtung nicht zufrieden sind.

Seitenanfang

Breite und Höhe von Grafiken erzwingen

Bei kompex aufgebauten HTML-Dateien mit Grafiken, vor allem, wenn Text um die Grafik fließt, können Sie die Breite und Höhe der Grafik angeben. Dadurch kann der WWW-Browser die HTML-Datei schneller anzeigen. Das ist besonders im WWW wichtig. Dazu müssen Sie allerdings die genaue Breite und Höhe der Grafik ermitteln. Grafikprogramme unterstützen Sie dabei.

Sie können auch Angaben zu Breite und Höhe einer Grafik machen, die absichtlich von den tatsächlichen Abmessungen der Grafik abweichen. Dadurch können Sie interessante Verzerrungseffekte erreichen, wie man sie von Cartoons kennt.

Beispiel


  <img src="myhome.gif" width=280 height=120>

Mit der Angabe width= (Pixel) erzwingen Sie die Breite, mit height= (Pixel) die Höhe der Grafik.

Seitenanfang

Grafik in zwei Versionen laden

Dieses Feature ist dann sinnvoll, wenn Sie aufwendige Grafiken im WWW präsentieren wollen. Dazu brauchen Sie zwei Versionen einer Grafik: eine hochauflösende, die Sie am Ende präsentieren wollen, und eine niedrigauflösende, die möglichst schnell angezeigt werden soll. Sie können Netscape veranlassen, erst einmal die kleinere, niedrigauflösende Grafik anzuzeigen. Wenn dann das gesamte Dokument mit allen Grafik- und sonstigen Referenzen geladen ist, lädt Netscape in einem zweiten Schritt die höherauflösende, größere Grafik "über" die bereits geladene einfachere Version. Das kostet zusätzlichen Speicher, hat aber den Vorteil, daß der Anwender die WWW-Seite in ihrem Aufbau schneller am Bildschirm hat.

Beispiel


  <img src="freundin.jpg" lowsrc="freundin.gif">

Durch die Zusatzangabe lowsrc= bewirken Sie, daß Netscape zunächst die niedrigauflösendere, kleinere Grafik lädt (das ist die Grafik, die Sie bei lowsrc= angeben). Wenn die komplette Seite geladen ist, lädt Netscape die hochauflösende, größere Grafik (das ist die Grafik, die Sie bei src= angeben).

Beide Grafiken sollten sinnvollerweise den gleichen Inhalt und die gleiche Größe haben. Ihr Unterschied sollte in der Auflösungsqualität und im Speicherbedarf liegen.

HTML-Dateien selbst erstellen: Inhaltsverzeichnis
Seitenanfang

Blättern:
Lokale und weltweite Verweise | Verweis-sensitive Grafiken