Technik für den elektronischen Markt

"Sprachen des EM: SGML und HTML"

4. Dezember 1996



Vorwort

Dieser Vortrag ist im Rahmen des Seminars Technik für den elektronischen Markt entstanden. Er soll einen Überblick über wesentliche Fundamente von SGML und HTML schaffen.
Er wurde mit Netscape 3.0 erstellt und wird damit korrekt angezeigt, andere Browser können bei gewissen Darstellungen Probleme bereiten.


Internet und World Wide Web

Das Internet wurde 1969 von Bolt, Beranek und Newmann als ARPANET im Auftrag der Advanced Research Projects Agency (ARPA) des US-Verteidigungsministeriums entwickelt. Es verband Universitäten, Militär und Rüstungsindustrie. Es sollte Forschern bei der Informationsübermittlung und deren gemeinsamer Nutzung helfen. Außerdem war es gedacht, um im Falle eines Nuklearangriffs die Kommunikation aufrecht zu erhalten. Nach und nach entwickelten sich die einzelnen Dienste im Internet, wie E-Mail, Mailing-Listen, ftp (File-Transfer-Protokoll), telnet (Remote-Login), gopher, etc. Der neuste Internet-Dienst ist das WWW, das World Wide Web. Durch diesen neuen Service gewinnt das Internet täglich neue Nutzer, die meisten unter ihnen kennen sogar nur das WWW und bezeichnen dieses als das Internet. Im WWW baut sich nun auch überwiegend der neu entstehende elektronische Markt auf. Dieser Vortrag beschäftigt sich nun mit der Sprache HTML, in welcher WWW-Seiten geschrieben sind und mit dem ISO-Standard SGML, auf dem diese Sprache basiert.


SGML

SGML (Standard Generalized Markup Language) ist ein ISO-Standard zum Informationsaustausch. Seine Geschichte begann, als im September 1967 von William Tunnicliffe, dem Vorsitzenden der CGA (Graphic Communications Association), auf einem Meeting die Idee vorgestellt wurde, den Informationsgehalt eines Dokumentes von seinem Format zu trennen. Ende der 60er Jahre schlug er einen universellen Katalog von parametrisierten "editorial structured tags" (Steuerelemente zur Formatierung) vor. Charles Goldfarb, der Leiter des IBM Forschungsprojekts zur Integration der Informationssysteme, erfand kurz darauf zusammen mit Edward Mosher und Raymond Lorie GML (Generalized Markup Language), eine auf ASCII-Text beruhende Seitenbeschreibungssprache. Goldfarb ergänzte und vervollständigte sein Konzept GML in den folgenden Jahren, bis er 1978 vom ANSI (American National Standards Institute) den Auftrag erhielt, SGML zu standardisieren. 1986 wurde dann der ISO-Standard ISO 8879:1986 veröffentlicht.

Deklarationen

SGML erlaubt einen Informationsaustausch zwischen den verschiedensten Rechnerarchitekturen und Betriebssystemen. Es sieht eine strikte Trennung zwischen den Daten und den Steuerelementen vor. Damit der Datenaustausch zwischen den verschiedensten Rechnerarchitekturen möglichst flexibel ist, wurden als Daten und ebenso als Steuerelemente nur 7-bit ASCII-Zeichen zugelassen. Nun stellt sich die Frage, wie man später erkennen kann, welche Dokumentteile Daten und welche Steuerzeichen beinhalten. Dazu mußte man wenig verwendete Zeichen benutzen. SGML sieht hierzu die Ungleichheitszeichen vor, die ein <Steuerelement>, auch <TAG> genannt umschließen. Außerdem benötigt man noch eine Möglichkeit, Dokumente, Bilder oder Sonderzeichen an eine bestimmte Stelle im Text zu plazieren, dies geschieht mit folgenden Kürzeln: &Kürzel;. Anfangs versuchte man bei der Standardisierung von SGML einheitliche TAG's für alle möglichen Arten von Dokumenten zu entwerfen, doch man stellte schnell fest, das dies bei der Vielzahl der Dokumenttypen kaum möglich war. Deshalb wurde SGML nicht zu einer Menge von Standard-TAG's, sondern zu einer Sprache zum entwerfen von Dokumenttypen, d.h. man kann damit seine eigenen Dokumenttypen definieren, auch DTD (document type definition) genannt, und auch die zugehörigen TAG's und Kürzel. Ein SGML-Dokument besteht deshalb aus einem Deklarationsteil und einem Datenteil.
Man baut es ganz formal in einer Art Top-Down-Methode auf. TAG's kennzeichnen im Datenteil den Beginn eines Textabschnittes mit <TAG> und das Ende mit</TAG>. Sie unterteilen das Dokument in bestimmte Abschnitte. Z.B. kennzeichnet man jeden Absatz und jede Überschrift. Nun kann man sich Programme schreiben, die verschiedenartig auf solche TAG's reagieren, z.B. kann man sich nur die Überschriften eines Textes ausgeben lassen.

Eine SGML Deklaration sieht folgendermaßen aus:
<!Schlüsselwort Parameter evtl. zusätzliche Parameter>
Das Schlüsselwort kann entweder DOCTYPE, ELEMENT, ATTLIST, ENTITY, NOTATION, SHORTREF oder USEMAP sein. Der Parameter gibt je nach Schlüsselwort den Namen des Dokumenttypes, des Steuerelementes etc. an und die zusätzlichen Parameter hängen auch vom Schlüsselwort ab.

Am wichtigsten ist die Dokumenttypendeklaration. Aus ihr besteht der komplette Deklarationsteil eines SGML-Dokumentes. Er ist von der Form:
<!DOCTYPE Dokumenttypname [ Sämtliche Deklarationen ]>
In den eckigen Klammern werden alle weiteren Deklarationen für diesen Dokumenttyp angegeben, also auch sämtliche TAG's etc. Einfache TAG-Elemente definiert man folgendermaßen:
<!ELEMENT TAG-Name Bestandteile>
Um das Element <Kapitel> zu definieren würde man z.B.
<!ELEMENT Kapitel (Name, (Absatz | Kopfzeile)+)>
eingeben. Das Schlüsselwort ELEMENT steht also bei einer TAG-Deklaration. Mit einem Komma trennt man eine Abfolge von Elementen. Ein senkrechter Strich ist wie ein Oder-Zeichen und ein Pluszeichen bedeutet, das dieses Element einmal oder mehrmals vorkommt. Weitere Symbole, die vorkommen können, sind das &-Zeichen, es ist dem Und-Zeichen gleich zu setzen. Ein ?-Zeichen bedeutet, der Parameter ist optional und ein *-Zeichen heißt, er kann beliebig oft vorkommen. Man kennt ähnliche Symbole aus der Backus-Nauer-Form
Als nächsten Schritt definiert man nun die Unterelemente:
<!ELEMENT (Name | Absatz | Kopfzeile) (#PCDATA)>
Damit deklariert man, daß die Unterelemente Name, Absatz und Kopfzeile keine Unterelemente mehr haben, sondern nur PCDATA (parsed character data), also nur reinen ASCII-Text. PCDATA ist ein reservierter Name in SGML.
Mit diesen Deklarationen kann man nun schon einen Dokumentinhalt aufbauen:

<Kapitel><Name>Eine kleine Geschichte</Name>
<Absatz>Es war einmal ...</Absatz>
<Absatz>Der Bauer lief zu seiner Frau ... </Absatz></Kapitel>

Nun füge man als Beispiel noch das Element Kapitel als Unterelement des Elementes Text ein, und kann dann folgendes Beispiel-SGML-Dokument mit Deklarationsteil und Datenteil aufbauen:

<!ELEMENT Text (Kapitel, Autor)>
<!ELEMENT Kapitel (Name, (Absatz | Kopfzeile)+)>
<!ELEMENT (Name | Absatz | Kopfzeile | Autor) (#PCDATA)>

<Text><Kapitel><Name>Eine kleine Geschichte</Name>
<Absatz>Es war einmal ...</Absatz>
<Absatz>Der Bauer lief zu seiner Frau ... </Absatz></Kapitel>
<Autor>Sven Mayer</Autor></Text>

Würde man nun zum Beispiel das Element Autor im Datenteil weglassen, hätte man kein gültiges SGML-Dokument mehr, denn dieses Element muß nach dem Deklarationsteil vorhanden sein. Neben der Möglichkeit, Elemente zu deklarieren, bietet SGML noch weitere Möglichkeiten. Mit ENTITY bestimmt man Kürzel für Sonderzeichen, oder häufig verwendete Wörter:
<!ENTITY Kürzel "darzustellendes Zeichen">
Z.B. <!ENTITY lt "<">
&lt; steht dann als Kürzel für das Kleiner-Zeichen. Mit ATTLIST kann man einem Element eine Menge von Eigenschaften zuweisen und eine davon als Standard verwenden:
<!ATTLIST Element Eigenschaften Standard>
Beispiel:
<!ATTLIST Absatz (links | zentriert | rechts) links>
Ein Absatz-Element kann dann linksbündig, rechtsbündig oder zentriert sein. Standard ist linksbündig. Mit NOTATION kann man nicht-SGML-Daten (z.B. Bilder, Ton) mit einem System verbinden, welches dieses Format lesen kann:
<!NOTATION nicht-SGML-Daten System>
Man kann so z.B. JPG-Bilder mit einem entsprechenden Anzeigeprogramm verbinden. Außerdem gibt es noch SHORTREF und USEMAP. Diese beiden Schlüsselwörter werden heutzutage seltener benutzt, da sie Abkürzungen erzeugen und verbinden, was im heutigen Zeitalter der Massenspeichermedien kaum noch Verwendung findet. Mit SHORTREF benennt man Abkürzungs-TAG's: <!SHORTREF Name Text Abkürzung>.
Beispiel: <!SHORTREF Floskeln "Mit freundlichen Gruessen" mfg "Sehr geehrte Damen und Herren" sg>
USEMAP aktiviert eine Menge von SHORTREF's. für ein Element:
<!USEMAP Shortref-Name Element-Name>

Bei SGML herrscht eine strikte Trennung zwischen der Deklaration und ihrer späteren Anwendung. Im Kopfteil eines SGML-Dokumentes deklariert man den Dokumenttyp und seine Steuerelemente und im eigentlichen Body-Part ist das Dokument mit Formatierungen enthalten. Statt der Deklaration kann man auch Verweise auf bereits vorhandene Deklarationen einfügen. Man kann diese auch weglassen, wenn Erzeuger und Anwender eines Dokumentes sich auf eine Deklaration geeinigt haben.


HTML

Man deklariere nun einen speziellen SGML-Dokumententyp, er soll HTML heißen und soll aus den Elementen HEAD und BODY bestehen. Damit kann man dann folgendes Dokument aufbauen:

<HTML>
<HEAD>Kopfteil</HEAD>
<BODY>Rumpfteil</BODY>
</HTML>

Dieser Dokumenttyp HTML enthalte nun keinen Deklarationsteil, da Erzeuger und Anwender über eine Standard-Deklaration verfügen sollen. Außerdem erhalte er die Eigenschaft, Links einzubauen. Links sind in Grunde genommen Verweise auf andere Referenzen. Es gab sie schon früher in Büchern. Dort war einfach vermerkt: "Siehe Seite ..." oder "Siehe Buch ... Seite ...". Auch Fußnoten sind im Prinzip Links zu anderen Texten. HTML-Dokumente sollen nun solche Links in Form von Adressen anderer Dokumente zu einem Textelement enthalten. Sie haben die Form:
<A HREF="Dokument-Adresse">Textelement</A>

HTML (HyperText Markup Language) ist die Seitenbeschreibungssprache, auf der WWW-Seiten basieren. HTML basiert auf SGML. Es wird in SGML deklariert. Im Gegensatz zu normalen SGML-Deklarationen, die willkürlich sind, ist HTML jedoch standardisiert. Momentan ist die Version 2.0 aktuell, obwohl HTML 3.0 schon als fertiger Entwurf vorliegt. Da HTML in SGML definiert wurde, werden auch hier Textelemente mit <TAG> begonnen und mit </TAG> beendet. Bei HTML handelt es sich um eine Hypertext-Sprache. Hypertext bedeutet, daß sich im Text besonders hervorgehobene Textelemente befinden, die z.B. besonders farblich markiert oder unterstrichen sind. Klickt man diese Textelemente an, so gelangt man in ein anderes Dokument, oder zu einer anderen Stelle im selben Dokument. Auf diese Weise kann man zu einem Wort auf eine Referenz verweisen. So ist z.B. auch die Windows-Hilfe aufgebaut. Programme zum Anzeigen von HTML-Seiten, sogenannte Browser, können die bereits erwähnten Links zu anderen Dokumentadressen als Hypertextstellen darstellen. Dieses Dokument kann die verschiedensten Formate haben. Meistens wird es sich hierbei auch um ein HTML-Dokument handeln. Es kann jedoch auch ein Bild, ein Video, eine Audio-Datei, ein ZIP-File etc. sein. Befindet sich das angegebene Dokument nicht auf dem eigenen Rechner, so muß die gesamte Internet-Adresse angegeben werden. Mit deren Aufbau beschäftigt sich jedoch ein anderer Seminarvortrag. Das gesamte World Wide Web basiert nun auf der Hypertext-Sprache HTML. Mit Ihrer Hilfe kann man über das weltweite Internet praktisch zwischen Dokumenten auf verschiedenen Kontinenten hin und her springen, ohne daß dies der Anwender richtig mitbekommt. Paul Gilster schreibt eindrucksvoll in seinem Buch "Der Internetnavigator": "Ebenso wie Sie Schlüsselbegriffe in einem Hypertext-Dokument miteinander verknüpfen können, ist es möglich, über WWW-Verbindungen durch den Cyberspace des Internet zu reisen."

Wie schon erwähnt, werden alle Textelemente mit <TAG> begonnen und mit </TAG> beendet. Diese TAG's schreibt man laut Konvention groß, die meisten späteren Anwendungen akzeptieren sie jedoch auch in Kleinschrift. Man beginnt HTML-Dokumente mit <HTML> und beendet sie mit </HTML>. Grob eingeteilt besteht ein HTML-Dokument aus zwei Teilen. Dem Kopfteil, der mit <HEAD> begonnen und mit </HEAD> beendet wird und dem "Rumpf"-Teil, dem eigentlichen Hauptteil, der mit <BODY> begonnen und mit</BODY> beendet wird. Im Kopfteil werden Festlegungen über den Titel der Web-Seite gemacht. Den mit <TITLE> markierten Text zeigen die meisten Browser in ihrer Titelleiste an. Außerdem befinden sich Metainformationen im Dokumentkopf. In den mit <META> gekennzeichneten Teil kann der Autor eines Dokumentes Informationen unterbringen, die nicht zum Anzeigen, jedoch für bestimmte Programme gedacht sind. Dies können z.B. Ablaufdatum der Seite, für Programme, die diese zwischenspeichern, Kontextinformationen für Suchmaschinen, der Name des Verfassers, oder weitere Sachen sein. In den Body-Part des Dokuments wird der eigentliche Text geschrieben, der später auf der Web-Seite zu sehen sein wird. Hier verwendet man ganz normalen 7-Bit ASCII Text. Deshalb kann man natürlich keine Sonderzeichen, wie Umlaute, darstellen. Es gibt dafür jedoch verschiedene Kürzel, damit der Browser Sonderzeichen trotzdem Anzeigen kann. Auch Zeichen, wie <, >, & und " benötigen solche Kürzel, da sie, wie in SGML, Grundelemente der HTML-Sprache sind und in bestimmten Zusammenhängen bestimmte Bedeutungen für die Sprache haben. Hier eine kleine Liste solcher Kürzel. Eine relativ ausführliche Liste findet man hier.

&Auml; = Ä
&Ouml; = Ö
&Uuml; = Ü
&auml; = ä
&ouml; = ö
&uuml; = ü
&szlig; = ß

Bei diesen Kürzeln ist die Groß- und Kleinschreibung jedoch von Bedeutung.

Textformatierungen

Im HTML-Standard ist nun genau festgelegt, welcher TAG, welche Darstellung eines Textes bewirkt. Für ein Programm ist es nun nicht zwingend notwendig, sich an einen solchen Standard zu halten, d.h. man könnte ein Programm schreiben, das diese TAG's anders interpretiert und z.B. laut HTML-Standard kursiven Text fett darstellt. Da jedoch Standards dafür gemacht wurden, um sich daran zu halten, seien hier nun die wichtigsten HTML-TAG's erklärt und gezeigt, wie sie von fast allen Browser dargestellt werden.

HTML 2.0

Manche Steuerelemente kommen nun nicht paarig vor. Dies sind z.B. Steuerelemente für Zeilenumbrüche und ähnliches. Neben dem Zeilenumbruch, den die meisten Browser automatisch am Fensterende machen, gibt es drei verschiedene Arten eines Zeilenumbruches. Mit <BR> erzeugt man nur einen Zeilenumbruch. Mit <P> erzeugt man einen Zeilenumbruch mit anschließender Leerzeile. Laut HTML 2.0 Standard sollte man sogar einen Absatz mit <P> beginnen und mit </P> beenden, das hat sich aber nicht durchgesetzt, da </P> einfach überflüssig ist, und ist somit in HTML 3.0 keine Vorschrift mehr.
Mit <HR> erzeugt man einen Zeilenumbruch mit anschließendem Trennstrich.

Die Schriftart, in der der Text später im Browser angezeigt wird, hängt von diesem ab. Laut HTML 2.0 gibt es nur eine proportionale Schriftart und eine nicht-proportionale Schriftart.
HTML hat sechs verschiedene Überschriftsgrößen. Diese werden durch <H1> bis <H6> begonnen und durch </H1> bis </H6> beendet. Nach einer Überschrift erfolgt automatisch ein Sprung in die nächste Zeile.

<H1>Headline 1</H1>

Headline 1

<H2>Headline 2</H2>

Headline 2

<H3>Headline 3</H3>

Headline 3

<H4>Headline 4</H4>

Headline 4

<H5>Headline 5</H5>
Headline 5
<H6>Headline 6</H6>
Headline 6

Der Browser verwendet Standardmäßig die proportionale Schriftart. Mit <TT> kann man die nicht-proportionale Schriftart auswählen.

<TT>Nicht-Proportionale Schrift</TT> Nicht-Proportionale Schrift

Natürlich ist auch Fettschrift, Kursivschrift, Unterstreichen und Durchstreichen, sowie eine Kombination davon in HTML möglich.

<I>Italic</I> Italic
<B>Bold</B> Bold
<U>Unterstrichen</U> Unterstrichen
<STRIKE>Durchgestrichen</STRIKE> Durchgestrichen

Achtung: Auf Schwarz-Weiß-Monitoren kann man evtl. unterstrichenen Text nicht mehr von Hypertextstellen unterscheiden !!!

Kombinationen mehrerer HTML-Elemente sind ganz einfach durch markieren eines Abschnittes mit zwei TAG's zu erreichen.
Beispiel: <U><STRIKE>Text</STRIKE></U> wird als Text dargestellt.

Als weitere Möglichkeit kann man mit HTML Listen erstellen. Es gibt drei verschiedene Arten von Listen: Numerierte Listen, Listen mit Punkten und Listen ohne irgendwelche Ordnungszeichen. Hierfür verwendet man drei verschiedene TAG's: <OL> (ordered List) für numerierte Listen, <UL> (unordered List) für Listen mit Punkten und <DL> (descriptive list) für Listen ohne irgendwelche Ordnungszeichen.
Bei den ersten beiden Listenarten kennzeichnet man dann die einzelnen Listenelemente mit <LI>. Ein Beispiel dafür ist:

<OL>
<LI>Listenpunkt 1
<LI>Listenpunkt 2
</OL>

Darstellung:

  1. Listenpunkt 1
  2. Listenpunkt 2

Die dritte Listenform unterscheidet zwischen description title <DT> und description description <DD>. DT steht auf der Höhe des übrigen Textes und DD ist eingerückt. Beispiel:

<DL>
<DT>description title
<DD>description description
</DL>

Darstellung:

description title
description description

Weitere Möglichkeiten, die HTML 2.0 bietet, ist unter anderem das Einbinden von Bildern in den Text, eine Textausrichtung mit dem ALIGN-Befehl, Formulare und viele weitere Elemente.

HTML 3.0

HTML 3.0 bietet weitere Möglichkeiten, Text zu formatieren. Wichtige Neuerungen, die heutzutage jede Textverarbeitung beherrscht, sind vergrößerte und verkleinerte Darstellung, tief- und hochstellen:

<BIG>Big</BIG> Big
<SMALL>Small</SMALL> Small
<SUP>hochgestellt</SUP> hochgestellt
<SUB>tiefgestellt</SUB> tiefgestellt

Außerdem führte HTML 3.0 als wichtige Neuerung Tabellen ein. Eine Tabelle kennzeichnet man mit <TABLE>. Gibt man <TABLE BORDER> an, so erhält man eine Tabelle mit Rahmen. Mit <TR> (table row) markiert man die die Tabellenreihen und mit <TD> kennzeichnet man die Tabellenspalten. Beispiel:

<TABLE BORDER>
<TR>
<TD>Erste</TD><TD>Zeile</TD>
</TR>
<TR>
<TD>Zweite</TD><TD>Zeile</TD>
</TR>
</TABLE>

Darstellung:

ErsteZeile
ZweiteZeile

Nicht nur bei den Tabellen bietet HTML 3.0 noch viele weitere Möglichkeiten, wie z.B. Tabellennamen und Titelzeilen, auch sonst kann man viele Verbesserungen gegenüber älteren HTML-Versionen finden.

Browser

Verschiedene Browser können auf TAG's verschieden reagieren. Bei ihnen unbekannten TAG's ignorieren manche diese TAG's und stellen den Text dazwischen normal dar. Andere Browser ignorieren sowohl die TAG's, als auch den Text dazwischen. Manche Browser deklarieren auch einfach eigene TAG's, die nur sie kennen. Der vielbenutzte Browser Netscape ist eines von vielen Beispielen, wo man Abweichungen vom HTML-Standart findet. Er benutzt neben den in HTML 2.0 und HTML 3.0 standardisierten TAG's noch eigene TAG's, die gerne verwendet werden, jedoch nicht standardisiert sind. Bei ihrer Verwendung muß man davon ausgehen, das andere Browser diese nicht erkennen:

<CENTER>zentriert</CENTER>
zentriert
<BLINK>blinkend</BLINK> blinkend


Abschlußbemerkung

Dies war ein kleiner Einblick in die Welt der HTML-Befehle und Möglichkeiten von SGML. Man könnte sagen, mit SGML läßt sich jedes beliebige Dokument darstellen. Bei HTML wird, neben den von mir ausgelassenen Befehlen, die bei weitem den Umfang des Vortrages sprengen würden, die Entwicklung für die Zukunft sicher noch einiges an neuen zusätzlichen Möglichkeiten bieten.

Hier noch Begriffserklärungen (auf englisch):
SGML
Hypertext

Die Folien zum Vortrag sind im Microsoft Win-Word-Format 6.0


Quellenangaben