Auszeichnungssprachen (markup language)

Programmiersprachen werden eingesetzt, um Algorithmen zu schreiben. Auszeichnungssprachen sind dazu da, um die Elemente eines Textes (wie ├ťberschriften, Flie├čtext, Listen und dergleichen) logisch auszuzeichnen und meist Formatierungsregeln f├╝r diese Elemente festzulegen. Als Beispiele f├╝r Auszeichnungssprachen werden LaTeX, HTML, XML und SVG vorgestellt. Der Vorteil einer Auszeichnungssprache ist, dass sie sowohl menschen-lesbar als auch maschinen-lesbar ist, wodurch sie insbesondere in der automaischen Textverarbeitung eingesetzt wird.
Noch keine Stimmen abgegeben
Noch keine Kommentare

Einordnung des Artikels

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.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.

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.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.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.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.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?