Stand: 24.04.2022

Lernziele

Stand: 07.03.2019

Es gibt eine klare Aufgabenteilung im Bereich des World Wide Web. Das war nicht immer so und ist eine echte Errungenschaft in der (kurzen) Geschichte des Internets:

  1. HTML: Inhalt, Struktur und Bedeutung
  2. CSS: Grafische Gestaltung / Styling
  3. JavaScript: Animation, Interaktion, Kommunikation zum Server

Noch bevor wir zu unserer ersten Sprache HTML kommen, behandeln wir die Meta-Sprache XML, denn: HTML ist eine XML-Sprache.

2.1 Einführung

XML steht für eXtensible Markup Language (erweiterbare Markierungssprache). XML ist eine Meta-Sprache, d.h. sie stellt Grundkonzepte zum Definieren einer konkreten Sprache (wie HTML) zur Verfügung.

XML ist keine Programmiersprache, sondern dient lediglich dazu, Daten zu repräsentieren, damit man sie in Textform speichern kann. Wozu braucht man so etwas? Ganz einfach: Sie wissen, dass der Arbeitsspeicher eines Computers beim Ausschalten gelöscht wird. Wenn Sie Ihr Adressbuch oder den Stand Ihres Computerspiels nicht verlieren möchten, muss dies auf die Festplatte gespeichert werden. Auch zum Weitergeben von Daten an Freunde und Kollegen ist es praktisch, wenn man die Daten speichern kann.

Als Speicherplatz noch knapp war, hat man Daten häufig binär gespeichert, d.h. man hat Informationen möglichst platzsparend in Zahlen umgewandelt. Die Zahl 182 konnte man in einem Byte (0 bis 255) speichern. Später hat man bemerkt, dass es praktisch ist, wenn Daten als Text gespeichert ist, weil die Programmierer dann schnell prüfen konnten, ob alles korrekt gespeichert wurde. Die Zahl 182 wurde dann als drei Textzeichen, also "182" gespeichert, erforderte als (mindestens) drei Byte, wenn man ein Zeichen mit einem Byte abspeichert. XML verwendet ebenfalls Text als Grundlage.

Definitionen:

Extensible Markup Language (XML) is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machinereadable

(Wikipedia.org)

… ist eine Auszeichnungssprache zur Darstellung hierarchisch strukturierter Daten in Form von Textdateien.

(de.Wikipedia.org)

2.2 Aufbau eines XML-Dokuments

Die Bestandteile eines XML-Dokuments sind

Nehmen wir an, wir möchten ein Adressbuch speichern. Jeder Eintrag steht für eine Person mit Name und Telefonnummer.

2.2.1 Tags

Ein Tag ist ein Wort in spitzen Klammern:

<foo>

Einen einzelnen Namen kennzeichnen wir mit zwei Tags, die beide gleich heißen: einem öffnenden und einen schließenden Tag. Der schließende Tag wird mit einem Schrägstrich gekennzeichnet.

<name>
</name>

Der öffnende Tag wird auch Start-Tag genannt, der schließende End-Tag.

Wichtig: Groß-/Kleinschreibung spielt eine bedeutungsunterscheidende Rolle. Generell sollte man möglichst immer klein schreiben, wenn man XML formuliert.

2.2.2 Elemente

Die Tags bilden Klammern um die eigentlichen Inhalte, in diesem Fall der Vor- und Nachname. Die gesamte Einheit aus Tags und Inhalten nennt man ein Element:

<name>
  Harry Hacker
</name>

Man könnte auch sagen, dass man den Inhalt (Harry Hacker) als Namen markiert. Deshalb spricht man auch immer wieder von Markierungssprachen (engl. markup languages).

Wie genau Sie ein Element setzen (Einrückung, Zeilenumbrüche, Leerzeichen) ist übrigens egal. So ginge es auch:

<name>Harry Hacker</name>

Wie auch beim Programmieren sollte man immer darauf bedacht sein, den "Code" übersichtlich und lesbar zu halten.

Elemente können verschachtelt sein. Um eine Person mit Namen, Telefonnummer etc. zu repräsentieren, fügen wir ein Element tel hinzu und umklammern das ganze nochmal als Element person:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Im obigen Beispiel haben wir es mit drei Elementen zu tun: person, name und tel. Das Element person enthält die Elemente name und tel.

Wichtig ist, dass Elemente nur vollständige Elemente enthalten darf. Der folgende Fall ist falsch und somit kein gültiges XML:

<foo>
  Hallo
  <bar>
</foo>
  Welt  
  </bar>

Man kann auch sagen, dass sich im obigen Beispiel zwei Elemente überlappen. Dies ist nicht erlaubt.

2.2.3 Leere Elemente

Manchmal braucht man nur ein Element ohne Inhalte. Dafür gibt es leere Elemente. Zum Beispiel könnten wir ein leeres Element einführen, um Harry als "ledig" zu kennzeichnen:

<person>

  <ledig/>

  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Um zu zeigen, dass ledig keinen End-Tag mehr benötigt, markiert man den Tag mit einem Schrägstrich vor der schließenden spitzen Klammer.

<ledig/>

2.2.4 Attribute

Neben Tags und Elementen gibt es noch Attribute. Nehmen wir an, wir möchten zu jeder Person im Adressbuch noch Alter und Schuhgröße speichern. Diese können wir im öffnenden Tag von "person" speichern:

<person alter="21" schuhgroesse="42">
  ...
</person>

Zu beachten ist, dass Attributwerte immer mit Anführungszeichen versehen werden sollten (auch wenn es sich um Zahlen handelt). Ein Element kann eine beliebige Anzahl von Attributen enthalten.

Sie werden bemerkt haben, dass man die zwei Informationen auch in Elementen hätte speichern können:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>

  <alter>
    21
  </alter>

  <schuhgroesse>
    42
  </schuhgroesse>

</person>

Tatsächlich ist beides möglich und im Grunde eine Designentscheidung. Ein konzeptioneller Unterschied zwischen Attribut und Element ist, dass ein Element Unterelemente haben kann, d.h. man kann Elemente verschachteln, Attribute aber nicht. Hier ein Beispiel, wo wir den Namen komplexer gestalten (und später z.B. noch Titel, Anrede, weitere Vornamen einfügen könnten):

<person>
  <name>
    <vorname>
      Harry
    </vorname>
    <nachname>
      Hacker
    </nachname>
  </name>
</person>

Umgekehrt sorgen Attribute für kürzere Spezifikationen, was manchmal übersichtlicher sein kann.

Als Faustregel kann man sagen, dass grundlegende, wichtige und potentiell komplexe Informationen in Elementen gespeichert werden sollte und Attribute eher für Nebeninformationen und Modifikatoren genutzt werden sollten.

2.3 Grammatik und Validierung

Wenn Sie die Übung oben gemacht haben, werden Sie bemerkt haben, dass Sie Ihre "Sprache" lediglich über Beispiele definiert haben. Vielleicht hätten Sie lieber Regeln aufgestellt, also z.B. ein Vokabular, das besagt, welche Tag-Namen denn überhaupt zulässig sind, und dann noch Regeln, welche Elemente in welchen Elementen enthalten sein dürfen und welche Attribute in welchen Elementen auftauchen dürfen oder müssen.

Eine solche Systematik nennt man Grammatik und ist Ihnen natürlich aus anderen menschlichen Sprachen oder Programmiersprachen bekannt.

Und natürlich gibt es auch für XML eine Möglichkeit, eine konkrete XML-Sprache mit Hilfe einer Grammatik zu definieren. Der große Vorteil einer klar definierten Grammatik ist, dass sie eine maschinelle Überprüfung der grammatikalischen Korrektheit eines Dokuments erlaubt. Das nennt man auch Validierung. Dazu gibt es Softwarepakete in vielen Programmiersprachen: Sie geben eine Grammatik z.B. für MusicML an und können dann maschinell für jedes beliebige MusicML-Dokument überprüfen lassen, ob es sich an die Regeln hält.

Sie finden Online-Anwendungen zur Validierung z.B. bei w3schools.com. Wichtiger ist aber, dass Sie solche Mechanismen auch in eigenen Programmen verwenden können und unter vielen Bibliotheken wählen können.

Als Beispiel wollen wir Regeln definieren, die wiedergeben, dass wir

  1. die Elemente name, vorname und nachname zulassen und
  2. dass vorname und nachname in Element name enthalten sein müssen.

Konkret sieht ein XML-Schnipsel so aus:

<person>
  <name>
    Harry Hacker
  </name>
  <tel>
    0821 111 222 33
  </tel>
</person>

Die Grammatik dafür kann mit dem DTD-Mechanismus definiert werden. Die Schreibweise von DTD ist etwas sperrig:

<!ELEMENT person (name, tel)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT tel (#PCDATA)>

DTD steht für Document Type Definition und war der erste Mechanismus, um XML-Sprachen zu spezifizieren. Die modernere Variante der Spezifikation nennt sich XML Schema (kurz: XSD). XSD ist selbst auch eine XML-Sprache, also etwas angenehmer zu lesen. Außerdem bietet XSD Typen (ähnlich wie int, String, boolean in Programmiersprachen) an.

Wir werden hier nicht weiter auf die Details von DTD und XSD eingehen, da wir zur Verwendung von HTML5 keine Grammatik benötigen. Sie haben aber jetzt eine Vorstellung davon, wie man eine konkrete Sprache wie HTML automatisch validieren also auf grammatikalische Korrektheit prüfen kann.

2.4 XML in der Praxis

XML ist in der IT-Welt unverzichtbar geworden, nicht nur weil HTML eine XML-Sprache ist. Es gibt viele weitere Sprachen, die auf XML basieren. Wenn sich eine Reihe von Experten auf einen Standard zum Repräsentieren eines Sachverhalts (von Vektorgrafiken oder Landkarteninformationen) einigen wollen, dann ist es praktisch, XML als Basis zu nehmen. Denn dann muss man sich nicht auch noch über die grundlegende Syntax einigen.

2.4.1 XML-Sprachen

Obwohl man XML vorwerfen kann, dass es etwas "sperrig" ist und die Dateien schnell groß werden (und dadurch wiederum unübersichtlich), hatte XML doch großen Erfolg, insbesondere durch die Vielzahl an Programmbibliotheken, die das Einlesen, Schreiben und Überprüfen von XML-Dokumenten erleichtern.

Neben HTML sind mittlerweile viele etablierte Dateiformate in XML formuliert:

ODF (open document format): Formatierte Textdokumente, wird u.a. von LibreOffice/OpenOffice verwendet

Collada: 3D-Modelle und sonstige Assets im Bereich 3D-Grafik

SVG (Scalable Vector Graphics): Vektorgrafiken

OpenStreetMap (OSM): Land-/Straßenkarten

SMIL und MPEG-7: Formate u.a. fürs Synchronisieren von Multimedia-Inhalten

Wenn Sie in eine dieser Dateien hineinschauen, werden Sie verblüfft sein, wieviel Sie "verstehen", ohne das Dateiformat genau zu kennen.

2.4.2 XML als Layoutsprache

XML wird nicht nur im Web als Layoutsprache verwendet. Weitere Einsatzgebiete im Bereich UI-Layout sind:

2.5 Übungen

2.5.1 Fingerübungen

Ändern Sie folgendes XML-Element so, dass Vor- und Nachname Attribute des Elements name sind:

<person>
  <name>
    <vorname>
      Harry
    </vorname>
    <nachname>
      Hacker
    </nachname>
  </name>
</person>

Finden Sie alle Fehler in dem folgenden XML-Element:

<freunde>
  <person>
    <name>
      Harry Hacker
    </name>
    <tel>
      0821 111 222 33
    <tel>
    <alter>
      21
    </alter>
    <schuhgroesse>
      42
    </schuhgroesse>
  </person>
  <person>
    <schuhgroesse>
      37
    </schuhgroesse>
    </name>
      Clara Schuhster
    <name>
    <tel>
      0821 444 555 QQ        
    <alter>
    </tel>
      23
    </alter>
  </person>
</freunde>

2.5.2 Elektronikmarkt

Sie sollen für einen Elektronikmarkt für die Smartphone-Sparte eine XML-Sprache für ihre Produkte erfinden. Jedes Smartphone sollte von einem eigenen Element repräsentiert werden. Jedes Smartphone muss außerdem folgende Informationen beinhalten (Anzahl bezieht sich auf die Anzahl der Smartphones am jeweiligen Standort).

Sie sollen auch jeden Standort repräsentieren:

Gestalten Sie Ihre Sprache so, dass für jeden Standort klar wird, welche Smartphones dort zur Verfügung stehen.

2.5.3 Validieren

Validieren Sie Ihre Sprache mit dem w3schools-Validierer.

2.5.4 Textverarbeitung

Sie möchten eine neue Textverarbeitungs-Software schreiben, um Microsoft Word Konkurrenz zu machen. Sie überlegen sich, dass Sie ein Dokument am besten in einer XML-Sprache abspeichern.

Sie haben z.B. folgenden Text (die erste Zeile kann man sich als Überschrift vorstellen):

Edward Snowden

Edward Joseph „Ed“ Snowden ist ein US-amerikanischer Whistleblower und ehemaliger CIA-Mitarbeiter. Seine Enthüllungen gaben Einblicke in das Ausmaß der weltweiten Überwachungs- und Spionagepraktiken von Geheimdiensten – überwiegend jenen der Vereinigten Staaten und Großbritanniens. Diese lösten im Sommer 2013 die NSA-Affäre aus.

Er wurde dafür mehrfach von nichtstaatlichen Organisationen ausgezeichnet und für den Friedensnobelpreis nominiert.

Sie möchten den Text mit Formatierungen abspeichern. Welche Formatierungen gibt es hier und wie könnte man das in einer XML-Sprache abbilden?

Versuchen Sie den obigen Text in Ihrer XML-Sprache auszudrücken und validieren Sie Ihre Sprache wieder mit dem w3schools-Validierer.