Lektion 9: Bilder
Wäre es nicht toll, wenn Sie ein Bild von der Schauspiel- und Musiklegende David Hasselhoff auf Ihrer Seite hätten?
Das klingt nach ein bißchen Herausforderung …
Vielleicht, aber eigentlich ist es auch ganz einfach. Alles was Sie wieder brauchen, ist ein Element:
Beispiel 1:
<img src="david.jpg" alt="David" />
sieht im Browser wie folgt aus:
Sie müssen dem browser zuerst mitteilen, dass Sie ein Bild (img, kurz für image) einfügen möchten. Dann müssen Sie ihm noch die Quelle (src, kurz für source) nennen. Logisch oder?
Bitte beachten Sie, dass das img- Element, wie das bereits bekannte <br />, Start- und End- Tag in einem ist. Wie br ist img nicht an Text gebunden.
“david.jpg” ist der Name der Bilddatei, die Sie auf der Seite einfügen möchten. “.jpg” ist der Dateityp des Bildes. Wie die Endung “.htm” anzeigt, dass die Datei ein HTML-Dokument ist, zeigt “.jpg” dem Browser, dass es sich bei der Datei um ein Bild handelt.
Es gibt drei verschiedene Arten von Bildtypen, die man in eine Internetseite einbinden kann:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
GIF-Bilder sind normalerweise am besten für Grafiken und Zeichnungen geeignet, während JPEG-Bilder eher für Fotografien geeignet sind. Dies hat zwei Gründe: Erstens, GIFs bestehen nur aus max. 256 Farben, während JPEGs Millionen von Farben enthalten können. Zweitens ist das GIF-Format bei der Komprimierung einfacherer Bilder besser als das JPEG-Format, welches wiederum eher für komplexe Bilder optimiert ist. Je besser die Komprimierung, um so kleiner ist die Dateigröße der Bilddatei und desto schneller wird das Bild in Ihrer Seite geladen. Wie Sie vielleicht aus Ihrer eigenen Erfahrung wissen, können unnötig ‘überladene’ Seiten für den Nutzer sehr ärgerlich sein.
In der Vergangenheit waren GIF und JPEG die beiden dominierenden Bildtypen. Aber seit kurzem wird das PNG-Format immer populärer (meist auf Kosten des GIFs). Das PNG enthält in den meisten Fällen das Beste der beiden anderen Formate: Millionen von Farben und effektive Komprimierung.
Woher bekomme ich die Bilder?
Um Ihre eigenen Bilder zu erstellen, benötigen Sie ein Bildbearbeitungsprogramm. Ein Bildbearbeitungsprogramm ist eines der wichtigsten Werkzeuge um schöne Webseiten zu erstellen.
Leider ist weder im Lieferumfang von Windows, noch bei anderen Betriebssystemen, ein annehmbares Bildbearbeitungsprogramm inklusive. Deswegen sollten Sie sich überlegen, in Bildbearbeitungssoftware zu investieren. Paint Shop Pro, PhotoShop oder Macromedia Fireworks sind drei der besten derzeit auf dem Markt befindlichen Programme.
Wie auch immer, wir hatten ja gesagt, es braucht keine teuren Programme um das Tutorial zu beenden. Für unsere Zwecke genügt es, wenn Sie sich Irfan View, ein exzellentes Bildbearbeitungsprogramm herunterladen. Irfan View ist sogenannte Freeware und kostet aus diesem Grunde nichts.
Oder Sie borgen sich Bilder von anderen Seiten, indem Sie diese downloaden. Aber bitte seien Sie vorsichtig, dass Sie mit dem Download und einer späteren Verwendung auf Ihren Seiten keinerlei Copyrights verletzen. Trotz alle dem ist es sicherlich nützlich zu wissen, wie man Bilder aus dem Internet herunterlädt. So wird’s gemacht:
- Klick mit der rechten Maustaste auf das Bild (irgendein Bild im Internet)
- Wählen Sie “Bild speichern als …” in dem Menü, welches erscheint.
- Suchen Sie einen Ordner, in den Sie das Bild speichern möchten und klicken Sie auf “Speichern”.
Probieren Sie dies mit dem nachfolgenden Bild aus. Speichern Sie es auf Ihren Rechner, ins gleiche Verzeichnis, wo sich auch Ihre Webdokumente befinden. (Bitte beachten Sie, dass das Logo eine PNG-Datei ist: logo.png):
Nun können Sie das Bild in eine Ihrer eigenen Seiten einfügen. Probieren Sie es selbst.
Ist das alles, was ich über Bilder wissen muss?
Es gibt noch ein paar Sachen mehr, die Sie über Bilder wissen sollten.
Erstens: Sie können ganz einfach Bilder einbinden, die in anderen Ordnern oder sogar auf anderen Webseiten gespeichert sind:
Beispiel 2:
<img src="images/logo.png" />
Beispiel 3:
<img src="http://www.html.net/logo.png" />
Zweitens: Bilder können auch Links sein:
Beispiel 4:
<a href="http://www.html.net"><img src="logo.png" /></a>
sieht im Browser wie folgt aus (probieren Sie, auf das Bild zu klicken):
Gibt es noch irgendwelche Attribute, von denen ich wissen sollte?
Das Attribut src muss immer benutzt werden, da es dem Browser die Quelle des Bildes vorgibt. Außer diesem gibt es noch einige Attribute, die sehr nützlich sein können, wenn Bilder eingebunden werden.
Das alt-Attribut gibt eine alternative Beschreibung des Bildes an. Diese Beschreibung wird angezeigt, wenn – aus welchen Gründen auch immer – das Bild nicht angezeigt wird. Besonders wichtig ist alt z.B. für sehbehinderte oder blinde Internetnutzer. Wenn Bilder sehr langsam geladen werden, gibt die Alternativbeschreibung normal sehenden Nutzern einen ersten Eindruck, was auf der Seite zu sehen sein soll. Aus diesen Gründen nutzen Sie bitte immer das alt-Attribut.
Beispiel 5:
<img src="logo.gif" alt="Grafik: HTML.net-Logo" />
Einige der älteren Browser lassen den Inhalt des alt-Attributes in einem kleinen sog. Tooltip (ein kleines Fenster neben dem Mauszeiger) erscheinen, wenn man den Mauszeiger über das Bild bewegt. Bitte beachten Sie, dass eine Beschreibung des Inhaltes die Aufgabe dieses Attributes ist und nicht Informationen zum Bild zu geben, da sehbehinderte Menschen diesen Text hören, ohne zu wissen, dass es sich um ein Bild handelt.
Das title-Attribut hingegen kann dazu benutzt werden, Informationen zum Bild zu geben:
Beispiel 6:
<img src="logo.gif" title="Lernen Sie HTML mit HTML.net" />
sieht im Browser wie folgt aus:
Wenn Sie jetzt – ohne zu klicken – den Mauszeiger über das Bild halten, werden Sie diesen kleinen sog. Tooltip sehen. In diesem steht “Lernen Sie HTML mit HTML.net”.
Zwei weitere wichtige Attribute sind width und height:
Beispiel 7:
<img src="logo.png" width="141" height="32" />
sieht im Browser wie folgt aus:
Die Attribute width und height werden benutzt, um die Breite (engl. width) und Höhe (engl. height) eines Bildes anzugeben. Die Höhe und Breite wird in Pixeln angegeben. Pixel sind die Einheit, mit der man die Auflösung von Bildschirmen angibt. Man könnte es auch mit “Bildpunkte” übersetzen. (Die gebräuchlichsten Bildschirmauflösungen sind 800×600 und 1024×768 Pixel.) Im Gegensatz z.B. zu Zentimetern sind Pixel eine relative Maßgröße, die von der Bildschirmauflösung des verwendeten Monitors abhängt. So kann es sein, dass 25 Pixel bei einem Nutzer einer hohen Auflösung etwa einem Zentimeter entspricht, während es bei einer niedrigen Auflösung etwa anderthalb Zentimetern auf dem Bildschirm entspricht.
Wenn Sie width und height nicht einsetzen, wird das Bild in seiner Originalgröße eingefügt. Mit width und height kann man die Anzeigegröße verändern:
Beispiel 8:
<img src="logo.gif" width="32" height="32" />
sieht im Browser wie folgt aus:
Wie auch immer, bitte merken Sie sich, dass die wirkliche Dateigröße des Bildes erhalten bleibt. Eine solche Verkleinerung hat somit keinen Einfluß auf die Ladegeschwindigkeit Ihrer Webseite, auch wenn das Bild kleiner aussieht. Deswegen sollten Sie nie versuchen, die Größe Ihres Bildes mit width und height zu verkleinern. Dies sollte eher mit einem Bildbearbeitungsprogramm geschehen. Dann wird auch Ihre Seite schneller geladen werden.
Trotzdem ist es wichtig, dass Sie die Attribute width und height anwenden, weil der Browser so bemerkt, wieviel Platz das Bild benötigt, um auf der Seite dargestellt zu werden. Dies sorgt dafür, dass die Seite schneller geladen werden kann.
So, für den Moment genug von David Hasselhoff und Bildern.