Einführung in HTML

Robert Krah

1 Was ist HTML? HTML bedeutet Hypertext Markup Language. Frei übersetzt könnte man HTML als "Seitenbeschreibungssprache für Internetseiten" bezeichnen. Mit HTML werden die Elemente eines Dokuments beschrieben: Überschriften, Aufzählungen, der Text selbst, Position und die Größe von Grafiken, Tabellen usw. Da bei den meisten Elementen, die von HTML beschrieben werden, eine feste Umgrenzung von - bis festgelegt werden kann, wird mit HTML markiert, von wo bis wo ein Element reicht, also zum Beispiel: [Überschrift] Text der Überschrift [Ende Überschrift] Durch die Fähigkeit, Verweise (Hyperlinks) zwischen Dokumenten herzustellen, können mit HTML Sprungmarken gesetzt werden; innerhalb der eigenen Dokumente genauso wie Links zu fremden Seiten. Auf dieser Grundidee beruht, wie Sie alle wissen, das World Wide Web. Der jeweilige HTML-Standard (seit 02/98: Version 4.0) wird vom W3-Konsortium, einem Gremium von Wissenschaftlern, Firmen und Institutionen, festgelegt. Durch das Einhalten von Standards soll es möglich sein, Dokumente zu definieren, die von allen Browsern gleich dargestellt werden können. 1.1 Ergänzungen/Zusätze zu HTML: a) CSS = Cascading Style Sheets:

Ähnlich wie mit Dokumentvorlagen in Word können mit CSS Formatierungen festgelegt werden, zum Beispiel die Festlegung, dass alle Überschriften 1. Ordnung in Größe 24, rot und kursiv erscheinen.

b) Javascript:

Mit Javascript, einer Entwicklung von Netscape, können Sie innerhalb von HTML-Dokumenten (oder als eingebundenes eigenes Dokument) Ergänzungen programmieren. Dies reicht von Plausibilitätsprüfungen bei der Formulareingabe über grafische Effekte (man fahrt z. B. ohne Klicken mit der Maus über Elemente auf dem Browser-Bildschirm und sieht aufklappende Erklärungstexte, die Übersetzung in eine andere Sprache wird angezeigt, usw.) bis hin zu strukturierten Programmen innerhalb des HTML-Dokuments. Javascript-Befehle werden direkt vom Browser interpretiert, werden also mit dem HTML-Dokument auf den PC des Betrachters geladen und dort ausgeführt.

c) CGI = Common Gateway Inter- Über CGI ist es möglich, dass Programme auf einem Server im Internet bestimmte Daten verarbeiten. Ein einface: faches Beispiel dafür ist ein Counter, ein Zähler auf einer Homepage. Dadurch wird angezeigt, als der wievielte Besucher man sich auf einer Homepage befindet. Dies ist nur dadurch möglich, dass das CGI-Programm auf den Server zugreift und dort etwas speichern kann (bei Anbietern von kostenlosem Webspace (=Speicherplatz für HTML-Dateien im Internet) ist oft kein CGI möglich). 1.2 Erstellen von HTML-Dateien HTML-Befehle kann man mit jedem beliebigen Editor (Notepad von Windows usw. ) schreiben und als Textdatei (in der Regel mit der Dateiergänzung .htm oder .html speichern. Ein Browser wie z. B. der MS-Internet Explorer oder der Netscape Navigator interpretiert dann die HTMLBefehle und stellt das HTML-Dokument am Bildschirm dar.

Einführung in HTML Wenn ein Textprogramm wie z. B. Word zum Schreiben von HTML-Dateien verwendet wird, dann muss darauf geachtet werden, beim Speichern das Dateiformat "Nur Text" einzustellen. Auf die Möglichkeit, direkt mit Word Dateien im HTML-Format zu erstellen, gehe ich später ein. Es gibt außerdem eine große Zahl von HTML-Editoren, mit denen Internetdokumente (fast) wie mit einem Textverarbeitungsprogramm geschrieben werden können. Die bekanntesten sind Frontpage von Microsoft und (die bessere Wahl) Dreamweaver von Macromedia. Trotz solcher Programme ist es dennoch sinnvoll, die Sprache HTML an sich zu lernen. 1.3 Links im Internet zu HTML Im Internet gibt es unzählige Einführungen in HTML, fast jeder Provider bietet Links an, mit denen auf Erläuterungen zum Erstellen von Internet-Seiten für Homepage-Zwecke zugegriffen werden kann. Die beste und umfangreichste Zusammenstellung von HTML-Erläuterungen ist aber nach wie vor SELFHTML von Stefan Münz. (http://selfhtml.teamone.de) Auf diese Seiten wird auch hier in dem vorliegenden Skript häufig zugegriffen, ich mache nicht jede Stelle kenntlich, an der ich von Stefan Münz' HTML-Erklärungen profitiert habe. SELFHTML sei jedem zum Download empfohlen (als komprimierte ZIP-Datei kann das komplette Manuskript - übrigens auch in Buchform erhältlich - heruntergeladen werden und offline mit dem Internet Explorer gelesen werden). Ebenfalls empfehlenswert ist die HTML-Dokumentation von Hubert Partl: (http://www.boku.ac.at/htmleinf/). Weitere Links sind auf den SELFHTML-Seiten zu finden.

2 Tags in HTML HTML-Befehle stehen in sogenannten Tags. Diese sind jeweils von spitzen Klammern eingeschlossen. Ein Beispiel: Dies ist eine Überschrift Im Browser wird angezeigt:

Dies ist eine Überschrift h4 steht für Überschrift 4. Ordnung. In spitze Klammern eingeschlossen, also , markiert das Tag den Beginn der Überschrift. Das End-Tag (abschließendes Tag) zeigt an, dass die Überschrift dort zu Ende ist. Die meisten Tags müssen zu Beginn und zum Ende gesetzt werden, einige Befehle benötigen kein End-Tag, z. B.
für Zeilenschaltung Wenn Tags verschachtelt werden, muss die richtige Reihenfolge beim Schließen der Tags beachtet werden. 2.1 Umlaute Umlaute und das ß müssen im Text codiert werden, damit sie vom Browser richtig dargestellt werden. Ersetzen Sie das Zeichen ä durch ä Ä durch Ä Beispiel aus SELFHTML: ö durch ö Ö durch Ö In München steht ein Hofbräuhaus. Dort gibt es Bier aus Maßkrügen. ü durch ü Ü durch Ü ß durch ß Es gibt allerdings auch die Möglichkeit, im Header der Datei ein sogenanntes Meta-Tag zu verwenden:

(über Meta-Tags weiter unten mehr)

-2-

Einführung in HTML

3 Grundgerüst einer HTML-Datei Eine einfache HTML-Datei besteht aus Header und Body. Die gesamte HTML-Datei ist von zu Anfang und am Ende eingeschlossen. Im Body bringt man den Text, Tabellen, die Grafiken, die Links auf andere Seiten usw. hinein. Der Header enthält u. a. Angaben zum Titel. Das ist aus folgenden Gründen besonders wichtig: • Der Titel der Datei wird bei der Anzeige im Browser in der Titelzeile angezeigt • Der Titel der Datei wird vom Browser beim Setzen von Lesezeichen („Favoriten“ im Internet Explorer“) verwendet • Der Titel der Datei wird im Browser in der Liste der bereits besuchten Seiten angezeigt ... hier kommt der Text, die Verweise, die Grafiken usw. hinein

IN HTML-Dokumenten finden Sie ganz oben – noch vor dem einleitenden -Tag noch eine Angabe wie die folgende:

Damit deklarieren Sie das HTML in der Form, dass die HTML 4.0-Version verwendet wird, dass alle Angaben gemäß der Spezifikationen des W3-Konsortiums erfolgen, usw. Damit befassen wir uns später. Außerdem werden noch die auf der vorigen Seite erwähnten Meta-Tags, und zwar vor oder nach untergebracht. Wenn Sie nicht die Umlaute einzeln kodieren wollen, dann ist es sinnvoll, das Meta-Tag

immer zusätzlich zu verwenden.

Aufgabe: Starten Sie den Editor. Schreiben Sie die folgenden Angaben, die wir für jede weitere HTML-Datei brauchen, und speichern Sie die Datei z. B. mit dem Namen leer000.htm ab:

Für die Dateien, die als Übungen in der nächsten Zeit erstellt werden, kann dann jeweils die Datei leer000.htm geöffnet werden, mit allen zusätzlichen Angaben, dem Text usw. versehen werden, und dann mit dem Befehl Datei Speichern unter mit dem jeweiligen Namen versehen werden. Verwenden Sie als Dateinamen generell Kleinbuchstaben, keine Leer- und Sonderzeichen; die Titelseite (die Startseite einer Homepage) bekommt immer den Namen index.html.

-3-

Einführung in HTML

4 Tags (Befehle) zum Formatieren In diesem Abschnitt sollen die wichtigsten Tags zum Formatieren vorgestellt und anhand von Übungen ausprobiert werden: Überschriften, Absätze, Textauszeichnung, Ausrichtung von Absätzen und Linien. Die wichtigsten Tags für Text im HTML-Dokument: Beginn

Ende

Bedeutung





fett (bold)





kursiv (italics) (Das Tag für unterstrichen ist ab der HTML-Version 4.0 weggefallen, wegen der Verwechslungsgefahr mit Hyperlinks)





hervorheben (emphasis)





stark hervorgehoben

....

...

Überschrift 1. Ordnung (h=heading) ...





Überschrift 6. Ordnung




Zeilenschaltung (break) kein End-Tag erforderlich)

Absatz (paragraph)

Absätze sind auch mit sogenannten Attributen möglich Beginn

Ende

Bedeutung

Hans

ergibt im Browser: A. Peter B. Gerd C. Hans

Honda Yamaha Kawasaki

Beispiele für gegliederte Listen: HTML-Code Bettina Margit Hanna Honda Yamaha Kawasaki

ergibt im Browser:

HTML-Code

ergibt im Browser:

Hund Katze Honda Yamaha Kawasaki 600 FZR 750 YPZX

(geschachtelete Aufzählung)

Aufgabe: Erstellen Sie ein HTML-Dokument namens Liste.htm. Testen Sie in diesem Dokument verschiedene Möglichkeiten für Listen.

-5-

Einführung in HTML Tags zum Erzeugen von Linien: Beginn

Ende

Bedeutung





Linie





Linie ohne Schatten





Linie 300 Pixel breit





Linie 50 Breite des Anzeigefensters

Lauftext erzeugen: Text, der laufen soll



Lauftext wie im Windows-Bildschirmschoner Marquee (wird nicht von Netscape interpretiert)

Aufgabe: Erstellen Sie die HTML-Datei, die unten so abgebildet ist, wie sie im Browser erscheinen soll. Speichern Sie die Datei mit dem Namen auto.htm. Erstellen Sie die Datei wieder mit dem Editor. Speichern Sie und testen Sie (auch zwischendurch) mit dem Internet Explorer. Tipp dazu: Wenn die Datei im Browser geöffnet ist und Sie im Editor Veränderungen an der Datei vornehmen und neu speichern, dann reicht der Wechsel zum Internet Explorer (mit Alt Tab oder über die Taskleiste) und der Druck auf die Taste F5 = Aktualisieren.

HTML-Befehle zum Vergleich auf der nächsten Seite!

Die Datei auto.htm in der Editor-Ansicht (mit codierten Umlauten):

-6-

Einführung in HTML Norberts Gebrauchtwagenhandel Norberts Gebrauchtwagenhandel KFZ-Meisterbetrieb Wir glänzen mit Leistung, wo andere pfuschen!
Seit Jahren sind wir die Nr 1. in der Bergheimer Auto-Szene. Angefangen haben wir mit Ford Capri und Opel Manta, auch Käfer, Ente und R4 haben wir nicht verschmäht. Heute bieten wir Ihnen vor allem folgende Marken: Opel Audi VW BMW Mercedes Benz Unsere Leistungen im Einzelnen: preiswerte Reparaturen TÜV-Vorführung AU/ASU Tieferlegen Spoilermontage Breitreifen montieren Besuchen Sie uns live:
Kölner Landstraße 73
57983 Bergheim
Tel. 0 23 43/99 76 54

4.1 Farben festlegen Es gibt zwei Möglichkeiten, Farben in HTML zu definieren: a. durch Angabe eines Farbnamens b. durch Angabe der RGB-Werte der gewünschten Farbe in Hexadezimalform (RGB = Rot/Grün/Blau-Wert der Farbe) zu a) 16 Grundfarben können durch den Farbnamen genannt werden. Dafür müssen folgende englische Farbbezeichnungen verwendet werden: black (schwarz) silver (hellgrau) gray (grau) white (weiß) maroon (kastanienbraun) red (rot) purple (lila) fuchsia (hell-lila) green (grün) lime (hellgrün) olive (olivgrün) yellow (gelb) navy (dunkelblau) blue (blau) teal (blaugrün) aqua (himmelblau) 4.1.1 Hintergrundfarbe (bgcolor=background color) Im folgenden Ausschnitt aus der Auto-Datei sehen Sie, wie die Hintergrundfarbe bestimmt wird: Norberts Gebrauchtwagenhandel

-7-

Einführung in HTML Norberts Gebrauchtwagenhandel 4.1.2 Textfarbe, Farbe für Hyperlinks usw. Innerhalb des body-tags werden auch die anderen Farben angegeben: bgcolor text link vlink alink

= dateiweite Hintergrundfarbe, = dateiweite Schriftfarbe, = dateiweite Farbe für Verweise zu noch nicht besuchten Zielen, = dateiweite Farbe für Verweise zu bereits besuchten Zielen, = dateiweite Farbe für aktivierte Verweise.

Beispiel:

Aufgabe: Legen Sie für die Datei auto.htm die folgenden Farben fest: Hintergrundfarbe hellgrau, Textfarbe hellgrün, Hyperlinks = rot Speichern Sie die Datei und testen Sie mit dem Internet Explorer! zu b) Hexadezimale Farbangaben Im hexadezimalen Code werden die RGB-Werte (Mischung aus den Grundfarben rot, grün und blau) angegeben. Für jeden Farbwert stehen dabei zwei Werte zur Verfügung; hexadezimale Werte sind die Ziffern von 0 bis 9, gefolgt von den Buchstaben A bis F , d. h. 16 Möglichkeiten. Jeder Farbabteil mit zwei Ziffern: 16X16=256, drei Grundfarben, also 256x256x256 =16,7 Mio. Farben. Die RGB-Werte folgen immer auf eine Raute:

Ein "sattes Rot" sähe dann so aus: #ff0000, grün: #00ff00, blau: 0000ff, gelb als Mischung aus rot und grün: #ffff00. Grafikprogramme zeigen die RGB-Werte in der Regel an, d. h. man kann eine Grafik öffnen und sich im Grafikprogramm den gewünschten Wert notieren, den man in der HTML-Datei verwenden möchte. 4.2 Kacheln und Texturen Mit kleinen Hintergrundgrafiken kann der Browser-Hintergrund "gekachelt" werden, d. h. die Grafik wiederholt sich immer wieder. Mit Texturen erreicht man einen ähnlichen Effekt, mit dem Unterschied, dass sich Texturen nahtlos aneinander anschließen. Das sieht zum Beispiel so aus: Kacheln

Textur

Die Syntax zum Einbinden von Kacheln und Texturen ist einfach. Innerhalb der body-Angabe, in der wir auch Farbangaben vorgenommen haben, wird die gewünschte Grafik genannt: (vor dem schließenden > noch eventuell gefolgt von den Farbangaben)

Aufgabe: Testen Sie verschiedene Kacheln und Texturen am Beispiel der Datei auto.htm.

-8-

Einführung in HTML

5 Grafiken einbinden Grafiken im HTML-Dokument werden mit folgenden tag eingebunden: (img=image, src=source) Dieser Befehl würde die Grafik namens beispiel.gif im Browser anzeigen. Dazu muss die Grafikdatei im selben Ordner abgespeichert sein. Wenn sie sich in einem Unterordner befindet, dann wird der Verweis z.B. so gemacht: Der folgende Ausschnitt aus der Datei auto.htm : Norberts Gebrauchtwagenhandel führt zu dem Bildaufbau im Browser:

5.1.1 Textfluss: Mit einem Zusatz kann bestimmt werden, wie der Text um die Grafik herumfließen soll. Der schon bekannte Zusatz align="right" oder align="left" richtet die Grafik rechts oder links aus, der Text fließt dann entsprechend auf der anderen Seite herum. Dieser Ausschnitt aus der Datei auto.htm: Heute bieten wir Ihnen vor allem folgende Marken: Opel Audi VW BMW führt zu:

Die Größenangabe (width="115" height="115") führt dazu, dass von vornherein Platz in der angegebenen Größe im Browser reserviert wird. Wenn man diese Angabe nicht macht, dann "springt" der Bildaufbau ständig, bis alle Grafiken geladen sind. Der Aufbau der Datei erscheint dabei sehr unruhig. Die Größenangaben können im Bildbearbeitungsprogramm in der Regel in der Statuszeile abgelesen werden, z. B. im einfachen Photo Editor von Microsoft: Noch besser kann die Position von Grafiken mit (unsichtbaren) Tabellen gestaltet werden (s. u.)

-9-

Einführung in HTML

6 Hyperlinks Mit Hyperlinks können Sie die Möglichkeit des Internet nutzen, Sprungverweise zu anderen Dokumenten im WWW einzusetzen. Dies ist genauso zu fremden Seiten wie zu den eigenen Unterseiten möglich. Wenn Sie eine Website planen, dann ist es in jedem Fall sinnvoll, den Aufbau und die Struktur genau zu planen. Für den Besucher der Website ist es wichtig, die "Navigation" innerhalb des Angebots, das Sie ihm mit einer Website machen, zu verstehen. Das geht zwar noch besser, wenn man schon über die Möglichkeit von Frames verfügt (wir kommen einige Kapitel später dazu) , aber auch ohne solche "Rahmen" innerhalb der HTML-Dokumente ist das machbar. Ein Link ist auch innerhalb von Dokumenten einsetzbar und sinnvoll, um zum Beispiel per Mausklick jeweils nach oben oder unten zu kommen, ohne lange scrollen zu müssen. Der Aufbau von Verweisen ist einheitlich, unabhängig davon, ob sie zu einem anderen Dokument führen oder nur innerhalb eines (längeren) Dokuments verweisen: Verweistext Dabei steht a für anchor = Anker, href für hyper reference = Hypertext-Referenz. Als Verweisziel wird die Datei genannt, auf die der Link gesetzt wird (in Anführungszeichen), oder der "Anker" innerhalb des Dokuments. Schließlich wird der Text angegeben, der als Link im fertigen HTML-Dokument erscheinen soll. 6.1 Links zu externen Dokumenten Auch wenn der Aufbau eines Hyperlinks gleich ist, unabhängig davon, ob das Verweisziel innerhalb oder außerhalb eines Dokuments liegt, sehen wir uns zunächst Links zu anderen Dokumenten an. Ein Beispiel für unseren Bergheimer Autohändler: Hier geht´s zu den Gebrauchtwagen Im Browser erscheint der Link so (zur Farbgestaltung s. Seite 8 oben)

Aufgabe: Öffnen Sie die Datei auto.htm im Editor und bauen Sie den Hyperlink an passender Stelle ein. Natürlich muss auf den "Unter-Dokumenten", auf die verwiesen wird, ein Verweis stehen, der es dem Betrachter ermöglicht, zur Hauptseite zurückzukommen – am besten in jedem Dokument an der gleichen Stelle. Zurück zur Startseite – Norberts Gebrauchtwagen

Aufgabe: Erstellen Sie das folgende HTMLDokument. Verwenden Sie dabei die Grafik bmw.jpg

- 10 -

Einführung in HTML Der HTML-Code dazu: Gebrauchtwagen Norberts Gebrauchtwagen Preis: 11900 Euro
BMW 320 Diesel
Daten:119.000 km,
100 kW (136 PS), EZ: 04/99, schwarz
Besonderheiten: Diesel, Klimaanlage
Beschreibung: Klimatronic, ABS, Airbag, el. FH, Servo, ZV, Color, Kopfstützen, I. Hand
Zurück zur Startseite - Norberts Gebrauchtwagen

6.2 Grafik als Link Es ist auch möglich, eine Grafik einzubinden, die als Link dient. An der Stelle, an der sonst der Text steht, wird der Verweis auf die Grafik gesetzt. Die allgemeine Form ist dann die folgende: Wenn Sie nicht wollen, dass der Browser einen Rahmen um die Datei zieht, dann machen Sie den Zusatz border=0: Dabei muss man allerdings beachten, dass der Benutzer die Grafik dann nicht mehr unmittelbar als Link erkennen kann.

Aufgabe: Binden Sie die Grafik auto.gif so ein, dass sie als Link zur HTMLDatei gebraucht.htm dient: Mauszeiger als Hand im Browser zeigt, dass das Bild als Link funktioniert:

6.3 E-Mail-Links Unter dem E-Mail-Link versteht man den Hyperlink, mit dem der Benutzer eine Mail an den Betreiber der Seite im Web schicken kann. Für Norberts Gebrauchtwagenhandel habe ich eine Adresse bei Freenet eingerichtet, an die Sie über den Link, den wir jetzt erstellen, eine Testmail senden können. Die Adresse lautet: [email protected] Die allgemeine Form, mit der ein E-Mail-Link erstellt wird: Text Im konkreten Beispiel ist der HTML-Befehl für Norberts Gebrauchtwagenhandel: E-Mail an Norbert /a> Das sieht im Internet Explorer dann so aus: (Ausschnitt)

- 11 -

Einführung in HTML Auch hier kann natürlich wieder eine Graphik als Link verwendet werden. Statt des Textes muss an der entsprechenden Stelle dann der Verweis auf die Grafik stehen statt:

E-Mail an Norbert /a>

/a> Die gif-Datei ist eine sogenannte animierte Gif-Datei, also eine Grafik mit einer Animation. Hier weiß allerdings der Benutzer nicht, dass es sich um einen E-Mail-Verweis handelt, er sieht nur die animierte Grafik, die einen Briefkasten darstellen soll. Deshalb ist es besser, wenn zusätzlich noch ein erklärender Text davorsteht: E-Mail an Norbert: /a> Dann sieht das Ganze so aus:

Eine andere Variante wäre, ein kleines Brief-Symbol als Dateiverweis vor den Hyperlink zu stellen, über den der Mailverweis erfolgt. E-Mail an Norbert Das wird im Browser so angezeigt: 6.4 Verweise innerhalb eines Dokuments Wenn innerhalb eines HTML-Dokuments Verweise erfolgen sollen (z. B. zu Unterkapiteln, nach oben und nach unten, dann muss man sogenannte Anker definieren, zu denen der Sprungverweis dann erfolgt. dies geht so:



wobei a für anchor(=Anker) und „xxxx“ für den Namen des Ankers steht. Der Hyperlink, den Sie brauchen, um innerhalb des Dokuments zu dem vorher definierten Anker zu springen, geht so: Verweistext wobei a für anchor = Anker, href für hyper reference steht. Verweistext steht für das, was im Dokument sichtbar ist, worauf also der Link erfolgt. Am Beispiel der Datei dns.htm soll dieses Verfahren ausprobiert werden:

Aufgabe: Öffnen Sie die Datei dns.htm mit dem Internet Explorer. Bis jetzt enthält die Datei nur Text und einige Überschriften.

An den Stellen, an denen im laufenden Text jeweils eine Überschrift anfängt, soll der Anker gesetzt werden, damit man von den Überschriften zu Beginn (im Inhaltsverzeichnis) dorthin springen kann.

- 12 -

Einführung in HTML

Erläuterung am Beispiel: An der Stelle oben im HTML-Dokument, an der das Inhaltsverzeichnis steht, wird dann der Hyperlink so definiert: Der Anfang

Der Anker heißt Anfang Im Text steht Der Anfang

Der Anker für die Stelle, auf die der Verweis erfolgt, ist dann folgender: Der Anfang

Aufgabe: Definieren Sie Anker für die vier weiteren Überschriften. Ganz am Ende des Dokuments soll dann noch der Sprung nach oben ermöglicht werden: Dazu muss oben der Anker und unten der Hyperlink stehen.

7 Grafiken in HTML-Dateien Der Einsatz von Grafiken ist ein wichtiges Thema bei der Erstellung von Homepages. Das World Wide Web als Multimedia-Bereich des Internet hat ja unter anderem so eine weite Verbreitung gefunden, weil die farblosen Zeiten von reiner Text-Mail, Download über reine FTPSchnittstellen oder die Verwendung von Gopher zwar nicht der Vergangenheit angehören, sondern durch attraktive Websites aufgepeppt worden sind. Gerade bei Nicht-Profis, die ihre Sites dem Publikum präsentieren, sind Gepflogenheiten festzustellen, die bei der Verwendung von Grafiken zuviel des Guten tun: Lange Ladezeiten und unattraktives Design ihrer Seiten ist dabei die Folge. Deshalb soll der richtige, sinnvolle Einsatz von Grafiken an Beispielen gezeigt werden. Im1 WWW haben sich zwei Dateiformate für Grafiken durchgesetzt, die Formate GIF und JPEG. Bei beiden Formaten handelt es sich um pixelorientierte Formate. Die Stärken beider Formate liegen jedoch auf unterschiedlichen Gebieten. 7.1 Das GIF-Format Das GIF-Format gilt als das "Haus-"Format von CompuServe und wurde speziell für den Online-Einsatz entwickelt. Es zeichnet sich durch eine hohe Komprimierungsdichte aus (zum Vergleich: Bitmap-Dateien im BMP-Format sind bei gleichem Inhalt durchschnittlich zehnmal bis dreißig mal so umfangreich wie GIF-Dateien). Der jetzt gültige Standard des GIF-Formats ist das sogenannte "89er-Format". Dieses Format bietet drei Möglichkeiten an, die das GIF-Format für den Einsatz im WWW besonders interessant machen: •

1

Die Möglichkeit, eine Datei "interlaced" abzuspeichern. Eine Grafik, die so abgespeichert ist, wird beim Laden nicht zeilenweise eingelesen und aufgebaut, sondern schichtweise. Gerade bei der Online-übertragung ist das sehr hilfreich. Denn so erscheint die Grundstruktur der Grafik sehr schnell am Bildschirm des Anwenders. Beim weiteren Einlesevorgang wird die Grafik dann immer deutlicher und feiner aufgelöst am Bildschirm angezeigt.

Der folgende, leicht eingerückte und kursive Teil (aktuelle Seite und die folgende) über die Formate GIF und Jpeg

sind Zitate aus der 7.0-er Version von SELFHTML (Stefan Münz)

- 13 -

Einführung in HTML •

Die Möglichkeit, mehrere Grafiken in einer einzigen Grafikdatei zu speichern, verbunden mit Optionen zur Steuerung der Einzelgrafiken. Mit Hilfe dieses Features des GIF-Formats sind animierte Grafiken realisierbar. • Die Möglichkeit, eine Farbe, die in der Grafik vorkommt, als "transparent" zu definieren. Mit Hilfe dieses Features lassen sich transparente Hintergründe bei Grafiken definieren, wodurch Sie auf WWW-Seiten sehr reizvolle Effekte erzielen können. Ein Nachteil des GIF-Formats ist, dass es maximal 256 Farben pro Datei speichern kann. Ein Pluspunkt ist dagegen, dass GIF-Grafiken verlustfrei komprimieren. Aufgrund seiner Charakteristik ist das GIF-Format für hochauflösende Grafiken wie Fotos oder fein strukturierte Wallpaper-Hintergründe nicht so sehr geeignet. Ideal ist das GIF-Format für Buttons, Dots, Bars, Symbole und Cliparts. 7.2 Das JPEG-Format Bei JPEG, entwickelt von der Joint Photographic Expert Group, handelt es sich um ein Grafikformat, das auf dem Komprimierungsalgorithmus DCT (Diskrete Cosinus Transformation) in Verbindung mit der Huffman-Kodierung basiert. Da dieses Verfahren zunächst nur für statische Grafiken von Bedeutung war, entstand das gleichnamige Dateiformat für Bilder. Mittlerweile wird der JPEG-Algorithmus auch auf Videos angewendet und hat das zukunftsweisende Video-Format MPEG hervorgebracht. Das JPEG-Grafikformat komprimiert ebenfalls sehr gut und hat gegenüber dem GIFFormat den Vorteil, dass es pro Bild bis zu 16,7 Millionen Farben speichern kann. Der Nachteil ist, dass JPEG mit Verlust komprimiert, d.h. je höher der Komprimierfaktor, desto schlechter die Qualität der Grafik. Aufgrund seiner Charakteristik eignet sich das JPEGFormat vor allem zum WWW-gerechten Abspeichern von eingescannten Fotos, aber auch für andere Grafiken, in denen sehr feine Farbverläufe vorkommen. Beim JPEG-Format können Sie bei besseren Grafikprogrammen zwei Parameter selbst bestimmen: • Die DPI-Dichte: Das ist die Punktdichte (dpi = dots per inch). Bei JPEG-Dateien, die Sie für die Anzeige in WWW-Seiten benötigen, reicht ein Wert zwischen 70 und 100 dpi. • Den Kompressionsfaktor: Je höher der Kompressionsfaktor, desto schlechter die Bildqualität. Ein Komprimierungsfaktor von 5 bis 10 ist für eine gute Bildqualität ein sinnvoller Wert. Es gibt eine Variante von JPEG-Grafiken, sogenannte "progressive JPEG-Grafiken". Dabei wird, ähnlich wie beim GIF-Format in der Variante "interlaced", zuerst eine vollständige, aber noch undeutliche Fassung der Grafik am Bildschirm aufgebaut. Das erste, noch nicht ganz deutliche Bild kann bereits am Bildschirm angezeigt werden, nachdem etwa 15% der Grafikdatei an den aufrufenden WWW-Browser übertragen wurden. 7.3 Vorschaugrafiken verwenden Der Aufbau einer Seite geht schneller vonstatten, wenn man zunächst kleinere Vorschaugrafiken verwendet, die erst bei Bedarf auf die richtige Größe gebracht werden. Der Befehl dazu lautet: Dabei wäre die Datei "bild.jpg“ die „große“ Datei und "minibild.jpg" die verkleinerte Variante. Dazu ist es allerdings erforderlich, über ein Grafikprogramm zu verfügen, mit dem Grafiken proportional verkleinert werden können. Mit Microsoft Photo Editor geht dies mit dem Befehl: Bild Größe ändern (Änderung auf 50 % der Größe = 50 % Speicherplatz)

- 14 -