Aus Wikibooks

Inhaltsverzeichnis 1 Beispiel 1.1 Erklärung 2 Bildformate 3 Pfadangaben 3.1 Datei index.xhtml 3.2 Datei inhalt.xhtml 3.3 Datei vorlage.xhtml:

Bilder sind für das Design einer Seite praktisch unerlässlich. Jedes Logo, jeder Banner usw. ist ein Bild bzw. eine Grafik. Doch auch heute bei schnellen Internetzugängen wie (A)DSL und Kabel sollten Sie darauf achten, dass das Bild nicht zu viel Speicherplatz einnimmt. Ein Bild sollte nicht größer als ca. 50 KB sein. In einer Fotogalerie sollten sie Thumbnails benutzen. Thumbnails sind kleine Bilder, die durch Anklicken vergrößert werden. Wenn es zu lange dauert, bis Ihre Seite geladen wird, wird der Besucher möglicherweise die Webseite wieder verlassen.

Passen Sie auch auf, dass Ihre Seite immer übersichtlich bleibt.

[Bearbeiten] Beispiel

<img src="portrait.jpg" alt="Mein Portrait" width="150" height="200" />

[Bearbeiten] Erklärung

Um Bilder darzustellen, brauchen Sie das img-Tag. Das Attribut src="..." erhält die URL bzw. URI, mit height="..." und width="..." bestimmen Sie die Höhe und Breite des Bildes. Der Wert ist in Pixel (px) anzugeben. Die Attribute width und height sind optional und können weggelassen werden. Das alt-Attribut ist eine Pflichtangabe und dient als Ersatz für das Bild, falls z.B. die Bilder nicht geladen werden können.

Mit alt="..." muss das Bild "beschriftet" werden. Der Text sollte möglichst kurz und treffend sein. Er wird angezeigt, wenn das Bild nicht geladen werden kann oder falls der Benutzer die Anzeige von Bildern im Browser deaktiviert hat. Für Bilder, die nur als optische Elemente fungieren, muss man das alt-Attribut trotzdem angeben, jedoch sollte man ihm keinem Inhalt geben: alt=""

Möchte man eine zusätzliche Information hinterlassen, die erscheinen soll, sobald man mit der Maus über dem Bild stehen bleibt, muss man das Attribut title definieren. Manche Browser zeigen, falls kein title-Attribut verfügbar ist, das alt-Attribut an. Das ist jedoch nach dem XHTML-Standard nicht korrekt. Beispiel: <img src="..." alt="Mein Freund Simon" title="Dieses Bild entstand auf unserer Klassenfahrt in Paris." />

Tipp: Die Größe einer Grafik sollte immer mit angegeben werden. Damit kann der Browser eine Seite sofort anzeigen, ohne auf das Laden der Grafiken zu warten. Im Header der Grafik befinden sich zwar auch Informationen zur Größe, die Seite kann aber erst aufgebaut werden, wenn der Browser die Datei lädt. Die Größe eines Bildes lässt sich mit den meisten Grafikprogrammen herausfinden. Im windowseigenen Paint ist dies beispielsweise mit der Option "Bild" "Attribute" möglich.

[Bearbeiten] Bildformate

Die häufigsten Bildformate, die auch jeder neuere Browser unabhängig vom Betriebssystem darstellen kann, sind .png, .jpg, .gif und .bmp., wobei das Bildformat .bmp sehr schlecht geeignet ist. Die Bilder in diesem Format benötigen extrem viel Speicherplatz, was zu langen Ladezeiten führt.

Für das Internet sind die Formate jpg und png am besten geeignet. Ein sehr gutes Programm für die Erstellung von Webgrafiken ist Adobe Photoshop, dessen hoher Preis aber vor allem Privatanwender abschrecken dürfte. Verschiedene Bildbearbeitungsprogramme zeigt der entsprechende Wikipedia-Artikel auf.

[Bearbeiten] Pfadangaben

Wenn das Bild in einem anderen Verzeichnis als die HTML Datei liegt, muss der Pfad mit angegeben werden, da ansonsten das Bild vom Browser nicht gefunden werden kann.

Die Angabe des Verzeichnisses erfolgt meistens durch eine relative Pfadangabe, also ausgehend vom Speicherort der HTML-Datei.

Zum besseren Verständnis ein Beispiel:

In jeder HTML-Datei sollen alle Bilder aufgelistet werden. Das nächst tiefere Verzeichnis erreicht man durch Angabe eines Slash "/", das nächst höhere durch "../".

[Bearbeiten] Datei index.xhtml

<img src="ordnerbeispiel.gif" alt="Ordnerbeispiel" /><br />
<img src="grafiken/bilder/portrait.jpg" alt="Portrait" /><br />
<img src="grafiken/bilder/save.jpg" alt="Speichern" /><br />
<img src="internet/palette.jpg" alt="Farbpalette" />

[Bearbeiten] Datei inhalt.xhtml

<img src="../../ordnerbeispiel.gif" alt="Ordnerbeispiel" /><br />
<img src="../bilder/portrait.jpg" alt="Portrait" /><br />
<img src="../bilder/save.jpg" alt="Speichern" /><br />
<img src="../../internet/palette.jpg" alt="Farbpalette" />

[Bearbeiten] Datei vorlage.xhtml:

<img src="../ordnerbeispiel.gif" alt="Ordnerbeispiel" /><br />
<img src="../grafiken/bilder/portrait.jpg" alt="Portrait" /><br />
<img src="../grafiken/bilder/save.jpg" alt="Speichern" /><br />
<img src="palette.jpg" alt="Farbpalette" />

Hinweis: Der Übersichtlichkeit halber wurden nur die Bildtags angegeben.