[Startseite Einführungskurs HTML]

4. Bilder in HTML-Seiten

Bilder lassen sich nur dann in eine HTML-Seite einfügen, wenn sie ein geeignetes Dateiformat besitzen: gif-Format oder jpg-Format. Das Format wird durch die durch die Endung des Dateinamens angegeben: "bild.gif" bzw. "bild.jpg".

Erstellt man z. B. mit ClarisWorks ein Bild (Zeichnung oder Malumgebung), so muss dieses (evtl. mit einem Hilfsprogramm) in das gif- oder jpg-Format umgewandelt werden. Es genügt nicht, das Bild im ClarisWorks-Format zu speichern und dem Dateinamen die Endung. "gif" zu geben !

Aufgabe:

1. Erstelle mit ClarisWorks eine farbige Zeichnung:

 

2. Wähle die Befehle "Alles auswählen" und dann "Kopieren", um die Zeichnung in die Zwischenablage zu bringen.

3. Öffne das Programm "clip2gif" und wähle aus dem Menü "File" den Befehl "Open Clipboard": er zeigt den Inhalt der Zwischenablage (Clipboard), in der sich jetzt die Zeichnung befinden muss.

4. Stelle im Menü "Options" von clip2gif ein: "Save As GIF", wähle aus den Menü "File" den Befehl "Save Clipboard As..." und sichere die Zeichnung unter dem Namen "bild.gif" und als "bild.jpg" (zuvor Options einstellen: "Save As JPEG"). Vergleiche die Dateigrößen (Icon auswählen, dann Befehlstaste+I).

5. Lege mit "SimpleText" eine HTML-Seite mit dem Dateinamen "bild.html" und dem Titel "Mein Bild" an.

6. Füge das Bild "bild.gif" mit dem folgendem IMAGE-Tag in die HTML-Seite ein (SRC=source):

<P><IMG SRC="bild.gif"></P>

7. Öffne die Seite "bild.html" im Browser:

Hinweise:

1. Bei der Arbeit mit einem HTML-Programm (z.B. Claris Home Page) ist kein Hilfsprogramm zur Umwandlung des Bild-Formats erforderlich.

2. Öffnet man "bild.gif" direkt im Internet Explorer, so erscheint die Bildgröße in der Titelleiste:

3. Um den Aufbau einer HTML-Seite im Browser zu beschleunigen, gibt man die Bildgröße als Attribute WIDTH und HEIGHT des IMAGE-Tags an.

<P><IMG SRC="bild.gif" WIDTH=110 HEIGHT=54></P>

4. Das gif-Format (Grafic Interchange Format) kann höchstens 256 Farben darstellen und eignet sich hauptsächlich für Strichgraphik. Das jpg-Format (Joint Photographics Expert Group) kann bis zu 16,7 Millionen Farben darstellen und eignet sich auch für Fotos. Datenkompression reduziert die Dateigröße.

5. Bilder können auch als Seitenhintergrund verwendet werden:

Beispiel hier

oder als Tabellenhintergrund:

Beispiel hier

 

[Startseite Einführungskurs HTML]