Kategorien
Webdesign

Müssen Webdesigner XML lernen, um ihren Job zu behalten?

von Manfred Gerads

Nicht jeder hat die Zeit, sich neben dem alltäglichen Ärger mit Browser-Kompatibilität und Ähnlichem noch fundiert über alle wichtigen Veränderungen auf dem Laufenden zu halten, die im Internet vor sich gehen.

Bereits die aufmerksame Lektüre der gängigen Computerzeitschriften lässt jedoch keinen Zweifel an der Tatsache zu, dass XML groß im Kommen ist. Da wird sich mancher die Frage stellen „Muss ich das jetzt auch noch lernen?“

Das Wichtigste vorneweg: Panikmache ist nicht angesagt! Wer sich ein wenig mit XML auskennt, wird schnell zu dem Schluss kommen, dass wir eine jahrelange Koexistenz von HTML und XML im Internet vor uns haben.

Screenshot
Microsofts XML Notepad

Der Schlüssel liegt in einer Analyse der Auftraggeber, für die man in der Regel Webseiten erstellt, pflegt und verwaltet. Grob gesehen kann man drei ‚Fälle‘ unterscheiden:

1) Aufträge, wie der des Metzgers von nebenan oder der eines befreundeten Rechtsanwalts oder der pensionierte Lehrer, der einen nostalgischen Rückblick auf sein Leben ins Netz stellen will, sind unproblematisch. Sie werden nicht mit XML realisiert. Wer sich hauptsächlich mit solchen Aufträgen durchschlägt, sollte sich allerdings die Frage stellen, ob diese Art von Einnahmequellen eine langfristige Perspektive hat.

2) Haben Sie Unternehmen, in denen regelmäßig oder häufig Daten produziert werden, wird XML interessant. Mit ‚Daten‘ sind alle denkbaren Formen gemeint, sei es nun Text, Grafiken, oder was auch sonst. Wo immer Daten auf einheitliche Weise strukturiert und semantisch kategorisiert werden können, wird mit Sicherheit XML früher oder später eine wichtige Rolle spielen. Das Internet einen hat auch insoweit einen Innovationsdruck ausgelöst.

3) Bei Großunternehmen hängt es davon ab, ob es gelingt, Daten zu gruppieren und hierarchisch zu ordnen und schließlich die einzelnen Elemente dieser Hierarchie zu benennen. Hier wird XML in den meisten Fällen zwingend. Die Flexibilität von XML (man achte auf das ‚eXtensible‘) erlaubt, den Datenflusses zu automatisieren. Das gilt sowohl auf innerbetrieblicher Ebene als auch zwischen einzelnen Unternehmen und nicht zuletzt zwischen Unternehmen und Kunden(kreis). Ob sich eine Technologie durchsetzt, hängt auch davon ab. inwieweit sie die Kosten senkt. Auch hier kann XML vieles beitragen.

Die beiden letzten Bereiche werden auf lange Sicht das Gros des für das Internet und firmeninterne Netze produzierten Materials ausmachen. Die Beschäftigung mit XML hat aber auch noch einen ganz anderen Aspekt: XML ist eine ‚ganz andere Geschichte‘ als HTML. HTML ist eine Auszeichnungssprache, XML eine Metasprache, auf deren Grundlage Auszeichnungssprachen geschrieben werden.

Kategorien
Webdesign

XML-Workshop Teil 1: XML von Anfang an

von Jan Winkler

XML gilt als Datenaustauschformat der Zukunft im eBusiness und ist Favorit für Content Management-Systeme. Doch was genau hat es damit auf sich? Lernen Sie XML zu schreiben und einzusetzen, DTDs zu definieren und XML mithilfe von JavaScript, CSS und XSL an Ihre Bedürfnisse anzupassen.

Was ist XML?
XML steht für „EXtensible Markup Language“, was übersetzt etwa „erweiterbare Auszeichnungssprache“ bedeutet. Es wurde vom World Wide Web Konsortium (W3C) entwickelt, um HTML & Co. um eben diese erweiterbaren Elemente zu bereichern. Wenn man es so sehen will, ist XML die Grundlage oder vielmehr die Gebrauchsanweisung für jeden, der eigene Sprachen entwickeln möchte. XML beschreibt, ähnlich wie beispielsweise HTML, die Anordnung und das Auftreten von Elementen, die Verwendung von Attributen und alles was sonst noch zu einem Dokument gehört. Das Neue – im Gegensatz zu HTML – ist die Erweiterbarkeit. HTML selbst ist ein relativ statisch und fest definiertes Gebilde. XML wiederum verfügt über die Möglichkeiten, eine vormals in XML definierte Sprache zu erweitern und zu bereichern.

Wozu XML?
Um es ganz einfach zu sagen: Wenn Sie „nur“ weiterhin Ihre Homepage betreiben wollen, brauchen Sie es so gut wie gar nicht. Eine gewöhnliche Homepage kommt ohne XML aus und wird es auch weiterhin tun. XML brauchen Sie erst dann, wenn es um Funktionen und Erweiterungen geht, die HTML & Co. nicht mehr übernehmen können. Dazu gehören alle Dinge, die von Maschinen verstanden werden sollen, wie etwa Metadaten, Firmendaten oder auch einfache Listen Ihrer Videos im Schrank. Aufgrund seiner Definition kann XML hier ansetzen und eben diese Dinge umsetzen.

Wie sieht XML aus?
Das Erscheinungsbild von XML-Dateien unterscheidet sich nicht wesentlich von gewöhnlichen HTML-Dateien. Vielmehr ist mit XHTML (eXtensible Hypertext Markup Language, eine Abbildung von HTML auf XML) genau das erreicht, was XML ausmacht: Es ist auf fast alles anwendbar. Mit XHTML wurde HTML mithilfe der Regeln von XML neu definiert. Das Resultat ist eine fast beliebig erweiterbare Sprache, die zudem noch wesentlich einfacher interpretierbar und auch besser von Computern zu verstehen ist. Ein Beispiel für eine XML-Datei:

  <?xml 
version="1.0"?>
<Adressbuch>
<Kunde Name="Max Mustermann">
<Adresse>
<Strasse>Musterstraße 14</Strasse>
<PLZ>12345</PLZ>
<Ort>Musterhausen</Ort>
</Adresse>
</Kunde>
<Kunde Name="August Ausgedacht">
<Adresse>
<Strasse>Gibts-Nicht-Weg 37</Strasse>
<PLZ>67890</PLZ>
<Ort>Augsburg</Ort>
</Adresse>
</Kunde>
</Adressbuch>

Wie Sie dem Beispiel entnehmen können, wird darin ein Adressbuch beschrieben, dass die zwei Einträge „Max Mustermann“ und „August Ausgedacht“ beinhaltet. Weitere Adresse können folgen. Bitte beachten Sie auch die Struktur der einzelnen Elemente (Adressbuch, Kunde, Adresse, Strasse, …) – XML definiert diese.

Wie schreibe ich XML?
XML wird nicht anders notiert als gewöhnliches HTML. Das heißt, die Datei ist eine reine Textdatei, die Sie beispielsweise mit einem Text-Editor oder einem speziellen XML-Editor schreiben können. Die Dateiendung ist im Grunde frei gestellt, allgemein wird allerdings .xml verwendet.

Die XML-Deklaration
Jede XML-Datei enthält zu Beginn eine entsprechende Auszeichnung, dass es sich um XML handelt: die so genannte XML-Deklaration. Die XML-Deklaration besteht aus lediglich einer Zeile mit dem folgenden Aufbau:

      
        <?xml 
version="[Versionsnummer]" [weitere Attribute]?>
      
    

Dieser Aufruf besagt, dass es sich um eine XML-Datei handelt. Des Weiteren wird ausgesagt, dass der enthaltene Markup (~Text) der Definition einer bestimmten Version [Versionsnummer] von XML entspricht. Derzeit ist die Version ‚1.0‘ aktuell. Außerdem können [weitere Attribute] enthalten sein, die das Dokument näher bezeichnen, etwa in dem verwendeten Zeichensatz oder ausgelagerten Dateien. Diese sind allerdings nicht Pflicht.

Tags, Elemente und Attribute
Tags, Elemente und Attribute sind neben dem Inhalt/Text die Bestandteile jeder XML-Datei. Ein Element ist die Definition einer bestimmten Gegenstands. Bekannte Elemente aus HTML sind z.B. H1 oder P. Ein Tag wiederum ist das geschriebene Element. Jeder Tag wird durch zwei spitze Klammern (< und >) umschlossen. Darin enthalten sind der Elementname und etwaige Attribute. Beispiel:

      
        <font 
color="red"> Dies ist Text. </font>
      
    

Zu jedem Tag muss in XML außerdem ein schließender Tag hinzugefügt werden. Dieser wird durch einen Schrägstrich (/) vor dem Elementnamen verdeutlicht und besagt, dass hiermit der Geltungsbereich des Elements beendet ist.

Attribute sind Eigenschaften eines Tags/Elementes. Jedes Attribut besteht aus dem Namen, einem =-Zeichen sowie einem in Anführungszeichen („) geschriebenen Wert (siehe Beispiel).

Auch wennn die Bezeichnung von Elementen und Attributen in XML relativ frei festgelegt werden kann, gelten auch hier einige Einschränkungen. Alle Namen in XML dürfen grundsätzlich nur aus Buchstaben, Zahlen, dem Punkt, Unterstrichen und Bindestrichen bestehen. Des Weiteren müssen die Namen mit einem Buchstaben oder einem Unterstrich beginnen und dürfen keine Leerzeichen enthalten.

Leere Tags und Attribute
In HTML wurde mitunter etwas schlampig mit leeren Tags (also Tags ohne Inhalt, wie etwa IMG oder BR) und Attributen umgegangen. Die Browser waren hier meist so gnädig, trotz der Fehler alles korrekt darzustellen. Aufgrund der strikteren Definition von XML geht das nun nicht mehr. Alle leeren Tags müssen nun entweder einen schließenden Tag erhalten oder – besser noch – als leerer Tag gekennzeichnet werden. Diese Kennzeichnung erfolgt durch einen Schrägstrich (/) am Ende des Tags. Beispiel:

      
        <!-- 
falsch: -->
<meinElement meinAttribut=Wert>
      
        <!-- 
richtig: -->
<meinElement meinAttribut="Wert" />

Auch bei Attributen ist XML etwas strikter: Hier müssen die Klammern unbedingt gesetzt werden (siehe Beispiel).

CDATA-Abschnitte
CDATA-Abschnitte sind vom Prinzip her Tags, die beliebige Zeichen enthalten können. CDATA steht für Character Data (Zeichendaten). Der Abschnitt wird durch <![CDATA[ eingeleitet und mit ]]> beendet. Der gesamte Text dazwischen wird so dargestellt, wie er notiert wird. Beispiel:

      
        <![CDATA[
Hier kann problemlos mit
<Elementen>
gearbeitet werden.
]]>

Dokumenttyp-Deklarationen
Wie gesagt, beschreibt XML, wie eine Sprache definiert werden kann. Allgemein werden dazu DTDs (so genannte Document Type Definitions) verwendet. Dies sind Beschreibungen der Elemente, Attribute und ihrem Verhalten zueinander. Um definierte Elemente und Attribute innerhalb eines XML-Dokuments verwenden zu können, muss innerhalb des Dokuments definiert werden, welche Definition (DTD) verwendet werden soll. Dies kann entweder durch eine interne DTD oder eine externe DTD geschehen. Wie DTDs letztlich geschrieben werden, wird im späteren Verlauf des Workshops noch erläutert werden.

Interne DTDs werden direkt in das Dokument in einen bestimmten Bereich hinein geschrieben. Dieser Bereich wird durch <!DOCTYPE Name [ und ]> begrenzt, wobei Name der Name des root-Elementes (Stamm-Element; in HTML etwa das html-Element) ist. Innerhalb dieses Bereiches kann die gesamte Definition notiert werden. Ein Beispiel:

      
        <?xml 
version="1.0"?>
<!DOCTYPE Adressbuch [
<!ELEMENT Adressbuch (Kunde*)>
<!ELEMENT Kunde (Adresse)>
<!ATTLIST Kunde Name CDATA #REQUIRED>
<!ELEMENT Adresse (Strasse, PLZ, Ort)>
<!ELEMENT Strasse (#PCDATA)>
<!ELEMENT PLZ (#PCDATA)>
<!ELEMENT Ort (#PCDATA)>
]>
...

Diese DTD entspricht der Definition des vorangegangenen Beispiels („Wie sieht XML aus?“).

Neben internen DTDs können DTDs auch ausgelagert und in externen Dateien (.dtd) mehrerer Dokumente verwendet werden. Um eine externe DTD innerhalb eines Dokuments zu verwenden, wird die folgende Schreibweise notiert:

      
        <!DOCTYPE 
Name SYSTEM "DTD-URL">
<!DOCTYPE Name PUBLIC "DTD-Name" "DTD-URL">

Wobei Name wiederum für den Namen des root-Elementes steht. Der Typ einer DTD kann entweder SYSTEM oder PUBLIC sein, wobei SYSTEM für DTDs steht, die durch absolute oder relative Pfade (DTD-URL) auffindbar sind, sich also auf einem System befinden. Als PUBLIC gekennzeichnete DTDs sind öffentliche DTDs (wie die von HTML). Hierbei muss neben der URL (DTD-URL) auch die Bezeichnung (DTD-Name) definiert werden. Diese besteht aus einem String (~ Text) der Form …

      
        Typ//Besitzer//Beschreibung//Sprache
      
    

Wobei der Typ aus einem Plus- (wenn der Besitzer bei der ISO 9070 registriert ist) oder Minuszeichen (alle anderen Besitzer) besteht. Anstelle des Besitzers und der Beschreibung kann ein frei gewählter Name sowie eine Beschreibung der DTD eingetragen werden. Letztlich beschreibt der Wert „Sprache“ die in der DTD verwendete Sprache (laut ISO 639).

Ein Beispiel:

      
        -//MeineFirma//Adressbuch//de
      
    

Kommentare
Kommentare, also Text, der nicht zum eigentlichen Markup gehört, werden ebenso wie in HTML geschrieben. Sie werden durch <!– eingeleitet und durch –> beendet. Alles, was dazwischen steht, gilt als Kommentar und wird von einem ausführenden Programm nicht bzw. nur als Kommentar interpretiert. Beispiel:

      
        <!-- 
dieser Tag <abc> wird auch als Kommentar angesehen -->  

Außerdem sollten Sie beachten, dass vor der XML-Deklaration keine Kommentare stehen dürfen. Sie ist das Erste, was im Dokument steht. Auch dürfen Kommentare nicht in Tags oder Attributen enthalten sein.

Entities
Entities, Entity-Referenzen bzw. auf gut Deutsch „Entitäten“ sind Auszeichnungen, die Sonderzeichen darstellen. Um Missverständnisse zwischen Text und Tags zu vermeiden, sollten innerhalb der Text-Abschnitte immer nur Entities verwendet werden. Definierte Entities sind z.B. &amp;, &lt; oder &gt; , die für Sonderzeichen (&, < und >) stehen. XML definiert zudem noch zwei Weitere (&apos – Apostroph und &quot; – Anführungszeichen) und bietet darüber hinaus die Möglichkeit, eigene Entities zu definieren.

Eine Entity besteht dabei immer aus einem Kaufmanns-Und (&), dem Namen oder einer Referenz auf den Unicode-Zeichensatz sowie einem abschließenden Semikolon (;). Bei Referenzen auf den Unicode-Zeichensatz wird anstelle des Namens (z.B. amp) eine Raute (#) mit der anschließenden Zahl des Zeichens im Zeichensatz definiert. Einige Sonderzeichen lassen sich somit auf drei Arten darstellen:

  • Als Zeichen (&),
  • numerisch (&#38;) oder
  • mit einem allgemeinen Entity (&amp;).

Wohlgeformtheit und Gültigkeit
Nicht zuletzt wird XML in Bezug auf die Syntax als schwerer zu erlernen angesehen, da verglichen mit HTML wesentlich stärker auf die korrekte Notierung zu achten ist („Wohlgeformtheit“). Damit eine XML-Datei als gültig anerkannt wird, müssen folgende Punkte gelten (einige wurden bereits beschrieben):

  • Am Anfang jeder XML-Datei muss eine XML-Deklaration stehen.
  • Alle nicht leeren Tags müssen einen Anfangs- und End-Tag besitzen.
  • Leere Tags müssen mit /> enden.
  • Jedes Dokument muss ein Element enthalten, dass alle anderen Elemente einschließt (wie z.B. in HTML das html-Element).
  • Elemente dürfen sich nicht überlappen (statt <a><b> … </a></b> immer <a><b> … </b></a>)
  • Attributwerte müssen (paarweise) entweder in doppelten oder einfachen Anführungszeichen stehen.

Die Namen von Anfangs- und End-Tag müssen untereinander und mit der DTD übereinstimmen (Groß- und Kleinschreibung beachten).

Kategorien
Inspiration Tutorials

XML-Workshop Teil 4: Templates in XSL(T)

von Jan Winkler

Im dritten Teil des XML-Workshops haben wir uns mit den Grundlagen von XSLT befasst, mit dem XML-Dokumente, ähnlich CSS, ausgelesen und gestaltet werden. Jetzt ist es Zeit, die Templates einmal näher unter die Lupe zu nehmen, die innerhalb von XSLT verwendet werden.

Mit Templates arbeiten
Innerhalb von XSLT werden Templates verwendet. Ein Template ist eine Vorlage für die Transformation bestimmter Knoten. Diese Knoten können Elemente, Attribute oder auch Text sein. Vorlagen werden durch das xsl:template-Element erstellt und beschrieben. Es besitzt unter anderem die Attribute match und name. Letzteres definiert einen eindeutigen Namen für das Template, der später weiter verwendet werden kann. Mit dem match-Attribut wird exakt spezifiziert, auf welche Knoten der Quell-Datei diese Vorlage angewandt werden soll. Die Werte dieses Attributes werden als Pattern bezeichnet. Folgende Patterns sind unter anderem möglich:

Wert Beschreibung
Elementname Wird ein Elementname oder eine durch | verbundene Liste von Elementnamen definiert, gilt die Vorlage für alle benannten Elemente innerhalb der Liste.
/ Das root-Element wird verwendet.
Elementname1/Elementname2 Wird auf alle Elementname2 angewandt, die Elementname1 als Eltern-Element haben.
Elementname1//Elementname2 Wird auf alle Elementname2 angewandt, die Elementname1 als Vorfahren-Element (z.B. Eltern-Element oder Eltern-Element vom Eltern-Element usw.) haben.
id(Name) Wird auf alle Elemente angewandt, die die ID Name haben.
key(Name,Wert) Wird auf alle Elemente angewandt, die durch einen Schlüssel (xsl:key) mit dem jeweiligen Namen definiert werden und den Wert haben.
text() Wird auf alle Text-Knoten angewandt.
processing-instruction() Wird auf alle PI’s angewandt.
node() Wird auf alle Knoten angewandt, die keine Attribute oder das Root-Element sind.
Elementname[n] Wird auf alle Elemente Elementname angewandt, wenn sie das n-te Element innerhalb des Elternelements sind.
* Alle Knoten werden verwendet.
position() = x Alle Elemente mit der Positionsnummer x werden verwendet. Auch sind Rechenformeln denkbar: position() mod 4 = 0 (jeder 4te Knoten)
@Name Alle Attribut-Knoten mit dem Namen Name.
Elementname
[@Attributname=“Wert„]//
Alle Elemente mit dem Attributwert Wert des Attributes Attributname.

Dies ist nur eine kleine Auswahl der wichtigsten Pattern. XSLT definiert hier noch unzählige weitere und erlaubt darüber hinaus auch die Kombination mit/und XPath ausdrücke/n.

Gelangt der XSLT-Parser zu einem Knoten, für den ein Template definiert wurde, ersetzt er diesen Knoten durch das Template. Innerhalb des Templates können dazu weitere XSLT-Angaben oder auch Text oder Markup folgen. Diese werden dann als weitere Knoten angesehen und ebenfalls abgeschritten. Beispiel xml-Quelle:

 <?xml
version="1.0"?>
 <?xml-stylesheet href="trans1.xsl"
type="text/xsl"?>
      <!DOCTYPE A [
 <!ELEMENT
A (#PCDATA | B)*>
 <!ELEMENT B (#PCDATA | C)*>
 <!ELEMENT C
EMPTY>
 ]>
      <A>
 <B>
 <C />

</B>
 </A>

Das XSLT-Stylesheet:

      <?xml
version="1.0"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="A">
 <html>
 <body>

&lt;Element<b>A</b>&gt;
 <xsl:apply-templates />

&lt;/Element<b>A</b>&gt;
 </body>
 </html>

</xsl:template>
 <xsl:template match="B">
 &lt;Element<b>B</b>&gt;

<xsl:apply-templates />
 &lt;/Element<b>B</b>&gt;

</xsl:template>
 <xsl:template match="C">
 &lt;Element<b>C</b>
/&gt;
 </xsl:template>
 </xsl:stylesheet>

Werden die obigen Daten auf das darunterstehende Style Sheet angewandt, so erhält man folgendes Bild:

Verzweigung einer HTML-Datei

Resultat der Transformierung

Templates in Templates
Durch die Verschachtelung von XML-Elementen wird es nötig, innerhalb eines Templates ein anderes verwenden zu können. Dies erfolgt über das xsl:apply-templates-Element. Es besagt, dass an dieser Stelle andere Templates eingebunden werden können (sofern die entsprechenden Knoten existieren). Wird das Element als leeres Element notiert (siehe Beispiel oben) heißt dies, dass hier alle Vorlagen erscheinen können. Darüber hinaus kann der Vorlagenbereich auch eingeschränkt werden. Dies erfolgt über das select-Attribut, welches als Wert wiederum einen Pattern erhalten kann (siehe ‚Mit Templates arbeiten‘ -> Pattern). Auch können mehrere xsl:apply-templates-Elemente innerhalb eines xsl:template-Elements enthalten sein. Beispiel Quelle:

      <!DOCTYPE A [
 <!ELEMENT A (#PCDATA | B)*>
 <!ELEMENT
B (#PCDATA | C)*>
 <!ELEMENT C EMPTY>
 ]>
      <A>

<B>
 <C />
 </B>
 </A>

Das XSLT-Style Sheet:

      
        <?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="A">
 <html>
 <body>

<p>Der Inhalt von B wird ausgelassen,
 stattdessen folgt der Inhalt von
C:</p>
 <p>"<xsl:apply-templates select="C" />"</p>

</body>
 </html>
 </xsl:template>
 <xsl:template
match="B">
 Anfang B
 <xsl:apply-templates/>
 Ende
B
 </xsl:template>
 <xsl:template match="C">
 Dies
ist der Inhalt von C
 </xsl:template>
 </xsl:stylesheet>
      

Erzeugt folgendes Bild:

Resultat der Transformierung

Resultat der Transformierung

Templates einbinden
Um Templates auch an Stellen verwenden zu können, an denen es eigentlich nicht auftreten sollte (da z.B. keine entsprechenden Knoten vorhanden sind), benutzt man das xsl:call-template-Element. Es erhält als Wert des name-Attributes den Namen eines Templates, das an dieser Stelle eingebunden werden soll. Beispiel (es wird die obige Quelle verwendet):

      
        <?xml
version="1.0"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="A">
 <html>
 <body>

<p>Inhalt von C:</p>
 <p><b><xsl:apply-templates
select="C" /></b></p>
 </body>
 </html>

</xsl:template>
 <xsl:template name="tempB" match="B">

Anfang B
 <xsl:apply-templates />
 Ende B
 </xsl:template>

<xsl:template match="C">
 Dies ist der Inhalt von C<br />

<xsl:call-template name="tempB" />
 </xsl:template>

</xsl:stylesheet>
      

… erzeugt folgendes Bild:

Resultat der Transformierung

Resultat der Transformierung

Mehrere Style Sheets verwenden
Es gibt zwei Wege, um in einem XSLT-Dokument die Angaben eines anderen verwenden zu können. Im ersten Fall benutzt man dazu das xsl:include-Element. Als Wert des href-Attributes erhält dies die URL der zu verwendenden Datei. Diese wird eingelesen und die enthaltenen Angaben werden in das aktuelle Dokument eingebunden (an der Stelle an der der Aufruf stattfand). Im zweiten Fall benutzt man das xsl:import-Element. Auch hier wird das href-Attribut mit der jeweiligen URL definiert. Der Unterschied zu xsl:include besteht darin, dass die Regeln des importierten Style Sheets Vorrang vor denen aus dem eigentlichen Dokument haben. Ein Beispiel:

      
        <?xml
version="1.0"?>
 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="trans1.xsl"/>
 <xsl:import href="trans2.xsl"/>
      
      
        <xsl:include href="inc1.xsl"/>

<!-- ... -->
 <xsl:import href="inc2.xsl"/>
 <!--
... -->
 </xsl:stylesheet>
      

Bitte beachten Sie, dass beide Elemente nur als Top-Level Element verwendbar sind. Außerdem sollten die xsl:import-Elemente vor allen anderen Elementen definiert werden – xsl:include-Elemente können danach überall auf root-Ebene vertreten sein.

Kategorien
Inspiration Tutorials

XML-Workshop Teil 5: Style Sheets, Elemente und Attribute

von Jan Winkler

Teil 5 unseres Workshops ist der Verwendung mehrerer Style Sheets sowie der Verwendung von Elementen, Attributen und Variablen gewidmet.

Mehrere Style Sheets verwenden
Es gibt zwei Wege, in einem XSLT-Dokument die Angaben eines anderen zu verwenden. Im ersten Fall benutzt man dazu xsl:include. Als Wert des href-Attributes erhält dies die URL der zu verwendenden Datei. Diese wird eingelesen. Die enthaltenen Angaben werden an der Stelle, an der der Aufruf stattfand, in das aktuelle Dokument eingebunden. Im zweiten Fall benutzt man das xsl:import-Element. Auch hier wird das href-Attribut mit der jeweiligen URL definiert. Der Unterschied zu xsl:include besteht darin, dass die Regeln des importierten Style Sheets Vorrang vor denen des eigentlichen Dokuments haben.

Ein Beispiel:

 <?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:import href="trans1.xsl"/>
 <xsl:import href="trans2.xsl"/>
      <xsl:include href="inc1.xsl"/>
 <!-- ... -->

<xsl:import href="inc2.xsl"/>
 <!-- ... -->
 </xsl:stylesheet>

Bitte beachten Sie, dass beide Elemente nur als Top-Level Element verwendbar sind. Außerdem sollten die xsl:import-Elemente vor allen anderen Elementen definiert werden – xsl:include kann danach überall auf Root-Ebene vertreten sein.

Elemente erzeugen
XSLT bietet zum Erzeugen der Resultate vorgefertigte Lösungen (/Elemente). Diese werden angewandt, um eine saubere Syntax des Resultat-Dokuments zu erhalten und um Knoten zu erzeugen, die innerhalb der Quelle schonverwendet wurden. Elemente werden mit xsl:element erzeugt. Dies besitzt die Attribute

  1. name (Name des Elements)
  2. namespace (Namensraum des Elements) sowie
  3. use-attribute-sets (Name der zu verwendenden Attributliste).

Der Name muss definiert werden – der Namespace und die Attributliste stehen frei. Innerhalb des xsl:element-Elements können beliebige Informationen (Text, Markup, Kommentare …) folgen.

Beispiel:

      <xsl:element name="MeinElement"
>
 Das ist mein Element.
 </xsl:element>

erzeugt:

      <MeinElement> Das ist mein Element. </MeinElement>

Attribute erzeugen
So, wie Elemente erzeugt werden können, ist es auch möglich, diesen Attribute zuzuweisen. Dazu verwendet man das xsl:attribute-Element. Es erhält als Wert des name-Attributes den zu verwendenden Namen sowie bei Bedarf ein Namespace-Attribut . Innerhalb des Elements wird der Wert des erzeugten Attributes notiert.

Beispiel:

      <xsl:element name="MeinElement"
>
 <xsl:attribute name="MeinAttribut">MeinWert</xsl:attribute>

<p>
 <xsl:attribute name="align">right</xsl:attribute>

Das ist mein Element.
 </p>
 </xsl:element>

… erzeugt:

      <MeinElement MeinAttribut="MeinWert">

<p align="right">
 Das ist mein Element.
 </p>

</MeinElement>

Bitte beachten Sie, das das Element nur innerhalb eines

  1. xsl:element-
  2. xsl:attribute-set-
  3. definierten Elements

verwendet werden kann. Außerdem sollten Sie darauf achten, dass die Attribut-Definition ohne Zwischentext direkt nach der Element-Definition stehen sollte.

Attributlisten
Mit Attributlisten kann man häufig verwendete Attribute schneller verwenden, indem man sie einem Element über use-attribute-sets zuweist und nicht jedes Mal neu definieren muss. Attributlisten werden durch das Element xsl:attribute-set definiert und beinhalten ausschließlich Attribute (xsl:attribute). Außerdem müssen sie durch das name-Attribut mit einem Namen versehen werden, der dann von Elementen verwendet werden kann.

Ein Quellbeispiel:

      <?xml
version="1.0"?>
 <?xml-stylesheet href="trans.xsl"
type="text/xsl"?>
      <!DOCTYPE A [
 <!ELEMENT
A ( B )*>
 <!ELEMENT B EMPTY>
 ]>
      <A>

<B />
 </A>

Das Style Sheet:

      <xsl:stylesheet
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:attribute-set name="Liste1">
 <xsl:attribute name="align">right</xsl:attribute>

<xsl:attribute name="style">color:red;</xsl:attribute>

</xsl:attribute-set>
 <xsl:attribute-set name="Liste2" use-attribute-sets="Liste1">

<xsl:attribute name="src">meinbild.gif</xsl:attribute>

</xsl:attribute-set>
 <xsl:template match="A">
 <html><body>

<xsl:element name="h3" use-attribute-sets="Liste1">

Attributlisten
 </xsl:element>
 <hr />
 <xsl:apply-templates/>

</body></html>
 </xsl:template>
 <xsl:template match="B">

<xsl:element name="img" use-attribute-sets="Liste2" />

</xsl:template>
 </xsl:stylesheet>

… erzeugt:

      <html>

<body>
 <h3 align="right" style="color:red;">

Attributlisten
 </h3>
 <hr>
 <img align="right"
style="color:red;" src="meinbild.gif">
 </body>

</html>

Resultat der Transformierung
Des Weiteren unterstützt das Element die Verwendung weiterer Attribut-Listen, die als eine durch Leerzeichen getrennte Liste als Wert von use-attribute-sets definiert werden können (siehe Beispiel oben). Bitte beachten Sie, dass es sich hier um ein Top-Level Element handelt.

Verzweigung einer HTML-Datei

Resultat der Transformierung

Sonstiges erzeugen
Neben Elementen und dazugehörigen Attributen können auch Texte, Processing-Instructions oder Kommentare erzeugt werden. Da diese sich in etwa gleich der Erzeugung von Elementen verhalten, soll das folgende Beispiel genügen, um die Verwendung der einzelnen Elemente zu verdeutlichen:

      <xsl:text>
Inhalt </xsl:text>
 <xsl:processing-instruction name="xml-stylesheet">

href="test1.xsl" type="text/xsl"
 </xsl:processing-instruction>

<xsl:comment>
 Dies ist ein Kommentar.
 </xsl:comment>

… erzeugt:

      <?xml-stylesheet href="test1.xsl" type="text/xsl">

<!--
 Dies ist ein Kommentar.
 -->

Computer generierten Text erzeugen
Neben der Möglichkeit, mittels xsl:text statisch Text erzeugen zu können, bietet XSLT die Voraussetzungen, um Text durch den Parser erstellen zu lassen. Dazu wird das xsl:value-of-Element im Zusammenhang mit dessen select-Attribut verwendet. Tritt dieses auf, wird der Wert des durch select beschriebenen Knotens an dieser Stelle eingefügt.

Beispiel:

      <xsl:template
match="Person">
 <xsl:value-of select="@Anrede" />
heisst:
 <xsl:value-of select="@Vorname" />
 <xsl:text>
</xsl:text>
 <xsl:value-of select="@Nachname" />.

</xsl:template>

… erzeugt:

      Er heisst: Max Mustermann.

Bitte beachten Sie, dass innerhalb von Elementen – ob XSL oder Markup – statt dieser Schreibweise auch einfach geschweifte Klammern ({ und }) verwendet werden können. Sie stehen als Synonym für das Element xsl:value-of. Innerhalb der Klammern notieren Sie dann den Wert, den Sie üblicherweise als select-Wert notiert hätten.

Kopieren
Um Elemente des Quellbaums in das Resultat zu übernehmen, kopiert man diese mit Hilfe des Elements xsl:copy. Es kann innerhalb von Templates verwendet werden und veranlasst, dass der aktuelle Knoten bzw. das aktuelle Element in das Resultat kopiert wird. Ein eventueller Namespace wird dabei übernommen – jedoch keine Attribute oder Unterelemente. Außerdem steht wiederum das bereits bekannte Attribut use-attribute-sets zur Verfügung. Beispiel:

      <xsl:template
match="B">
 a
 <xsl:copy> b </xsl:copy>
 c

</xsl:template>

… erzeugt:

      a
 <B> b
</B>
 c

Bitte beachten Sie, dass dieses Element nur auf Element-Knoten angewandt werden darf. Außerdem besteht eine zweite Möglichkeit des Kopierens: xsl:copy-of. Dieses Element kopiert – im Gegensatz zu xsl:copy – den gesamten mit select definierten Knoten inklusive Unterknoten aus dem Quell-Dokument in das Resultat-Dokument.

Nummerierungen erzeugen
Nummerierungen können etwa bei Überschriften, Kapitel-Bezeichnungen oder einfach Listen zur Anwendung kommen. Man definiert sie mit dem Element xsl:number. Es hat folgende Attribute:

  1. level – Beschreibt, ob die Aufzählung nur auf einer (single/Standard), mehreren (multiple) oder allen (any) Zweigen des Quell-Baumes fortgeführt werden soll.
  2. count – Beschreibt einen Pattern (siehe oben), bei dessen Auftreten der Zählwert erhöht werden soll. Standard ist der Pattern des Templates.
  3. from – Beschreibt Patterns, bei deren Auftreten der Zähler beginnen soll (~zurücksetzen). Als Standard gilt jedes Elternelement.
  4. value – Funktion oder XPath-Ausdruck, der die Berechnung des Zählerstandes erlaubt. Standard ist position().
  5. format – String, der das Format der Ausgabe beschreibt (1, a, A, i, I). Alle anderen Zeichen werden als Zusatz angesehen.
  6. lang – Beschreibt eine Sprache, aus deren Alphabet die Zeichen verwendet werden sollen.
  7. letter-value – Beschreibt, ob die alphabetische (alphabetic) oder traditionelle (traditional/Standard) Zählweise verwendet werden soll.
  8. grouping-separator – Trennzeichen für Gruppierungen (wie z.B. bei 1.000.000).
  9. grouping-size – Beschreibt die Größe der Gruppierungen.

Ein Beispiel:

      <xsl:template match="H4">

<xsl:number level="any" from="H1" count="H2"/>

<xsl:text>.</xsl:text>
 <xsl:number level="any" from="H2"
count="H3"/>
 <xsl:text>.</xsl:text>
 <xsl:number
level="any" from="H3" count="H4"/>
 <xsl:text>
</xsl:text>
 <xsl:apply-templates/>
 </xsl:template>

Wiederholungen
Unter Umständen ist es notwendig, bestimmte Abläufe oder Knoten innerhalb eines Templates in einer gewissen Reihenfolge durchlaufen zu lassen. Dazu verwendet man das Element

      xsl:for-each

Quellbeispiel:

      <?xml version="1.0"
?>
 <?xml-stylesheet href="test1.xsl" type="text/xsl"
?>
      <!DOCTYPE A [
 <!ELEMENT A ( B )*>
 <!ELEMENT
B ( C | B )*>
 <!ELEMENT C EMPTY>
 ]>
      <A>

<B><C /><C /><C /></B>
 <B><C /><C
/><C /><C /></B>
 </A>

Style Sheet:

      <xsl:stylesheet
version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <table>
 <xsl:for-each
select="A/B">
 <tr>
 <th><xsl:apply-templates
select="."/></th>
 <xsl:for-each select="C">

<td><xsl:apply-templates select="."/></td>
 </xsl:for-each>

</tr>
 </xsl:for-each>
 </table>
 </xsl:template>

<xsl:template match="B">TH</xsl:template>
 <xsl:template
match="C">TD</xsl:template>
 </xsl:stylesheet>

… ergibt:

Verzweigung einer HTML-Datei

Das Resultat der Transformierung

Bedingte Abschnitte
Innerhalb von XSLT gibt es die Möglichkeit, Transformationen nur dann auszuführen, wenn eine bestimte Bedingung erfüllt ist. Dazu wird das Element

      xsl:if
      test
      true

Beispiel:

      <xsl:template match="A">
 <xsl:if
test="position() mod 2 = 0">
 <p>1</p>
 </xsl:if>

<xsl:if test="position() mod 2 = 1">
 <p>2</p>

</xsl:if>
 </xsl:template>

… ergibt:

      12121212...

Eine Auswahl treffen
Wenn die Auswahl durch xsl:if nicht mehr ausreicht bzw. zu umständlich wird, kann dieses Element durch (drei) andere Elemente ersetzt werden: xsl:choose, xsl:when und xsl:otherwise. Ähnlich wie in anderen Programmiersprachen wird so eine Mehrfachauswahl definiert. Die gesamte Auswahl wird von xsl:choose umschlossen. Darin enthalten sind xsl:when und xsl:otherwise. Das Element xsl:when beschreibt mit Hilfe des test-Attributes eine Bedingung. Ist diese erfüllt, wird der Inhalt des Elementes in den Resultat-Baum übernommen – die anderen Bedingungen werden nicht weiter betrachtet, der Parser schreitet mit dem nächsten Knoten nach dem schließenden xsl:choose-Tag fort. Ist die Bedingung nicht erfüllt, schreitet der Parser zum nächsten xsl:when weiter und prüft diese. Wurde auch die letzte Bedingung nicht erfüllt, wird letztlich der Inhalt des xsl:otherwise-Elements übernommen. Beispiel:

      <xsl:template match="C">
 <xsl:choose>
 <xsl:when
test="position() mod 3 = 0"><p>0</p></xsl:when>

<xsl:when test="position() mod 3 = 1"><p>1</p></xsl:when>

<xsl:otherwise><p>2</p></xsl:otherwise>
 </xsl:choose>

</xsl:template>

… ergibt: 120120120120…

Sortieren
Die Reihenfolge von Daten ist besonders bei langen unübersichtlichen Listen sehr wichtig. Das Sortieren der Daten kann mit XSLT bestimmt und beeinflusst werden. Wird das Element

      xsl:sort
      select, data-type,
lang, order
      case-order
  1. select

    – enthält einen Pattern (Standard ist …), der beschreibt, welche Knoten sortiert werden sollen.

  2. lang

    – enthält eine Sprachdefinition (de, en, …) die zur Sortierung verwendet werden soll.

  3. data-type

    – beschreibt, ob die zu sortierenden Knoten wie Strings (text/Standard), Zahlen (number) oder andere Datentypen (Angabe des Datentypes nach XML-Names) sortiert werden sollen.

  4. order

    – beschreibt, ob die Daten aufsteigend (ascending/Standard) oder absteigend (descending) sortiert werden soll.

  5. case-order 

    – beschreibt, ob bei data-type=“text“ die kleinen (upper-first) oder die großen Buchstaben (lower-first) als erstes einsortiert werden sollen. (Also ob a,b,c,A,B,C oder A,B,C,a,b,c)

Als Beispiel wollen wir unser Adressbuch aus dem ersten Kapitel nach Namen sortiert ausgeben lassen. Wir fügen dem Buch allerdings noch einige Personen hinzu:

      <?xml version="1.0" ?>
 <?xml-stylesheet
href="trans.xsl" type="text/xsl"?>
 <Adressbuch>

<Kunde Name="Max Mustermann">
 <Adresse>
 <Strasse>Musterstrasse
14</Strasse>
 <PLZ>12345</PLZ><Ort>Mustehausen</Ort>

</Adresse>
 </Kunde>
 <Kunde Name="August Ausgedacht">

<Adresse>
 <Strasse>Gibts-Nicht-Weg 37</Strasse>
 <PLZ>67890</PLZ><Ort>Augsburg</Ort>

</Adresse>
 </Kunde>
 
      <Kunde Name="Gunter
Gibtsnicht">
 <Adresse>
 <Strasse>Hauptstrasse 001</Strasse>

<PLZ>65381</PLZ><Ort>Berlin</Ort>
 </Adresse>

</Kunde>
 <Kunde Name="Jutta Jefferson">
 <Adresse>

<Strasse>Bahnhofsweg 123</Strasse>
 <PLZ>86413</PLZ><Ort>Hamburg</Ort>

</Adresse>
 </Kunde>
      </Adressbuch>

Als Style Sheet benutzen wir:

      <?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">
 <h1>Kunden</h1>
 <table>

<tr><th>Kunde</th><td>Strasse</td><td>PLZ
Ort</td></tr>
 <xsl:for-each select="Adressbuch/Kunde">

<xsl:sort select="@Name"/>
 <tr>
 <th><xsl:value-of
select="@Name"/></th>
 <td><xsl:value-of select="Adresse/Strasse"
/></td>
 <td>
 <xsl:value-of select="Adresse/PLZ"
/>
 <xsl:text> </xsl:text>
 <xsl:value-of select="Adresse/Ort
"/>
 </td>
 </tr>
 </xsl:for-each>
 </table>

</xsl:template>
 </xsl:stylesheet>
      

      
Verzweigung einer HTML-Datei
Resultat der Transformierung

Bitte beachten Sie, das dieses Element nur innerhalb von

      xsl:apply-templates
      xsl:for-each

Variablen und Parameter
Wenn innerhalb des gesamten Dokumentes ein bestimmter Text immer wieder auftritt oder es Schwierigkeiten mit dem Erstellen von Attributen gibt (weil acb=“def=“““ einen Fehler ergibt), können Variablen zum Einsatz kommen. Diese definiert man mit Hilfe des xsl:variable- oder xsl:param-Elements. Beide funktionieren in etwa gleich: Als Wert des name-Attributes wird der Variablenname definiert und innerhalb des Elements der Wert. Dieser kann aus fast allen beliebigen Dingen bestehen (Text, Markup, …).

Einziger Unterschied der beiden ist, dass der Wert von xsl:param als Standardwert gilt; wenn das Template oder Style Sheet, in dem das xsl:param-Element auftritt, aufgerufen wird, können die Parameter (xsl:param) als Standardwerte verwendet werden (siehe unten). Um die Werte nun wiederum abzurufen, wird xsl:value-of (bzw. { und }) benutzt und diesem ein Dollar-Zeichen ($) sowie der Variablenname übergeben. Beispiel:

      <xsl:variable
name="wert">@Name="Max Mustermann"</xsl:variable>

<xsl:value-of select="Adressbuch/Kunde[$wert]"/>

… gibt den Inhalt des Kunden mit dem Namen „Max Mustermann“ aus.

Bitte beachten Sie die Lebensdauer von Variablen: Eine Variable besteht nur innerhalb eines Templates oder Style Sheets. Wird innerhalb eines untergeordneten Templates ein neuer Wert für die Variable definiert, so überschreibt dies nicht die eigentliche Variable. Ist der Bereich des neuen Wertes zu Ende, tritt der vorherige wieder in Kraft. Bitte beachten Sie ausserdem, dass Variablen (xsl:variable) entweder als Top-Level Element oder innerhalb eines Templates definiert werden können – Parameter (xsl:param) dagegen können nur als Top-Level Elemente gelten.

Um Parameter innerhalb eines Templates verwenden zu können, müssen diese an das jeweilige Template übergeben werden. Dies geschieht mittels des Elements xsl:with-param, welches als Attribut den Namen des Parameters erhält. Wird es aufgerufen, so übergibt es den Wert des Parameters an die gleichnamige Variable.

Behandlung von Whitespaces
Neben der normalen Behandlung von Whitespaces durch XML kann diese für den XSL-Parser nochmals konkret festgeschrieben werden. Dies kann durch zwei Elemente geschehen: xsl:strip-space und xsl:preserve-space. Beide Elemente erhalten dazu das Attribut elements, welches als Wert eine durch Leerzeichen getrennte Liste von Elementnamen enthält. Bei allen Elementen, die so mit dem Element xsl:strip-space ausgezeichnet werden, werden die Whitespaces zusammengefasst (wie in XML beschrieben). Bei allen Elementen, die durch xsl:preserve-space definiert werden, bleiben die Whitespaces erhalten. Grundsätzlich brauchen Elemente nicht extra mit xsl:strip-space definiert werden – sollen jedoch bei Elementen, die sich innerhalb eines mit xsl:preserve-space beschriebenen Elements befinden, die Whitespaces gekürzt werden, sollte dies hier definiert werden.

Beispiel:

      <?xml version="1.0"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- import/include -->
 <xsl:strip-space elements="Adressbuch
Strasse">
 <xsl:preserve-space elements="Person">

<!-- sonstiges -->
 </xsl:stylesheet>

Bitte beachten Sie, dass beide Top-Level Elemente sind und möglichst vor Templates definiert werden sollten. Außerdem kann anstelle einer Liste der Joker (*) definiert werden. Er besagt, dass alle Elemente einbezogen werden.

Darüber hinaus besteht eine dritte Möglichkeit, um Text so übernehmen zu lassen, wie er notiert wurde. Alle Notierungen innerhalb eines xsl:text-Elements werden auch in das resultierende Dokument übernommen (inklusive aller Whitespaces).

Beispiel:

      <xsl:text>
 Dieser Text
 wird genau so

auch im Resultat
 erscheinen!
 </xsl:text>

XSL-Software
Neben dem Mozilla Browser gibt es einige – meist serverseitige – Tools, mit denen Sie XML-Dateien transformieren können. Dazu gehören unter anderem Cocoon, Xalan oder Sun’s JAXP:

Cocoon (XSLT Server Plugin)
Xalan (Java XSLT Parser)
JAXP (JavaTM API for XML Processing)

Kategorien
Webdesign

Was zum Teufel ist eine (XML) – DTD?

von Manfred Gerads

Es soll Webdesigner mit langjähriger Berufserfahrung geben, die die obige Frage ins Stutzen bringt und die dann sagen: DTD? Kommt mir bekannt vor, aber…

Nicht ganz unverständlich: Abgesehen vom Verweis auf die jeweilige HTML – DTD in der Kopfzeile jedes HTML – Dokuments hat man mit DTDs nichts zu tun, da sie bereits im Browser integriert sind! Damit ist die Arbeit in HTML bereits getan, aber auch die (Gestaltungs-) Freiheit hört hier auf. In XML ist alles ganz anders …

XML erlaubt zwar eine Verknüpfung mit einer (oder mehreren) DTDs (Document Type Definition), erzwingt sie aber im Gegensatz zu HTML nicht. Man spricht von wohlgeformten XML – Dokumenten, wenn diese lediglich den Syntax-Regeln von XML entsprechen: Die Erfüllung dieses Kriteriums wird z.B. bereits von XHTML – Dokumenten erwartet.

DTDs kommen ins Spiel, sobald es darum geht, gültige XML – Dokumente zu erstellen. Diese müssen zum einen wohlgeformt sein, zum anderen den in der zugehörigen DTD formulierten Regeln entsprechen.

Welcher Art sind nun diese Regeln?
Stellen Sie sich eine simple Adress-Datenbank vor (nebenbei gesagt ist das direkte Zusammenspiel zwischen XML – Dokumenten und Datenbanken eines der zentralen Anwendungsfelder für XML). Die Aufgabe der DTD bestünde in diesem Zusammenhang darin, die Struktur dieser Datenbank widerzuspiegeln oder zu imitieren mit dem Ziel, die einzelnen XML-Dokumente sowohl für Computer als auch für Menschen lesbar und handhabbar zu machen. Da XML erlaubt, Tags (Elemente) dem eigenen Bedarf entsprechend zu ‚erfinden‘, kann jede beliebige Datenbank in Form einer XML-DTD wiedergegeben werden. Die Namen der Felder der Datenbank (Name, Vorname, Straße, Ort usw.) tauchen in der DTD als Elementnamen wieder auf.

Datenbanken bestehen bekanntlich in der Hauptsache aus Tabellen, und diese wiederum aus Datensätzen und deren Feldern. Beim Entwurf einer Datenbank muss die Beziehung dieser Bestandteile zueinander genau definiert werden: Welche Datensätze gehören in welche Tabellen, welche Felder kommen in welche Datensätze und welcherart sind die Beziehungen der Tabellen untereinander. Die Antworten auf diese einfachen, aber nicht immer leicht zu entscheidenden Fragen werden in einer DTD in Form von Elementdeklarationen und Attributdeklarationen formuliert.

In den Elementdeklarationen wird für jedes Element festgelegt

  1. welchen Namen das Element haben soll
  2. welche Stellung es innerhalb der Hierarchie aller Elemente haben soll (gleich-, über- oder untergeordnet)
  3. die Häufigkeit, mit der das Element auftreten kann oder soll

In den Attributdeklarationen wird u.a. festgelegt

  1. welche Attribute ein gegebenes Element haben soll
  2. zu welchem Typ das Attribut gehört
  3. ob das jeweilige Attribut einen Default-Wert haben soll
  4. ob das Attribut nur einen Wert aus einer begrenzten Zahl von Werten haben kann.

Wenn die DTD mit Sorgfalt geschrieben wurde, erleichtern die durch sie geregelten XML – Dokumente sowohl Computern als auch Menschen die Arbeit. Abgesehen von der Strukturierung durch die DTD haben ja die Elementnamen in XML (im Gegensatz zu HTML) Bedeutung (<vorname>, <nachname>, <telefon> usw.): Den Menschen wird hierdurch Handhabung und Pflege der Dateien erleichtert und andere Anwendungen können auf den Inhalt der einzelnen Elemente zugreifen. Ein in CSS oder XSL geschriebenes Stylesheet sorgt dann für die gewünschte Darstellung auf dem Bildschirm.

Kategorien
Webdesign

Wie schreibt man eine XML – DTD?

von Manfred Gerads

Man nehme einen beliebigen Texteditor, vergewissere sich kurz, ob man die (nicht allzu komplizierten) Syntax-Regeln zum Schreiben einer DTD noch im Kopf hat, und mache sich an die Arbeit.

Diese Vorstellung ist durchaus realistisch, immer vorausgesetzt, die Kollegen von der Abteilung ‚Datenaufbereitung‘ haben ihre Arbeit schon getan: Das Erstellen einer DTD steht in der Regel erst am Ende einer Vorarbeit, die wesentlich umfangreicher und komplexer sein kann. Aber immer der Reihe nach…

Zuerst muß ein sogenanntes Inhaltsmodell erstellt werden. Auf der Grundlage dieses Inhaltsmodells wird dann die DTD geschrieben, sie ist sozusagen der ‚technische Ausdruck‘ dieses Modells.

Da die Erstellung von komplexen Inhaltsmodellen ein Kapitel für sich ist, gehen wir hier der Einfachheit halber von einer bestehenden Datenbank namens ‚Adressen‘ aus (Datenbankstrukturen sind nichts anderes als Inhaltsmodelle). Die folgende XML-Datei spiegelt einen Datensatz dieser Datenbank wider. Da das XML-Dokument nicht nur wohlgeformt, sondern auch gültig sein soll, muß eine DTD her. In unserem Beispiel integrieren wir diese DTD in das XML-Dokument, obwohl auch der Verweis auf eine externe Datei (adressen.dtd in unserem Fall) möglich wäre: diese Alternativen kennen Webdesigner ja bereits von CSS und JavaScript.

LISTING:

1: <?xml version=“1.0″ encoding=“UTF-8″?>
2: <!DOCTYPE adresse [
3: <!ELEMENT adresse (nummer, vorname, nachname, rufname?, anrede,
4: telefon+, fax*, postleitzahl, strasse, hausnummer, ort)>
5: <!ELEMENT nummer (#PCDATA)>
6: <!ELEMENT vorname (#PCDATA)>
7: <!ELEMENT nachname (#PCDATA)>
8: <!ELEMENT rufname (#PCDATA)>
9: <!ELEMENT anrede (#PCDATA)>
10: <!ELEMENT telefon (#PCDATA)>
11: <!ATTLIST telefon typ CDATA #REQUIRED>
12: <!ELEMENT fax (#PCDATA)>
13: <!ELEMENT postleitzahl (#PCDATA)>
14: <!ELEMENT strasse (#PCDATA)>
15: <!ELEMENT hausnummer (#PCDATA)>
16: <!ELEMENT ort (#PCDATA)>
17: ]>
18:
19: <adresse>
20: <nummer>253</nummer>
21: <vorname>Susanne</vorname>
22: <nachname>Liesemanns</nachname>
23: <rufname>Susi</rufname>
24: <anrede>Frau</anrede>
25: <telefon typ=“privat“>0228 / 64 28 93</telefon>
26: <fax>0228 / 64 28 94</fax>
27: <postleitzahl>53123</postleitzahl>
28: <strasse>Bahnhofstrasse</strasse>
29: <hausnummer>57</hausnummer>
30: <ort>Bonn</ort>
31: </adresse>

KOMMENTAR:

Zeile 2-17: Die Document Type Definition (DTD), hier als interne DTD-Untermenge.

Zeile 18-31: Das eigentliche XML-Dokument, das einen Datensatz aus der Datenbank ‚Adressen‘ enthält.

Zeile 2: Die DTD wird eingeleitet von ‚<!DOCTYPE‘ und dem Namen des Wurzelelements (demjenigen Element, in dem alle anderen Elemente eines XML-Dokuments enthalten sind).

Zeile 3: Hier wird das Wurzelelement ‚adresse‘ deklariert. Im XML-Dokument müssen die im Wurzelelement enthaltenen Elemente in der gleichen Reihenfolge erscheinen, die in der Deklaration (durch die Kommas) festgelegt ist.
Neben der Reihenfolge der Elemente wird in Elementtypdeklarationen jedoch auch ihre Häufigkeit festgelegt. Im einzelnen: Das Element ‚rufname‘ (rufname?) kann nullmal oder einmal auftreten (nicht immer ist der Rufname bekannt, und man hat nur einen Rufnamen). Das Element ‚telefon‘ (telefon+) kann einmal oder mehrmals auftreten (es werden nur Personen mit mindestens einem Telefonanschluß in die Datenbank aufgenommen, viele haben jedoch mehr als einen Anschluß). Das Element ‚fax‘ (fax*) schließlich kann nullmal oder mehrmals auftreten.

Zeile 5-10: Elementtypdeklarationen. Nachdem in der Deklaration des Wurzelelements die Reihenfolge und Häufigkeit der anderen Elemente bestimmt wurde, müssen diese Elemente jetzt noch einzeln deklariert werden. Das Schlüsselwort ‚#PCDATA‘ (Parsed Character Data) gibt an, dass der Inhalt des Elements aus Zeichendaten (Text) bestehen kann.

Zeile 11: Eine Attributliste – Deklaration des Elements ‚telefon‘. Soll einem Element in einem XML – Dokument ein Attribut zugeordnet werden, muss auch dies in der DTD deklariert werden. ‚CDATA‘ gibt hierbei den Attributtyp an: Attribute dieses Typs können beliebige Zeichenfolgen als Wert enthalten. Fehlt in einem mit dieser DTD verknüpften XML-Dokument schließlich ein Attributwert für ‚typ‘, gilt das Dokument als ungültig, da es die durch das Schlüsselwort ‚#REQUIRED‘ angegebene Bedingung nicht erfüllt.

Zeile 12 – 16: Die restlichen Elementtypdeklarationen.

Die Zeilen 19 – 31 sind der eigentliche Inhalt des XML – Dokuments.

Kategorien
Webdesign

XML Einführung

Die von Jochen Stärk geschriebene Einführung können Sie hier downloaden. Es handelt sich um eine 11-seitige Arbeit unter der GNU Free Documentation License. Das heißt, Sie können diese Anleitung selbst auf Ihren Seiten zum Download anbieten – solange sie unverändert bleibt.

01 Vorwort
02 Quickstart
03 Grundkenntnisse
04 XHTML
05 Einstieg in XSLT
06 XSLT für Fortgeschrittene
07 XSLT für Profis
08 DTDs
09 Schemata
10 Anhang A: GNU Free Documentation License
11 Anhang B: Kurzreferenz

Download 296 Kilobyte im ZIP-Format

Kategorien
Design HTML/CSS

Aurales Webdesign mit CSS

von Jan Winkler

Die Mehrheit aller Webworker setzt Cascading Style Sheets zur Textgestaltung oder zur Anordnung von Objekten ein. Aber CSS könnte noch viel mehr: nämlich Webseiten für Sprachbrowser attraktiv machen.

Sprachgestaltung

Ebenso wie normaler Text mittels Farbe, Schriftart oder -größe gestaltet werden kann, ist es mit CSS auch möglich, eben diesen Text für die Ausgabe in einem Sprach-Browser attraktiver zu machen. Dies kann beispielsweise durch unterschiedliche Stimmen bei einem Gesprächstext oder spezifischere Betonungsmechanismen bei einer Erzählung geschehen.

Gestaltung von Stimmen
Um die Lesestimme zu verändern (hohoho) stehen gleich mehrere CSS-Eigenschaften zur Verfügung. Hierzu zählen pitch (Stimmenlage), pitch-range (Stimmbereich), richness (Helligkeit), speech-rate (Sprechgeschwindigkeit), stress (Betonung) und voice-family (Klang). Um nun beispielsweise einen Gesprächstext für den Zuhörer akustisch etwas aufzupeppen, wäre es denkbar, mit diesen Eigenschaften zwei Charaktere zu erstellen. Ein Beispiel:

 <style>

.anton
 { voice-family:male; richness:75;
 pitch:low; speech-rate:slow;
}
      .monika
 { voice-family:female; richness:35;
 pitch:medium;
speech-rate:medium; }
      .betonung
 { stress:75; speak:spell-out;
}
 </style>
 ...
      <p>Es ist ein schöner
Tag: Die Vögel zwitschern
 und der Bach plätschert ruhig vor sich
hin ...</p>
 <p class="anton">Hallo Monika.</p>

<p class="monika">Hallo, wie gehts?</p>
 <p class="anton">Danke,
gut, ich komme gerade aus dem HTZUF.</p>
 <p class="monika">Woher
kommst du?</p>
 <p class="anton">Na, aus dem <span
class="betonung">HTZUF</span>.</p> ...

Wie im Beispiel gezeigt empfiehlt es sich manchmal, auch nur bestimmte Worte oder Wortgruppen mit eigenen Sprachdefinitionen zu versehen. Hier wird durch die speak-Eigenschaft beschrieben, dass bei Elementen der Klasse betonung alle Buchstaben einzeln ausgesprochen werden sollen. So wird erreicht, dass der so definierte Text, also extrem deutlich artikuliert wird, wodurch das Akronym erst richtig zur Geltung kommt.

Pausen
Neben verschiedenen Stimmen bieten sich auch Pausen oder verschiedene Geschwindigkeiten zur auralen Gestaltung von Texten an. Die Eigenschaften pause (Pausendefinition), pause-after (Pause nach dem Element), pause-before (Pause vor dem Element) und speech-rate (Sprechgeschwindigkeit) finden hier besonderen Anklang. Bei den drei pause-Eigenschaften sollte der Wert nicht zu hoch gewählt werden, da der Sprachfluss sonst unnötig gestört werden könnte. Pausen bieten sich auch bei Aufzählungen, Absätzen oder Überschriften an. Beispiel:

      H1
{ pause-before: 1500ms; pause-after: 1000ms; }
 P { pause-before: 500ms; pause-after:
500ms; }
 ACRONYM { pause:500ms; speak:spell-out; }

Effekte
Unter Umständen lohnt es sich auch, gewisse Effekte in den Text einzubauen. So könnte bei steigender Spannung die Sprechgeschwindigkeit (speech-rate) erhöht und bestimmte Wörter könnten akustisch mit Hintergrundmusik (play-during) hinterlegt werden, um die Aussagekraft zu verstärken (bumm, platsch, schepper, klirr …) oder der Klang kommt aus verschiedenen Richtungen (azimuth [horizontal] / elevation [vertikal]) um eine Distanz zwischen zwei Stimmen zu verdeutlichen. Viele weitere Möglichkeiten ergeben sich. Beispiel:

      <style>

.erzaehler
 { elevation: lower; }
      .anton
 { voice-family:male;
azimuth:left; }
      .monika
 { voice-family:female; azimuth:right-side;
}
      .wasser
 { play-during: url('wasser.wav') mix repeat;
}
 </style>
      ...
      <p class="erzaehler">Es
ist ein schöner Tag:
 Die Vögel zwitschern und <span class="wasser">der
Bach plätschert
 ruhig vor sich hin ...</span></p>
 <p
class="anton">Hallo Monika.</p>
 <p class="monika">Hallo,
wie gehts?</p> ...

Spezifische Sprache
Bei einigen Elementen – wie beispielsweise Tabellen – bietet es sich an, den normalen Textfluss durch CSS-Eigenschaften etwas abzuändern, damit der Zuhörer dem Kontext leichter folgen kann. Dazu gibt es speziell für Tabellen eine Eigenschaft die es erlaubt, das Lesen von Tabellen zu kontrollieren: Die speak-header-Eigenschaft. Sie beschreibt, wann und wie oft Tabellenüberschriften (besser gesagt Spaltenüberschriften) gelesen werden sollen. Die Werte once (einmalig) und always (jedes Mal) beschreiben dabei, ob die Überschrift vor jeder Zelle (jedes Mal) oder nur vor jeder Spalte (einmalig) vorgelesen werden sollen. Je nach Größe und Umfang der Tabelle ist die eine oder andere Variante zu empfehlen. Beispiel:

      <table>

<thead>
 <tr>
 <th id="LM">Ware</th><th>Preis</th><th>Anzahl</th>

</tr>
 </thead>
 <tr>
 <th headder="LM">Brot</th>

<td>2,50 EUR</td><td>1</td>
 </tr>
 <tr>

<th headder="LM">Milch</th>
 <td>1,40 EUR</td><td>3</td>

</tr>
 </table>

Mit der Definition

      TABLE {speak-header:always;}

Mit der Definition

      TABLE {speak-header:once;}

Kategorien
Design HTML/CSS

Gepunktete Rahmen

Auch das Webdesign unterliegt modischen Strömungen. Mit erweiterten Standards und neuen Browsern ändert sich auch das Aussehen der Websites.

Zunehmend häufiger zu finden sind gestrichelte Linien, sie ersetzen die die bekannten, dicken Tabellenlinien und da man sie bequem und einfach mit CSS erzeugen kann, braucht man keine Grafiken mehr.

Der Quellcode ist einfach, mit Containern statt mit Tabellen klappt es natürlich genauso.

Inhalt
 <table
style="border : dotted 2px black;" 
width="200" border="0"><tr><td>Inhalt</td>
</tr></table>

Zu sehen sind sie zwar nur mit modernen Browsern, aber das ist nicht weiter schlimm, da sie ja die Funktionalität nicht einschränken. Wählt man anders als im Beispiel oben eine Breite von nur einem 1px, zeigen Mozilla/Netscape/Opera und der IE ein anderes Bild. Microsofts Produkt zaubert gestrichelte Linien auf den Monitor, hässlich ist aber auch das nicht.

Kategorien
Design HTML/CSS

Elegante Zwischenüberschrift

Wenig Arbeit, aber große Wirkung. Diese Überschriften beziehen ihre Wirkung aus der doppelten Unterstreichung. Sachlich, aber elegant eignen sie sich besonders gut für geschäftliche Auftritte.

Demo im neuen Fenster.

Screenshot
Elegante Zwischenüberschriften

Beispiel 1 verwendet eine linksbündige Ausrichtung, Beispiel 2 tut dasselbe nach Rechts. Klappen sollte das mit allen CSS-fähigen Browsern.

 <h3 style="text-align:
left; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 0px"><span style="font-family:
Verdana, sans-serif; font-size: .8em; border-bottom: 3px solid black;">Betonte
Überschrift</span></h3>
      <p
style="border-top: 1px solid black; padding-top: .8em; padding-top: 0; margin-top:
0;font-size: 1em;"> 
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Das H3-Element ist nicht zwingend nötig, doch mit ihm bleibt die logische Struktur erhalten. Um den erhöhten Platzbedarf der H3-Überschrift auszugleichen, wurden „margin“ und „padding“ hinzugefügt.

Kategorien
Webdesign

Tabellenzellen mit Rollbalken

Die Beispieltabelle unten links bringt es auf drei Zellen. Ungewöhnlich allein ist die Mittlere. Sie verfügt über einen eigenen Rollbalken.

Möglich wird das durch das CSS Element „overflow : auto“. Reicht der Platz nicht mehr aus, um den Inhalt komplett darzustellen, wird dieser nicht etwa abgeschnitten, sondern ein Rollbalken aus dem Fundus hervorgezaubert. Und das ganz ohne Frames oder sonstige Tricks.

Zelle
Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder? Dies ist der Seiteninhalt, toll oder?
Zelle
 <table
border="1" cellspacing="0" cellpadding="4"><tr
bgcolor="#FFFF00"><td>Zelle</td></tr>
<tr
bgcolor="#CCCCCC"><td style="width: 100px; height: 100px;">
<div
style="width: 100%; height: 100%; overflow : auto;">Inhalt</div></td></tr><tr
bgcolor="#FFFF00"><td>Zelle</td></tr></table>

Die Codierung ist etwas schwerfällig. Der Text muss in ein <div> Element eingebettet werden. Dieses erhält ebenso wie die Tabelle, in die es zu liegen kommt, eine Breite und eine Höhe von 100 %. Mehr ist nicht notwendig.

Allerdings muss man auf die umgebenden Zellen achten und gegebenenfalls auch hier eingreifen. Ältere Browser mögen diese Technik nicht und sind überfordert, sie neigen dazu, ein Durcheinander anzuzeigen.

Kategorien
Design HTML/CSS

Mehr Orientierung in Datentabellen

Je größer sie ausfallen, desto schwerer fällt es dem Auge die Zeile zu halten. Da hilft nur noch der Zeigefinger. Oder ein spezielles Tabellendesign.

Berührt die Maus eine Zelle, verändert sich der Rahmen, er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=“8″).

Screenshot
Die Maus berührt eine Tabellenzelle

Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seinen Standard-Optik zurück (cursor : default), denn der Scheinlink selbst soll dem Besucher verborgen bleiben.

 <a href="#">Tabelleninhalt</a>

Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht’s schicker aus und der Zeigefinger darf ruhig bleiben. Nie mehr verschmierte Monitore. Hier geht’s zur Live Demo.

Der CSS Quellcode für den Dateikopf

      A:link {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      
A:visited {
 color : black;
 text-decoration: none;
 background-color
: transparent;
 border : 1px solid gray;
 padding : 4px; 
 cursor : default}
      A:hover
{
 color: black;
 text-decoration: none;
 background-color : transparent;

border : 1px solid red; 
 padding : 4px;
 cursor : default} 

Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.

Kategorien
Design HTML/CSS

Unsichtbare Links

Eine nicht eben sinnvolle Anwendung, denn für gewöhnlich wünscht man sich, dass Hyperlinks angeklickt werden. Wer es gern einmal andersherum probieren möchte oder geheime Zugänge anbieten will, könnte es mit diesem Trick versuchen.

Links verraten sich auf mehrere Weise. Durch die Farbe, die Unterstreichung, den Mauszeiger und durch einen Hinweis in der Statuszeile des Browsers. All das lässt sich abschalten, bzw. verbergen.

 <a
href="link.html" style="cursor:text; 
text-decoration : none;

color : black;" onMouseOver="status=''; return true;">
Link</a>

cursor : text zeigt einen Cursor wie normaler Text, color : black passt den Link der Textfarbe an (in diesem Falle schwarz), text-decoration : none schaltet die Unterstreichung ab und onMouseOver= unterbindet die verräterische Zielanzeige in der Statuszeile.

Versuchen Sie es einmal auf dieser Demoseite. Was man damit in der Praxis anfangen kann, steht auf einem anderen Blatt. Alte Browser zeigen einen Standardlink.

Kategorien
Design HTML/CSS

Doppelte Unterstreichung in Variation

Weder HTML noch CSS kennen die direkte doppelte Unterstreichung. Einen Befehl dafür gibt es jedenfalls nicht. Mit Umwegen kommen wir dennoch ans Ziel.

style=“border-bottom : double

wäre eine der Möglichkeiten.

Das klappt erstaunlicherweise auch in Farbe, indem man den Farbnamen, resp. die entsprechende Codierung dahintersetzt.

style=“border-bottom : double red

Nicht übel, doch noch nicht ganz im Sinne unsere Artikels. Doppelt hält auch bei Unterstreichungen besser. Wer mehr möchte, muss mehr Befehle einsetzen:

style=“text-decoration : text-decoration : underline; border-bottom : 1px solid red“

Damit sorgen wir für eine gewöhnliche Unterstreichung in der Farbe des Textes. Dazu kommt die untere Rahmenlinie (border-bottom), die wir auch in anderen Farben darstellen können, ohne das der eigentliche Text davon berührt wird.

Die dynamische Variante:

Ein Link, der nicht nur bei Mausberührung seine Farbe wechselt (Hover) sondern dessen Unterstreichung ebenfalls eine Variation, nämlich eine Verdoppelung erfährt.

 <style type="text/css">

 <!-- 
 a:visited{TEXT-DECORATION: underline; color : black;} 
 a:hover
{TEXT-DECORATION: underline; color : blue; border-bottom : 1px solid red; } 
      //-->

 </style>

Kategorien
Design HTML/CSS

Villa Kunterbunt

Farbmonitore wurden erfunden, damit man bunte Seiten ansehen kann. Wer will, kann auch Hyperlinks in allen Farben erglühen lassen. Das Interessante: Jeder Link „hovert“ in seinen eigenen Farben. Das nennt man dann nicht einfach bunt, sondern kunterbunt.

Dazu werden Style-Befehle benötigt, die Farben und Links miteinander verbinden. Die lassen sich in den Dateikopf schreiben oder als externes Stylesheet einbinden.

 <style>

A.blue:link { color: blue ; text-decoration:underline; }
 A.blue:visited {
color:blue; text-decoration:underline; }
 A.blue:active { color: red; text-decoration:underline;
}
 A.blue:hover { color: magenta; text-decoration:underline; }
      A.green:link
{ color: green ; text-decoration:underline; }
 A.green:visited { color:green;
text-decoration:underline; }
 A.green:active { color: red; text-decoration:underline;
}
 A.green:hover { color: red; text-decoration:underline; }
 </style>

Nach dieser Definition werden in die Links entsprechende Klassen eingefügt:

      <a
class="blue" href="#">Navigation</a><br>

<a class="green" href="#">Hyperlink</a><br>

Die Online Demo zeigt, was dabei herauskommt. Der eigenen Kreativität sind hier keine Grenzen gesetzt. Denkbar ist beispielsweise, allen Links, die zu einer Gruppe gehören, gleiche Farben – und unterschiedlichen Gruppen jeweils andere Farben zuzuweisen.

Kategorien
Design HTML/CSS

URLs im Ausdruck

Dietmar Rabich

Links können angeklickt werden und die neue Seite erscheint. Druckt man allerdings eine Seite aus, gehen Informationen verloren.

So unter anderem die URL, die hinter einem Link steht, denn diese ist normalerweise nicht sichtbar. Ein klein wenig CSS schafft Abhilfe:

 @media print
 {
 a[href]:after

{
 content: \' [\' attr(href) \']\';
 }
 }

Die Anweisung sorgt dafür, dass die URL, die hinter einem Link steht, auf der gedruckten Seite erscheint. Bei der normalen Darstellung im Browser ist davon nichts zu merken.

Mit ein wenig CSS3, dem zukünftigen Nachfolger von CSS2, kann die Sache noch ein wenig spezialisiert werden:

      @media print
 {
 a[href^=\"http://\"]:after,

a[href^=\"ftp://\"]:after
 {
 content: \' [\' attr(href) \']\';

}
 }

Um die Technik nutzen zu können, muß der Browser die entsprechenden CSS2-Fähigkeiten haben – aktuelle Versionen von Mozilla und Opera sind dazu in der Lage.