(3) Verschachtelte Aufzählungen
Eine Verschachtelung ist möglich. Die Bullets werden in der Unterliste entsprechend anders dargestellt als in der Hauptliste.

• Aufzählungspunkt
• Aufzählungspunkt
• Aufzählungspunkt
• Aufzählungspunkt
• Aufzählungspunkt
• Aufzählungspunkt

5.2 Nummerierte Aufzählungen

Nummerierungen sind ebenfalls wie in den Textverarbeitungsprogrammen auch in HTML möglich.

(1) Aufbau der nummerierten Liste (Ordered List)

	
 Aufzählungspunkt 
	
 Aufzählungspunkt 
	
 Aufzählungspunkt 

(2) Arten von Nummerierungen
Analog zu den Textverarbeitungsprogrammen gibt Nummerierungs-Zeichen

 - 1, 2, 3, 4, 5, (Standard)
 - A, B, C, D, E,
 - a, b, c, d, e,
 - I, II, III, IV, V,
 - i, ii, iii, iv, v,

(3) Start der Nummerierung
Um die Nummerierung mit einem bestimmten Wert beginnen zu lassen, muss im Start-Tag der Ordered List <ol> das Attribut START gesetzt werden, sowie der geforderte Startwert.

 - Startwert 3

Soll die Nummerierung innerhalb einer Liste verändert werden, muss im Listen-Element <li> das Attribut VALUE gesetzt werden.

5.3 Definitionslisten

Definitionslisten werden in der Regel für das Erstellen von Glossaren verwendet. Sie lassen sich aber auch für Menüleisten mit zusätzlichen Erklärungen oder als Vokabellisten verwenden. Definitionslisten kennen drei verschiedene Elemente.

DL definition list – Definitionsliste – Hauptelement (enthhält DT und DD)
DT definition term – Definitionsbegriff – erklärender Begriff
DD definition – Definition – Definition von DL

6 Hypertext Links

Mit Hilfe der Hypertext-Links können Dateien verknüpft werden, unabhängig davon, auf welchem Rechner sie liegen und unabhängig von den jeweiligen Datenformaten. Hypertext-Links können Text-, Grafik-, Sound- oder Film-Dateien sein. Im HTML- Dokument werden dazu nun sogenannte Anker gesetzt, die auf die entsprechende Datei zeigen. Möchte man ein Dokument X auf ein Dokument Y verweisen lassen, so muss man die folgende Syntax verwenden:

 markierter Text 

Das „A“ steht hierbei für den Anker und das HREF-Attribut initialisiert einen Hypertext- Link. Der URL (Uniform Resource Locator) kann alle möglichen Formen annehmen. Der „markierte Text“ von oben wird vom Browser farblich dargestellt. Beim Anklicken des markierten Textes wird das referenzierte Dokument angefordert. Beispiel:

Dokument

6.1 Links innerhalb des gleichen Dokuments

In langen Dokumenten macht es Sinn, lokale Anker zu definieren und dann über ein vorangestelltes Inhaltsverzeichnis Sprungmarken zu diesen Textstellen anzubieten. Dafür ist es notwendig, neben der Angabe der Referenz auch noch die Textstelle, zu der gesprungen werden soll, zu definieren. Folgende Definitionen müssen erstellt werden:

Referenz auf die Textstelle im gleichen Dokument:

 hier finden Sie weitere Beispiele 

Anker im gleichen Dokument:

 weitere Beispiele 

Beim Referenzieren im Text muss nicht der vollständige URL angegeben werden, sondern es reicht die obige Angabe.

6.2 Links zu Textstellen in anderen Dokumenten

Es ist nicht nur möglich Textstellen innerhalb des gleichen Dokumentes zu referenzieren, sondern man kann auch auf eine Textstelle in einem anderen Dokument verweisen. Das folgende Beispiel soll dies erklären:

Link auf eine Textstelle in einem anderen Dokument:

Beim Klicken auf den farblich hervorgehobenen Text „hier finden Sie weitere Beispiele“ wird auf eine Textstelle in dem Dokument „dokument.html“ auf den Server „www.domain.de“ gesprungen, wenn diese Textstelle mit folgendem Anker gekennzeichnet wurde:

Anker in einem anderen Dokument:

 weitere Beispiele 

6.3 Relative und absolute Links

Es ist nicht immer notwendig, die vollständigen URLs bei der Referenzierung von Dokumenten zu verwenden. Es macht zum Beispiel wenig Sinn, einen Link zwischen zwei Dokumenten vollständig ausschreiben zu müssen, wenn diese beiden Dokumente im gleichen Verzeichnis liegen. Es reicht bei einem so geschilderten Fall als URL nur den Namen des zweiten Dokumentes zu verwenden. Dies bezeichnet man als einen relativen bzw. partiellen URL. Absolute URLs beinhalten immer die vollständige Angaben bei der Referenzierung von Dokumenten. Immer dann, wenn ein Link zu einem anderen Rechner aufgebaut werden soll, muss absolut referenziert werden, wenn man Links auf Dateien des selben Rechners anlegen will, ist es sinnvoll immer relative URLs zu benutzen.

Das folgende Beispiel referenziert eine Datei, die zwei Verzeichnisse weiter höher liegt (relativer URL):

 Home Page 

Das Referenzieren mit relativen URLs hat den Vorteil, dass man zum Beispiel den gesamten Verzeichnisbaum der WWW-Dokumente an eine andere Stelle verschieben kann, ohne die URLs in den Dokumenten anpassen zu müssen. Bei einer großen Anzahl von Dokumenten kann dies sehr hilfreich sein.

Eine weitere Möglichkeit die Hypertext-Links relativ zu adressieren ist die Verwendung von <base> im HEAD eines Dokumentes. Mit dem BASE-Element wird eine Adresse angegeben, die dann innerhalb des Textes mit einem <a>-Tag vervollständigt wird. Beispiel:

..........
 ich 
wird die Adresse innerhalb das -Tags zu
“http://firma.com/texte/ich.html“
vervollständigt.

Bei einer Adressänderung reicht es dann, einmal pro Dokument die Adresse im BASE- Element zu ändern.

7 Multimedia-Elemente

Seit dem Beginn der Web-Entwicklung im Jahr 1989 hat sich gerade im Hinblick auf Web- Browser sehr viel getan.

Eine Spezifikation für die Übertragung von Audio-, Video-, und Grafikdaten wird heute durch MIME gegeben. MIME steht für Multipurpose Internet Mail Extension und wird als Standard beim Versenden von Multimediadaten über das WWW angewendet. Heute spricht man im Zusammenhang mit dem Web bei MIME von „Content Types“. Normalerweise werden beim Anfordern von Dateien über das Web nicht nur Daten übertragen, sondern auch die Information, um welche Art von Daten es sich handelt. Wird das Datenformat nicht übertragen, so versucht der Browser, das Datenformat anhand der Endung der übertragenen Datei zu erschließen und ordnet die Daten einem speziellen MIME-Typus zu. Bei der Installation eines Browsers werden die verschiedenen MIME- Typen auf die Endungen der Dateien abgebildet.

Folgende Übersicht zeigt einen Auszug der verwendeten Multimedia-Datenformate.

application/postscript – .eps .ps .ai
sound/au – .au .snd
sound/wave – .wav
sound/midi – .midi
image/gif – .gif
image/jpeg – .jpeg
image/tiff – .tiff
text/html – .html
video/mpeg – .mpeg
video/avi – .avi

Wendet man die in der Tabelle aufgelisteten Datenformate an, so kann man relativ sicher sein, dass die verschiedenen Browser diese Formate übersetzen können. Man sollte auf andere Datenformate verzichten, wenn man sicher gehen will, dass Grafiken, Videosequenzen, Klänge usw. vom Browser des Benutzer richtig ausgewertet werden können.

7.1 Multimedia-Links

Eine Referenz auf ein Multimedia-Objekt gestaltet sich wie eine Referenz auf eine ‘normale’ Datei. Folgendes Beispiel zeigt einen Link zu einer Datei im .gif-Format:

Achtung: externe Referenzen sind als solche kenntlich zu machen. Beachten Sie Urheberrechte.

Im Folgenden werden Grafikformate, Videoformate und Audioformate etwas näher beschrieben.

„Eine Grafik sagt oft mehr als 1000 Worte.“ Dazu zählen vor allem Landkarten, Konstruktionszeichnungen, Diagramme und komplexe mathematische Formeln. In solchen Fällen ist es also sinnvoll Grafiken in das Dokument einzubauen.

Zu den am meist verbreiteten Grafikformaten zählt:

• GIF (Graphics Interchange Format) GIF zählt zu den am weitesten verbreiteten Grafikformaten und wurde von CompuServe entwickelt, speziell zum Zweck des Datenaustausches über verschiedene Rechnerplattformen. Der erweiterte Standard GIF89A macht es möglich eine Farbe als transparent zu definieren. Damit ist es möglich, Hintergrundfarben von Grafíken automatisch den Farben des Browser-Fensters anzupassen.
• JPEG (Joint Photographic Experts Group) JPEG enthält ein spezielles Kompressionsverfahren, um die Datenmenge von Bildern zu verringern. Grafiken im JPEG-Format sind dadurch oft um die Hälfte kleiner als Grafiken im GIF-Format. Durch das Kompressionsverfahren können allerdings Bildinformationen verloren gehen. Die Qualität der Bilder kann dadurch stark beeinträchtigt werden („Artefakte“).
• TIFF (Tagged Image File Format) TIFF wurde entwickelt von Aldus und Microsoft und wurde ursprünglich haupstsächlich für Scanner benutzt. Das TIFF-Format ist nicht so stark verbreitet wie die zwei oben aufgeführten Formate. Nachteilig am TIFF-Format ist, dass es nicht direkt vom Browser unterstützt wird und damit nicht für inline images benutzt werden kann.
• SVG (Scalable Vector Graphics) SVG basiert auf der Auszeichnungssprache XML und verwendet zur Darstellung wie der Name schon sagt Vektoren. SVG ist besonders geeignet, um Zeichnungen, Diagramme, etc. darzustellen
• PNG (Portable Network Graphics) PNG wurde vom W3-Konsortium als Alternative zum JPEG- und GIF-Format entwickelt und soll die Vorteile der beiden Formate kombinieren. Dabei soll es die Nachteile der beiden Formate minimieren. PNG stellt eine verlustfreie Kompression, und 16.7 Millionen Farben sicher. Der schichtweise Aufbau einer PNG-Grafik benötigt nur 2% der Bildinformationen, um eine Vorschaugrafik zu erstellen. Bei JPEG-Grafiken sind es 15%.

Schon relativ kurze Videosequenzen haben ein beträchtliches Datenvolumen und benötigen eine hohe Übertragungsbandbreite. Zu den häufigsten Video-Datenformate zählen:

• MPEG (Motion Picture Experts Group) Das MPEG-Format ist das meist verbreitete Format für Videosequenzen im Internet.
• AVI (Advanced Vidio Image) AVI wurde von Microsoft entwickelt und ist unter Windows stark verbreitet. Allerdings wird dieses Datenformat nicht auf allen Plattformen unterstützt.

Zu den häufigsten eingesetzten Audioformaten zählen heute:

• WAV-Dateien findet man vor allem unter Windows. Auf anderen Plattformen wird
  dieses Format weniger unterstützt. Nachteilig an diesen Klangdateien ist, dass sie sehr groß werden können.
• MIDI (Musical Instrument Digital Interface) MIDI-Dateien erreichen lange nicht das Datenvolumen einer WAV-Datei. Allerdings läßt die Soundqualität oft zu wünschen übrig. MIDI-Dateien werden hauptsächlich von Windows unterstützt.
• MPEG 3, MPEG 4 (Motion Pictures Expert Group) MPEG bezeichnet einen Standard, der von der Motion Pictures Expert Group für
  Dateiformate beziehungsweise Verfahren zur Komprimierung von Speicherung von Video- und Multimediadaten in hoher Qualität, festgelegt wurde.

Hier gibt es verschiedene Standards

MPEG 1 – für flüssige Videowiedergaben – größte Kompressionsraten
MPEG 2 – Kompression auf höchster Qualitätsstufe – Broadcaststandard
MPEG 3 – in MPEG 2 implementiert – war für HDTV vorgesehen
MPEG 4 – Weiterentwicklung des MPEG 2 Formates – noch in Entwicklung

7.2 IMG-Umgebung

Neben Textreferenzen lassen sich genauso einfach Grafiken in ein HTML-Dokumente einbinden. Man bezeichnet diese Grafiken als inline images. Das Referenzieren erfolgt durch den IMG-Tag:

Der Parameter ALIGN kennzeichnet die Ausrichtung des Bildes. Folgende Werte kann ALIGN annehmen:

• top: Die Oberkante des Textes wird an der Oberkante der Grafik ausgerichtet.
• middle: Die Unterkante des Textes wird an der Mitte der Grafik ausgerichtet.
• bottom: Die Unterkante des Textes wird an der Unterkante der Grafik ausgerichtet.
• left: Die Grafik wird am linken Bildrand ausgerichtet, eventueller Text fließt um die Grafik herum.
• right: Die Grafik wird am rechten Bildrand ausgerichtet, eventueller Text fließt um die Grafik herum.

Eine Grafik wird innerhalb einer Textumgebung wie ein einzelner Buchstabe behandelt. Das IMG-Tag kennt also keinen Fließtext. Inline images eignen sich sehr gut für transparente Grafiken. Transparente Grafiken passen sich dem jeweiligen Browser- Hintergrund an. Bei der Verwendung der Farben sollte man darauf achten, dass die meisten Browser nicht alle 256 Farben auf einmal darstellen können. Die Farben, die der Browser nicht geladen hat, versucht er durch ähnliche zu ersetzen. Daher ist es zu empfehlen, die Anzahl der Farben auf ein Minimum zu reduzieren, damit die Verfälschungseffekte nicht zu stark werden.

Mit dem Attribut ALT kann ein Alternativtext definiert werden, z.B. falls ein nicht- grafikfähiger Browser beim Benutzer eingesetzt wird. Wird das ALT-Attribut mit keinem Wert hinterlegt, so verschweigt der Text-Browser das Bild dann voll und ganz, d.h. es kommt der sonst nicht übliche Hinweis: [IMAGE].

7.3 Aktive Grafiken

Neben dem Einsetzen von GIF-Bildern in ein HTML-Dokument ist es auch möglich mit Hilfsprogrammen zusätzlich Links in Bilder (verweissensitive Grafiken) zu setzen. Beim Anklicken mit der Maus innerhalb bestimmter Bildelemente können weitere Links zu Dokumenten aktiviert werden. Solche Grafiken nennt man aktive Grafiken oder auch clickable images. Die Bildbereiche können durch Rechtecke, Kreise und Polygone markiert werden.

• CIRCLE: mit CIRCLE können kreisförmige Bildregionen bestimmt werden. Die Koordinaten enthalten den Mittelpunkt und einen Wert für den Radius.
• RECT: Rechtecke bestimmen hier die Bildregionen, wobei die Koordinaten die linke obere und die rechte untere Ecke definieren.
• POLY: Mit Polygone können die unterschiedlichsten Bildregionen festgelegt werden. Jeder Punkt wird durch ein Koordinatenpaar definiert.

In der HTML-Datei wird das Bild, das als „klickable Image“ verwendet werden soll im IMG- Tag angegeben und gleichzeitig werden die klickbaren Bereiche definiert. Im folgenden Beispiel ist nun der Aufbau eines solchen klickable images dargastellt.

Mit

Die <map>-Anweisung kann an einer beliebigen Stelle innerhalb des Körpers einer HTML-Datei (also zwischen Die <body> und </body>) stehen. Die Angaben dieser Anweisung erzeugen keine Bildschirmausgabe. Es empfiehlt sich jedoch, die Anweisung an einer markanten, gesonderten Stelle innerhalb der Datei zu notieren, z.B am Anfang oder am Ende des Dateikörpers.

Zwischen dem einleitenden <map…> und dem abschließenden </map> definieren Sie die verweissensitiven Flächen. Mit <area … > definieren Sie einzelne verweis-sensitive Flächen.

Durch die Angabe shape=“rect“ bestimmen Sie eine viereckige Fläche, mit shape=“circle“ einen Kreis, und mit shape=“polygon“ können Sie ein beliebiges Vieleck als verweis-sensitiv definieren.

Bei der Angabe coords= geben Sie die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll.

Ein Viereck (shape=“rect“) definieren Sie mit den Koordinaten für x1,y1,x2,y2 wobei bedeuten:

x1 = linke obere Ecke, Pixel von links
y1 = linke obere Ecke, Pixel von oben
x2 = rechte untere Ecke, Pixel von links
y2 = rechte untere Ecke, Pixel von oben

Ein Viereck (shape=“circle“) definieren Sie mit den Koordinaten für x,y,r wobei bedeuten:

x = Mittelpunkt, Pixel von links
y = Mittelpunkt, Pixel von oben
r = Radius in Pixel

Ein Polygon (shape=“polygon“) definieren Sie mit den Koordinaten x1,y1,x2,y2 … xn,yn“ wobei bedeuten:

x = Pixel einer Ecke von links
y = Pixel einer Ecke von oben

Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.

Mit der Angabe href= bestimmen Sie das Ziel, also die Datei, die aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die gleichen Regeln wie bei Verweisen. Die Grafik, die verweis-sensitive Flächen haben soll, referenzieren Sie auf herkömmliche Weise mit Hilfe des <img>-Tags (mehr hierzu siehe unter Grafikreferenzen). Um die Grafik als verweis-sensitiv zu kennzeichnen, müssen Sie die Zusatzangabe usemap= (siehe obiges Beispiel) notieren. Hinter dem Istgleichzeichen geben Sie den Namen an, den Sie bei der Definition der verweis-sensitiven Flächen im einleitenden <map>-Tag vergeben haben. Der Name muss in Anführungszeichen stehen und ein # vorangestellt bekommen.

Sie können die verweissensitiven Flächen auch in einer anderen HTML- Datei definieren als in derjenigen, in der Sie die Grafik referenzieren. Dann müssen Sie in der Grafikreferenz bei usemap= den Dateinamen und das Sprungziel innerhalb der Datei angeben, wo die verweis- sensitiven Flächen definiert werden. Das funktioniert genauso wie bei Verweisen.

8 Formulare

Mit den verschiedenen HTML-Editoren ist es möglich, Formulare zu definieren. Formularebestehen aus Eingabefeldern und grafischen Schaltern. So wird beispielsweise der Benutzer aufgefordert, Texte in bestimmte Felder einzugeben oder eine Wahl durch Anklicken verschiedener Buttons zu treffen. Erzeugt werden Formulare, indem man Eingabefelder und Schalter innerhalb von Texten plaziert. Formulare werden schon seit längerem von mehreren Browsern verwirklicht. HTML 3.0 unterstützt folgende Felder:

• Einzeilige Textfelder
• Mehrzeilige Textfelder
• Radio Buttons
• Check Boxes
• Range Controls (Knöpfe und Schiebebalken)
• Menüs
• Submit Button
• Reset Button
• Hidden Fields (versteckte Felder, die vom Browser nicht angezeigt werden)

Die erstellten Formulare können zwar mit dem Browser betrachtet werden und auch Text eingetragen werden, die Daten kann der Browser aber nicht selbständig auswerten. Die Daten müssen zur Bearbeitung an den Server geschickt werden. Der Server wiederum übergibt die Daten entweder über CGI (Common Gateway Interface) einem externen Programm oder Script zur Ausführung. Einfacher geht die Anbindung mittels PHP. In beiden Fällen reicht der http-Server Apache.

Im Rahmen von KOSS interessiert uns insbesondere die Interaktion mit Java (Servlets und JSP).

Innerhalb eines HTML-Dokumentes können mehrere Formulare vorkommen, sie dürfen aber nicht ineinander verschachtelt werden. Definiert wird ein Formular mit dem FORM- Tag.

Mit ACTION wird die Adresse festgeschrieben, an die das Formular geschickt werden soll. Da zur Zeit Formulare nur mit Hilfe des http-Protokolls verschickt werden können, muss als URL das http-Protokoll angegeben werden. METHOD legt fest auf welche Art und Weise die Daten verschickt werden. Hier gibt es zwei Möglichkeiten, nämlich POST und GET. Mit GET werden die Daten an den URL angehängt und POST verschickt die Daten extra. ENCTYPE enthält die Codierung der Daten nach dem MIME-Standard. Vorläufig gibt es nur ein zulässiges Datenformat x-www-form-encoded.

Im Folgenden wird nur auf die wichtigsten Felder und Schalter kurz eingegangen.

INPUT-Felder stellen die wichtigsten Elemente innerhalb der FORM-Umgebung dar. Es definiert die Art von Eingabe- und Auswahl-Felder mit Hilfe des Attributes TYPE. Die allgemeine Definition lautet:

Der Name dient der Identifikation der zu versendenden Daten. Jedes Eingabefeld erhält dadurch seinen eigenen Namen.

Die Syntax für ein einzeiliges Eingabefeld:

Mit SIZE legt man den sichtbaren Bereich der darzustellenden Zeichen fest. Mit VALUE kann ein Default-Wert definiert werden und die Zahl bei MAXLENGTH gibt die maximal erlaubte Anzahl der Zeichen an.

Ein weiteres wichtiges INPUT-Feld ist die CHECKBOX. Eine Checkbox repräsentiert zwei Zustände. Entweder ist sie aktiviert oder nicht.

 Bezeichner

Beispiel:
 Blau

Der Radio Button verhält sich wie ein Check Button, nur dass beim Radio Button lediglich ein Wert ausgewählt werden kann (TYPE = „radio“).

Der Submit Button entspricht einer Befehlsschaltfläche und dient zum Absenden der Formulardaten.

Mit VALUE kann die Aufschrift der Befehlsschaltfläche festgelegt werden.

Mehrzeilige Eingabefelder erzeugen ein Eingabefenster, in das der Benutzer längere Texte eingeben kann. Die Größe des Fensters wird durch die Anzahl Spalten (COLS) und der Anzahl Zeilen (ROWS) festgelegt. Der einzugebende Text wird nicht durch die Größe der Fenster terminiert. Dem Anwender stehen horizontale und vertikale Scrollbars zur Verfügung. Mehrzeilige Eingabefelder werden mittels dem TEXTAREA-Tag definiert.

 optionaler Text (Default-Text im Eingabefenster) 

Mit ALIGN wird der umgebende Text angepasst.

9 Tabellen

Mit Hilfe von Tabellenumgebungen wird das Gestalten des Layouts eines HTML- Dokumentes enorm erleichtert. Erzeugt werden Tabellen innerhalb der Umgebung

durch Reihen und Zellen. Innerhalb dieser Zellen können die folgenden Elemente vorkommen:

• Formulare
• Bilder
• Listen
• unformatierter Text
• Links
• und wiederum Tabellen

Das Layout der Tabelle übernimmt der Browser. Netscape, Mosaic und Arena unterstützen
schon heute diese Eigenschaft.

Mit dem CAPTION-Tag kann man der Tabelle eine Überschrift zuweisen. Verwendet man zusätzlich zum CAPTION-Tag noch das Attribut ALIGN, so kann die Positionierung des Titels bestimmt werden. Da wird dann eine Tabellenüberschrift mit dem ALIGN-Wert = TOP zu einer Tabellenunterschrift, wenn statt TOP der Wert BOTTOM eingesetzt wird. Die Grundelemente einer Tabelle sind Reihen und Zellen. Die Zellen werden noch mal eine Stufe weiter untergliedert in Zellen mit dem Inhalt Überschrift und in Zellen mit dem Inhalt Daten.

Um die untenstehende Tabelle zu realisieren, sind folgende Kommandos erforderlich:

Soll die Tabelle mit einem Rahmen eingefasst werden, so ist das Attribut BORDER zum TABLE-Tag hinzuzufügen. Mit NOWRAP wird ein Zeilenumbruch innerhalb der Tabellenzellen unterbunden. ALIGN positioniert die Tabelle innerhalb des Browser- Fensters. Folgende Werte kann das ALIGN-Attribut annehmen:

BLEEDLEFT – richtet die Tabelle am linken Fensterrand aus.
LEFT – richtet die Tabelle am linken Textrand aus.
CENTER – positioniert die Tabelle zentriert.
RIGHT – richtet die Tabelle rechtsbündig aus.
BLEEDRIGHT – richtet die Tabelle am rechten Fensterrand aus.
JUSTIFY – richtet die Tabelle an beiden Texträndern aus.

Die Breite der Tabelle läßt sich mit dem Attribut WIDTH einstellen. Die Spaltenbreite und die horizontale Textanordnung wird mit dem COLSPEC Attribut bestimmt.

Innerhalb der Zellen können selbstverständlich weitere HTML-Elemente wie z. B. Links, Bilder, Listen und sogar Formulare verwendet werden. Auch die Bildung verschachtelter Tabellen – eine Tabelle innerhalb einer Zelle – ist möglich.

10 CSS Cascading Style Sheets

Cascading Style Sheets bieten vielfältige Möglichkeiten die Gestaltungsvariationen von HTML zu ergänzen oder zu ersetzen. CSS wurde vom W3C entwickelt und soll Gestaltung und Inhalt von Webseiten trennen. Die Aufgabe von HTML soll wieder die Strukturierung von Daten und Inhalten sein. Die optische Gestaltung soll durch die Cascading Style Sheets erfolgen.

Ein Stylesheet stellt eine Formatvorlage dar, die für jedes beliebige HTML Dokument verwendet werden kann. Der Vorteil liegt ganz klar darin, dass Zuweisungen nur einmal gemacht werden müssen und Änderungen im Stylesheet sich sofort und unmittelbar auf alle betroffenen Bereiche auswirken.

Besondere Bedeutung hat die Vererbung in den Cascading Style Sheets. Die Kaskadierung ermöglicht, dass die untergeordneten Elemente vom übergeordneten Element erben. So werden Zuweisungen, die für

10.1 Externe Formatierung

Um das CSS für mehrere HTML Dokumente zu verwenden ist es sinnvoll die Formatierungen in eine externe Datei auszulagern. Dies wird auch als externe Formatierung bezeichnet. Als Dateiendung wird .css verwendet.

Der Aufbau der Datei ist analog zur Deklaration im STYLE-Element als reiner Text ohne STYLE-Tags. Um eine CSS-Datei in ein HTML-Dokument einzubinden, wird im HTML-Dokument das LINK-Element verwendet.

	....
	
	....

Die Stylesheets können auch für verschiedene Ausgabemedien definiert werden. Allerdings ist bisher nur der Internet Explorer in der Lage einem Ausgabemedium ein Stylesheet zuzuweisen. Im LINK-Start-Tag wird das Attribut MEDIA notiert und schon kann das Stylesheet für diesen Media-Typ verwendet werden.

Die folgende Tabelle zeigt eine Übersicht der erlaubten Attribute.

• screen – Bildschirmausgabe
• all – Alle Ausgabemedien
• aural – Sprachausgabe
• braille – Monitor für Blindenschrift
• embossed – Drucker für Blindenschrift
• handheld – Tragbare Kleincomputer (PDA, Handheld, etc.)
• print – Druckerausgabe
• projection – Beamer und ähnliche
• tty – Fernschreiber und ähnliche
• tv – Fernsehgeräte und ähnliche

CSS-Syntax zum Einbinden:

HTML-Syntax zum Einbinden:

10.2 Zentrale Formatierung

Die zentrale Formatierung ermöglicht es HTML-Elemente en gros zu formatieren – anders als die direkte Formatierung wie sie unter Punkt 3.1 (5) bereits angesprochen wurde.

Die zentrale Formatierung benötigt einen Selektor, der dem Namen des Elements entspricht. (z.B. h2 für h2) Der Selektor ist immer ein HTML-Element / HTML-Tag. Die Eigenschaften, die dem Selektor zugeweisen werden sollen werden in geschweiften Klammern angegeben.

	...
	
	...

Hier noch ein konkretes Beispiel für die zentrale Formatierung:

	
		
		
	

	
Die neue Überschrift
	
Die neue Überschrift
	
Die neue Überschrift

Nach der <style>-Definition gelten die einmal festgelegten Formateigenschaften für alle davon betroffenen Tags, in unserem Beispiel also die Tags <h1>, <h2> uns <h3>.

Auch dem Body-Tag können Formate/Styles zugewiesen werden. Die für dieses Tag festgelegten Formate gelten dann für das gesamte Dokument als Standardeinstellung:

	
		
		
	

	
Die neue Überschrift
	
Das ist ein einfacher Text mit einer h1-überschrift.

	
Die neue Überschrift
	
Die neue Überschrift

10.3 Einheiten

Ein weiterer Vorteil von CSS ist, dass CSS Einheiten erkennt. Während in HTML Prozent- und Pixelgrößen beziehungsweise eine relative Schriftgröße verwendet wird, können in CSS alle gängigen Größenangaben verwendet werden.

10.4 Textformatierungen

Die Textformatierungen funktionieren im Prinzip genau wie unter HTML beschrieben. Der Hauptunterschied ist, wie bereits erwähnt, dass die Formatierungen zentral (in einem separaten File) erfolgen. Der Selektor, der in der Regel dem Namen des Elements entspricht, steht am Anfang und die Eigenschaften, die dem Selektor zugeweisen werden sollen, folgen in geschweiften Klammern.

Als Selektor kann aber auch der sogenannte Universalselektor verwendet werden. Der Universalselektor ist das *, mit dem Universalselektor gekennzeichnete Zuwesiungen, beziehen sich auf alle Elemente des Dokuments. Entspricht der Selektor wie bereits angesprochen dem Namen des Elements, so handelt es sich um einen Typselektor.

Folgende Tabelle soll einen Überblick über die gängigsten Textformatierungsbefehle geben:

Die Notation lautet Anweisung:Wert; Eigenschaft (Doppelpunkt Wert Strichpunkt)

Abstände von Elementen werden mit margin angegeben:
margin-top – oben
margin-left – links
margin-right – rechts
margin-bottom – unten

Rahmenarten werden mit border-style angegeben
border-style:none
border-style:dotted
border-style:dashed
border-style:solid
etc.

Rahmendicken werden mit border-…-width benannt
border-top-width: thin / medium / thick / numerischer Wert
border-left-width: …
border-right-width: …
border-bottom-width: …

Rahmenfarben werden mit bordercolor angegeben
border-color: HTML Farbangabe

Abstände bei Rahmen werden mit padding-… benannt
padding-top: – numerischer Wert
padding-left: – …
padding-right: – …
padding–bottom: – …

Die Selektoren gliedern sich wie folgt:

body – bezieht sich auf die gesamte Seite
a – Links
ul, ol, li – Listen und Listenelemente
h1 – h6 – Überschriften
img – Bilder
b, i, u, pre – Textformatierungen
p – Absätze
table, td – Tabellen, Tabelleninhalte

Besondere Bedeutung haben DIV und SPAN, sie sind relativ eigenschaftslos. DIV erzwingt eine neue Zeile im Textfluss und ermöglicht Elemente zu gruppieren und als Einheit zu formatieren. SPAN kann innerhalb eines Textes verwendet werden, d.h. mit SPAN können kleinere Teilbereiche definiert werden und mit CSS gestaltet werden ohne dass spezielle dafür definierte HTML-Elemente existieren.

Das folgende Beispiel verdeutlicht die Verwendung von DIV und SPAN.

...
	


	

		
 Hier steht der Text
		
 Hier steht der Name des Autors,
		 Hier steht das Datum 
		
 Hier steht der zweite Text
		
 Hier steht der Name des zweiten Autors,  Hier steht das Datum 
	

Im STYLE Bereich werden Elemente definiert, die Klassen mit CLASS=“TEXT“, CLASS=“AUTOR“, CLASS=“DATUM“ verwenden können. Im <body> werden die einzelnen Texte mit DIV gruppiert. Das Stylesheet weist Rahmen, Abstand und Hintergrundfarbe zu. Die Autoren und das Datum befinden sich in einem Bereich. Dadurch beziehen sich die Eigenschaften von Autor auch auf das Datum, beides wird also rot und kursiv geschrieben. Zusätzlich wird das Datum 50% kleiner ausgegeben, da Datum im SPAN steht.

10.5 Default CSS

Das W3C hat einen Vorschlag für ein Default Style Sheet gemacht, das von allen gängigen Browsern unterstützt wird.

Diese Vorlage findet man unter: http://www.w3.org/TR/CSS21/sample.html

Die Autoren

Autoren:
Barbara Brosch, Klaus Eckert, J. Anton Illik, Roland Müller, Dirk von Roth, Katja Gassert, Katja Hasenfratz

Zur Verfügung gestellt von Ambit Informatik Ltd.