Begrüßung und Einführung

Sie haben sich für das Seminar "WWW für Fortgeschrittene" angemeldet, daher nehme ich an, dass Sie mit den grundlegenden Dingen der HMTL-Seitengestaltung vertraut sind. Dabei meine ich aber nicht die Gestaltung von Web-Seiten mit Hilfe eines WYSIWYG-Editors a lá Frontpage, Frontpage Express oder Netscape Composer, sondern pures HMTL-"Programmieren".

Ich möchte in meinen Ausführungen zeigen, welche Gestaltungsmöglichkeiten in der Seitenbeschreibungssprache HTML stecken und welche neuen Möglichkeiten Cascading Style Sheets (kurz CSS) bieten. CSS sind eine Erweiterung für HTML, eine Zusatzsprache, die unzählige neue Gestaltungselemente bieten, die "reines" HTML derzeit nicht, oder nur über Umwege zur Verfügung stellt. CSS folgt allerdings einer völlig anderen Syntax und muss entsprechend in ein HTML-Dokument eingebunden werden.

Für unsere heutige Arbeit plane ich folgende Punkte:

Inhalt:

• Begrüßung und Einführung
• W3-Konsortium
• Warum Cascading Style Sheets?
• "Sauberes" HTML
• Einbinden von Style-Angaben in HMTL-Dokumente
• CSS-Befehle
• Wem die herkömmlichen Tags nicht genug sind ...
• CSS und Javascript - dynamicHTML
• Formatvorlage für verschiedene Ausgabemedien
• Und was bieten die Browser Neues?
• Quellenangaben

Standardisierung durch das W3-Konsortium

Eine Institution zur Normierung und Vereinheitlichung der verschiedensten Web-Techniken ist das WorldWideWeb-Konsortium (W3C).

HTML- und CSS-Versionen

Grundlage für HTML (Hypertext Markup Language) war SGML (Standard Generalized Markup Language), eine von der ISO (International Standardization Organization) mit der Nummer 8879 im Jahre 1986 genormte Sprache zur Kennzeichnung der Struktur von Daten und Dokumenten. Allerdings war zu Beginn der 90er Jahre HTML von den Erfindern des WWW (World Wide Web) als einfache übersichtliche Seitenbeschreibungssprache gedacht. Die noch heute in HTML bekannten, aber selten verwendeten logischen Textauszeichnungssymbole, die Tags, stammen von der ursprünglichen Version. 1995 wurde die Version HTML 2.0 offizieller Standard.

Im Laufe der Zeit waren die sehr eingeschränkten Gestaltungsmöglichkeiten dieser rein auf logischen und hierarchischen Textstrukturen aufbauenden Sprache den Programmierern von Web-Seiten und Web-Browsern viel zu wenig, sodass zuerst Netscape und dann auch Microsoft eigene Erweiterungen einführten, die das W3C nach und nach aber nur zum Teil absegnete. Das W3C war nahe daran, seine "Autorität" als Standardisierungsinstitution zu verlieren. Es hinkte dem Stand der Technik immer um einige Zeit nach.

Das W3C versuchte eine Version 3.0 zu etablieren, diese fand jedoch keine Akzeptanz unter den Browser-Programmierern und Web-Autoren. Die Institution begann nun endlich mit den kommerziell-orientierten Software-Herstellern zu kooperieren und so wurde gemeinsam der noch heute weit verbreitete Standard mit der Version HTML 3.2 gesetzt, der am 14. 1. 1997 veröffentlicht wurde. Doch darin fehlten z.B. wichtige Elemente wie Frames, die zu dieser Zeit bereits im Web weit verbreitet waren.

Mit der Einführung der Cascading Style Sheets CSS 1.0 (Veröffentlichung im Dezember 1997) und der HTML-Version 4.0 mit 18. 12. 97 versuchte das W3C auf die Überholspur hinauszulenken und die Web-Autoren dazu zu bringen, mit HTML wieder ausschließlich die Seitenstruktur zu beschreiben - das Aussehen soll in Stilvorlagen mittels CSS festgelegt werden.

Im Mai des Jahres 1998 veröffentlichte das W3C die CSS 2, die viele neue Eigenschaften in Bezug auf die Bildschirmdarstellung und den Ausdruck brachte. Viele Layout-Elemente aus dem Drucksatz werden nun auch in HTML möglich. Wichtigste Neuerung aber sind die sogenannten Media Types, die es ermöglichen, einem HTML-Dokument je nach Ausgabemedium (Bildschirm, Drucker, Sprachausgabe, HandHeld, ...) ein anderes Aussehen (Hören?) zu verleihen.

Übrigens: vor wenigen Tagen, am 24. 8. 1999, hat das W3C die HTML Version 4.01 in einer Vorversion veröffentlicht, die allerdings nur geringe Korrekturen enthält.

Am selben Tag wurde eine Vorversion der neuen Sprache XHTML Version 1.0 vom W3V veröffentlicht. Diese Sprache passt HTML weiter der XML an.

XML (eXtensible Markup Language) wurde in der Version 1.0 im Februar 1998 vom W3C veröffentlicht und soll eine flexible, einheitliche, "multifunktionale" Auszeichnungssprache zur Speicherung und Übertragung jeglicher Art von Daten, seien es Texte, Datenbanken, Multimedia-Daten, u.s.w. sein. Die Eigentliche Darstellung oder Wiedergabe wird mit Hilfe von XSL (eXtensible Style Sheets) gesteuert.

DynamicHTML (DHTML) nennt man das Zusammenspiel von HTML, CSS und der Interpreter-Sprache JavaScript. Netscape führte letztere mit dem Navigator 2.0 in der Version 1.0 ein. (Früher trug diese Scriptsprache den Namen LiveScript, wurde aber in Anlehnung an die plattformunabhängige Compilersprache Java der Firma SUN später so benannt.) Mittlerweile hat es Netscape mit JavaScript bis zur Version 1.2 geschafft, wobei Microsoft speziell für den MSIE eigene Erweiterungen eingeführt hat (speziell für dynamicHTML), die aus Lizenzgründen JScript genannt werden. Über das ECMA-Kommitee, dem sowohl Netscape als auch Microsoft angehören, wurde inzwischen der Versuch einer Standardisierung unternommen. Das Ergebnis wurde in der Norm ECMA-262 festgehalten und soll sich ECMA-Script nennen.

Die Browser

Die Version 1 der CSS wird von den meisten aktuellen Broswsern mehr oder weniger zufriedenstellend dargestellt.

Der Microsoft Internet Explorer beherrschte grundlegende CSS-Eigenschaften bereits seit der Version 3.0, tatsächlich brauchbare Ergebnisse liefert er aber erst seit der Version 4.0. Die Version 5.0 zeigt keine wesentlichen Verbesserungen bezüglich CSS gegenüber seiner Vorgängerversion, CSS2 wird nur in geringem Umgang unterstützt. (JavaScript wird seit der Internet-Explorer-Version 3.0 unterstützt, seit dem Explorer 4 gibt es spezielle MS-Erweiterungen dafür, die JScript genannt werden.)

Netscape war zwar früher immer Marktführer im Bereich der kommerziellen Browser-Hersteller, hat aber immer wieder versucht, eigene Elemente in die Sprache HTML einzuführen (z.B. layer). Vorgaben des W3-Konsortiums wurden immer wieder ignoriert, so wurden die Cascading Style Sheets auch lange Zeit nicht den Navigator integriert. Da der Netscape Navigator 3.0 oft noch als Standard-Browser angesehen wird, dieser aber keine CSS versteht, werden diese auch heute noch spärlich eingesetzt. (JavaScript wurde von Netscape mit der Version 2.0 des Navigators eingeführt.)

Netscape hat sogar eine eigene Style-Sheet-Sprache kreiert: JSSS (JavaScript Style Sheets). Die Syntax dieser Sprache hätte sich grundsätzlich an der von JavaScript orientiert und wäre daher grundätzlich recht günstig. Aber da JSSS nur vom Netscape Navigator verstanden wird, wird diese keine weite Verbreitung finden.

Erst die Version 4.0 des Navigators beherrscht in sehr eingeschränktem Maße CSS1. Ab dieser Version hat sich der Navigator in Bezug auf die Darstellung von CSS-Eigenschaften nicht wesentlich verbessert und weist in der aktuellen Version 4.6 noch große Mängel auf. Allerdings wurde für die Zeitschrift c't eine Vorversion des Netscape Navigator 5.0 (Codename: Gecko oder Raptor) gestestet. Die künftige Version soll völlig überarbeitet worden sein und sogar große Teile der CSS-2-Spezifikationen zufriedenstellend darstellen.

Warum CSS?

Das Hauptargument gegen die Verwendung von Style Sheets ist, dass ältere, oder besser gesagt alte Browser diese nicht darstellen können. Dies ist zwar richtig, aber gerade die Computerbranche und erst recht das Internet ist ein so rasant wachsendes und sich veränderndes Gebiet, dass auf neue Techniken und Technologien nicht verzichtet werden kann. Und wir wollen unseren Schülern Zukunftstechnilogien aufzeigen und nicht technologischen Geschichtsunterricht geben. (Die beiden großen Browser und auch einige kleine gibt es auch für Window 3.x bzw. es existieren sogar einige DOS-Browser.)

Gründe die für CSS sprechen

• Einheitliches Aussehen der Überschriften und Absätze innerhalb einer HTML-Seite.
• Einheitliches Aussehen der Überschriften und Absätze innerhalb einer kompletten WebSite bestehend aus mehreren HMTL-Dokumenten.
• Wesentlich mehr und flexiblere Gestaltungsmöglichkeiten als "pures" HTML.
• Genaues Positionieren von Bereichen (Text, Graphik), was pures HTML meist nur über den Umweg von Tabellen, aber in eingeschränktem Maße, zulässt.
• Voraussetzung für dynamisches Verändern von WebSites, z.B. mit Hilfe der Sprache JavaScript (Schlagwort: dynamicHTML, DHTML).
• Schlankere HMTL-Dateien und damit geringere Übertragungszeiten trotz besserer Gestaltungsmöglichkeiten.

Beispieldateien zu HTML und CSS

Beispiel 1:

Gestaltung einer HTML-Seite mit "puren" HTML unter Verwendung logischer Textauszeichnung. Dabei wird allerdings die im jeweiligen Browser eingestellte Standardschriftart und -größe (meist Times New Roman) verwendet. Die Dateigröße und damit die Ladezeit sind relativ gering.

Beispiel 2:

Times New Roman ist nicht jedermanns Sache. Das von Netscape eingeführte proprietäre HTML-Tag erlaubt die Schriftformatierung in eingeschränktem Maß, allerdings muss es für jeden Absatz neu angegeben werden, was die große Dateigröße und damit Übertragungszeit erklärt.

Beispiel 3:

Dasselbe Ergebnis wie Beispiel 2, allerdings mit wesentlich weniger Speicher- und Übertragungsaufwand, erreicht man mit Cascading Style Sheets!

"Sauberes" HTML

Grundstruktur einer HTML-Datei

Wir kennen alle den grundsätzlichen Aufbau einer HTML-Datei, er sei an dieser Stelle nur zur Vollständigkeit angeführt:

Die in Spitzen Klammern <...> geschriebenen HTML-"Befehle" nennt man Tags, zusätzliche Angaben heißen Attribute.

Die erste Zeile gibt den Dokumententyp und damit die verwendete Version von HTML an. Diese Zeile ist SGML-konform und verweist auch auf die DTD (Document Type Definitions) beim W3C.

Ich möchte jetzt nicht weiter über alle verschiedenen Tags, die HTML kennt, sprechen, im Folgenden geht es um die logische Textauszeichnung, das heißt die Angabe der reinen Textstruktur als HTML-Dokument. Dies bildet die Grundlage zur Verwendung von CSS.

Logische Textauszeichnung

Die logische Grundstruktur eines Textdokumentes war schon immer Ziel des W3C, weshalb ja HTML als Abkömmling von SGML entstand. Wesentlich ist, dass Text und vor allem Überschriften hierarchisch gegliedert sein sollten. Dazu sind folgende Tags zu verwenden:

Jeder Browser stellt die Überschriften etwas anders dar, so dass die Hierarchie allerdings erkennbar ist, meist in der Schrift Times New Roman, oder in der Nicht-Windows-Welt in einer entsprechenden Sans-Serifen-Schrift.

Im Prinzip entsprechen diese Tags den sogenannten Formatvorlagen, wie sie in Textverarbeitungsprogrammen oder DTP-Programmen eingesetzt werden. Allerdings genauso wie dort werden diese von den Webseitengestaltern nur selten verwendet, weil die dahintersteckende Logik meist nicht erkannt wird.

Innerhalb eines Absatzes können andere logische Textauszeichnungstags verwendent werden:

Für bestimmte Zwecke kennt HTML eigene Absatz-Tags, die von den Browsern dann auch entsprechend dargestellt werden:

Tags, die einen eigenen Absatz bilden heißen Block-Tags. Tags, die innerhalb eines Absatzes verwendet werden heißen Inline-Tags.

Guter Programmierstil

Beginn- und End-Tag verwenden

Fast jedes HTML-Tag existiert in zweifacher Form, ein öffnendes und ein schließendes Tag. Z.B. <p> und </p>. Ein Zeichen guten Programmierstils ist es, diese auch gepaart zu verwenden, ähnlich wie Klammern in der Mathematik, oder wie ein jedes BEGIN in Pascal ein END fordert! Unter reinem HTML hat das Weglassen eines End-Tags meist keine Rolle gespielt, der Browser hat es trotzdem meist korrekt dargestellt, aber bei der Verwendung von CSS ist es wichtig, die Syntax hier einzuhalten! Die neue Sprache XHTML forder dies strikt!

In HTML gibt es dazu noch die erlaubten Ausnahmen wie z.B.: <br>, <hr>, <img>). XHTML fordert in Zukunft auch noch die Angabe des entsprechenden End-Tags wie </br> oder statt dieser Kombination z.B. das neue Tag <br/> oder <hr/>

Tags nicht zweckentfremden

Häufig werden Tags von Web-Designern zweckentfremdet, um einen gewissen optischen Effekt zu erzielen. Paradebeispiel dafür ist das Tag <blockquote>, das von seinen Erfindern als Auszeichnung für Zitate in einem eigenen Absatz gedacht war. Da dieses Tag den entsprechenden Absatz einrückt und auch geschachelt werden kann, wird es oft dazu verwendet, eine Absatz einzurücken, sprich den Einzug zu vergrößern. Da dies mit CSS heute wesentlich einfacher geht, sollte man darauf in Zukunft verzichten.

Regeln für Sonderzeichen beachten

Da verschiedenste Betriebssysteme im Internet miteinander kommunizieren und daher die Rechner unterschiedlichste Zeichensätze verwenden, sollte man bei der Verwendung von deutschen Umlauten und von Sonderzeichen darauf Rücksicht nehmen und die in HTML zur Verfügung stehenden Entities wie Ü für Ü oder ß für ß verwenden. Damit ist sichergestellt, dass die betreffenden Zeichen im Browser jedes Betriebssystems richtig dargestellt werden. (Sogar MS Frontpage 98 verzichtet auf diese Transskription! Warum wohl?)

Weiteres

Obwohl es in HTML 4.0 keinen unterschied zwischen Groß- und Kleinschreibung der Tags und Attribute gibt, sollte man sich auf eine einheitliche Handhabung einigen. Im Hinblick auf XHTML sei die generelle Kleinschreibung empfohlen. Setzt man Werte für einzelne Attribute, sollte diese generell in Anführungszeichen gesetzt werden, unabhängig ob es sich um eine Zeichenkette oder einen Zahlenwert handelt.

Beispiel

Physische Textauszeichnung

Die folgenden physischen Textauszeichnungstags können bei Bedarf noch verwendet werden, sollten aber nur sparsam zum Einsatz kommen!

Tags, die man lieber nicht mehr verwenden sollte

Auf ein von Netscape eingeführtes Tag sollte man in Zukunft vollständig verzichten, nämlich das <font>-Tag mit all seinen Attributen. Dieses ist als überholt zu betrachten, hat nur eine geringe Funktionalität und kann durch entsprechende CSS-Angaben ersetzt werden.

Auch einige andere Angaben zur physischen Textauszeichnung, die im Laufe der Zeit in HTML integriert wurden, sollten parallel zu CSS nicht verwendet werden.

Zu vielen Tags kennt HTML Attribute (z.B. align), die eventuell bei paralleler Verwendung von CSS-Eigenschaften ignoriert oder falsch dargestellt werden.

Keep Your Web Page Tidy

Das W3C stellt auf ihrer WebSite ein kleines Programm namens TIDY zum Download bereit, das HTML-Dateien automatisch von Fehlern bereinigt und die korrekte Syntax herstellt. Bei Bedarf werden sogar alte Tags wie <font> oder <center> durch CSS-Angaben ersetzt!

Einbinden von Style-Angaben in HTML-Dokumente

Formatvorlagen für HTML-Dateien

Wie schon oben angedeutet, funktionieren logische Textauszeichnungen ähnlich Formatvorlagen guter Textverarbeitungsprogramme oder DTP-Programme. Normalerweise werden die entsprechenden Tags vom verwendeten Browser interpretiert und in der Schriftart Times New Roman in verschiedenen Größen und Schnitten dargestellt.

Beispiel 4

Mit Hilfe von CSS kann man nun die Layout-Eigenschaften (fast) aller Tags (Ausnahme: Tags zur physischen Textauszeichnung) verändern. Wir werden dies jetzt an Hand der obigen Datei des Beipiels 4 ausprobieren.

Styles im HTML-Dateikopf zentral definieren

Die häufigste Variante Style-Angaben für verschiedene Tags zu defnieren ist im Head-Bereich der HTML-Datei, dazu werden die Angaben innerhalb eines eigenen Style-Tags getätigt. Als Attribut wird noch der Typ der Styleangaben mit CSS gesetzt, allerdings kann darauf verzichtet werden. Damit ältere Browser die Styleagaben ingnorieren, werden diese als HTML-Kommentare mit <!-- und //--> gekennzeichnet, auch dies ist verzichtbar.

Das Tag, dessen Eigenschaften (für das gesamte Dokument) verändert werden soll, wird angegeben, mehrere Tags, die die selben Eigenschaften haben sollen, werden durch Beistriche getrennt. In geschwungenen Klammern werden dann die entsprechenden Angaben gemacht. Die entsprechenden Eigenschaften werden nach einem Doppelpunkt auf einen passenden Wert gesetzt, mehrere verschiedene mögliche Werte werden durch Beistrich getrennt, mehrere zu ändernde Eigenschaften werden durch Strichpunkte getrennt. Leerzeichen können angegeben werden, müssen aber nicht. Besteht ein Wert einer Eigenschaft (zB Schriftart) aus mehreren durch Leerzeichen getrennten Worten, so muss diese unter Anführungszeichen gesetzt werden.

Eine Eigenschaft ein und desselben Tags kann auch mehrmals festgelegt werden, wobei "cascading" bedeutet, dass eine Definition jede vorherige überschreibt – kurz: die letzte gilt!

Kommentare innerhalb einer zentralen CSS-Definition werden mit /* eingeleitet und mit */ geschlossen.

Übung

(Grundlage: sofi.htm)

Die Datei soll so abgeändert werden, dass im Head-Bereich Style-Angaben gemacht werden können. Wir versuchen nun einfache CSS-Eigenschaften aus.

Styles in separater Datei zentral definieren

Die selben zentralen Angaben können auch in einer eigenen Datei abgelegt werden, wobei die Syntax die selbe ist, wie im Head-Bereich einer HTML-Datei innerhalb des Style-Tags.

Beispiel einer CSS-Datei:

Die Datei wird mit folgendem Befehl im Head-Bereich der HTML-Datei eingebunden:

Übrigens kann ein und dieselbe CSS-Datei für mehrere HTML-Dateien verwendet werden, und so für ein einheitliches Aussehen einer ganzen Site gesorgt werden.

Innherhalb einer zentralen CSS-Definition, sei es im HTML-Kopf oder in einer separaten Datei, kann noch einmal eine CSS-Datei eingebunden werden. Allerdings wird dies von NS derzeit nicht durchgeführt!

Styles direkt einem Tag zuweisen

Möchte man z.B. einen einzelnen Absatz oder einen durch ein Tag eingeklammertern Bereich direkt eigene Eigenschaften zuweisen, so lässt sich dies durch das Attribut style bewerkstelligen, wobei dann innerhalb der Anführungszeichen die selbe Syntax gilt wie bei der zentralen Definition innerhalb der geschwungenen Klammern.

z.B.:

Styles einem Bereich zuweisen

In HTML kann ein Bereich aus mehreren Absätzen als Bereich zwischen <div> und </div> zusammengefasst werden, auch dieses Tag kann das Attribut style erhalten und so können Eigenschaften einem ganzen Bereich zugewiesen werden.

z.B.:

Styles für einige Zeichen oder Wörter

Das Tag <span> alleine bewirkt gar nichts, allerdings gemeinsam mit dem Attribut style erlaubt es CSS-Angaben für einige Zeichen oder Wörter.

z.B.:

CSS-Befehle

Die folgenden Angaben legen keinen Wert auf Vollständigkeit, sie sollen nur beispielhaft die Möglichkeiten der CSS-Eigenschaften und deren Werte aufzeigen. Für eine genauere Referenz sei auf andere Werke z.B. SelfHTML von Stefan Münz verwiesen!

Gerade dieses Werk wurde selbst unter Verwenung von CSS erstellt und die entsprechende Datei wselfhtm.css mit seinen ausführlichen Erklärungen kann sehr hilfreich beim Erlernen von CSS sein.

Größeneinheiten und Farbangaben für CSS

Größeneinheiten

Farbangaben mit hexadezimalen Werten

Wie schon in HMTL werden Farben meist in einem Hexadezimalen Format angegeben. Eingeleitet durch # folgen darauf die Werte für die Farben Rot, Grün und Blau, wobei diese Werte von 0 bis 255 in hexadedzimaler Schreibweise annehmen dürfen.

Farbangaben mit Namen

Für viele Farben sind bereits in HTML spezielle Farbnamen definiert (mehr als 100), darunter die 16 Grundfarben:

Farbangaben mit dezimalen Werten oder Prozentwerten

Da das Hexadezimalsystem nicht jedermanns Sache ist, führt man mit CSS auch die Möglichkeit der dezimalen Angabe der RGB-Werte ein.

Zeichen- und Schriftformatierung

Absatzformatierung und Abstände

Rahmen und Hintergründe

Listen

Zentrale Angaben für ein gesamtes HTML-Dokument

Das Tag <body> leitet in HTML den eigentlich darzustellenden Dokumentbereich ein und erlaubt diverse Attribute für zentrale Einstellungen wie Hintergrund und Farbdarstellung der Links. Wesentlich mehr Layout-Eigenschaften lassen sich per CSS-Definition für das <body>-Tag einstellen. Links werden bekanntlich mit dem anchor-Tag <a> ausgezeichnet, und auch dieses lässt sich festlegen:

Beispiel:

Hinter einem Dopplepunkt nach der Tag-Angabe werden sogenannte Pseudoformate festgelegt, wobei beim Anchor-Tag <a> die folgenden erlaubt sind:

Wem die herkömmlichen Tags nicht genug sind ...

Klassen von Tags

Grundsätzlich kann man nur die in HTML zur Verfügung stehenden Tags mit Hilfe von CSS umdefinieren. Günstig wäre es, wenn man sich für spezielle Zwecke seine eigenen Tags einführen könnte, aber dafür müssen wir noch auf XML (eXtensible Markup Language) warten. Wenn Ihnen also das vorhandene Repertoire von HTML-Tags zu klein ist, so können sie Varianten davon, sogenannte Klassen, bestimmen.

Dazu wird in der zentralen Definition zuerst das entsprechende Tag notiert und daran durch einen Punkt getrennt der Klassennamen.

Im Dokument muss dann beim entsprechenden Tag als Attribut die zugrundeliegende Klasse angegeben werden.

Wenn in der zentralen Definition vor der Klassebezeichnung kein Tag angegeben ist oder das Schlüsselwort all steht, so spricht man von einer leeren Klasse und die Angaben bezeihen sich auf alle Tags. Dabei ist es allerdings sinnvoll auf absolute Größenangaben zu verzichten und dafür relative wie % zu verwenden!

Abhängige Formate

Mit Hilfe von StyleSheets kann man auch bestimmen, dass ein HTML-Tag bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines anderen HTML Tags vorkommt.

Die obige Definition legt das Aussehen für <em> fest, allerdings zeigt es innerhalb einer Überschrift der Ebene 1 ein anderes Bild. Für abhängige Formate wird in der zentralen Definition zuerst das übergeordnete Tag notiert und danach, durch ein Leerzeichen getrennt, das untergeordnete Tag.

Die Spezifikationen zu CSS in der Version legen sogar noch andere Arten von Abhängigen Formaten fest, die aber derzeit nocht nicht in den Browsern implementiert sind.

Unabhängige Formate

Für ein einzelnes, benanntes Tag, ist es möglich im Dateikopf oder in einer externen CSS-Datei Style-Angaben zu machen.

In der zentralen Style-Definition wird der Name (= die ID) des Tags durch ein # eingeleitet:

Das Tag, das diesen Namen (diese ID) und damit diese Eigenschaften tragen soll, wird mit dem Attribut id benannt. Jede ID muss in einem HTML-Dokument eindeutig sein!

Pseudo-Formate

Für bestimmte Tags gibt es zusätzliche Layout-Angaben, die in Form von sogenannten Pseudo-Formaten angegeben werden. Für das <a>-Tag haben wir bereits die Pseudo-Formate :link, :visited, :active und :hover kennengelernt

Für Absatz-Formate bzw. Block-Tags werden in CSS2 folgende Pseudoformate ermöglicht, da allerdings noch kein aktueller Browser interpretiert.

HTML, CSS und JavaScript = dynamicHTML

Genaues Positionieren von Elementen mit CSS

Mit herkömmlichem HTML musste man sich bisher mit Tabellen behelfen, um Text, Graphiken und Bilder an die richtige oder exakte Position im Browser-Fenster zu bekommen. Mit CSS hat man nun die Möglichkeit einzelne Elemente pixel-genau auf den Bildschirm zu setzen.

Schon mit dem <layer>-Tag hat vor einigen Jahren Netscape selbständig versucht Ähnliches zu erreichen, aber aus Inkompatibilitätsgründen hat sich diese sogenannte Layer-Technik nicht durchgesetzt.

Die hier vorgestellte Technik ist unter anderem auch die Grundlage von dynamicHTML, weil sich die Positions- und Größeneigenschaften eines benannten Elements dynamisch per JavaScript ändern lassen.

Folgendes stellt CSS zur Verfügung:

Positionierung

ACHTUNG: Netscape reagiert bei der Verwendung von <img>-Objekte, sprich eingebundenen Graphiken, sehr eigenwillig, wenn die Breite und Höhe einer Graphik als CSS-Angabe gemacht wird!

Steuerung des Textumflusses

Schichtpositionierung

Bei absolut positionierten, einander überlappenden Elementen kann die Schichtreihenfolge angegeben werden. Je höher die Zahl, desto weiter oben. Ohne diese Angabe werden sie in der Reihenfolge, in der sie definiert wurden, übereinandergelegt.

Steuerung der Anzeige

Kompatibilität

Leider interpretieren MS Internet Explorer und Netscape Navigator die CSS-Angaben erstens unterschiedlich, zweitens unvollständig und drittens widersprüchlich. Noch dazu verwenden beide Browser eine unterschiedliche Syntax von JavaScript, was die Änderung von Style-Eigenschaften aus diesem Bereich betrifft.

Grundsätzlich läßt sich feststellen, dass der MS Internet Explorer eine wesentlich flexiblere Handhabung ermöglicht und wirkliche "Dynamik" zulässt. So können fast alle Eigenschaften jedes beliebigen mit dem Attribut id="..." benannten Tag per JavaScript verändert werden.

Zwar kennt Netscape das <layer>-Objekt, das auch sehr viele Manipulationsmöglichkeiten ermöglicht, allerdings ist es weder W3C-konform, noch wird es von anderen Broswern verstanden. Solche Objekte lassen sich durch <div>-Bereiche simulieren.

Um Inkompatibilitäten zu vermeiden, sollte man dynamische Objekte, d.h. Objekte deren Position, Größe oder andere Eigenschaften per JavaScript geändert werden sollen, als Bereich zwischen <div> und </div> eingefasst sein. Sobald die Style-Angabe dafür dann mit position:absolute gesetzt wird, erkennen ältere Versionen der beiden Browser, dass es sich um ein dynamisches Objekt handelt.

Ein dynamisches Objekt

Definition

Ein dynamisches Objekt könnte daher folgendermaßen in einem HTML-Dokument definiert sein:

Dieses Objekt wird im Browser über dem Fließtext liegend dargestellt. Daher sollte man mit den CSS-Eigenschaften background-color: oder background-image: einen Hintergrund festlegen, sodass der Hintergrund nicht durchscheint. Oder man muss im Fließtext einen Platzhalter einbauen.

Manipulation

Die folgenden JavaScripts, im Head-Bereich der HTML-Datei untergebracht, lassen das oben definierte Objekt vom Bildschim verschwinden oder auch wieder erscheinen.

<script language="javascript">
function verstecken()
{
   if(document.layers)
      document.layers['kasten'].visibility="hide";
   else
      document.all['kasten'].style.visibility="hidden";
}
function zeigen()
{
   if(document.layers)
      document.layers['kasten'].visibility="show";
   else
      document.all['kasten'].style.visibility="visible";
}
</script>

Die if-Abfrage ist auf Grund der unterschiedlichen Syntax von Netscape Navigator (if-Zweig) und MS Internet Explorer (else-Zeig) notwendig.

Aufgerufen werden diese beiden Scripts z.B. durch folgende Links:

Möchte man die Position des Objektes verändern, so kann man folgendes Script verwenden:

function nachrechts()
{
   if(document.layers)
      document.kasten.left+=10;
   else
      kasten.style.left=parseInt(kasten.style.left)+10;
}

Hier ist wieder die unterschiedöiche Handhabung für die beiden großen Browser erkennbar. Während NS diese Eigenschaften numerisch speichert, werden alle Eigenschaften von MSIE als Zeichenketten (samt Einheit) behandelt.

Ausblick

Diese Beispiele sollen nur die Möglichkeiten aufzeigen, die CSS und JavaScript in Kombination bieten. Ich hoffe damit nicht zu sehr auf den noch folgenden Seminarteil "JavaScript" vorgegriffen zu haben. Aber ich hoffe, sie haben einen Eindruck bekommen von den Möglichkeiten, die dynamicHTML bietet, und die Schwierigkeiten, die die verschiedenen Ansätze von NS und MSIE hervorrufen.

Wer mehr über dynamicHTML wissen möchte, dem sei die Internet-Seite "Milch & Zucker" empfohlen, die es in gezippter Form auch zum Download gibt, und die detailierte Lösungsvorschläge zu dynamischen Webseiten gibt und dabei beide großen Browser berücksichtigt!

Formatvorlage für verschiedene Ausgabemedien

Unter dem Schlagwort "Cross Media" bieten CSS unterschiedliche Formatvorlagen für unterschiedliche Ausgabemedien. So kann eine WebSite angepasst werden für die normale Bildschirmausgabe, für den Ausdruck, für das Mini-Display eines HandHeld usw.

Unterschiedliche CSS-Dateien

Wobei folgende Medienangaben erlaubt sind:

Viele dieser Medien sind zwar schon vorgesehen, die entsprechenden CSS-Eigenschaften sind allerdings kaum bis noch gar nicht spezifiert und schon gar nicht in den Browsern implementiert. Für die Zukunft können wir gerade in diesem Bereich noch einiges erwarten.

Übrigens nur der MS Internet Explorer interpretiert derzeit (Versionen 4 und 5) das Attribut media im <link>-Tag.

Unterscheidung des Ausgabemediums in den Style-Angaben des Head-Bereiches

In Zukunft sollen die Browser, geht es nach dem W3C Konsortium, noch besser mit verschiedenen Ausgabemedien in Zusammenarbeit mit CSS umgehen können. Grundlage ist dazu das "Media Type Model" der CSS2-Norm. Eine CSS-Angabe könnte dann folgendermaßen aussehen:

<style type="text/css">
@media screen{
   body,p,td,li{font-family:Arial;font-size:12pt}
}
@media print{
   body,p,td,li{font-family:'Times New Roman';font-size:10pt}
   @page{size:29.7cm 21cm;margin 2cm}
   @page:header{content: ,first(chapter), ;border-bottom:thin solid black}
   @page:footer{content: ,"Seite " decimal(pageno), ;border-top:thin solid black}
}
</style>

Diese Angaben interpretiert noch keiner der aktuellen Browser. Für die verschiedenen Ausgabemedien hält CSS2 neue zusätzliche Befehle bereit, die in Zukunft noch einiges erwarten lassen!

Und was bieten die Browser Neues?

Die beiden großen Browser-Hersteller bauen in ihre Produkte ständig neue Features ein, die allerdings nicht standardisiert sind und daher meist nicht von der Konkurrenz anerkannt werden.

MS: Filter

Mit Hilfe von verschiedenen Filtern mit unterschiedlichsten Optionen lässt sich das Aussehen von Schriften und Graphiken stark verändern und kann damit Effekte Erzielen, die heute nur durch byte-intensive GIF-Graphiken erzeilt werden können. Dazu wird eine neue CSS-Eigenschaft filter: eingeführt, die als Wert die entsprechenden Einstellungen erfordert. (MSIE ab 4.0)

MS: Cursor

Das Aussehen des Mauszeiger lät sich verändern, je nach dem über welchem Objekt dieser sich gerade befindet. Ein CSS-Eigenschaft cursor: läßt dafür Standard-Mauszeiger einstellen, oder sogar ein spezielles Cursor-Symbol aus einer Datei laden. (MSIE ab 4.0)

MS: Seitenübergänge

Beim Aufrufen oder Verlassen einer Seite könne verschiedene Arten der Überblednung zwischen zwei Seiten eingestellt werden. Realisiert wird dies durch die Angabe in einem <meta>-Tag. (MSIE ab 4.0)

NS: Dynamic Fonts

Da die Darstellung einer WebSite oft durch das Fehlen von Schriftarten auf der Client-Seite beieinträchtigt sein kann, hat Netscape diese neue Technik entwickelt, bei der zu verwendete Schriftarten ebenfalls heruntergealden werden (müssen). Es ist soweit sichergestellt, dass diese Fonts vom Client nicht weiterverwendet werden können. Eingebunden können diese Fonts in HTML durch Angabe der URL in einem eigenen link-tag und anschließender Verwendung im Font-Tag, oder durch eine spezielle CSS-Angabe. (NS ab 4.0, MSIE mit speziellem ActiveX-Control

Großer Nachteil dabei ist, dass die notwendige Font-Datei durch ein Tool erst erstellt werden muss. Microsoft arbeitet an einem eigenen Ansatz zur Verwendung von TrueType- und Type1-Schriften. Hier waäre eine Standardisierung durch das W3C notwendig.

Quellenangaben

Zeitschriften

• PC-online 1/98
  • Martin Goldmann: "Coole Tips für schnellere Web-Sites -Web-Tuning:Cascading Style Sheets"
• PC-Magazin Spezial 4/98: "DHTML - Mehr Pep durch Dynamik"
  • Stefan Münz: "Cascading Style Sheets - neue Power für HTML"
  • Stefan Münz: "Unbegrenzte Möglichkeiten - Web-Seiten mit Stilvorlagen gestalten"
  • Stefan Münz: "Hintergründiges und mehr ...
• PC-online EXTRA 98: "Hard Stuff für Web-Publisher"
  • Albrecht Reinicke: "Die Browser werden klüger - Was Sie über DHTML wissen sollten"
  • Albrecht Reinicke: "Luxus-Design ohne Aufwand - Was sie über CSS wissen sollten"
  • Albrecht Reinicke: "Schlanke Web-Choreografie - Was Sie über SMIL und XML wissen sollten"
  • Albrecht Reinicke: "Schluß mit dem Datensalat - Noch mehr über XML"
  • Martin Goldmann: "Neue Basics für alte Online-Hasen -HTML-Tags für Absatz- und Schriftformatierung"
  • Martin Goldmann: "Der Klebstoff im Internet - Nie mehr Ärger mit Links"
• c't 9/99
  • Alexander Oberdörster: "So schick wie möglich - HTML 4.0: Cascading Style Sheets, Level 2 mit Media Types"
  • Alexander Oberdörster: "Nichts paßt - CSS-Praxis: Sechs Browser im Vergleich"

Web-Dokumente

• Stefan Münz: "SelfHTML"
• Stefan Münz: "SelfHTML aktuell"
• Das W3-Konsortium
• Milch & Zucker - die dynamicHTML-Seite

Stand: Mittwoch, 01. September 1999 09:20:08

Autor: Mag. Michael Überall