Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewünschten Stellen im HTML-Quelltext. Geeignete Dateiformate für Web-gerechte Grafiken sind vor allem GIF und JPEG, allmählich aber auch PNG (Einzelheiten zu diesen Formaten siehe 
Grafikformate für Web-Seiten).
Wenn Sie HTML-Dateien fürs Web erstellen, sollten Sie darauf achten, dass die darin referenzierten Grafiken nicht zu groß sind, denn aufwendige Grafiken verursachen lange Ladezeiten und Missmut beim Anwender. Reduzieren Sie in Ihren Grafiken gegebenenfalls die Anzahl der Farben, verringern Sie die Bildgröße und stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei. In jedem Fall sollten Sie 
Breite und Höhe mit angeben.
Grafiken sind aus HTML-Sicht Inline-Elemente. In der "Strict"-Variante von HTML müssen solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.
Unter grafischen Benutzeroberflächen wie MS-Windows, Macintosh, KDE und anderen können Web-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Web-Browser für textorientierte Oberflächen (z.B. DOS-Textmodus, Unix-Textmodus) müssen ein separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen.
Wenn Sie wichtige HTML-Dateien Ihres Web-Projekts, etwa die Einstiegsseite, vollständig grafisch gestalten, also fast keinen Text, dafür nur Grafikreferenzen verwenden, erschweren Sie automatischen Suchprogrammen, die von vielen Suchdiensten im Web eingesetzt werden, die Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall müssen Sie abwägen, was Ihnen wichtiger ist: das grafische Erscheinungsbild oder die inhaltliche Identifizierbarkeit. Falls Sie wichtige HTML-Dateien Ihres Web-Projekts vorwiegend durch Grafikreferenzen gestalten, sollten Sie zumindest die Möglichkeit der Meta-Angaben zum Inhalt nutzen.
Grafikreferenz definierenAn einer gewünschten Stelle können Sie eine Grafik referenzieren.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafikreferenz definieren</title>
</head>
<body>
<h1>Tanzmaus</h1>
<p><img src="tanzmaus.png" alt="Tanzmaus"></p>
</body>
</html>
Für Grafikreferenzen gibt es in HTML das <img>-Tag (img = image = Bild, src = source = Quelle). Es handelt sich um ein Standalone-Tag ohne Elementinhalt und ohne End-Tag. Mit Hilfe von Attributen bestimmen Sie nähere Einzelheiten der Grafikreferenz. Zwei Attribute sind Pflicht und müssen immer angegeben werden:
Mit dem Attribut src bestimmen Sie die gewünschte Grafikdatei. Dabei gelten die Regeln zum Referenzieren in HTML. Wenn sich die Grafikdatei also beispielsweise im gleichen Verzeichnis wie die HTML-Datei befindet, in der die Grafikreferenz steht, dann genügt einfach die Angabe des Dateinamens der Grafik - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso möglich, z.B.:
<img src="verzeichnis/datei.gif" alt="Grafik">
<img src="verzeichnis/unterverz/datei.gif" alt="Grafik">
<img src="../datei.gif" alt="Grafik">
<img src="../../../datei.gif" alt="Grafik">
<img src="../woanders/datei.gif" alt="Grafik">
Auch das Referenzieren von einem vollständigen URI ist möglich, z.B.:
<img src="http://www.example.org/grafiken/taggi01.gif" alt="Taggi">
Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung. Geben Sie darin einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. Das sollte bei rein illustrierenden Schmuckgrafiken in der Form alt="" geschehen, um die Grafik als inhaltslos zu kennzeichnen. Vermeiden Sie es in solchen Fällen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie "spacer.gif" o.ä. zu befüllen.
Es gibt viele Gründe, warum eine Grafik nicht angezeigt werden kann, z.B. weil der Anwender das Anzeigen von Grafiken in seinem Browser deaktiviert hat, oder weil der Anwender das Laden der Seite abgebrochen hat, bevor die Grafik übertragen wurde. Der Alternativtext kann ein einzelnes Wort sein, aber auch eine Kurzbeschreibung, etwa so:
<img src="luftbild.jpg alt="Luftaufnahme des Grundstücks vom 27.05.2001 aus ca. 300m Höhe">
Welcher Alternativtext der jeweils passendste ist, hängt von den jeweilgen Umständen ab. Grafiken, welche Text enthalten, sollten beispielsweise als Alternativtext auf jeden Fall diesen Text erhalten.
Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dieses Verhalten ist zwar nicht verboten, stört aber häufig den Seitenautor. Und es verleitet zu der Annahme, das alt-Attribut wäre für diesen Tooltip grundsätzlich zuständig, was aber vollkommen falsch ist. Wenn Sie ihre Grafiken mit erklärenden Tooltips versehen wollen, nutzen Sie das Attribut title. Da es ein Universalattribut ist, können Sie title auch in fast jedem anderen Tag verwenden und so beispielsweise auch einzelne Worte oder Textabsätze mit Tooltips versehen.
Der Internet Explorer gibt dem title-Attribut für die Tooltip-Anzeige Vorrang vor dem alt-Attribut. Verwenden Sie deshalb beispielsweise title="", um die Tooltip-Anzeige des alt-Attributs im Internet Explorer abzuschalten.
Sie können ohne weiteres Grafiken von fremden Adressen in Ihre Seiten einbinden. Fragen Sie in diesem Fall jedoch in jedem Fall den Anbieter der Grafik um Erlaubnis, denn das Einbinden von Grafiken ist - im Gegensatz zu Verweisen auf fremde Inhalte - ein Zueigenmachen von fremden Inhalten. Auch besteht keine Garantie, dass die Grafikreferenz jederzeit bis in alle Zukunft funktioniert, denn wenn der Fremdanbieter die Grafik bei sich entfernt oder umbenennt, wird auf Ihrer Seite nur noch ein so genanntes broken image angezeigt.
Achten Sie bei der Wertzuweisung an das src-Attribut unbedingt auf Groß-/Kleinschreibung von Dateinamen und Verzeichnisnamen. Die meisten Server-Rechner laufen mit Betriebssystemen, bei denen streng zwischen Groß- und Kleinschreibung unterschieden wird. Am einfachsten und sichersten ist es, wenn Sie alle Datei- und Verzeichnisnamen kleinschreiben - sowohl beim Vergeben der Namen als auch beim Referenzieren in der HTML-Datei.
Netscape interpretiert ein proprietäres Attribut lowsrc, das Sie zusätzlich zum src-Attribut notieren können, und bei dem Sie eine Grafikdatei angeben, die weniger Speicher benötigt als die bei src referenzierte Grafik. Die lowsrc-Grafik lädt der Browser dann zuerst und kann sie schon anzeigen, während die andere Grafik noch geladen wird. Dieses Attribut erzeugt jedoch ungültiges HTML und hat sich in der Praxis auch als überflüssig erwiesen.
Wenn Sie XHTML-Standard-konform arbeiten, müssen Sie das img-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <img ... />. Weitere Informationen finden Sie im Kapitel 
XHTML und HTML.
Breite und Höhe von GrafikenWenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie stets die Breite und Höhe der Grafik mit angeben. Dadurch entnimmt der Web-Browser bereits der HTML-Datei, wie groß die Grafik ist, und muss nicht warten, bis er die entsprechende Header-Information der Grafikdatei ausgelesen hat. So kann er die gesamte Web-Seite bereits am Bildschirm aufbauen und bei noch nicht eingelesenen Grafiken erst mal eine entsprechend große Freifläche anzeigen. Wenn Sie Breite und Höhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle nötigen Größenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schön aussieht.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Breite und Höhe von Grafiken</title>
</head>
<body>
<h1>Tanzbär</h1>
<p><img src="tanzbaer.png" width="368" height="383" alt="Tanzbär"></p>
</body>
</html>
Mit dem Attribut width geben Sie die Breite der Grafik an, und mit height die Höhe (width = Breite, height = Höhe). Notieren Sie die Maße ohne Einheiten, wird automatisch px für Pixel herangezogen.
Es existieren mehrere Möglichkeiten, die genaue Breite und Höhe einer Grafik zu ermitteln. Entweder Sie nutzen ein Grafikprogramm, das diese Werte anzeigt, oder einen HTML-Editor, der beim Einbinden einer Grafik im Dialog auch gleich den Dateikopf der Grafik ausliest und die entsprechenden Angaben in das <img>-Tag automatisch einfügt. Ferner sind diese Eigenschaften zumeist via Kontext-Menü in Dateimanagern und Browsern abrufbar.
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.
Neben Pixelangaben sind bei width und height auch Prozentangaben erlaubt. Solche Angaben beziehen sich auf den zur Verfügung stehenden Raum. Wenn sich die Grafik also beispielsweise in einem normalen Textabsatz befindet, bewirkt die Angabe width="100%", dass die Grafik über die gesamte Breite des Anzeigefensters (abzüglich der Seitenränder der angezeigten Webseite) dargestellt wird. Die Höhe wird hierbei zwar proportional angepasst, aber da Browser keine Bildbearbeitungsprogramme sind, kann die Qualität darunter leiden. Sinnvoll ist eine Prozentangabe beispielsweise bei Grafiken, die eine Linie darstellen (vgl. Bars), um diese über die gesamte verfügbare Breite zu strecken.
Wenn Sie eine Grafik haben, die Sie an anderer Stelle in kleinerer Form wiederholen möchten (zum Beispiel ein Logo, das auf der Einstiegsseite groß angezeigt werden soll und auf den Unterseiten kleiner), brauchen Sie keine zwei Grafiken. Es genügt, wenn Sie, um eine Grafik kleiner darzustellen, die Angaben zu Breite und/oder Höhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Ausmaße 300 Pixel breit und 200 Pixel hoch hat, können Sie es halb so groß darstellen, indem Sie beim Einbinden der Grafik width="150" height="100" angeben. Sinnvoll ist das aber nur, wenn die große Grafik bereits angezeigt wurde und sich im Cache-Speicher des Browsers befindet und wenn sich der Qualitätsverlust durch die fehlende Nachschärfung nicht negativ auswirkt.
Rahmen um GrafikenSie können festlegen, dass der Browser einen Rahmen um die Grafik zeichnet. Das entsprechende Attribut ist jedoch als deprecated gekennzeichnet und soll künftig aus dem HTML-Standard entfallen. Umrahmung ist auch mit Hilfe von Stylesheets möglich, und dort mit viel mehr Möglichkeiten.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Grafiken</title>
</head>
<body>
<h1>Baum am Abend</h1>
<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>
</body>
</html>
Mit dem Attribut border innerhalb der Grafikreferenz wird ein Rahmen um die Grafik definiert (border = Rand). Die Angabe erfolgt in Pixeln und bedeutet die Rahmendicke. Die Rahmenfarbe ist diejenige, die Text an der gleichen Stelle haben würde.
Namen für GrafikenSie können festlegen, dass eine Grafik einen Namen erhält. Dies ist in Verbindung mit JavaScript sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt images von Bedeutung sein.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Namen für Grafiken</title>
</head>
<body>
<h1>Baum</h1>
<p><img src="baum.jpg" width="320" height="400" name="Baumbild" alt="Abendbaum"></p>
</body>
</html>
Mit name vergeben Sie einen Namen für die Grafik. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder deutsche Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.). Im Hinblick auf JavaScript darf der Name sogar nur Buchstaben, Ziffern und den Unterstrich (_) enthalten. Groß- und Kleinschreibung werden bei Sprachen wie JavaScript ebenfalls unterschieden.
Langbeschreibung für GrafikenWenn Ihnen die Möglichkeit, mit dem alt-Attribut einen gewöhnlichen Alternativtext für eine Grafik zu notieren, nicht genügt, können Sie seit HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nähere Textinformation zu der Grafik befindet. Der Browser könnte beispielsweise nur dann einen Verweis zu dieser Stelle anbieten, wenn die Grafik nicht anzeigbar ist.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Langbeschreibung für Grafiken</title>
</head>
<body>
<h1>Alte Zeiten</h1>
<p><img src="altezeiten.jpg" width="271" height="265" alt="alte Zeiten" longdesc="altezeiten.htm"></p>
</body>
</html>
Mit dem Attribut longdesc können Sie auf eine Stelle verweisen, wo die Grafik in Textform näher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Referenzieren in HTML.
Lediglich Netscape ab 6.0 und Firefox unterstützen dieses Attribut bislang, und auch nur sehr versteckt: mit der rechten Maustaste über der Grafik klicken, aus dem Kontextmenü die Option Eigenschaften wählen, und in dem Dialog, der dann erscheint, auf die Adresse zu Beschreibung klicken bzw. die dort angegebene Adresse in die Adressenzeile des Browsers kopieren.
In der HTML-Referenz finden Sie Angaben darüber, wo das <img>-Tag vorkommen darf, welche Attribute es haben kann und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz für Grafikreferenzen (<img>)
Attribut-Referenz für Grafikreferenzen (<img>)
Das Kapitel Grafik enthält eine Einführung in web-gerechte Grafik, mit Beispielen und Beschreibungen zu einzelnen grafischen Techniken.
|
| |
 |
Grafiken ausrichten
|
 |
Tabulator-Reihenfolge und Tastaturkürzel für Verweise
|
 SELFHTML/Navigationshilfen HTML/XHTML Grafiken |
|
© 2005 Impressum