 SELFHTML/Navigationshilfen HTML/XHTML Grafiken |
|
| |
Grafiken einbinden |
|
|
|
| | |
Um Grafiken in Ihre HTML-Dateien einzubinden, referenzieren Sie die Grafikdateien an gewnschten Stellen im HTML-Quelltext. Geeignete Dateiformate fr Web-gerechte Grafiken sind vor allem GIF und JPEG, allmhlich aber auch PNG (Einzelheiten zu diesen Formaten siehe Grafikformate fr Web-Seiten).
Wenn Sie HTML-Dateien frs 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 Bildgre und stopfen Sie nicht zu viele Grafik-Referenzen in eine einzige HTML-Datei. In jedem Fall sollten Sie Breite und Hhe mit angeben.
Grafiken sind aus HTML-Sicht Inline-Elemente. In der "Strict"-Variante von HTML mssen solche Elemente innerhalb von Block-Elementen vorkommen, etwa in einem Textabsatz oder einem allgemeinen Bereich oder auch einer Tabellenzelle.
Unter grafischen Benutzeroberflchen wie MS-Windows, Macintosh, KDE und anderen knnen Web-Browser die referenzierten Grafiken direkt im Anzeigefenster anzeigen. Web-Browser fr textorientierte Oberflchen (z.B. DOS-Textmodus, Unix-Textmodus) mssen ein separates Grafik-Betrachtungsprogramm aufrufen, um eine Grafik anzuzeigen.
Wenn Sie wichtige HTML-Dateien Ihres Web-Projekts, etwa die Einstiegsseite, vollstndig grafisch gestalten, also fast keinen Text, dafr nur Grafikreferenzen verwenden, erschweren Sie automatischen Suchprogrammen, die von vielen Suchdiensten im Web eingesetzt werden, die Identifizierung des Inhalts Ihres Projekts. Im Zweifelsfall mssen Sie abwgen, 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 Mglichkeit der Meta-Angaben zum Inhalt nutzen.
Grafikreferenz definierenAn einer gewnschten Stelle knnen Sie eine Grafik referenzieren.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Grafikreferenz definieren</title>
</head>
<body>
<h1>Tanzmaus</h1>
<p><img src="/img/spacer.gif">
Erluterung:
Fr 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 nhere Einzelheiten der Grafikreferenz. Zwei Attribute sind Pflicht und mssen immer angegeben werden:
Mit dem Attribut src bestimmen Sie die gewnschte 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 gengt einfach die Angabe des Dateinamens der Grafik - so wie im obigen Beispiel. Das Referenzieren mit relativen oder absoluten Pfadangaben ist jedoch ebenso mglich, z.B.:
<img src="/img/spacer.gif">
<img src="/img/spacer.gif">
<img src="/img/spacer.gif">
<img src="/img/spacer.gif">
<img src="/img/spacer.gif">
Auch das Referenzieren von einem vollstndigen URI ist mglich, z.B.:
<img src="/img/spacer.gif">
Das Attribut alt ist Pflichtangabe fr jede Grafikeinbindung. Geben Sie darin einen Alternativtext an fr 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 Fllen, die alt-Attribute von Grafiken mit unsinnigen Inhalten wie "spacer.gif" o.. zu befllen.
Es gibt viele Grnde, 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="/img/spacer.gif">
Welcher Alternativtext der jeweils passendste ist, hngt von den jeweilgen Umstnden ab. Grafiken, welche Text enthalten, sollten beispielsweise als Alternativtext auf jeden Fall diesen Text erhalten.
Beachten Sie:
Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger lnger ber der Grafik verweilt. Dieses Verhalten ist zwar nicht verboten, strt aber hufig den Seitenautor. Und es verleitet zu der Annahme, das alt-Attribut wre fr diesen Tooltip grundstzlich zustndig, was aber vollkommen falsch ist. Wenn Sie ihre Grafiken mit erklrenden Tooltips versehen wollen, nutzen Sie das Attribut title. Da es ein Universalattribut ist, knnen Sie title auch in fast jedem anderen Tag verwenden und so beispielsweise auch einzelne Worte oder Textabstze mit Tooltips versehen.
Der Internet Explorer gibt dem title-Attribut fr 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 knnen 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 proprietres Attribut lowsrc, das Sie zustzlich zum src-Attribut notieren knnen, und bei dem Sie eine Grafikdatei angeben, die weniger Speicher bentigt als die bei src referenzierte Grafik. Die lowsrc-Grafik ldt der Browser dann zuerst und kann sie schon anzeigen, whrend die andere Grafik noch geladen wird. Dieses Attribut erzeugt jedoch ungltiges HTML und hat sich in der Praxis auch als berflssig erwiesen.
Wenn Sie XHTML-Standard-konform arbeiten, mssen 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 Hhe von Grafiken
Wenn Sie Grafiken in HTML-Dateien einbinden, die Sie im Web anbieten wollen, sollten Sie stets die Breite und Hhe 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 groe Freiflche anzeigen. Wenn Sie Breite und Hhe nicht angeben, wartet der Browser dagegen mit der Anzeige der Web-Seite, bis er alle ntigen Grenangaben aus eingebundenen Grafikdateien eingelesen hat, oder er muss den Bildschirmaufbau korrigieren, was nicht sehr schn aussieht.
Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"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="/img/spacer.gif">
Erluterung:
Mit dem Attribut width geben Sie die Breite der Grafik an, und mit height die Hhe (width = Breite, height = Hhe). Wenn Sie als Maeinheit Pixel angeben wollen, notieren Sie die Mae ohne Einheitenangabe. Auerdem ist noch % als Prozentangabe zulssig (siehe unten).
Es existieren mehrere Mglichkeiten, die genaue Breite und Hhe 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 einfgt. Ferner sind diese Eigenschaften zumeist via Kontext-Men in Dateimanagern und Browsern abrufbar.
Beachten Sie:
Sie knnen auch Angaben zu Breite und Hhe einer Grafik machen, die absichtlich von den tatschlichen Abmessungen der Grafik abweichen. Dadurch knnen 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 Verfgung stehenden Raum. Wenn sich die Grafik also beispielsweise in einem normalen Textabsatz befindet, bewirkt die Angabe
Wenn Sie eine Grafik haben, die Sie an anderer Stelle in kleinerer Form wiederholen mchten (zum Beispiel ein Logo, das auf der Einstiegsseite gro angezeigt werden soll und auf den Unterseiten kleiner), brauchen Sie keine zwei Grafiken. Es gengt, wenn Sie, um eine Grafik kleiner darzustellen, die Angaben zu Breite und/oder Hhe proportional verkleinern. Wenn Ihr Logo beispielsweise die Ausmae 300 Pixel breit und 200 Pixel hoch hat, knnen Sie es halb so gro darstellen, indem Sie beim Einbinden der Grafik angeben. Sinnvoll ist das aber nur, wenn die groe Grafik bereits angezeigt wurde und sich im Cache-Speicher des Browsers befindet und wenn sich der Qualittsverlust durch die fehlende Nachschrfung nicht negativ auswirkt.
Rahmen um Grafiken
Sie knnen festlegen, dass der Browser einen Rahmen um die Grafik zeichnet. Das entsprechende Attribut ist jedoch als deprecated gekennzeichnet und soll knftig aus dem HTML-Standard entfallen. Umrahmung ist auch mit Hilfe von Stylesheets mglich, und dort mit viel mehr Mglichkeiten.
Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rahmen um Grafiken</title>
</head>
<body>
<h1>Baum am Abend</h1>
<p><img src="/img/spacer.gif">
Erluterung:
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 wrde.
Namen fr Grafiken
Sie knnen festlegen, dass eine Grafik einen Namen erhlt. Dies ist in Verbindung mit JavaScript sinnvoll. Der Name einer Grafik kann zum Beispiel beim JavaScript-Objekt images von Bedeutung sein.
Beispiel:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Namen für Grafiken</title>
</head>
<body>
<h1>Baum</h1>
<p><img src="/img/spacer.gif">
Erluterung:
Mit name vergeben Sie einen Namen fr die Grafik.
Langbeschreibung fr Grafiken
Wenn Ihnen die Mglichkeit, mit dem alt-Attribut einen gewhnlichen Alternativtext fr eine Grafik zu notieren, nicht gengt, knnen Sie seit HTML 4.0 auch zu einer anderen Stelle oder Datei verweisen, wo sich nhere Textinformation zu der Grafik befindet. Der Browser knnte 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//EN"
"www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Langbeschreibung für Grafiken</title>
</head>
<body>
<h1>Alte Zeiten</h1>
<p><img src="/img/spacer.gif">
Erluterung:
Mit dem Attribut longdesc knnen Sie auf eine Stelle verweisen, wo die Grafik in Textform nher beschrieben wird. Erlaubt ist ein URI, d.h. bei der Angabe gelten die Regeln zum Referenzieren in HTML.
Beachten Sie:
Lediglich Netscape ab 6.0 und Firefox untersttzen dieses Attribut bislang, und auch nur sehr versteckt: mit der rechten Maustaste ber der Grafik klicken, aus dem Kontextmen die Option Eigenschaften whlen, und in dem Dialog, der dann erscheint, auf die Adresse zu Beschreibung klicken bzw. die dort angegebene Adresse in die Adressenzeile des Browsers kopieren.
Weitere Informationen
In der HTML-Referenz finden Sie Angaben darber, wo das <img>-Tag vorkommen darf, welche Attribute es haben kann und was bei den einzelnen Attributen zu beachten ist:
Element-Referenz fr Grafikreferenzen (<img>)
Attribut-Referenz fr Grafikreferenzen (<img>)
Das Kapitel Grafik enthlt eine Einfhrung in web-gerechte Grafik, mit Beispielen und Beschreibungen zu einzelnen grafischen Techniken.
|
| |
| |
Grafiken ausrichten
|
| |
Tabulator-Reihenfolge und Tastaturkrzel fr Verweise
|
| SELFHTML/Navigationshilfen HTML/XHTML Grafiken |
|
© 2007 Impressum