World Wide Web - Grundlagen und Technologie

Aufgabe 6 (XML und CSS)

CSS Style Sheet für eine XML DTD

Abgabe bis 5.6.2001


Ziel dieser Aufgabe ist es, XML mit Hilfe eines CSS Style Sheets darzustellen. Dazu können die bereits in vorangegangenen Aufgaben erworbenen Kenntnisse verwendet werden, denn CSS kann in genau gleicher Weise auf HTML wie auf XML angewendet werden. So, wie man in CSS Style Sheets für HTML die HTML-Elementnamen im Style Sheet verwendet, so können in einem CSS Style Sheet für ein XML Dokument die Elementnamen des XML Dokuments verwendet werden (die Syntax der Selektoren ist genau die gleiche, es ändern sich lediglich die verwendeten Identifier).

Der grosse Unterschied zwischen CSS für HTML und CSS für XML besteht darin, dass HTML Elemente bereits eine gewisse Default-Präsentation haben, die durch den Standard bzw. die Implementierungen in den Browsern vorgegeben sind, während XML Elemente keinen solchen Default haben, so dass für die Formatierung von XML Dokumenten sozusagen "mehr" Präsentationvorschriften angegeben werden müssen.

In dieser Aufgabe soll für die in Aufgabe 4 erstellten XML Dokumente ein CSS Style Sheet geschrieben werden, das für die Darstellung beider Dokumente (und natürlich auch weiterer Dokumente gemäss der von Euch erstellten DTD) gleichermassen geeignet ist. Das CSS Style Sheet muss also auf die DTD, und nicht auf die XML Dokumente abgestimmt werden. Die Frage, mit der Ihr am besten startet, ist die, in welcher Weise Ihr beliebige Dokumente gemäss der DTD dargestellt haben wollt.


Schritt 1 (Erstellen eines CSS)

Die CSS Style Sheet Standards des W3C haben sich zwar als allgemein anerkannte Sprache durchsetzen können, aber nicht nur der neuere CSS2 Standard ist erst sehr rudimentär implementiert, sondern auch der schon relativ alte CSS1 Standard wird bisher von keinem Produkt wirklich komplett implementiert (seltsamerweise liegt der IE5 auf MacOS am nächsten an diesem Ideal). Aus diesem Grund solltet Ihr das Webreview's CSS Compatibility Chart heranziehen, um festzustellen, welche Browser CSS wie weitgehend unterstützen.

Wenn Ihr Euer Style Sheet (das auch einige nicht-triviale Selektoren und Properties benutzen sollte...) fertiggestellt habt, solltet Ihr es mit dem CSS Validator validieren, um sicherzustellen, dass Ihr keine Fehler eingebaut habt (das debuggen von CSS ist ohne solche Tools eher mühsam, da es wenig direktes Feedback gibt, sondern nur eine Darstellung, die einfach nicht ganz so aussieht, wie man es sich vorgestellt hat).


Schritt 2 (Anbinden des CSS an die XML Dokumente)

Damit ein Browser auch weiss, wie er ein XML Dokument darstellen soll, muss es (analog zum LINK Element in HTML) einen Verweis auf das Style Sheet enthalten. Dies ist in einem sehr kurzen W3C Standard geregelt, der an sich nichts anderes macht, als die im HTML LINK Element verwendeten Informationen in der Syntax einer XML Processing Instruction zu standardisieren. Ihr müsst Eure XML Dokumente jeweils um eine solche XML Processing Instruction erweitern.


Schritt 3 (Darstellen des formatierten XML)

Um das mit CSS formatierte XML Dokument tatsächlich darstellen zu können, braucht man natürlich einen Browser, der sowohl XML als auch CSS unterstützt. Dies ist bei Netscape 4.x leider nicht der Fall, und Netscape 6 ist auf den tardis Maschinen nicht installiert. Ihr müsst also den IE5 nehmen (aufzurufen mit iexplorer), um Eure XML Dokumente anzusehen.

Alternativ könnt Ihr auf einem anderer Rechner einen anderen Browser verwenden, IE5, Netscape 6 und Opera 5 unterstützen alle XML und CSS. Opera 5 bietet die am weitesten gehende Unterstützung von CSS, insbesondere ist es der einzige Browser, der das Einfügen von Inhalten durch das Style Sheet unterstützt (ein sehr nützliches Feature, das Teil von CSS2 ist). Falls Ihr dieses Feature (oder andere nur von Opera unterstützte Dinge) benutzt, meldet es bitte, damit ich die Seite dann auch mit dem Opera anschaue bei der Korrektur.


Abgabe

Die Abgabe der Übung besteht darin, die URI einer Seite, auf der eine kurze Erklärung der DTD und der Formatierung durch das CSS Style Sheet steht, an den Betreuer (www-vl@dret.net) zu mailen. Die Seite muss zusätzlich Links auf die DTD und die beiden XML Dokumente (also z.B. Eure XML Homepage in zwei Varianten gemäss der DTD) enthalten. Die Überprüfung der Übung durch den Betreuer besteht darin, nachzuschauen, ob die Aufgabe korrekt gelöst wurde, d.h. ob das CSS Style Sheet geeignet ist, Dokumente gemäss der DTD sinnvoll und allgemeingültig zu formatieren.


please send comments to www-vl@dret.net
last modification on Tuesday, 29-May-2001 11:12:28 EDT
valid CSS!valid HTML 4.01!