3 XML, HTML und XSL – die Ausgabe
Werbung
3
XML, HTML und XSL –
die Ausgabe
XML und VBA lernen
ISBN 3-8273-1952-8
Nun, nachdem eine wohlgeformte oder eine gültige XML-Datei erstellt
worden ist, stellt sich die Frage, was mit ihr geschieht. Die Anzeige im
Internet Explorer ist zur reinen Informationsvermittlung okay, allerdings wenig brauchbar, da die Benutzer von Browsern anderes gewöhnt
sind. Die Daten sollen auf vernünftige, das heißt ansehnliche Weise veröffentlicht werden. Und genau hier greift HTML.
Eine einfache Möglichkeit, XML-Dokumente anzuzeigen, sind Style
Sheets
3.1 Style Sheets
So wie Dokumente in Textverarbeitungsprogrammen nicht „hart“, sondern mit Formatvorlagen formatiert werden sollten, stellen viele Browser die Möglichkeit zur Verfügung, mit CSS (Cascading Style Sheets) zu
arbeiten. Diese Technik wurde vom World Wide Web Consortium 1996
entwickelt und im Netscape 4.0 und Internet Explorer 4.0 vollständig
implementiert.
Der dahinter liegende Grundgedanke ist die Trennung von Information
und Gestaltung. CSS ist lediglich für das Aussehen eines Dokumentes
zuständig; in ihm sind keinerlei Informationen über die Struktur des
Dokuments verzeichnet. Verzichtet man auf CSS, kann ein aufgeblähter
und unübersichtlicher Code entstehen. Mit CSS können kürzere Ladezeiten erreicht werden. Und schließlich ist die Pflege der Formate leichter, wenn CSS verwendet wird.
Ein CSS-Dokument ist eine Datei, in der die Stile für andere HTMLSeiten festgelegt werden. Sie wird als Textdatei mit der Endung *.css abgespeichert und könnte beispielsweise folgende Gestalt haben:
Style Sheets
91
<HTML>
<HEAD>
<TITLE>Verwendete Stile</TITLE>
<STYLE>
H1
{ font-family: Arial; font-size: 14pt; color:
#FF0000; font-weight: bold; margin-top: 0; margin-bottom: 6pt }
P
{ font-family: Arial; font-size: 12pt; line-height:
120%; margin-top: 0; margin-bottom: 6pt }
TABLE
{ font-family: Arial; font-size: 12pt }
TBODY
{ font-family: Arial; font-size: 12pt }
SPAN
{ font-family: Arial; font-size: 12pt;
list-style-type: disc }
UL
{ font-family: Arial; font-size: 12pt;
list-style-type: disc }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Wird diese Stilvorlage von einem anderen Dokument verwendet, so
wird in diese der Befehl
<LINK REL="stylesheet" HREF="RenesFormate01.css" TYPE="text/css">
eingefügt. Dieser Befehl wird im Kopfteil (HEAD) untergebracht.
Wie das obige Beispiel verdeutlicht, besteht ein CSS aus zwei Teilen: einem Selektor, beispielsweise H1, und der Deklaration, die in geschweiften Klammern geschrieben wird. Die Deklaration wiederum besteht aus
zwei Teilen: den Eigenschaften, wie zum Beispiel Größe und Farbe, und
dem Wert (Tag), beispielsweise 14 pt und Rot.
Solche Deklarationen können vererbt werden (deshalb der Name
„cascading“). Wird beispielsweise für das <BODY>-Tag die Farbe per CSS
bestimmt, hat der <LI>-Tag automatisch die gleiche Farbe, wenn diese
dort nicht definiert ist.
Selbstverständlich könnten nun direkt im Quellcode Befehle eingegeben werden, die vom vorgegebenen Design abweichen:
<H1
style="letter-spacing:30;" >&Uuml;berschrift</h1>
Die folgende Tabelle liefert die wichtigsten CSS-Befehle:
92
XML, HTML und XSL – die Ausgabe
Befehl
Bedeutung
weitere mögliche Angaben
font-family
Schriftart
Arial, Times New Roman etc.
font-size
Schriftgröße
numerischer Wert in pt (Punkt),
mm oder cm
color
Schriftfarbe
red, green, white usw. oder
HTML Farbangabe
Schrift
background-color
Hintergrundfarbe
font-variant
Schriftvariante
normal, small-caps
font-weight
Schriftgewicht
normal, bold, bolder, lighter
font-style
Schriftstil
normal, oblique, italic
float
Position des umfließenden Textes
left, right oder none, wenn Text
ein Element umfließen soll
text-align
Textausrichtung
left, right, center, justify (Blocksatz)
line-height
Zeilenabstand (Durchschuss)
numerischer Wert in pt (Punkt),
mm oder cm
text-decoration
Textgestaltung
underline, overline, linethrough, blink
word-spacing
Wortabstand
numerischer Wert in pt (Punkt),
mm oder cm
letter-spacing
Zeichenabstand
numerischer Wert in pt (Punkt),
mm oder cm
text-indent
Texteinrückung
numerischer Wert in pt (Punkt),
mm oder cm
text-transform
Textart
capitalize, uppercase, lowercase, none
vertical-align
vertikale Textausrichtung
baseline, sub, super, top, texttop, middle, bottom oder textbottom
margin-left
absoluter Abstand zum
linken Seitenrand
numerischer Wert in pt (Punkt),
mm oder cm
margin-right
absoluter Abstand zum
rechten Seitenrand
numerischer Wert in pt (Punkt),
mm oder cm
margin-bottom
absoluter Abstand zum
unteren Seitenrand
numerischer Wert in pt(Punkt)
mm oder cm
margin-top
absoluter Abstand zum
oberen Seitenrand
numerischer Wert in pt(Punkt)
mm oder cm
Link
fast alle CSS-Befehle anwendbar
Textgestaltung
Seitenränder
Links
A:link
Tabelle 3.1: Die wichtigsten CSS-Befehle
Style Sheets
93
Befehl
Bedeutung
weitere mögliche Angaben
A:visited
Besuchter Link
fast alle CSS-Befehle anwendbar
A:active
Angeklickter Link
fast alle CSS-Befehle anwendbar
A:hover
Link beim Überfahren mit
Maus
fast alle CSS-Befehle anwendbar
background
Hintergrundfarbe
red, green, white usw. oder
HTML-Farbangabe
background-image
Hintergrundbild
none, URL
background-repeat
Kachel
repeat, repeat-x, repeat-y, norepeat
border-top-width
Dicke der Rahmenlinie
thin, medium, thick oder
numerischer Wert
border-bottomwidth
Dicke der Rahmenlinie
thin, medium, thick oder
numerischer Wert
border-left-width
Dicke der Rahmenlinie
thin, medium, thick oder
numerischer Wert
border-right-width
Dicke der Rahmenlinie
thin, medium, thick oder
numerischer Wert
border-style
Rahmentyp
none, dotted, dashed, solid,
double, groove, ridge, inset,
outset
border-color
Rahmenfarbe
Farbname oder Hex.
padding-top
Tabellenabstand oben
Prozent oder numerischer Wert.
Bilder
Ränder
padding-bottom
Tabellenabstand unten
Prozent oder numerischer Wert.
padding-right
Tabellenabstand rechts
Prozent oder numerischer Wert.
padding-left
Tabellenabstand links
Prozent oder numerischer Wert.
width
Rahmenbreite
Auto, Prozent, numerischer Wert
height
Rahmenhöhe
Auto, Prozent, numerischer Wert
Tabelle 3.1: Die wichtigsten CSS-Befehle (Forts.)
Und sehr viel mehr gibt es zu XML auch nicht zu sagen. Die XML-Datei
sieht folgendermaßen aus:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="RenesFormate02.css" type="text/css"?>
<!DOCTYPE Artikel [
<!ELEMENT Artikel (Buch*)>
<!ELEMENT Buch (Nummer, Titel, Gruppe, Preis?)>
<!ELEMENT Nummer (#PCDATA)>
<!ELEMENT Titel (#PCDATA)>
<!ELEMENT Gruppe (#PCDATA)>
]>
<Artikel>
94
XML, HTML und XSL – die Ausgabe
<Buch>
<Nummer>12039</Nummer>
<Titel>Wie man mit einem Lachs verreist</Titel>
<Gruppe>Unterhaltung</Gruppe>
</Buch>
<Buch>
<Nummer>20048</Nummer>
<Titel>Baudolino</Titel>
<Gruppe>Unterhaltung</Gruppe>
</Buch>
</Artikel>
Über den Tag
<?xml-stylesheet href="RenesFormate02.css" type="text/css"?>
wird das Stylesheet „RenesFormate02.css“ eingebunden. Diese Zeile
wird auch „Verarbeitungsanweisung“ („Processing Instruction“) genannt. Der Speicherordner ist der gleiche wie derjenige, in dem sich die
XML-Datei befindet. Er kann absolut oder relativ sein (wie in diesem
Fall). Mit dem type ist die Art des Stylesheets gemeint – "text/css" entspricht CSS. Während in HTML ein internes Stylesheet möglich ist (vergleichbar mit internen DTD bei XML-Dokumenten), so muss bei XML
das Stylesheet außerhalb liegen.
Die CSS-Datei „RenesFormate02.css“ sieht dann folgendermaßen aus:
Nummer
{
font-family: Arial;
font-size: 40pt;
color: FF0000;
font-weight: bold;
margin-top: 0;
margin-bottom: 6pt
}
Titel
{
font-family: Times;
font-size: 14pt;
color:blue;
font-weight: bold;
}
Gruppe
{
font-family: Times;
font-size: 12pt;
list-style-type: disc
}
Style Sheets
95
Preis
{
font-family: Arial;
font-size: 12pt;
list-style-type: disc
}
Abbildung 3.1: An das XML-Dokument wird eine css-Datei gebunden.
Damit kann die Ausgabe gestaltet werden.
Im Unterschied zur CSS-Datei, die in HTML verwendet wird, müssen in
HTML die Stilklassen von HTML verwendet werden. In XML werden eigene Stilklassen benutzt: die Namen der XML-Elemente.
Die Formatierungen sind die gleichen wie in HTML, wie sie in obiger Tabelle beschrieben worden sind.
Will man die einzelnen Elemente untereinander stellen und nicht als
Fließtext hintereinander laufen lassen, so muss das Attribut
display: block;
hinzugefügt werden. Die css-Datei sieht dann wie folgt aus:
Nummer
{
display: block;
font-family: Arial;
font-size: 40pt;
color: FF0000;
font-weight: bold;
96
XML, HTML und XSL – die Ausgabe
margin-top: 0;
margin-bottom: 6pt
}
Titel
{
display: block;
font-family: Times;
font-size: 14pt;
color:blue;
font-weight: bold;
}
Gruppe
{
display: block;
font-family: Times;
font-size: 12pt;
list-style-type: disc
}
Preis
{
display: block;
font-family: Arial;
font-size: 12pt;
list-style-type: disc
}
Es können auch mehrere Selektoren gruppiert werden. Dazu werden sie
durch ein Komma getrennt, hintereinander aufgelistet:
Nummer
{
display: block;
font-family: Arial;
font-size: 40pt;
color: FF0000;
font-weight: bold;
margin-top: 0;
margin-bottom: 6pt
}
Titel, Gruppe
{
font-family: Times;
font-size: 14pt;
color:blue;
font-weight: bold;
}
Preis
Style Sheets
97
{
font-family: Arial;
font-size: 12pt;
list-style-type: disc
}
Abbildung 3.2: Das gleiche Dokument – anders gestaltet
3.1.1 Farben
In den letzten Beispielen wurde sowohl die Farbe „red“ als auch
„FF0000“ verwendet. Es stellt sich die Frage, welche Farben zur Verfügung stehen und wie sie ausgedrückt werden.
Alle Farben, die im Internet dargestellt werden, setzen sich aus den drei
Grundfarben Rot, Grün und Blau zusammen. Dieses additive Farbmodell wird überall bei Ausgabequellen mit Licht verwendet: Bildschirm,
Beamer, LCD-Display, ... Dieses Modell wird RGB-Farbmodell genannt:
red, green und blue.
Jede Farbe kann einen Wert zwischen 0 und 255 annehmen. Nimmt man
den höchsten Wert, erhält man die reine Farbe. So ist Rot dann 255 rot, 0
grün, 0 blau. Weiß ist 255, 255, 255 und Schwarz das Gegenteil 0, 0, 0.
Eine Farbe, hier Rot, wird in der Regel wie folgt angegeben:
color="#FF0000"
98
XML, HTML und XSL – die Ausgabe
Eigentlich müsste doch eine neunstellige Zahl dastehen. Allerdings werden die Werte hexadezimal angegeben. Jedoch unterstützt jedes bessere
HTML-Tool die Umwandlung. In den meisten HTML-Editoren können
Sie direkt aus den Farben auswählen und bekommen dann die Hexadezimalzahlen.
Dezimal
0
1
2
...
9 10
11
12
13
14
15
16
17
18
...
255
Hexadezimal
0
1
2
...
9 A
B
C
D
E
F
10
11
12
...
FF
Der Aufbau der Farbnummer ist im Hexadezimalsystem immer wie
folgt:
#000000
Die ersten beiden Ziffern stehen für den Rot-Anteil, die nächsten für
den Grün-Anteil und die hinteren beiden für den Blau-Anteil.
Farben können auch über ihre englischen Namen angegeben werden.
Achtung: Obwohl Browser eine große Anzahl von vordefinierten Farbnamen unterstützen, können in einer css-Datei lediglich 16 Farben verwendet werden:
Farbname
Bedeutung
Farbname
Bedeutung
Aqua
Blaugrün
Navy
Marineblau
Black
Schwarz
Olive
Olivgrün
Blue
Blau
Purple
Violett
Fuchsia
Fuchsin
Red
Rot
Gray
Grau
Silver
Silber
Green
Grün
Teal
Braun
Lime
Zitronengelb
White
Weiß
Maroon
Kastanienbraun
Yellow
Gelb
Tabelle 3.2: Die vom CSS-Standard unterstützten Farben
Die nächste Abbildung zeigt einen HTML-Editor, bei welchem lediglich
eine Farbe angeklickt werden muss. Der Editor berechnet den zugrunde
liegenden Farbwert und fügt ihn in das HTML-Dokument ein. Die folgende Abbildung zeigt den HTML-Editor Phase 5, der kostenlos von der
Seite http://www.meybohm.de heruntergeladen werden darf.
Style Sheets
99
Abbildung 3.3: Viele HTML-Editoren helfen bei der Umwandlung der Farbe in den
hexadezimalen Code (hier: rechts außen)
3.1.2 Klassen
Sollen nicht alle Elemente einer Liste gleich gestaltet werden, so können
sie mit Hilfe des Attributs CLASS formatiert werden. Von der oben verwendeten css-Datei werden die Elemente Titel und Gruppe um zwei
Klassen („Rot“ und „Schwarz“) erweitert:
Nummer
{
display: block;
font-family: Arial;
font-size: 40pt;
color: FF0000;
font-weight: bold;
margin-top: 0;
margin-bottom: 6pt
}
Titel, Gruppe
{
font-family: Times;
font-size: 14pt;
font-weight: bold;
}
.Blau
{
color:blue;
}
.Schwarz
{
color:black;
}
100
XML, HTML und XSL – die Ausgabe
In das Tag werden nun das Attribut CLASS und seine Werte („Blau“ oder
„Schwarz“) eingefügt:
<Artikel>
<Buch>
<Nummer>12039</Nummer>
<Titel CLASS="Blau">Wie man mit einem Lachs verreist</Titel>
<Gruppe CLASS="Blau">Unterhaltung</Gruppe>
</Buch>
<Buch>
<Nummer>20048</Nummer>
<Titel CLASS="Schwarz">Baudolino</Titel>
<Gruppe CLASS="Schwarz">Unterhaltung</Gruppe>
</Buch>
</Artikel>
Wenn Sie mit einer DTD arbeiten, so beachten Sie, dass Sie diese ebenfalls erweitern müssen:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="RenesFormate04.css" type="text/css"?>
<!DOCTYPE Artikel [
<!ELEMENT Artikel (Buch)*>
<!ELEMENT Buch (Nummer, Titel, Gruppe, Preis)>
<!ELEMENT Nummer (#PCDATA)>
<!ELEMENT Titel (#PCDATA)>
<!ATTLIST Titel CLASS CDATA #IMPLIED>
<!ELEMENT Gruppe (#PCDATA)>
<!ATTLIST Gruppe CLASS CDATA #IMPLIED>
]>
Die Regeln zum Erstellen einer Klasse sind offensichtlich: In der cssDatei wird vor den Namen ein Punkt gestellt. Sie gehört zu der Klasse,
die ihr direkt vorangestellt ist. Das Attribut CLASS kann nun in den entsprechenden Elementen verwendet werden, muss allerdings in der DTD
deklariert werden.
Style Sheets
101
Abbildung 3.4: Das Dokument wird mit Klassen gestaltet
3.1.3 Bilder
Befinden sich im XML-Dokument Bilder, das heißt existiert dort ein Tag
<IMG>, so muss dieser mit dem Attribut versehen werden, welches die
Quelle des Bildes angibt:
<Buch>
<Nummer>123</Nummer>
<HTML:IMG SRC="Bildband_Wolff.gif"></HTML:IMG>
<Titel>Wolff</Titel>
<Gruppe>Autobiografie</Gruppe>
</Buch>
<Buch>
<Nummer>124</Nummer>
<HTML:IMG SRC="Bodycheck.gif"></HTML:IMG>
<Titel>Bodychek</Titel>
<Gruppe>Ratgeber</Gruppe>
</Buch>
Der Namensraum wird selbstverständlich im Wurzelelement deklariert:
<Artikel xmlns:HTML="http://www.w3.org/TR/REC-html40">
In den Processing-Instructions wird erneut auf eine css-Datei verwiesen:
<?xml-stylesheet href="RenesFormate05.css" type="text/css"?>
102
XML, HTML und XSL – die Ausgabe
Dort wird deklariert:
Nummer
{
display: block;
font-family: Arial;
font-size: 40pt;
color: FF0000;
font-weight: bold;
margin-top: 0;
margin-bottom: 6pt
}
Titel, Gruppe
{
font-family: Times;
font-size: 14pt;
font-weight: bold;
position: relative;
top: -55
}
Die Veränderung der Position war nötig, damit der Text ordentlich neben den Bildern zu stehen kommt.
Abbildung 3.5: Ein XML-Dokument mit Bildern
Style Sheets
103
