Grafikreferenzen

Grafiken für HTML-Dateien

Grafiken referenzieren

Grafiken referenzieren ab HTML 3.0

Alternativer Text, wenn Grafik nicht anzeigbar ist

Rahmen um Grafiken

Grafiken ausrichten / Text um Grafik fließen lassen

Grafiken ausrichten ab HTML 3.0

Abstand zwischen Grafik und Umgebung

Grafikbeschriftung

Grafikbeschriftung ab HTML 3.0

Grafiken skalieren

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.

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.

Zur Zeit ist das GIF-Format wohl das verbreitetste Grafikformat im WWW. Mit einer von Netscape entwickelten Technik, die das extrem schnelle Auflösen und Anzeigen von JPEG-Dateien ermöglicht, könnte dem JPEG-Format jedoch die Zukunft im WWW gehören. Ein Vorteil des JPEG-Formats gegenüber dem GIF-Format ist die Farbauflösung. GIF-Dateien können maximal 256 Farben enthalten, JPEG- Dateien dagegen 16,7 Millionen.

HTML-Dateien selbst erstellen
Grafikreferenzen

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 lokalen Rechners (bei lokalen Verweisen: "localhost/")
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 >.

HTML-Dateien selbst erstellen
Grafikreferenzen

Grafiken referenzieren ab HTML 3.0

Ab HTML 3.0 steht Ihnen ein Tag zur Verfügung, das wesentlich leistungsfähiger als das <img>-Tag ist: das <fig>-Tag. Der UDI WWW-Browser interpretiert das <fig>-Tag bereits, jedoch noch nicht in allen Facetten.

Einfaches Beispiel


  <fig src="freundin.gif">
  <h1>Samantha</h1>
  <p>Das nebenstehende Bild zeigt meine Freundin
  </fig>

Die Grafikreferenz beginnt mit <fig ...>. Beim Referenzieren der gewünschten Grafikdatei mit src= gelten die gleichen Regeln wie beim

Referenzieren von Grafiken mit dem <img>-Tag.

Im Gegensatz zum <img>-Tag ist das <fig>-Tag jedoch kein "Standalone-Tag", sondern besteht aus einem einleitenden und einem abschließenden Tag </fig>. Dazwischen können beliebige Textelemente stehen, im Beispiel eine Überschrift 1. Ordnung und ein normaler Textabsatz. Diese Textelemente werden so ausgerichtet, daß der Text um die Grafik fließt.

Ein weiterer wichtiger Vorteil des neuen Tags ist, daß damit auch verweis-sensitive Grafiken ohne Server-Kommunikation realisiert werden können.

HTML-Dateien selbst erstellen
Grafikreferenzen

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.

HTML-Dateien selbst erstellen
Grafikreferenzen

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.

HTML-Dateien selbst erstellen
Grafikreferenzen

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>

Hinweis: Wenn Sie das HTML-3-Tag <fig...> verwenden, können Sie bereits bei der Definition der Grafikreferenz angeben, wie der folgende Text um die Grafik fließen soll. Näheres hierzu im Abschnitt

Grafiken referenzieren ab HTML 3.0.

HTML-Dateien selbst erstellen
Grafikreferenzen

Grafiken ausrichten ab HTML 3.0

Ab HTML 3.0 können Sie das

<fig>-Tag verwenden, um Grafiken zu referenzieren. Bei so referenzierten Grafiken haben Sie folgende Möglichkeiten bei der Ausrichtung der Grafik.

Beispiele


  <fig src="warnung.gif" align=left> ... </fig>
  <fig src="warnung.gif" align=bleedleft> ... </fig>
  <fig src="freundin.gif" align=center> ... </fig>
  <fig src="fahrrad.gif" align=right> ... </fig>
  <fig src="fahrrad.gif" align=bleedright> ... </fig>

Mit align=left richten Sie die Grafik am linken Textrand aus.
Mit align=bleedleft richten Sie die Grafik am linken Fensterrand aus.
Mit align=center richten Sie die Grafik zentriert aus.
Mit align=right richten Sie die Grafik am rechten Textrand aus.
Mit align=bleedright richten Sie die Grafik am rechten Fensterrand aus.

Der Unterschied zwischen left und bleedleft bzw. zwischen right und bleedright ist in HTML 3.0 nötig wegen der Möglichkeit der Absatzeinrückung.

HTML-Dateien selbst erstellen
Grafikreferenzen

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.

HTML-Dateien selbst erstellen
Grafikreferenzen

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.

HTML-Dateien selbst erstellen
Grafikreferenzen

Grafikbeschriftung ab HTML 3.0

Ab HTML 3.0 können Sie das

<fig>-Tag verwenden, um Grafiken zu referenzieren. Bei so referenzierten Grafiken können Sie zwischen einleitendem und abschließendem Tag Angaben zur Grafikbeschriftung machen.

Beispiel


  <fig src="freundin.gif" caption>
    <caption>Bild von Samantha</caption>
  <p>Das nebenstehende Bild zeigt meine Freundin
    <credit>aufgenommen am 7.7.77 auf Kodak Color</credit>
  </fig>

Mit <caption> leiten Sie eine Bildüberschrift ein. Dahinter fogt der Überschriftentext. Mit </caption> beenden Sie die Bildüberschrift.

Mit <credit> leiten Sie Bildzusatzangaben ein. Dahinter fogt der Text. Mit </credit> beenden Sie die Zusatzangaben.

Beide Tags sind logische Tags, d.h. der Browser entscheidet, wie diese Elemente im Verhältnis zur Grafik ausgerichtet werden.

HTML-Dateien selbst erstellen
Grafikreferenzen

Grafiken skalieren

Wenn Sie Grafiken mit dem <img>-Tag referenzieren, können Sie die Grafik skalieren. Der Browser dehnt die Grafik dann auf das von Ihnen angegebene Format.

Beispiel


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

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

Angenommen, die Original-Grafik hat eine Breite von 140 Pixeln und eine Höhe von 100 Pixeln. Durch die Angaben width=280 und height=120 erreichen Sie, daß die Grafik doppelt so breit angezeigt wird wie normal, und daß sie in der Höhe um den Faktor 1,2 gedehnt wird. Die Grafik wird also in der Breite deutlich mehr gedehnt als in der Höhe. Dadurch ergeben sich interessante Verzerrungseffekte, die besonders für Cartoons geeignet sind.

Wenn Sie Grafiken mit dem <fig>-Tag referenzieren, können Sie die Grafik ebenfalls mit width= und height= skalieren. Notieren Sie die Angaben im einleitenden Tag.

HTML-Dateien selbst erstellen
Grafikreferenzen

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
Grafikreferenzen