XSL: Redaktionsbeispiel

Lernziel

Sie lernen nun anhand einer kleinen Sprüchesammlung, wie Sie transformiertes XML ansehnlich im HTML gestalten können.

Handlungsanweisungen

Aufgaben
  1. Schreiben Sie eine XSL-Datei mit Style-Attributen, um den Inhalt der unten gezeigten XML-Datei als HTML anzeigen zu lassen.

  2. Verfahren Sie auch mit der eigenen CD-Sammlung, nach dem gleichen Verfahren.

  3. Fügen Sie drei weitere Sprüche zur Sprüchesammlung hinzu.

Sprüche im XML-Format

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xsl3.xsl"?>
<!DOCTYPE spruechesammlung [
  <!ELEMENT spruechesammlung (spruch)+>
  <!ELEMENT spruch (kategorie, text, autor, gelebt-von-bis)>
  <!ELEMENT kategorie (#PCDATA)>
  <!ELEMENT text (#PCDATA)>
  <!ELEMENT autor (#PCDATA)>
  <!ELEMENT gelebt-von-bis (#PCDATA)>
]>
<spruechesammlung>
  <!--erster Datensatz-->
  <spruch>
    <kategorie>Erziehung</kategorie>
    <text>
    Bester Beweis einer guten Erziehung ist die Pünktlichkeit.
    </text>
    <autor>Gotthold Ephraim Lessing </autor>
    <gelebt-von-bis>1729-1781</gelebt-von-bis>
  </spruch>
  <!-- zweiter Datensatz-->
  <spruch>
    <kategorie>Ordnung</kategorie>
    <text>
     Bewahre deine Papiere, deine Schlüssel und alles so,
     daß du jedes einzelne Stück auch noch im Dunkeln finden
     kannst. Verfahre noch ordentlicher mit fremden Sachen.
    </text>
    <autor>Adolph Freiherr von Knigge</autor>
    <gelebt-von-bis>1752-1796</gelebt-von-bis>
  </spruch>
  <!-- dritter Datensatz-->
  <spruch>
    <kategorie>Liebe</kategorie>
    <text>
    Der Unterschied zwischen einer Liaison und der
    ewigen Liebe besteht darin, daß die Liaison im
    allgemeinen länger dauert.
    </text>
    <autor>Karl Schönböck</autor>
    <gelebt-von-bis>1909-2001</gelebt-von-bis>
  </spruch>
  </spruechesammlung>

Gewünschtes Ergebnis:

Sprüchesammlung
Zusatz

Wer sich mit CSS nicht so auskennt, hier ein paar Varianten:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<div style="font-size:18pt;color:#444444;">
  hier die Kategorie ...
</div>
</xsl:template>

<div style="font-size:12pt;color:green;">
  hier der Text ...
</div>

<div style="font-size:12pt;color:orange;padding-left:20px;">
  hier der Autor
</div>

<div style="font-size:12pt;color:black;padding-left:50px;">
  hier die Jahreszahlen
</div>