Informatik :: HTML :: Bilder

Bilder

GIF-Format | Farbpalette | JPG-Format | PNG-Format | Erstellung | Einbindung | Aufgabe

1. Das GIF-Format

Es wurde von CompuServe speziell für den Online-Einsatz entwickelt.

Vorteile:

Nachteil: maximal 256 Farben pro Datei speicherbar

Verwendung:

Farbpalette für WWW-gerechte GIF-Grafiken

Theoretisch kann jede der 256 Farben beliebige RGB-Werte haben,
d.h. es sind auch "krumme" Farbwerte wie 71,217,34 denkbar.

Für WWW-gerechte GIF-Grafiken gibt es ein Standard-Schema.
Bei diesem Schema sind alle Farben erlaubt, deren RGB-Werte durch 51 teilbar sind.

R(ot), G(rün) und B(lau) sollten danach also einen der Werte 0, 51, 102, 153, 204 oder 255
(hexadezimal: 00, 33, 66, 99, CC oder FF) haben.
Auf diese Weise ergeben sich 6 x 6 x 6 mögliche Farben, also 216.
Die verbleibenden 40 Farben sind "eiserne Reserve".

Die folgende Abbildung zeigt alle 216 Farben des Standard-Schemas.


Seitenanfang

2. Das JPG-Format

Es wurde entwickelt von der Joint Photographic Expert Group.

Vorteile:

Nachteil: mit Verlust komprimiert, d.h. je höher der Kompressionsfaktor, desto schlechter die Qualität der Grafik.

Verwendung:


Seitenanfang

3. Das PNG-Format

PNG bedeutet Portable Network Graphic.

Es vereint alle Vorteile von GIF und JPG:


Seitenanfang

Erstellung WWW-gerechter Grafik


Seitenanfang

Einbindung in ein HTLM-Dokument:

1. Vordergrundbild

<IMG src = "datei.gif"> Grafik im gleichen Verzeichnis
<IMG src = "bilder/datei.gif"> Grafik im Unterordner bilder

Attribute im IMG-Tag Wert(e) Beschreibung
align top, middle, bottom Ausrichtung der Bildbeschriftung
alt "Text" Anzeige eines Alternativtextes
border Zahl Rahmenstärke in Pixel
height Zahl Bildhöhe in Pixel
hspace Zahl oder Zahl% Horizontaler Abstand zu weiteren Elementen
lowsrc "bild.gif" Zuerst Grafik geringerer Farbtiefe laden
vspace Zahl oder Zahl% Vertikaler Abstand zu weiteren Elementen
width Zahl Bildbreite in Pixel

Um Bilder horizontal auszurichten, muss man sie in einen Absatz oder Container einbinden.

z.B.: <div align="right"> <IMG src="bild.jpg"></div>

2. Hintergrundbild

<body background = "datei.gif"> Grafik im gleichen Verzeichnis
<body background = "bilder/datei.gif"> Grafik im Unterordner bilder

Seitenanfang

Aufgabe:

Erstelle das HTML-Dokument 06_Bilder.html welches unten abgebildete Web-Seite liefert!

Beachte dabei folgende Formatierungshinweise:


Seitenanfang