HTML Basis

     

HTML: Grafiken, Fotos, Animationen 1

Dateiformate | Einbindung | Positionierung | Skalierung

 
Es gibt z.Z. zwei Grafikformate, die von verschiedenen Computersystemen und modernen Browsern gelesen werden können: GIF und JPEG bzw. JPG.

• GIF-Dateien können bis zu 256 Farben speichern. Die Größe der Datei wird dabei von der Anzahl der Farben bestimmt. Ohne Qualitätsverlust können Grafiken komprimiert und dekomprimiert werden. Sehr wichtig ist die Möglichkeit, die GIF-Grafik mit einem transparenten (unsichtbaren) Hintergrund darstellen zu können. So kann sie problemlos ohne unschöne Umrandung in andere Hintergründe eingefügt werden. Mit dem GIF-Format können aber auch Animationen realisiert werden, weil mehrere Bilder in einer Datei abgespeichert werden können. Beim Aufruf der Datei läuft dann so eine Art Dia-Show ab.
• JPEG-Dateien eignen sich für Bilder/Fotos mit mehr als 256 Farben. Die Größe der Datei wird vor allem von der Bildgröße bestimmt. Bei der Komprimierung tritt ein gewisser Qualitätsverlust auf.

Günstig ist, daß die Formate keinen riesigen Speicherbedarf beanspruchen. Wird auf einen zügigen Seitenaufbau Wert gelegt, sollte trotzdem Farbenanzahl, Farbtiefe und Bildgröße so weit wie möglich reduziert werden. Ein Grafikprogramm sollte also neben der Konvertierung verschiedener Dateiformate entsprechende Einflußmöglichkeiten bieten. Auch eine Interlaced-Funktion (eine allmählich ansteigende Darstellung der Bildauflösung) erscheint gerade für größere Bilder ganz nützlich.

PNG-Grafikdateien werden Ihnen im WWW sicher auch mal begegnen. Sie sind noch nicht sehr verbreitet. Das liegt wohl vor allem daran, daß nicht jeder Browser dieses Format erkennt. Es können bis zu 32 Millionen Farben angezeigt werden. Transparenz und Interlacing werden unterstützt. Eine verlustfreie Komprimierung ist möglich. Hier schön zu sehen!

 
Dazu ist zweierlei nötig. Erstens natürlich ein Bild im GIF- oder JPEG-Format, das am besten im gleichen Verzeichnis/Ordner wie die HTML-Datei gespeichert sein sollte (ansonsten wären entsprechende Pfadangaben notwendig). Zweitens eine Anweisung im HTML-Dokument in folgender Form:

<IMG SRC="bild.gif"> oder <IMG SRC="bild.jpg">

Dabei steht "bild" für den Namen der Grafikdatei.

Für die Befehlsnotierungen ist es gleichgültig, ob es sich um

eine Grafik, ein Foto oder eine Animation handelt.

Es gibt ja nun Browser, die überhaupt keine Grafiken darstellen können. Oder ein Nutzer hat von der Möglichkeit Gebrauch gemacht, die Grafikdarstellung in seinem Browser abzustellen. Mit

<IMG SRC="bild.gif" ALT="Beschreibungstext">

erscheint anstelle des Bildes ein alternativer Beschreibungstext: . Dieses ist besonders wichtig, wenn Bilder als Verweise herhalten müssen, d.h. wenn durch einen Mausklick auf ein Bild eine andere Seite aufgerufen werden soll. Da bei größeren Grafiken zunächst der Alternativtext erscheint, muß auch nicht der vollständige Aufbau der Grafik abgewartet werden, um weiterklicken zu können. Bei manchen Browsern erscheint der Alternativtext auch zusätzlich als Einblendung wie eine Sprechblase, wenn man den Mauszeiger über einer Grafik ruhen läßt.

 
Grafiken können ohne Umrahumg z.B. durch <IMG SRC="grafik1.gif" ALT="Grafik">

oder mit Umrahmung z.B. durch <IMG SRC="grafik1.gif" ALT="Grafik" BORDER=20>

dargestellt werden. Die Randfarbe ist normalerweise schwarz. Netscape dagegen verwendet die aktuelle Textfarbe.

Ein ähnlicher Effekt mit durchsichtigem Rahmen ist mit den Attributen HSPACE=Pixelzahl
für den horizontalen Abstand

und VSPACE=Pixelzahl

für den vertikalen Abstand zu erzielen.

Die Anweisung <IMG SRC="grafik1.gif" ALT="Grafik" HSPACE=20 VSPACE=20>
erzwingt also einen Bildabstand bzw. einen transparenten Rahmen von 20 Pixeln zum umgebenden Text.

Die Zuweisung ALIGN=TOP ergibt eine Ausrichtung einer Textzeile an der Oberkante der Grafik

Die Zuweisung ALIGN=MIDDLE ergibt eine Ausrichtung einer Textzeile an der Mitte der Grafik

Die Zuweisung ALIGN=BOTTOM ergibt eine Ausrichtung einer Textzeile an der Unterkante der Grafik

Wenn mitten in den Text ein Bild eingefügt wird, so sieht das nicht sehr schön aus, weil der Text die Grafik nicht umfließt. Solche Probleme sind besser durch eine Tabelle zu lösen.

Wenn mitten in den Text ein Bild

eingefügt wird, so sieht das nicht sehr schön aus, weil der Text die Grafik nicht umfließt. Solche Probleme sind am besten durch eine Tabelle zu lösen.

An dieser Stelle soll nicht weiter auf die Programmierung von Tabellen eingegangen werden, sondern es wird lediglich das Ergebnis dokumentiert. Hier also eine weitere Tabelle ohne Zellenränder.

Wenn mitten in den Text ein Bild

eingefügt wird, so sieht das nicht sehr schön aus, weil der Text die Grafik nicht umfließt. Solche Probleme sind am besten durch eine Tabelle zu lösen.

Wie man sieht, wären da noch Verfeinerungen notwendig, um die Lesbarkeit zu erhöhen. Aber wir lassen das mal so stehen.

Mit <IMG SRC="grafik1.gif" ALT="Grafik" ALIGN=LEFT> kann erreicht werden, daß der danach folgende Text auf der rechten Seite neben dem Bild ausgegeben wird. Das Bild wird also in jedem Fall links positioniert.

Umgekehrt geht das genauso. Mit <IMG SRC="grafik1.gif" ALT="Grafik" ALIGN=RIGHT> kann erreicht werden, daß der nach der Anweisung folgende Text auf der linken Seite neben dem rechtsstehenden Bild ausgegeben wird.

Soll z.B. bei größeren Bildern erzwungen werden, daß der Textfluß rechts oder links von der Grafik unterbrochen wird, daß also der Text auf jeden Fall unter der Grafik fortgesetzt wird, so muß an der betreffenden Stelle der Befehl <BR CLEAR=ALL>
eingefügt werden.

Nun mag man sich wundern, daß es kein Attribut zur Zentrierung der Grafik gibt. In der Tat würde ein ALIGN=CENTER eine normale linksbündige Ausrichtung ergeben, da das Attribut im Sprachschatz nicht vorgesehen ist und daher einfach ignoriert wird. Eine Zentrierung ist allerdings problemlos mit <P ALIGN=CENTER> oder <DIV ALIGN=CENTER> zu realisieren. Beispiel für die zentrierte Absatz-Programmierung:

<P ALIGN=CENTER>
<IMG SRC="grafik1.gif" ALT="Grafik">
</P>

Obwohl es doch einige Möglichkeiten gibt, das Layout von Text und Bildern zu beeinflussen, ist das letztlich doch keine ganz einfache Angelegenheit. Man wird wohl viel probieren müssen, um akzeptable Ergebnisse zu erhalten. Ich rate, in diesem Zusammenhang auch mal zu einem Ausflug in die Tabellenprogrammierung.

 
Damit der Textteil von Seiten mit Grafiken schneller auf dem Bildschirm erscheint, ist es besonders bei größeren Grafiken sehr empfehlenswert, die entsprechenden Größenangaben gleich mit anzugeben:

<IMG SRC="grafik1.gif" ALT="Grafik" WIDTH=n HEIGHT=n>

Um das für die Beispielgrafik richtig zu verwenden, müßte für Breite und Höhe jeweils der Wert 50 eingegeben werden. Diese Angaben dienen als Platzhalter, lassen also den von der Grafik beanspruchten Platz zunächst leer und bringen so auch nicht das Layout durcheinander, so daß man sich schon den Texten widmen kann, während die lieben Bildchen noch geladen werden. Sinnvoll geht das nur, wenn die Pixelgrößen des Bildes bekannt sind. Das ist mit einem Grafikprogramm oder einem Grafikviewer zu ermitteln.

Allerdings können mit veränderten Pixelangaben auch ganz nützliche Effekte erreicht werden. Werden die Werte z.B. jeweils verdoppelt, so wird die Grafik um den Faktor 4 vergrößert. Entsprechend können auch Verkleinerungen oder sogar Verzerrungen erreicht werden. Welche Größe auch immer angegeben wird, die Dateiladezeit ist immer gleich und ist alleine von der Kilobyte-Zahl abhängig.

 50x50   100x100   30x30   100x50   50x100

Die Größenangaben können auch für einen netten Trick verwendet werden, um Bilder "vorzuladen". Dazu müssen Sie natürlich erahnen, welche Seiten der User als nächste aufrufen wird. Während dieser nämlich mit dem Lesen einer Textseite beschäftigt ist, können Bilder oder Grafiken schon im Hintergrund auf seine Festplatte geschaufelt werden und stehen dann sofort ohne Zeitverlust auf der nächsten Seite zur Verfügung.

Dies wird erreicht, indem die Pixelangaben für Breite und Höhe eines Bildes auf den Wert 1 gesetzt werden. Das bedeutet nicht, daß nur ein Teil des Bildes geladen wird. Nein, es wird lediglich die Anzeige beeinflußt, in diesem Fall also eher die Nicht-Anzeige. Wenn überhaupt, wäre allenfalls ein Punkt sichtbar. Wird dann die eigentliche Seite aufgerufen, in der das Bild voll sichtbar sein soll, finden die originalen Größenangaben Verwendung, der Browser holt sich die Datei aus dem Speicher und zeigt sie entsprechend korrekt an.