Auszeichnungssprachen (markup language)

Einordnung des Artikels

• Einführung in die Informatik
  • Einführung in die Programmierung
    • Auszeichnungssprachen (markup language)

In C++ Programmier-Aufgaben: Anwendungen aus Numerik, Finanzmathematik, Kombinatorik, Auszeichnungssprachen werden dann einige Anwendungen gezeigt, wie man Auszeichnungssprachen zur Textverarbeitung einsetzen kann.

Einführung

Programmiersprachen sind dazu da, beliebige Algorithmen zu schreiben. Die höheren Programmiersprachen versuchen, Befehle anzubieten, die dem menschlichen Denken sehr nahe kommen; im Gegensatz dazu ist die Maschinensprache an die Arbeitsweise des Prozessors angepasst.

Das Ziel von sogenannten Auszeichnungssprachen (markup language) ist es nicht, Algorithmen zu schreiben. Vielmehr sollen Texte logisch ausgezeichnet werden. Meist gibt die Auszeichnung die Bedeutung der einzelnen Text-Bestandteile an.

So werden zum Beispiel in nahezu allen Texten Überschriften, Fließtext, Listen, Bilder mit Beschreibungen oder Tabellen eingesetzt. Auszeichnung würde hier bedeuten, dass die Text-Bestandteile mit gewissen Elementen versehen werden, die deren Rolle im Text beschreiben. Die Elemente können dann zum Beispiel verwendet werden, um Formatierungsregeln zu definieren. Die meisten Textverarbeitungsprogramme bieten genau diese Funktionalität — allerdings fast immer in der Form, dass man die Formatierungsregeln durch Button-Klicks erzeugt. Man spricht hier von WYSIWYG-Editoren (WYSIWYG = what you see is what you get), die sofort das Erscheinungsbild anzeigen. Eine echte Auszeichnungssprache dagegen definiert strenge Regeln, welche Elemente erlaubt sind und wie diese Elemente eingesetzt werden müssen. Bei WYSIWYG-Editoren wird meist im Hintergrund eine Datei gemäß einer Auszeichnungssprache angelegt, dem Nutzer bleibt sie aber verborgen.

Der Vorteil einer Auszeichnungssprache gegenüber einem WYSIWYG-Editor sollte auf der Hand liegen: Die entstehende Datei ist sowohl menschen-lesbar als auch maschinen-lesbar. Und der Nutzer hat dann die Möglichkeit, Programme anzuwenden oder selber zu schreiben, mit denen von ihm verfasste Dateien weiterverarbeitet werden.

Ein typisches Beispiel sind Internet–Seiten: Werden sie vom Browser dargestellt, sind sie vom Menschen lesbar, auch der Quelltext ist — sofern man ein wenig mit den Regeln von HTML vertraut ist — mit Hilfe eines Text-Editors vom Menschen lesbar. Da der Quelltext aber strengen Regeln gehorcht, kann er etwa von Suchmaschinen ausgewertet werden (Links können untersucht werden, Programme können verifizieren, ob die vergebenen Schlagworte und Überschriften auf die Inhalte abgestimmt sind und so weiter).

Eine andere Anwendung der Maschinenlesbarkeit von Auszeichnungssprachen sind Exportfunktionen: Immer wenn ein Dateiformat in ein anderes verwandelt werden soll, ist dies besonders einfach zu realisieren, wenn das Quellformat in einer Auszeichnungssprache geschrieben ist.

Als Beispiele sollen hier kurz das (eher wissenschaftliche) Textverarbeitungssystem LaTeX, die Sprache HTML (mit der Internet–Seiten geschrieben werden), XML (die erweiterbare Auszeichnungssprache, bei der man selber Elemente definieren kann) und SVG (scalable vector graphics) vorgestellt werden.

LaTeX

LaTeX beruht auf dem Textsatz-System TeX; es vereinfacht dessen Anwendung durch den Einsatz von Makros. Eingesetzt wird LaTeX vor allem um wissenschaftliche und insbesondere mathematische Texte zu verfassen; da es inzwischen unzählige Erweiterungen gibt, können beliebige Arten von Dokumenten erstellt werden. Vor allem können sehr einfach pdf-Dokumente erzeugt werden; deren Layout, speziell der Formelsatz, ist sehr ausgereift.

Unten ist der Quelltext eines einfachen Textes gezeigt, die zugehörige Ausgabe — wie sie etwa im pdf-Dokument aussehen würde — ist in Abbildung 1 zu sehen.

\documentclass[a4paper,fleqn,11pt]{article}
\usepackage{german}
\usepackage[latin1]{inputenc}
\addtolength{\textwidth}{2cm}

\begin{document}
	
	\centerline{{\Large \textbf{Klausur Informatik}}}
	
	\bigskip
	
	\centerline{{\Large \textbf{29. 7. 2019}}}
	
	\vspace{2cm}
	
	\renewcommand{\arraystretch}{1.7}
	\begin{tabular}{|p{2.0cm}|p{1cm}|p{1cm}|p{1cm}|p{1cm}|p{1cm}|p{1cm}|p{1cm}|p{1cm}|}\hline
		Aufgabe  & 1& 2 & 3 & 4 & 5 & 6 & $\Sigma$ & Note \\ \hline
		Punkte  & 20 & 20  & 20 & 20 & 20 & 20 & 120 &  \\ \hline
		1. Korr.  & & & & & & & & \\ \hline
		2. Korr.  & & & & & & & & \\ \hline
	\end{tabular}
	
	\bigskip
	
	\begin{enumerate}
		\item \textbf{Auszeichnungssprachen}:
		\begin{itemize}
			\item Erklären Sie den Begriff \textbf{Auszeichnungssprache}!
			\item Erläutern Sie die Besonderheit von XML gegenüber anderen Auszeichnungssprachen.
		\end{itemize}
		
		\item Schreiben Sie ein C++-Programm, das alle ganzzahligen Lösungen $a, b, c$ der Gleichung
		\begin{equation}
		a^2 + b^2 = c^2
		\end{equation}
		ausgibt, wobei $c < 100$!   
		
		Die \textit{pythagoräischen Zahlentripel} sollen zeilenweise ausgegeben werden, zum Beispiel:
		
		\begin{displaymath}
		a = 3, \ b = 4, \ c = 5
		\end{displaymath}
		\begin{displaymath}
		a = 5, \ b = 12, \ c = 13
		\end{displaymath}
		
		\item Schreiben Sie ein C++-Programm, das die Euler-Mascheroni Konstante $C$
		\begin{displaymath}
		C = \lim_{n \to \infty} 
		\left(  \sum_{i = 1}^{\infty} \frac{1}{i} - \ln n \right) 
		\approx 0,577215664901532
		\end{displaymath}
		auf 10 Stellen genau berechnet.
		\item \ldots
	\end{enumerate}

\end{document}

Abbildung 1: Anzeige des obigen LaTeX-Quelltextes in einem pdf-Dokument.

Zur Erklärung:

1. Die für den Leser sichtbaren Teile des Dokumentes sind in

\begin{document}
\end{document}

eingeschlossen (Zeile 6 und 58).

2. Davor können Eigenschaften global für das gesamte Dokument definiert werden (Zeile 1 bis 4), hier etwa:

• Anpassung an das a4-Format (a4paper)
• Mathematische Gleichungen, die über die ganze Zeile gehen, werden durch die Option fleqn linksbündig dargestellt (fleqn = flush left equation)
• Schriftgröße (11pt)
• Typ des Dokumentes Artikel (article); Alternativen sind etwa Report, Buch, Brief.
• Es können weitere Pakete eingebunden (hier german für eine bessere Unterstützung deutscher Umlaute). Derartige Pakete gibt es für nahezu jede Anwendung (spezielle Zeichen für Mathematik und Physik, für Syntax-Highlighting für verschiedene Programmiersprachen, Notensatz in der Musik, Hieroglyphen und so weiter).
• Globale Veränderungen des Layout (hier: Vergrößerung der voreingestellten Textbreite um 2 cm).

3. Tabelle (von \begin{tabular} bis \end{tabular} ) mit 9 Spalten fest definierter Breite (Zeile 16 bis 22).

4. Numerierte Liste (\begin{enumerate} , Beginn Zeile 26, Ende Zeile 56) mit vier Listen-Elementen (Zeile 27, 33, 48, 55).

5. Nicht-numerierte Liste (\begin{itemize} , Zeile 28 bis 31).

6. Numerierte mathematische Formel (\begin{equation} , Zeile 34 bis 36), die über eine ganze Zeile geht; nicht-numerierten Formeln (\begin{displaymath} , Zeile 41 bis 43, 44 bis 46 und 49 bis 53).

7. Mathematische Ausdrücke können in Fließtext eingebunden werden mit Hilfe der Dollar-Zeichen ($$ , Zeile 33, 37, 48).

8. Text-Formatierungen wie größere Schrift (Zeile 8 und 12), fett gedruckter Text (Zeile 8, 12, 27 und 29) oder kursiver Text (Zeile 39).

9. Die Seiten werden automaisch numeriert; möchte man dies vermeiden, muss man dies selber erzwingen.

An diesem Beispiel sieht man, dass das Schreiben von LaTeX-Dokumenten eher mühsam ist und eine lange Einarbeitungszeit erfordert. Um mit LaTeX produktiv arbeiten zu können, benötigt man zum Einen im Hintergrund eine Software, die die Quelltexte in lesbare Formate (wie pdf) übersetzt; unter Windows ist MiKTeX die bekannteste Distribution, die sämtliche Dienstprogramme und zahlreiche Zusatzpakete bereitstellt. Zum Anderen benötigt man eine Entwicklungsumgebung, die die Arbeit unterstützt, etwa durch Anzeigen mathematischer Symbole, Syntax-Highlighting, Syntax-Vervollständigung und Fehleranzeigen.

HTML (hypertext markup language)

Die Abkürzung HTML steht für hypertext markup language: Sie ist die Sprache, in der Internet–Seiten geschrieben werden. Dabei steht Hypertext für die Möglichkeit der Verlinkung von Dokumenten. Somit ist HTML eine Sprache, die es ermöglicht:

• Textinhalte logisch auszuzeichnen, wobei die Auszeichnung zur Formatierung verwendet werden kann und
• Verlinkungen zwischen Dokumenten herzustellen.

Im Folgenden werden die wichtigsten Elemente der Sprache HTML erklärt; dies soll nur soweit wie nötig geschehen, um die Struktur der Sprache zu verstehen und erste Texte lesen und schreiben zu können.

Die wichtigsten Elemente von HTML

Der Quelltext des einfachsten HTML-Dokumentes, das Hello World im Web-Browser anzeigt, lautet:

<!doctype html>
<html>
	<head>
		<title>Hello World</title>
	</head>
	<body>
		<h1>Hello World</h1>
	</body>
</html>

Dazu muss man den Quelltext in einer Datei index.html abspeichern und diese Datei mit dem Web-Browser öffnen. Der Name index.html wird üblicherweise für die Startseite eines Web-Auftritts verwendet; der Name index ist also frei wählbar, dagegen muss die Datei-Endung .html lauten.

Die Datei index.html ist eine reine Text-Datei und kann mit jedem Text-Editor geöffnet und bearbeitet werden. Mit ein wenig Verständnis für die in der Datei enthaltenen Elemente und deren Verschachtelung, kann man schnell komplexere HTML-Dokumente erstellen.

Die HTML-Elemente, also die in spitzen Klammern stehenden Text-Auszeichnungen, sind großteils blockweise aufgebaut: so beginnt (Zeile 2) mit

<html>

der Block html, der dann (am Ende der Datei, Zeile 9) mit

</html>

endet. (Der slash steht immer für das Ende eines Elementes.) In diesem Block sind weitere Blöcke enthalten: head (Zeile 3 bis 5) und body (Zeile 6 bis 8).

Die Elemente html, head und body

Das Element <html> , das Wurzelelement eines HTML-Dokumentes, leitet lediglich die HTML-Datei ein (Zeile 2) und beendet sie (Zeile 9). In das Element <html> werden zwei weitere Elemente <head> und <body> eingeschlossen: Der Kopf und der Körper der HTML-Datei.

Salopp gesagt, stehen im Kopf weitere Elemente, die für den Nutzer nicht sichtbar sind, dagegen werden die Elemente im Körper später vom Browser angezeigt. Ausnahme ist hier das <title> -Element (Zeile 4), das den Text Hello World in die Titelzeile des Browsers schreibt. Mögliche Angaben im Kopf der Datei sind etwa:

• Zeitpunkt der Erstellung der Datei,
• Angaben über den Betreiber des Web-Auftritts,
• sogenannte Meta-Angaben für Suchmaschinen (wie eine Beschreibung des Inhaltes oder Schlagworte, unter denen das Dokument in einer Suchmaschine angezeigt werden soll).

Das Element <!doctype> , das sich noch vor dem Element <html> befindet (Zeile 1), ist kein HTML-Element. Es definiert vielmehr den Typ des Dokumentes, insbesondere nach welcher Version von HTML das Dokument verfasst ist. Der aktuelle Standard für HTML ist HTML5, was man durch Zeile 1 angeben kann.

Die wichtigsten Elemente im Körper der HTML-Datei sollen nun vorgestellt werden.

Überschriften

Mit dem Element <h1> (Zeile 7) wird eine Überschrift erster Ordnung erzeugt (h = heading). Überschriften können bis zur 6. Ordnung eingesetzt werden (h1 bis h6) und dienen wie üblich zur Strukturierung des Dokumentes. Das <h1> -Element soll in jeder Datei nur einmal vorkommen (eine derartige Regel ist in der Spezifikation von HTML aber nicht eindeutig festgelegt — HTML ist in vielerlei Hinsicht eine eher schlampige Sprache, die in ihrer formalen Struktur nicht mit einer Programmiersprache vergleichbar ist).

Die HTML-Datei zur Ausgabe von Hello World soll nun ein wenig mit weiteren Inhalten gefüllt werden, um andere HTML-Elemente zu erklären. Wenn Sie diese Datei abspeichern und mit dem Browser öffnen, wird die Darstellung der Seite nicht sehr benutzerfreundlich sein, denn hier sind keine Befehle vergeben wie die Elemente dargestellt werden müssen. Zu sehen sind dann die default-Einstellungen Ihres Browsers.

<!doctype html>
<html>
	<head>
		<title>HTML-Elemente</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>

	<h1>HTML-Elemente</h1>
	<h2>Fließtext, Bilder und Links</h2>
	<p>Ein Absatz Fließtext wird als <i>paragraph</i> bezeichnet. Ein <b>Zeilenumbruch</b> wird mit einem <i>break</i> erzwungen</br>
	Das Ende eines paragraph erzeugt einen Absatz.
	</p>
	<img src="img/bild.jpg" width="500" height="300" alt="Alternativtext" title="Titel des Bildes">

	<p>Und jetzt noch ein Link zu
	<a href="https://de.jberries.com/" target="_blank">JBerries</a>
	</p>
	<h2>Listen und Tabellen</h2>
	<ol>
		<li>Geordnete Listen: ol.</li>
		<li>Ungeordnete Listen: ul.</li>
		<li>Element in einer Liste: li.</li>
	</ol>
	<table>
		<tr>
			<th>Element</th>
			<th>Abkürzung für (oder  Übersetzung)</th>
			<th>Bedeutung</th>
		</tr>
		<tr>
			<td>table</td>
			<td>Tabelle</td>
			<td>Erzeugt eine html-Tabelle</td>
		</tr>
		<tr>
			<td>tr</td>
			<td>table row = Tabellenzeile</td>
			<td>Zeile in einer Tabelle; muss dem Element table untergeordnet sein.</td>
		</tr>
		<tr>
			<td>th</td>
			<td>table header = Tabellenkopf</td>
			<td>Kopfzelle einer Tabelle; muss dem Element tr untergeordnet sein. Anzahl pro Zeile: siehe td.</td>
		</tr>
		<tr>
			<td>td</td>
			<td>table data = Tabellendaten</td>
			<td>Datenzelle; muss dem Element tr untergeordnet sein. 
			Die Anzahl der Zellen pro Zeile sollte identisch sein (andernfalls muss man weitere Befehle einsetzen).</td>
		</tr>
	</table>
	</body>
</html>

Fließtext

Fließtext wird durch das Element <p> (p = paragraph) dargestellt (Zeile 11 bis 13); am Ende eines paragraph wird ein Absatz erzeugt. Ein Absatz muss von einem Zeilenumbruch <br/> unterschieden werden, da der Absatz meist einen größeren Abstand zur nächsten Zeile besitzt als der Zeilenumbruch.

Um einen Fließtext weiter zu strukturieren können die Elemente <strong> , <b> (bold = fett), <em> (emphasized = betont) und <i> (italic = kursiv) eingesetzt werden.

Bilder

Bilder werden mit dem Element <img> (image) erzeugt (Zeile 14). Das Attribut src gibt den Pfad zum Bild an.

Der Pfad kann angegeben werden als:

• relativer Pfad (ausgehend von der aktuellen Datei)
• absoluter Pfad
• URL (also ein Verweis auf ein Bild, das auf einem beliebigen Webserver liegt und in die aktuelle Datei eingebunden wird; die URL wird gebildet wie das href-Attribut eines Links (siehe unten).

Breite und Höhe sollte man immer angeben, damit zuerst der Rahmen für das Bild erzeugt wird und erst später das Bild geladen werden kann. Das Attribut alt gibt den Alternativtext an, der gezeigt wird, wenn das Bild nicht geladen wird. Das Attribut title erscheint, wenn man mit der Maus über das Bild fährt.

Verweise (Links)

HTML-Dokumente sind gegenüber (nahezu allen) anderen Dokumenten dadurch ausgezeichnet, dass man leicht Verweise (links) auf andere Dokumente bilden kann; das verlinkte Dokument muss nicht auf dem Server liegen, von dem aus der Link gesetzt wurde. Die eindeutige Adressierung von Internet–Dokumenten durch die URL (URL = uniform resource locator) macht es möglich, von einem Dokument zum nächsten zu springen.

Umgesetzt wird der Verweis mit dem Element Anker-Element <a> (a = anchor, siehe Zeile 17). Ein Link besteht immer aus zwei Bestandteilen:

• der Text, der als Link gekennzeichnet ist (hier JBerries); er steht zwischen dem Beginn und Ende des Anker-Elementes.
• Die URL, zu der der Link führen soll; er steht im Attribut href innerhalb des Anker-Elementes.

Listen

Man unterscheidet geordnete Listen <ol> (ol = ordered list) und ungeordnete Listen <ul> (ul = unordered list), siehe Zeile 20 bis 24; erstere werden durchnumeriert, letztere werden mit Aufzählungszeichen (bullets) versehen. Die einzelnen Elemente der Liste werden in das <li> -Element eingeschlossen (Zeile 21 bis 23).

Block- und inline-Elemente

Grob kann man die HTML-Elemente in block- und inline-Elemente unterteilen. Ihr Verhalten ist:

• block-Elemente: Sie beginnen eine neue Zeile und nehmen die gesamte Breite der Seite ein.
• inline-Elemente: Sie beginnen keine neue Zeile und beanspruchen nur so viel Platz wie nötig.

Beispiele für block-Elemente:

• Überschriften (<h1> bis <h6> ): Klar, wenn zum Beispiel nach einem Absatz Fließtext eine Überschrift folgt, muss zwischen dem Fließtext und der Überschrift ein Zeilenumbruch sein — es wäre unsinnig, wenn man ihn durch einen Befehl erzwingen müsste.
• Ein Absatz Fließtext (<p> ).
• Listen
• Tabellen.

Beispiele für inline-Elemente:

• Links (sonst könnte man sie nicht in Fließtext einbinden).
• Bilder (können von Text umflossen werden).

XML (extensible markup language)

Einführung

Charakteristisch für HTML ist, dass es vorgegebene Elemente und Attribute gibt, sowie Regeln, wie diese ineinander verschachtelt werden dürfen. Hier ist XML (= extensible markup language) wesentlich flexibler — genau das soll der Bestandteil extensible im Namen andeuten. Der Benutzer kann jetzt sowohl die Namen der verwendeten Elemente und Attribute festlegen als auch die Regeln, wie diese verwendet werden müssen. So hat man die Möglichkeit, beliebige Datenstrukturen in einem menschen-lesbaren Dokument abzubilden. Und spätere Transformationen des Dokumentes in andere Formate können realisiert werden, ohne das Ursprungsdokument zu verändern.

Um ein Beispiel für ein XML-Dokument mit offensichtlich selbst-definierten Elementen anzugeben:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE vorlesung SYSTEM "vorlesung.dtd">
<vorlesung>
    <vorlesungstitel>Einführung in die Informatik</vorlesungstitel>
    <semester>SS 19</semester>
    <dozent>
        <doz_name>Fußeder</doz_name>
        <doz_vorname>Walter</doz_name>
        <titel>Dr.</titel>
    </dozent>
    <hoerer>
        <name>Mustermann</name>
        <vorname>Max</name>
        <mnr>100001</mnr>
        <studienfach>Wirtschaftingenieurwesen</studienfach>
    </hoerer>
    <hoerer>
        <name>Gabler</name>
        <vorname>Erika</name>
        <mnr>400004</mnr>
        <studienfach>Elektrotechnik</studienfach>
    </hoerer>
    ...
</vorlesung>

Die Datei ist offensichtlich menschen-lesbar: ohne die Definition der Elemente und der Regeln, wie sie eingesetzt werden müssen, zu kennen, ist jedem Leser sofort klar, welche Bedeutung die hier abgelegten Informationen haben. Hätte man die Elemente fortlaufend mit a, b, c,... bezeichnet, wäre dies nicht so leicht möglich:

<a>
    <b>Einführung in die Informatik</b>
    <c>SS 19</c>
    <d>
        <e>Fußeder</e>
        ...

Zudem sind sofort die Regelmäßigkeiten erkennbar, wie die Informationen angeordnet sind.

Baumstruktur eines XML-Dokumentes

In etwas abstrakterer Sichtweise hat ein XML–Dokument eine Baumstruktur, die Sie etwa von Ihrem Dateisystem kennen:

• Ein Ordner kann mehrere Unterordner (Zweige) oder Dateien (Blätter) enthalten.
• Ein Unterordner wiederum kann Unterordner oder Dateien enthalten usw. (beachten Sie, dass oder hier jeweils ein logisches ODER ist).

Die Baumstruktur des XML-Dokumentes von oben kann man folgendermaßen beschreiben:

• Das Element vorlesung ist das Wurzelelement (root-Element).
• Das Element vorlesung enthält folgende Unterelemente:
  • vorlesungstitel
  • semester
  • dozent
  • hoerer.
• Die Elemente vorlesungstitel und semester enthalten keine Unterelemente sondern Daten.
• Das Element dozent dagegen enthält Unterelemente:
  • doz_name
  • doz_vorname
  • titel.
• Ebenso enthält das Element hoerer Unterelemente:
  • name
  • vorname
  • mnr
  • studienfach.

Nicht eindeutig erkennbar sind folgende Eigenschaften des XML-Dokumentes — aber die Bedeutung der Elemente lässt diese Regeln vermuten:

• Einige Elemente sind eindeutig (das heißt sie müssen genau einmal vorkommen), wie vorlesungstitel, semester, dozent, doz_name des dozent.
• Manche Elemente sind optional, das heißt sie können vorkommen, müssen aber nicht vorkommen (wie titel des dozent).
• Es gibt Elemente, die beliebig oft vorkommen dürfen (wie hoerer der vorlesung).

Abbildung 2 versucht die Baumstruktur des XML-Dokumentes darzustellen. Man beachte, dass in dem Diagramm keine sogenannten Multiplizitäten dargestellt sind, also Festlegungen, wie oft ein Element vorkommen darf.

Weiter sollte klar sein, dass Abbildung 2 lediglich die Struktur einer vorlesung darstellt — also welche Datenelemente eine vorlesung enthält und ob diese wiederum zusammengesetzt oder atomar sind. Ob eine vorlesung viele oder wenige hoerer besitzt, kann an der Struktur nicht abgelesen werden.

Darstellung des obigen XML-Dokumentes als Baum-Diagramm. Das Wurzelelement (root) ist vorlesung.

Wohlgeformtheit und Gültigkeit

Um die Regeln besser zu beschreiben, wie ein XML-Dokument aufgebaut ist, verwendet man die Begriffe:

• wohlgeformt (well-formed) und
• gültig (validated).

Dabei ist die Wohlgeformtheit die schwächere Bedingung: sie soll ausdrücken, dass die Regeln, die für jedes XML-Dokument gelten müssen, eingehalten sind, also insbesondere:

1. Jedes Element besitzt ein End-Element, wie

<hoerer>
 ... 
</hoerer>

2. Die Elemente sind nach dem Block-Prinzip ineinander verschachtelt, so ist folgende Verschachtelung erlaubt:

<vorlesung>
<vorlesungstitel>
</vorlesungstitel>
</vorlesung>

Dagegen ist nicht erlaubt:

<vorlesung>
<vorlesungstitel>
</vorlesung>
</vorlesungstitel>

Schärfer sind die Anforderungen für die Gültigkeit: Zusätzlich zur Wohlgeformtheit wird jetzt in einer separaten Datei definiert, wie die oben angesprochene Baumstruktur exakt auszusehen hat. Diese Datei hat die Datei-Endung .dtd (= document type definition) und wird in der zweiten Zeile des XML-Dokumentes für die Vorlesung oben aufgerufen. In diesem Beispiel könnte die Datei vorlesung.dtd folgendermaßen aussehen:

<!ELEMENT vorlesung (vorlesungstitel, semester, dozent, hoerer*)>
<!ELEMENT vorlesungstitel (#PCDATA)>
<!ELEMENT semester (#PCDATA)>
<!ELEMENT dozent (doz_name, doz_vorname, titel?)>

<!ELEMENT doz_name (#PCDATA)>
<!ELEMENT doz_vorname (#PCDATA)>
<!ELEMENT titel (#PCDATA)>

<!ELEMENT hoerer (name, vorname, mnr, studienfach)>

<!ELEMENT name (#PCDATA)>
<!ELEMENT vorname (#PCDATA)>
<!ELEMENT mnr (#PCDATA)>
<!ELEMENT studienfach (#PCDATA)>

Zur Erklärung:

1. Das Element vorlesung ist aus vier Elementen zusammengesetzt (Zeile 1).
2. Werden die Unterelemente ohne eine weitere Auszeichnung angegeben, bedeutet dies, dass sie genau einmal vorkommen müssen.
3. Das Unterelement hoerer ist mit der wildcard * versehen, was bedeutet, dass hoerer beliebig oft vorkommen kann.
4. Das Unterelement titel (von dozent) ist mit einem Fragezeichen versehen (Zeile 4): es ist optional, kann also gar nicht oder einmal vorkommen.
5. Enthält ein Element keine Unterelement sondern Daten, so wird dies durch die Raute und PCDATA angegeben (Zeile 2, 3, 6,...)

Sogenannte XML-Parser können mit Hilfe der referenzierten .dtd-Datei feststellen, ob ein XML-Dokument gültig ist. Es ist bei gültigen Dokumenten nicht mehr schwer weitere Programme zu schreiben, die das XML-Dokument transformieren. Denkbar ist hier etwa die Ausgabe als HTML-Datei oder die Übergabe an ein Tabellenkalkulationsprogramm.

Skalierbare Vektorgraphiken (svg)

Skalierbare Vektorgraphiken bieten alle Möglichkeiten, die typische Graphikprogramme bieten:

• Rechtecke
• Ellipsen und Kreise
• Polygone
• Pfeile
• Polylinien
• die Objekte können mit Farbe oder Farbverläufen gefüllt werden
• die Objekte können transformiert werden (Translation, Rotation, Streckung).

Was skalierbare Vektorgraphiken gegenüber anderen Graphikformaten auszeichnet: sie werden als XML-Dokumente gespeichert, wodurch die Quelltexte einigermaßen menschen-lesbar bleiben. Einige Beispiele finden Sie in den C++ Programmier-Aufgaben: Anwendungen aus Numerik, Finanzmathematik, Kombinatorik, Auszeichnungssprachen im Teil Einführung in C++.

Als Beispiel diene folgendes Zehneck:

Abbildung 3: Zehneck, das den goldenen Schnitt enthält.

Der Quelltext für das Zehneck lautet:

<svg width="700" height="700">
    <polyline points="350,325 350,124 541,62 350,0 159,62 350,124" stroke="red" fill="none"/>
    <polyline points="350,325 350,124 541,62 350,0 159,62 350,124" stroke="red" fill="none" transform="rotate(72 350 325)"/>
    <polyline points="350,325 350,124 541,62 350,0 159,62 350,124" stroke="red" fill="none" transform="rotate(144 350 325)"/>
    <polyline points="350,325 350,124 541,62 350,0 159,62 350,124" stroke="red" fill="none" transform="rotate(216 350 325)"/>
    <polyline points="350,325 350,124 541,62 350,0 159,62 350,124" stroke="red" fill="none" transform="rotate(288 350 325)"/>
</svg>

(Dadurch dass die Koordinaten auf ganze Zahlen gerundet sind, kann die Figur den goldenen Schnitt nicht exakt wiedergeben. Und man erkennt an einigen Ecken — nicht an allen! —, dass sich die Kanten nicht exakt zusammenfügen.)

Aufgaben:

1. Was versteht man unter dem Goldenen Schnitt und wo ist er in der Figur oben enthalten?
2. Versuchen Sie am Quelltext nachzuvollziehen:
   • Im Attribut points des Elements polyline steht eine Liste von Punkten (Zeile 2 bis 6); die Punkte bestehen aus zwei Koordinaten (durch Komma getrennt), die Punkte sind durch ein Leerzeichen getrennt.
   • Wie liegt das Koordinatensystem (Ursprung, Orientierung der Achsen)?
   • Identifizieren Sie die erste polyline in der Graphik!
   • Was bewirken die Transformationen (Attribut transform in Zeile 3 bis 6)?
   • An welchen Ecken fügen sich die Kanten nicht exakt zusammen und wie hängt das Problem mit den Transformationen zusammen? Wie könnte man das Problem beseitigen?
3. Wie muss man den Quelltext abändern, um die Graphik unten zu erzeugen?

Abbildung 4: Gegenüber Abbildung 3 leicht verändertes Zehneck.

Skalierbare Vektorgraphiken können eingesetzt werden um Animationen zu erzeugen.

Das Beispiel unten zeigt eine Interferenz-Erscheinung: Zwei punktförmige, kohärente Lichtquellen, die Licht einer Wellenlänge aussenden; die Wellenlänge ist genau ein Drittel des Abstandes der Lichtquellen.

Abbildung 5: Interferenz zweier kohärenter Lichtquellen als Animation.

Aufgaben:

1. Woran erkennt man an der Animation zur Interferenz, dass die Wellenlänge genau ein Drittel des Abstandes der Lichtquellen ist?
2. Welche Bedeutung haben die grauen Geraden in der rechten Hälfte?