Webseite in XML Kurzeinführung

Transkript

1 Webseite in XML Kurzeinführung 1. Entwicklung Erste Webpage in XML Erstes Beispiel Tags definieren Kommentare in XML XML mittels CSS im Browser ansehen HTML-Tags in XML eingesetzt Interne und externe DTD Eigene Attribute definieren XML mit XSL Weitere Adressen und Hilfen zu XML Entwicklung Aus einem IBM-Projekt entstand die Sprache GML (Generalized Markup Language). Im Jahre 1985 wurde daraus die Sprache SGML (Standard GML) entwickelt. Diese Sprache wurde von ISO standardisiert. Am Forschungsinstitut CERN entwickelte Tim Berners Lee eine Sprache für Hypertext Dokumente (HTML). Im Jahr 1993 wurde die Version HTML 1.0 spezifiziert. Im Jahr 1995 war man bei HTML Version 3.0 angelangt. Damals führte man die bekannten Frames ein und schliesslich im Jahr 1998 wurde HTML 4.0 zum neuen Standard begann das W3-Konsortium an der Extensible Markup Language (XML) zu arbeiten. Als im Herbst 1997 der Internet-Explorer 4 herauskam, unterstützte dieser bereits XML-Ansätze. Anfang 1998 wurde XML zum offiziellen Standard des W3- Konsortiums erhoben. Der "Chefentwickler" von XML ist der Kanadier Tim Bray. Es dauerte nochmals ungefähr ein Jahr (1999), bis mit dem Internet-Explorer 5 der erste Web-Browser herauskam, der das standardisierte XML unterstützte. Mit XML beginnt eine neue Form von "Web-Sprachen". XML eröffnet die Basis für weitere Sprachen, die mit XML erstellt werden. Der Schlüssel dazu ist die Fähigkeit von XML, eigene Tags und Attribute definieren und nutzen zu können. Dadurch kann das statische HTML erweitert oder übertroffen werden. XML Webseite 1 September 2012

2 2. Erste Webpage in XML 2.1 Erstes Beispiel Das erste Beispiel ist immer sehr einfach. Sie schreiben Ihren ersten eigenen Tag! Der Quellcode: <AUSGABE>Hallo World!</AUSGABE> Dieses einfache Beispiel zeigt das Grundgerüst jeder XML-Seite. Hier haben wir einen eigenen Tag <AUSGABE> verwendet. Jede XML-Seite wird mit dem <?xml>-tag begonnen. Dies ist ähnlich wie bei HTML, wo jede Seite durch das Tag <HTML> eingeleitet wird. Jeder XML-Tag steht wie jeder HTML Tag in spitzen Klammern. Das <?xml>-tag weicht jedoch in einigen entscheidenden Punkten von <HTML>-Tag ab: - Der Tag muss in Kleinbuchstaben geschrieben werden. - Das Tag wird durch ein Fragezeichen eingeleitet und durch ein Fragezeichen abgeschlossen. - Das Attribut version="1.0" legt die Version des XML-Codes fest. - Das Ende einer XML-Seite wird nicht durch einen End-Tag abgeschlossen. Bei HTML-Seiten wird am Schluss das </HTML>-Tag eingesetzt, das es in XML nicht gibt. In Ihrem Code haben Sie den Tag <AUSGABE> selbst definiert. Genau wie in HTML braucht es nach dem folgenden Text eine Schluss-Tag </AUSGABE>. Doch auch hier unterscheidet sich XML von HTML: - Zu jedem Tag gibt es einen Abschluss-Tag. Einzige Ausnahme bildet das <?xml>-tag. In HTML gibt es einige Tags ohne Abschluss (<IMG> <HR>...). - Sie müssen unbedingt auf die Gross- und Kleinschreibung achten. Der Schlusstag muss in obigem Fall </AUSGABE> heissen und nicht </Ausgabe>. HTML würde diese Unterschiede akzeptieren. Speichern Sie Ihre erste XML-Seite unter dem Namen "beispiel.xml". Achten Sie auf die richtige Endung des Dateinamens. Laden Sie nun Ihre XML-Seite in einen Webbrowser. Was erwarten Sie? XML Webseite 2 September 2012

3 Sie sehen tatsächlich nur den Code, den Sie eingetippt haben. Ihr Browser zeigt den Code richtig an. Betrachten Sie die Ausgabe einmal genauer. Das <?xml>-tag wird komplett in Blau dargestellt, während von den beiden Tags <AUSGABE> und </AUSGABE> nur die Klammern und der "Slash" in Blau ausgegeben werden. Verändern Sie nun das Tag </AUSGABE> z.b. in </AUSGABe>. Der Webbrowser wird nun eine Fehlermeldung ausgeben. Der Browser erkennt also, dass ein Schlusstag verwendet wurde, welches nicht mit dem öffnenden Tag übereinstimmt. Wenn eine XML-Datei in einen Browser geladen wird, startet vor der Anzeige ein sogenannter Parser, der den XML-Quellcode durchgeht und die Syntax des Codes überprüft. Dieser Parser ist in aktuellen Browsern integriert. Microsoft hat einen eigenen Parser "msxml" entwickelt, während Netscape auf "expat" von James Clark setzt. Der Parser zeigt bei Fehlern die genaue Position im Code an, so dass man Programmierfehler leicht finden kann. XML Webseite 3 September 2012

4 2.2 Tags definieren Damit das Tag <AUSGABE> etwas bewirkt muss es auch richtig definiert werden. Ein Tag wird im sogenannten Prolog definiert. Das ist direkt hinter dem Tag <?xml>. Der Quellcode <!DOCTYPE Definitions_Name [ <!ELEMENT AUSGABE (#PCDATA)> ]> <AUSGABE>Hallo World!</AUSGABE> Nach dem <?xml>-tag folgt das <!DOCTYPE>-Tag. Dies ist das Schlüsseltag, das die Definition einleitet. Danach folgt der Name dieser Definition. Es ist nicht der Name des Tags, den wir definieren wollen, sondern nur der Name der Definition. Danach öffnet sich eine eckige Klammer. Alle nachfolgenden Einträge definieren nun konkret das Tag. In der nächsten Zeile erscheint das <!ELEMENT>-Tag. Dadurch wird nun das konkrete Tag definiert. Nach ELEMENT wird der Name des Tags geschrieben (in unserem Fall AUSGABE) und anschliessend in runden Klammern das Schlüsselwort #PCDATA. Dies teilt dem Browser mit, dass innerhalb des Tags normale Zeichen stehen dürfen, aber beispielsweise keine Grafiken. PCDATA seht für Parsed Character Data. Die Inhalte, die als PCDATA definiert sind, werden vom Parser überprüft. Bei nicht syntaktisch korrekten Angaben wird ein Fehler gemeldet. Die Definition des Tags wird danach mit der eckigen und der spitzen Klammer abgeschlossen. Damit endet auch der Prolog der XML-Datei. Erst danach darf das definierte Tag verwendet werden. Diese Definition des Tags innerhalb des Prologs werden als DTD (Document Type Definition) bezeichnet. Betrachten wir die Definition einer kleinen Datenbank: <!DOCTYPE Adresse_def [ <!ELEMENT Adresse (Datensatz)+> <!ELEMENT Datensatz (Name, Vorname, Strasse, PLZ, Ort, Telefon)> <!ELEMENT Name (#PCDATA)> <!ELEMENT Vorname (#PCDATA)> <!ELEMENT Strasse (#PCDATA)> <!ELEMENT PLZ (#PCDATA)> <!ELEMENT Ort (#PCDATA)> <!ELEMENT Telefon (#PCDATA)> ]> <Adresse> <Datensatz> <Name>Muster</Name> <Vorname>Hans</Vorname> <Strasse>Rosenweg 10</Strasse> <PLZ>4500</PLZ> <Ort>Solothurn</Ort> <Telefon> </Telefon> </Datensatz> </Adresse> XML Webseite 4 September 2012

5 Hier wurden sechs Tags in der DTD definiert. Dazu wurde im Wurzelelement Adresse innerhalb der DTD die sechs Tags nacheinander in runden Klammern aufgelistet. XML ist streng hierarchisch aufgebaut. Das Tag <Name> ist dem Tag <Adresse> untergeordnet. Das Haupttag (Wurzeltag oder Root Element) entspricht dem <BODY>-Tag in HTML. Dieses Tag darf nur einmal vorkommen. Alle anderen Tags sind Äste oder Zweige des Wurzeltags. Das Pluszeichen hinter "Datensatz" zeigt an, dass mindestens ein Datensatz-Tag vorkommen muss. 2.3 Kommentare in XML Die Kommentare in XML entsprechen den Kommentaren in HTML:  2.4 XML mittels CSS im Browser ansehen Prinzipiell wird für XML zur Ausgabe XSL(Extensible Stylesheet Language) eingesetzt. Die einfachste Art, XML-Dokumente anzuzeigen, ist mittels der bereits bekannten CSS (Cascading Style Sheets). Das Anzeigen der Daten mittels CSS ist bedeutend einfacher als mittels XSL. Mit XSL haben Sie aber bedeutend mehr Möglichkeiten als nur Dokumente anzuzeigen. <?xml-stylesheet href="test.css" type="text/css"?> <Homepage> <Ueberschrift>XML mit CSS ausgeben...</ueberschrift> <Text>Toller Test...</Text> <Ueberschrift>Funktioniert im IE</Ueberschrift> </Homepage> Die CSS-Datei sieht folgendermassen aus: Ueberschrift { font-family:arial; font-size:35pt; color:red; } Text { font-family:times; font-size:20pt; color:blue; background-color:yellow; } XML Webseite 5 September 2012

6 2.5 HTML-Tags in XML eingesetzt Sie haben die Möglichkeit, sämtliche HTML-Tags innerhalb von XML einzusetzen. Sie können auch spezifische Tags, wie z.b. <MARQUEE>, welches nur vom Internet- Explorer unterstützt wird, einbauen. HTML-Tags werden wie folgt eingebaut: <html:br></html:br> oder: <html:hr></html:hr> <html:a href=" Schule </html:a> <html:marquee> Dies ist eine Laufschrift </html:marquee> Damit diese Tags aber auch umgesetzt werden, ist es in XML nötig einen "Namensraum" (Namespace) zu definieren. Da XML das Tag <html:br> nicht finden kann, würde dies zu einer Fehlermeldung führen (oder der Tag wird einfach nicht umgesetzt). Ein Namespace wird im Wurzeltag wie folgt definiert: <Adresse xmlns:html=" xmlns steht für XML Namespace. Es wird der Namensraum html definiert. Nur mit dieser Namensraumdefinition können HTML-Tags verwendet werden. Weshalb Namensräume? Stellen Sie sich vor, Sie laden externe XML-Dateien. Jetzt könnte es sein, dass es dieselben Tags mit unterschiedlichen Definitionen gibt. Um solche Konflikte zu vermeiden wurden die sogenannten Namespaces vom W3- Konsortium 1999 standardisiert. XML Webseite 6 September 2012

7 2.6 Interne und externe DTD Bis jetzt kennen Sie die DTD nur innerhalb des XML-Dokuments. Sie haben jedoch die Möglichkeit die DTD auszulagern. Dadurch trennen Sie die Definitionen von den Daten. Dies erhöht die Übersichtlichkeit und wird deshalb empfohlen. Eine externe DTD wird wie folgt eingebunden: <!DOCTYPE Adresse SYSTEM "daten.dtd">  Nach DOCTYPE wird der Name der DTD angegeben. Das Schlüsselwort SYSTEM teilt dem Browser mit, dass die DTD, die geladen wird, nur für diese Webseite gilt. Der Name der DTD folgt danach in Anführungsstrichen. Die externe DTD ist fast identisch mit der internen DTD. Der einzige Unterschied liegt darin, dass am Anfang der externen DTD das <!DOCTYPE>-Tag fehlt. Dieses ist innerhalb des XML-Codes vorhanden und darf hier nicht noch einmal erscheinen. Unsere externe DTD für die Datenbank würde wie folgt aussehen: <!ELEMENT Adresse (Datensatz)+> <!ELEMENT Datensatz (Name, Vorname?, Strasse, PLZ, Ort, Telefon)> <!ELEMENT Name (#PCDATA)> <!ELEMENT Vorname (#PCDATA)> <!ELEMENT Strasse (#PCDATA)> <!ELEMENT PLZ (#PCDATA)> <!ELEMENT Ort (#PCDATA)> <!ELEMENT Telefon (#PCDATA)> Das Fragezeichen hinter dem Tag "Vorname" zeigt an, dass dieses Tag optional ist und deshalb auch wegfallen kann. 2.7 Eigene Attribute definieren Bereits von HTML wissen Sie, dass einzelne Tags auch unterschiedliche Attribute besitzen können (z.b. der FONT-Tag kennt die Attribute COLOR, FACE und SIZE). Attribute können wir in XML zu jedem Tag selbst definieren. Das ist sehr sinnvoll, weil wir dadurch den Inhalt des Tags genauer definieren können. In unserem Beispiel mit den Datensätzen könnten die Adressen z.b. privat oder geschäftlich sein. Dies können wir wie folgt lösen: <Datensatz> <Nachname>Meier</Nachname> <Strasse art="privat">rosenweg</strasse> <PLZ art="privat">4500</plz> <Ort art="privat">solothurn</ort> <Telefon art="privat"> </Telefon> </Datensatz> XML Webseite 7 September 2012

8 Das Attribut "art" wird innerhalb der DTD definiert. Dazu wird das Tag <!ATTLIST> verwendet: <!ATTLIST Strasse art (privat geschaeft) #REQUIRED> Hinter der Definition des Attributs "art" wird in runden Klammern angegeben, welche Werte möglich sind. Am Schluss der Definition folgt das Wort #REQUIRED, was bedeutet, dass das Attribut art immer in Verbindung mit dem Tag Strasse verwendet werden muss. Anstelle von #REQUIRED kann ein Attribut auch als #IMPLIED definiert werden, das bedeutet, dass das Attribut gesetzt werden kann, aber nicht unbedingt notwendig ist. 3. XML mit XSL XML selbst legt die Daten strukturiert ab. Für eine formatierte Ausgabe von XML im Webbrowser haben wir bis jetzt CSS verwendet. Es gibt für die Formatierung von XML eine eigene Sprache nämlich XSL (Extensible Stylesheet Language). XSL ist eine umfangreiche Sprache für Formatierungen von unterschiedlichen Ausgabemedien. Wir möchten hier nur ein Beispiel betrachten. Folgende XML-Datei bindet in der zweiten Zeile anstelle einer CSS-Datei eine XSL- Datei ein: <?xml-stylesheet href="anzeige.xsl" type="text/xsl"?> <ausgabe> <anzeige> XML mit XSL </anzeige> </ausgabe> Der folgende Code zeigt, wie ein typisches Stylesheet in XML aussieht. Zuerst muss wieder ein xsl-namensraum definiert werden. Anschliessend folgt zwischen den Schlüsselwörter template die konkrete Ausgabe des Inhalts. <xsl:stylesheet xmlns:xsl=" <xsl:template> <H1> <xsl:value-of select="ausgabe/anzeige" /> </H1> </xsl:template> </xsl:stylesheet> Zwischen den Tags <H1> und </H1> lesen wir nun was ausgegeben werden soll. Es handelt sich um den Inhalt des Tags <anzeige>. Über das Wort select legen wir sozusagen den Fokus auf dieses Tag. Dazu muss man den gesamten Dokumentenbaum (vom Wurzelelement her) angeben. Die Ausgabe sollte dann im Webbrowser wie folgt aussehen: XML Webseite 8 September 2012

9 Im nächsten Beispiel wird gezeigt, wie man den Inhalt mehrerer Tags ausgeben kann. Beachten Sie wie der XSL-Code modifiziert wurde: Der XML-Code: <?xml-stylesheet href="anzeige2.xsl" type="text/xsl"?> <ausgabe> <start> <anzeige> XML mit XSL </anzeige> </start> <start> <anzeige> HTML-Tags fuer die Formatierung </anzeige> </start> <start> <anzeige> XSL ist nicht so komliziert! </anzeige> </start> </ausgabe> Der XSL-Code: <xsl:stylesheet xmlns:xsl=" <xsl:template> <xsl:for-each select="ausgabe/start"> <H1> <xsl:value-of select="anzeige" /> </H1> </xsl:for-each> </xsl:template> </xsl:stylesheet> Das neue Tag <xsl:for-each> weist den Browser an, nach allen Tags zu suchen, die mit dem Wert in Attribut select übereinstimmen. XML Webseite 9 September 2012

10 4. Weitere Adressen und Hilfen zu XML - de.selfhtml.org/xml XML Webseite 10 September 2012