Bilder
Nebst Text können auch Bilder in HTML-Seiten dargestellt werden. In den Anfangszeiten des www mussten Bilder klein sein, je nach Modem und Kabelverbindung benötigten grosse Bilder sehr viel Zeit, bis sie heruntergeladen waren. Aber auch die heutigen kabellosen (mobilen) Verbindungen laden leichte Dateien schneller.
Bildformate
Für die Darstellung per Monitor müssen Bild-Dateien noch immer speziell zurecht getrimmt werden; die Bildschirmauflösung von Computermonitoren ist 72pixel/inch.
jpg
*.jpg / *.jpeg - Bilder (joint photographic experts group) sind für Fotos geeignet, zwischen Kontrasten oder bei hochen Komprimierungsraten bilden sich Ränder mit Artefakten oder 'Datenpackete'.
gif
*.gif - Bilder (graphics interchange format) sind hoch komprimierbar, können transparente Bereiche haben und können sogar einfache Bildanimationen beinhalten, sind aber eher für flächige Grafiken mit geringem Farbumfang geeignet, Kurven werden dann pixelig wie Treppenstufen dargestellt.
png
*.png - Bilder (portable network graphics) mit 8 bit Farbtiefe sind wie gif aber können keine Bildanimationen beinhalten. PNG wurde entwickelt als Alternative zum Patent geschützten gif.
*.png - Bilder mit 24 bit Farbtiefe können Alphakanal Transparenz beinhalten, sind aber wesentlich grösser. Das heisst, ein Pixel muss nicht entweder transparent oder deckend sein, sondern kann halbtransparent sein. Dadurch muss die Hintergrundfarbe z.B. bei Schatten nicht vorgegeben sein, Verläufe in die Transparenz sind stuffenlos möglich. PNG-24 (bzw. ihre Alphatransparenz) wird von IE erst ab Version 7 dargestellt.
svg
*.svg - Bilder (scalable vector graphics) basieren nicht auf Pixeln, sondern auf Kurvenberechnungen, SVG ist beliebig skallierbar und erzeugt technische Zeichnungen wie Kurvendiagramme, die aus Variablen Werten erstellt werden. Da SVG auf XML basiert, kann die Zeichnung mit einem Texteditor geschrieben, bzw. durch Code berechnet werden. Zur Darstellung von SVG in den meissten Browsern ist bis 2014 noch die Installation eines Plug-ins erforderlich. Ab HTML 5 kann dann mit JavaScript auf das neue canvas-Element gezeichnet werden.
Bilder einbinden
<img src=" " ... />
Das <img /> Opentag hat in HTML kein Endtag, in XHTML kann es als leer ( />) geschrieben werden oder mit Endtag (ohne, dass sich etwas zwischen den Tags befinden darf). Das erste attribut ist src= (wie source von Quelle), der Wert ist die Adresse des Bildes und wird in "Anführungszeichen" genannt. Bilder werden nur in die Seite verlinkt, sie lagern mit Vorteil in einem eigenen 'image'-Ordner, der sich im gleichen Ordner wie die Seite befindet.
Ein Bild
kann einfach so
, auch ohne Wortabstand in die Linie geschrieben werden:<img src="images/biefer.gif" ... />Bilder anschreiben
alt="..."
Das alt-Attribut kann von Maschinen vorgelesen werden.
Bei einigen Browsern kann die Option 'Bilder anzeigen' deaktiviert werden, an Stelle des Bildes erscheint dort nur eine Ersatzgrafik.
Eine Ersatzgrafik erscheint auch, wenn ein Bild nicht zur Verfügung steht (broken image).
Zudem muss beachtet werden, dass Texterkennungs- und Sprachausgabe-Geräte (z.B. für Blinde Menschen) mit Bildern nicht viel anfangen können.
Siehe Accessability und Usability!
Mit dem Attribut alt="..." muss dem Bild als Ersatz seine Bildbeschreibung mitgegeben werden (das ist obligatorisch). Das folgende Bild existiert nicht, aber sein Alt wird angezeigt:
title="..."
Wenn mit dem Mauszeiger über dem Bild mit dem 'alt'-Attribut gestoppt wird, erscheint im InternetExplorer ein kleines Infokästlein. Es ist aber nicht der Sinn von 'alt', beliebige Informationen darzustellen!
Beispielsweise nützt der Hinweis 'copyright 2000 by biefer.com, Switzerland' gar nichts, wenn das Bild fehlt.
Zusätzliche, kurze Infos werden dem Bild mit dem Attribut title="..." mitgegeben. Wenn durch ein kleines Bild ein Zip-Archiv zum Download angeboten wird, könnte man die Dateigrösse angeben.
Die Darstellung erfolgt ebenso in einem Kästchen, und zwar nicht nur im InternetExplorer, dieser zeigt den alt-Text auch nicht mehr an, wenn ein title-Attribut gesetzt ist.
Bilder Skallieren
Bildmasse müssen nicht angegeben werden; es ist jedoch besser, dies dennoch zu tun, denn wenn die Bilder definiert sind,
muss sie der Browser nicht schon geladen haben, um den Text darumherum bereits darzustellen (in HTML-Transitional ohne Angabe der Sorte sind Pixel gemeint, es sind aber auch die Massangabe in % möglich):
<img src="images/biefer.gif" width="80px" height="60px" />
Durch die Attribute height="..." und width=".." ist es möglich, die Darstellung des Bildes nachträglich zu skallieren.
Man kann grosse Bilder zuerst gross laden und diese dann vorerst durch den Brauser klein darstellen lassen
(falls das grosse Bild sowieso zur späteren Verwendung vorgeladen werden soll, was natürlich viel Ladezeit beansprucht für Etwas, das noch gar nicht gezeigt werden soll).
Und man kann kleine Bilder laden und sie dann durch den Browser aufgeblasen oder unproportional darstellen lassen (falls das Bild sich dazu eignet, das heist, der Pixel-/Artefakt-Effekt in Kauf genommen werden kann; z.B. für einen Balken;-):
Bild zur Anzeige wärend des Ladevorganges
Wir könnten ein Bild, das etwas länger hat zum Laden zusätzlich in einer leichten Version anbieten, welche schnell geladen und solange gezeigt wird, bis das richtige Bild fertig geladen ist.
Dazu dient das Zusatz-Attribut lowsrc="images/hubstapler_ls.gif";, das ist aber ein proprietäres Attribut von Netscape und gegen den Standard.
Einen ganz ähnlicher Effekt kann man einem JPG-Bild übrigens schon beim Speichern mitgeben, in dem (z.B. im Photoshop) die Einstellung 'Mehrere Durchgänge' an Stelle von 'Baseline optimiert' gewählt wird.
Ein so gespeichertes Bild baut sich beim Laden relativ schnell, aber zuerst grob auf, und verfeinert sich dann in mehreren Durchgängen.
Bild als Link (Thumbnail)
Wenn ein Bild gross präsentiert werden muss, dann braucht man trotzdem nicht damit die Seite zu belasten;
wir können ein Thumbnail (Daumen-Nagel-kleines-Bild) als Vorschau und zugleich als Link zur grossen Version benutzen. Wir stellen einfach einen Link zu einem Bild, statt zu einer anderen HTML Seite her.
Das Bild wird den Inhalt des aktuellen Brauserfensters ersetzen (von dort kommt man nur via den Zurück-Button des Browsers zurück).
An Stelle eines anklickbaren Stichwortes zwischen den <a>...</a> Tags schreiben wir das kleine Bild rein, dieses Thumbnail dient als Hotspot - das sieht so aus:
<a href="images/hubstapler.jpg"><img src="images/hubstapler_klein.jpg" alt="Thumbnail eines Hubstaplers" width="99px" height="72px" ></a>
Achtung: Eine ganze Navigationen durch schöneren Font abbildende Bilder-Links zu gestalten, ist ganz aus der Mode gekommen, fehlen die hübschen Bildchen, wird die Navigation ganz und gar unbrauchbar!
Alternativ kann das Bild auch in einem eigenen Browser-Fenster geöffnet werden, das geht im a-Opentag mit dem Attribut
target="_blank", was allerdings schon als recht unbeliebtes 'Popup' gilt (Popups können durch Browsereinstellungen verhindert werden):
<a href="images/hubstapler.jpg" target="_blank"><img src="images/hubstapler_klein.jpg" alt="Bild eines Hubstaplers" width="99px" height="72px"></a>
Aber wenn schon, dann war es sehr viel eleganter und schöner, eine ganz eigene HTML-Datei, welche das grosse Bild beinhaltet, in einem neuen Fenster zu öffnen,
denn dort konnten wir dann die Abstände zum Fenterrahmen im Body-Tag entfernen; aber jetzt öffnen neue Fenster je nach Browsereinstellung bloss noch einen neuen Tab.
Wir könnten auch heute noch die Fenstergrösse bestimmen, so wie vorgeben, dass es keine Menuleisten haben soll (etc.),
wenn wir das Popup per Javascript erzeugen.
<a href="bild_inseite.html" target="_blank"><img src="images/hubstapler_klein.jpg"
title="Link öffnet ein neues Fenster" alt="Bild eines Hubstaplers" width="99px" height="72px"></a>
Bilderrahmen
border="..."
Bilder welche als Link verwendet werden, haben schon einen 2 Pixel dicken Rahmen vorgegeben (siehe oben), dieser wird link-farben und fällt auf.
Auf diesen Rand kann auch verzichtet werden, mit dem Attribut border="0px".
Dieser Thumbnail hat nun keine Hervorhebung als Link mehr und kann nur als solcher erkannt werden, wenn sich der Mauszeiger beim darüber fahren verändert (oder wenn es mit einem Javascript-MouseOver-Effekt belegt ist).
Zu diesem Linkbild muss etwas bemerkt werden: Click the picture, to enlarge!
Wird für ein normales Bild ein Rahmen angegeben, durch border="1px", wäre dieser in der Textfarbe gehalten.
Der Rahmen kann auch dicker gemacht werden. Das Attribut border ist mittlerweile auch den CSS Angaben gewichen, in der Variante Strict und XHTML ist es sogar verboten.
<img src="images/kiroller.png" alt="Bild eines Kistenrollers" border="1px" />
<img src="images/kiroller.png" alt="Bild eines Kistenrollers" border="20px" />
Bilder im Textfluss und CSS
Bilder verhalten sich wie Buchstaben im Textfluss, bloss sind sie normalerweise höher als eine Zeilenhöhe.
Um Text um ein Bild herumfliessen zu lassen, gibt es rudimentäre und veraltete inline Attribute
(wie hier demonstriert, die vor CSS eingesetzt wurden) und es gibt bessere, umfangreichere CSS-Angaben, welche das Alignement, die Abstände, Rahmenarten und vieles, vieles mehr festlegen.
name="...", id="..." class="..."
Doch CSS spricht alle Bilder an, die dann alle gleich behandelt werden, es sei denn, die Bilder sind benannt, identifiziert oder klassifiziert. Damit sind Bilder dann ebenfalls mittels JavaScripts ansprechbar und manipulierbar, sie werden dynamisch, wie im bekannten MouseOver Effekt.
Bilder im Hintergrund
Hintergrundbilder sind in fast jedes Element einbindbar, in den Body, in Abschnitte,
Titel, in Tabellen, Tabellenzellen und einzelne Elemente. Aber auch dies ist durch CSS am besten zu machen:
Hintergrundbilder
Check den Code.