SELFHTML: HTML/XHTML / Grafiken / Grafiken einbinden

	Grafiken einbinden
	Allgemeines zu Grafiken Grafikreferenz definieren Breite und Höhe von Grafiken Rahmen um Grafiken Namen für Grafiken Langbeschreibung für Grafiken Weitere Informationen

Allgemeines zu Grafiken

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-Angeben zum Inhalt nutzen.

Grafikreferenz definieren

An einer gewünschten Stelle können Sie eine Grafik referenzieren.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Tanzmaus</h1>

<p><img src="tanzmaus.gif" alt="Tanzmaus"></p>

</body>
</html>

Erläuterung:

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.teamone.de/training/taggi01.gif" alt="Taggi">

Beim Attribut alt= geben Sie einen Alternativtext an für den Fall, dass die Grafik nicht angezeigt werden kann. 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">
Das alt-Attribut ist nach HTML-Standard Pflicht. Wenn Sie aus irgendwelchen Gründen keinen Alternativtext notieren wollen, z.B. weil es sich bei der Grafik um einen so genannten "blinden Pixel" handelt, dann notieren Sie alt="" - also eine leere Zeichenkette als Zuweisung.

Beachten Sie:

Sie können also 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-konform arbeiten, müssen Sie das img-Element als inhaltsleer kennzeichnen. Dazu notieren Sie das alleinstehende Tag in der Form <img... />.
Weitere Informationen dazu im Kapitel XHTML und HTML.

Breite und Höhe von Grafiken

Wenn 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.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</title>
</head>
<body>

<h1>Tanzb&auml;r</h1>

<p><img src="tanzbaer.gif" width="368" height="383" alt="Tanzb&auml;r"></p>

</body>
</html>

Erläuterung:

Mit dem Attribut width= [Pixel] geben Sie die Breite der Grafik an, und mit height= [Pixel] die Höhe (width = Breite, height = Höhe).

Um die genaue Breite und Höhe einer Grafik zu ermitteln, brauchen Sie entweder 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.

Beachten Sie:

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 Web-Seite) dargestellt wird. Die Grafik wird dabei verzerrt. 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 Höhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Außmaß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 WWW-Browsers befindet.

Rahmen um Grafiken

Sie 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. Umahmung ist auch mit Hilfe von CSS Stylesheets möglich, und dort mit viel mehr Möglichkeiten.

Beispiel:

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>Text des Titels</title>
</head>
<body>

<h1>Baum am Abend</h1>

<p><img src="baum.jpg" width="320" height="400" border="4" alt="Abendbaum"></p>

</body>
</html>

Erläuterung:

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 Grafiken

Sie 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.

Beispiel:

<p><img src="baum.jpg" width="320" height="400" name="Baumbild" alt="Abendbaum"></p>

Erläuterung:

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 Grafiken

Wenn Ihnen die Möglichkeit, mit alt= 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.

Beispiel:

Anzeigebeispiel: So sieht's aus

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Text des Titels</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>

Erläuterung:

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.

Beachten Sie:

Lediglich Netscape 6.0 unterstützt 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.

Weitere Informationen

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/XHML

Grafiken