Schicht 7 -- Application Layer, Teil 3

Die Anwendungsschicht im Internet: WWW -- World Wide Web

- HTML und CSS -

HTML -- HyperText Markup Language:

Vorbemerkung: Da es inzwischen sehr gute HTML-Editoren (z.B. Phase 5) gibt, werden im Folgenden nicht alle Möglichkeiten von HTML beschrieben. Der Schwerpunkt liegt vielmehr auf den Punkten, die für das Grundverständnis von HTML nötig erscheinen.

HTTP setzt voraus, dass die Dokumente in HyperText Markup Language (HTML) abgefasst sind. HTML definiert die (logische) Struktur eines Dokuments so, dass jeder Hypertext Browser (z.B. Lynx, Mosaic, NetScape, MS Internet Explorer) ihn lesen kann und ihn auf seine eigene Art darstellen kann.

HTML ist eine Anwendung der Standard Generalized Markup Language (SGML) (ISO Standard 8879). (Zu SGML s. oben). HTML verwendet für die Kodierung ausschließlich den Standardzeichensatz nach ISO 8859.

Folgende Versionen von HTML sind vorhanden:

• HTML 1.0 (basic HTML, Standard): Minimalanforderung
• HTML 2.0 [RFC 1866]: enthält u.a. die Möglichkeit für Formulare zum Ausfüllen durch den Benutzer
• HTML 3 [Internet Draft.-- URL: http://www.w3.org/MarkUp/html3/CoverPage.html]: kann Tabellen, Kurven und mathematische Gleichungen einbinden und hat viele weitere Möglichkeiten. Kein Browser erfüllt aber HML 3.0, sondern alle Browser erfüllen nur einen Teil der Spezifikationen von HTML 3.0. Um dieser Tatsache Rechnung zu tragen entwickelte man:
• HTML 3.2 [W3C Recommendation. -- URL: http://www.w3.org/TR/REC-html32.html]: HTML 3.2 definiert praktisch alle Spezifikationen, die von Browsern wie Netscape u.ä. vor Mai 1996 verwirklicht waren. HTML 3.2 ist also nicht, wie die Versionsbezeichnung 3.2 vermuten lassen könnte, eine Verbesserung von HTML 3.0, sondern nur ein Subset von HTML 3.0. HTML 3.0 ist mit HTML 2.0 abwärts kompatibel und sollte HTML 2.0 vollständig ersetzen
• HTML 4.0  [W3C Recommendation. -- URL: http://www.w3.org/TR/1998/REC-html40-19980424/]: im Dezember 1997 veröffentlicht, revidiert am 24. April 1998. Besteht aus drei DTDs (Document Type Descriptions in SGML):
  • Frameset DTD: soll für die Interpretation von Dokumenten, d.h. in Browsern, verwendet werden, nicht um Dokumente zu erzeugen. Diese DTD enthält nämlich Elemente und Attribute, die zwar im Gebrauch sind, aber nicht dem Standard entsprechen (z.B. <BASEFONT>, <CENTER>, <FONT>, <S>, <STRIKE>). Auch enthält es Elemente früherer HTML-Versionen, die durch andere Elemente ersetzt werden sollen (z.B. <APPLET> soll ersetzt werden durch <OBJECT>, <DIR> und <MENU> durch <UL>, <ISINDEX> durch <INPUT>). Diese DTD enthält auch Attribute zur Formatierung, die durch CSS ersetzt sind. [Frameset DTD. -- URL: wurden.http://www.w3.org/TR/REC-html40/sgml/loosedtd.html]
  • Strict DTD: enthält nur die voll dem Standard entsprechenden Elemente und Attribute. Sollte zur Erzeugung von HTML-Dokumenten verwendet werden, z.B. von HTML-Editoren. [Strict DTD. -- URL: http://www.w3.org/TR/REC-html40/sgml/dtd.html]
  • Frameset DTD: spezifiziert die Frames (im Unterschied zum in den Frames Dargestellten). HTML übernimmt erstmals Frames in den Standard. [Frameset DTD. -- URL: http://www.w3.org/TR/REC-html40/sgml/Framesetdtd.html]

Daneben versuchen besonders Netscape und Microsoft (Internet Explorer) proprietäre Erweiterungen durchzusetzen.

Bei der Verwendung von HTML sollte man sich immer folgender Punkte bewusst sein:

• HTML ist keine WYSIWYG (What you see is what you get) Layout Design Language. HTML ist als Markup language in erster Linie dazu gedacht, die logische / aufbaumäßige Struktur eines Dokuments zu definieren, nicht das genaue Layout. Das genaue Layout definieren Page definition languages wie Adobe Acrobat oder Common Ground. Dennoch geht die Entwicklung bei HTML sowie besonders von Style, CSS (Cascading Style Sheets) und den proprietären HTML-Erweiterungen immer mehr dahin, dass man mit HTML auch das Layout der Web-Seiten bestimmen kann.
• HTML ist keine Programmiersprache
• HTML ist leider noch immer nicht wirklich standardisiert: besonders Microsoft und Netscape versuchen immer wieder durch proprietäre Erweiterungen einen Marktvorteil zu ergattern
• HTML ist nicht so erweiterbar wie XML: für wirklich den Problemen angepasste Lösungen ist wohl XML die Sprache der Zukunft
• HTML ist nicht ein abgeschlossener Standard, sondern immer noch in steter Fortentwicklung. Dies bedeutet, dass man sich beim Einsatz von HTML immer fragen muss, ob man beim ins Auge gefassten Nutzerkreis hardware- und softwaremäßig die Voraussetzungen für den Gebrauch der angewandten Features voraussetzen darf
• gute HTML-Kenntnisse bedeuten nicht, dass man auch gute Web-Sites gestalten kann. Das wichtigste ist immer noch, dass man auch etwas zu sagen bzw. anzubieten hat. Tolles Design ohne guten Inhalt ist schlechtes Design!

Syntax eines HTML-Elements

Die Bausteine von HTML sind Elemente.

Syntax eines HTML-Elements:

Eine ausgezeichnete Übersicht zum Nachschlagen über alle Elemente ist:

• http://www.htmlref.com/Reference/AppA/elements.htm

Attribute

Neben für die einzelnen Elemente spezifischen Attributen, gibt es in HTML 4.0 vier Attribute, die in fast allen Elementen vorkommen können (core attributes):

Zu den vielen Möglichkeiten, Attribute zu nutzen (z.B. für Layout, Hintergrundfarben usw.) konsultiere man die angegebenen weiterführenden Ressourcen bzw. benutze einen HTML-Editor, der Attribute komfortabel unterstützt.

Sprachenunterstützung:

HTML 4.0 sieht eine Unterstützung für alle Sprachen der Welt vor. Leider ist noch kein Browser wirklich global, wenn auch Internet Explorer 5.0 schon einen guten Anfang macht (Unterstützung u.a. für Chinesisch, Koreanisch, Japanisch, Thai, Arabisch, Hebräisch). Die beiden diesbezüglichen Attribute sind:

Interaktivitäts-Attribute: Events Reference:

Um mehr Interaktivität zu ermöglichen, hat das W3-Consortium eine Anzahl von sogenannten Events (Vorgängen, die vom Nutzer eingeleitet werden) definiert, die als Attribut mit fast jedem HTML-Element verbunden werden können. Solche Event-Attribute sind z.B.:

• onkeydown
• onmousedown
• onmouseover
• onsubmit
• onunload

Die Reaktion auf solche Events muss kontextspezifisch festgelegt werden.

Grundstruktur eines HTML-Dokuments :

Die Grundstruktur eines HTML-Dokuments ist:

Die Formatierung eines HTML-Dokumentes wird nur dann wirksam, wenn sie durch Tag's definiert wird. Sonstige CR's usw. sind für die Browser ohne Bedeutung! Man kann also das HTML-Dokument für die Bearbeitung so strukturieren, wie es einem für die Bearbeitung am übersichtlichsten erscheint.

<!DOCTYPE >-Declaration:

Die <!DOCTYPE >-Declaration erlaubt es Editoren usw. das HTML-Dokument darauf zu überprüfen, ob es der entsprechenden DTD (Document  Type Declaration) entspricht.

Die wichtigsten Werte für HTML-Version sind:

Elemente des HEAD:

HEAD-Elemente bezeichnen Eigenschaften des ganzen Dokuments wie z.B. den Titel. Die Web-Browser können dann z.B. den Titel am Kopf jedes Bildschirms angeben. HEAD-Elemente werden nicht als Teile des Dokuments dargestellt, d.h. je nach Browser werden sie u.U. überhaupt nicht dargestellt (Unterscheide also TITLE [Bestandteil des HEAD] von HEADING [Bestandteil des BODY, eigentliche Überschrift]!).

Das <HEAD>-Element ist optional, sollte aber nie weggelassen werden.

Das wichtigste Element im HEAD ist <TITLE>...</TITLE>. Das <TITLE>-Element ist obligatorisch, darf nie weggelassen werden (auch nicht, wenn das <HEAD>-Element weggelassen wird.

Elemente des HEAD:

Elemente des BODY:

Block-Level-Elemente

Block-level-Elemente definieren strukturelle Blöcke wie Abschnitte und Listen.

HEADINGS (Überschriften): bis zu sechs Stufen von Überschriften sind zulässig, bezeichnet mit <H1> bis <H6>

PARAGRAPH MARKS definieren einen Absatz, gekennzeichnet durch Leerzeile:

LINE BREAKS (Zeilenvorschub):

Nur Formatierungen mit HTML-Tags sind für die Browser wirksam!

DIVISIONS:

Das <DIV>-Element erlaubt es für einen Block bestimmte Eigenschaften zu definieren.

BLOCK QUOTES:

PREFORMATTED TEXT: der Text wird im Browser in der Form angezeigt, wie er geschrieben ist:

Dies ist
vorformatierter

Text

LISTEN:

Beispiel Definitionsliste:

Katze

Geschwanzte Lichtgestalt

HORIZONTAL RULES (horizontale Linien):

TABLES (Tabellen):

FORMS (Formulare):

Weiteres zu Formularen s. unten.

13.5.2.10.3.5.2.  Text-Level-Elemente

LOGISCHE TEXT-LEVEL-ELEMENTE:

PHYSISCHE TEXT-LEVEL-ELEMENTE:

RESERVIERTE ZEICHEN UND SONDERZEICHEN:

Durch HTML belegte Sonderzeichen und andere Sonderzeichen:

Da in HTML die Zeichen < > & " festgelegte Bedeutungen haben, müssen diese, wenn sie als Textzeichen verwendet werden, besonders dargestellt werden. Da Spatien bis auf eines entfernt werden, müssen andere Spatien ebenfalls kodiert werden:

Syntax:

Auch andere Sonderzeichen sind auf diese Weise definiert. Wichtig sind die deutschen Umlaute sowie ß:

Links (Hypertext-Verknüpfungen):

ANCHORS  

Anchors sind die wichtigsten Hypertext-Elemente in HTML. Mittels von Anchors (Ankern) kann man Hypertext-Verknüpfungen (Hyperlinks) herstellen.

Der Text wird im Browser hervorgehoben dargestellt. Klickt der Benutzer diesen Text an, wird die Verbindung hergestellt.

Solche Verknüpfungen sind möglich zu:

Anchors können u.a. folgende Attribute haben:

IMAGE MAPS

Eine weitere Form von Linking sind anklickbare Bilder (Image Maps). Image Maps können die Verknüpfung herstellen:

• auf Seiten des Server
• auf Seiten des Client

Zu Einzelheiten siehe die im WWW reichlich vorhandenen Ressourcen zu Imagemaps:

SEMANTISCHE LINKS MIT <LINK>:

Anchors und Imagemaps sagen nichts aus über die inhaltliche Beziehung der verweisenden Ressource zur Ressource, mit der der Link verknüpft (es kann die Verknüpfung mit einem integralen Bestandteil der Ressource -- z.B. einem Unterkapitel -- sein oder auch eine Verknüpfung mit etwas, was nur einen sehr losen Bezug zur verknüpfenden Ressource hat). Hier sucht das <LINK>-Element Abhilfe zu schaffen, indem es neben der Verknüpfung  mittels des Attributes HREF auch die Art der Beziehung durch das Attribut REL festlegt. In HTML 4.0 ist auch ein das Verhältnis des Verknüpften zum Verknüpfenden durch das Attribut REV (reverse), d.h. umgekehrtes Verhältnis, festlegbar. Das <LINK>-Element kann nur im HEAD der HTML-Ressource vorkommen.

Elementare Syntax von <LINK>:

Es gibt unterdessen eine große Liste möglicher Werte (relationship) für REL. Im Folgenden werden die Attribute genannt, die schon in HTML 3.2 vorgesehen sind:

Der einzige verbreitete Browser, der <LINK> (außer bei CSS) wirklich unterstützt ist WebTV: um die Übertragungsgeschwindigkeit zu steigern, greift der Browser schon auf die nächste Seite zu, während er noch die vorangehende darstellt. (Vgl.

Grafiken, Bilder und andere Medien:

Achtung: einige der Beispiele in diesem Abschnitt werden nur mit MS Internet Explorer 5.0 richtig dargestellt!

GRAPHIKEN UND BILDER

Damit Benutzer, die keine graphikfähigen Browser haben bzw. aus Zeitgründen die Darstellung von Graphiken ausgeschaltet haben, wissen, um was es sich beim Bild handelt, das sie nur durch [IMAGE] angezeigt bekommen, verwende man folgende Syntax mit dem Attribut ALT:

Die Angabe von Höhe und Breite des Bildes beschleunigt die Darstellung der Webseite sehr: der Browser kann das  ganze Dokument aufbauen, ohne warten zu müssen bis die einzelnen Bilder eingetroffen sind.

In ein HTML-Dokument selbst können für die meisten Browser nur Bilder in folgenden Formaten eingebunden werden:

• .gif
• .jpeg
• .xbm [X Bitmaps, UNIX]
• .xpm [X Pixelmaps, UNIX]

Andere Formate (auch Audio, Video usw.) rufen über MIME Content Header (s. oben) entsprechende Client-Anwendungsprogramme auf, falls sie vorhanden sind und der Web-Browser entsprechend konfiguriert wurde.

Beim Einbinden von Bildern und Graphiken bedenke man, dass viele Webbenutzer für den Webzugang Telphongebühren und andere Gebühren pro Zeiteinheit zahlen müssen. Solche Nutzer sind nicht unbedingt erfreut, wenn sie für unsinnig mit Graphiken aufgepoppte Webseiten eine Menge Gebühren zahlen müssen, um dann nur zu sehen, dass die Webseite so inhaltslos wie poppig oder protzig ist.

Wie man mit einfachen Mitteln (Animated GIF) wirklich informativ sein kann, zeigen folgende beiden Beispiele von Ed Stephan <1939 - >:

Abb.: Lebenserwartung in den USA 1900 bis 1980

Abb.: Alterspyramide der USA 1950 - 2050 Quelle der Abb.:  http://www.ac.wwu.edu/~stephan/Animation/pyramid.html.

AUDIO

Die einfachste Methode, Audiofiles einzubinden, ist durch einen Anchor, wobei man die Ausführung dem Wunsch des Nutzers sowie Helper-Programmen oder Plugins auf dem PC des Nutzers überläßt:

Eine andere, weitverbreitete, wenn auch nicht offizielle Methode ist, ein Plugin mit <EMBED> zu erstellen (LiveAudio) wie im folgenden Beispiel:

ECHTZEITÜBERTRAGUNG VON AUDIODATEN

RealAudio® ist das wohl verbreitetste System der Echtzeitübertragung über das WWW. In HTML wird es mit <EMBED> wie LiveAudio eingebettet (s. oben).

Weiteres zu RealAudio: http://www.real.com/

VIDEO

Das Folgende soll nur illustrieren, was mit einem Browser wie MS Internet Explorer 5.0 schon möglich ist: 

Das HTML-Markup ist einfach: 

<IMG BORDER="0" DYNSRC="cmc13222.avi" START="fileopen" LOOP="5">

Video: Strandstimmung mit Meeresrauschen

MACROMEDIA's FLASH

 Macromedia's Flash™ ist der Nachfolger zum verbreiteten Shockwave for Director. Es ist ein vektororientiertes Graphikprogramm mit Sound und Interaktivitätsmöglichkeiten. Eingebettet wird es in HTML als Plugin (<EMBED>) oder ActiveX Control (<OBJECT>).

Weiteres s.: http://www.macromedia.com

ACROBAT

 Adobe's Acrobat (.pdf) ist im Unterschied zu HTML ein Seitenbeschreibungsformat, dessen Nutzung dann angebracht ist, wenn es darauf ankommt, dass alle Nutzer das Dokument mit genau dem gleichen Layout erhalten (z.B. bei der Digitalisierung von bibliophilen Werken).

Näheres zu Acrobat: http://www.adobe.com/prodindex/acrobat/readstep.html

Weiterführende Ressourcen zu Graphiken, Bildern und anderen Medien:

Frames (Rahmen)

 Frames sind Rahmen, die es ermöglichen, gleichzeitig den Inhalt mehrerer HTML-Ressourcen darzustellen. Für ein Frame sind mindestens drei HTML-Ressourcen notwendig:

• das Frameset, d.h. das HTML-Dokument, das die Struktur Frame definiert, ohne selbst irgendeinen Inhalt für das Frame darzubieten: das Frameset definiert:
  • das Layout des Frame
  • die Verknüpfung zu den Inhalten der einzelnen Fenster
  • was zu geschehen hat, wenn der Browser keine Frames darstellen kann (<NOFRAMES>)
• mindestens zwei HTML-Dokumente, die das Frame mit Inhalt ausfüllen: dies sind ganz normale HTML-Ressourcen

Abb.: Wirkungsweise eines Frameset

Grundstruktur eines Frameset:

<HTML>

<HEAD>

<TITLE>Titel</TITLE>

</HEAD>
<Frameset Attribute>

<FRAME NAME="Name1" SRC="Pfad">
<FRAME NAME="Name2" SRC="Pfad">

<NOFRAMES>

<BODY>

Text für Benutzer, deren Browser keine Frames unterstützt

</BODY>

</NOFRAMES>

</Frameset>

</HTML>

Beispiel eines einfachen Frameset (definiert zwei Kolumnen, in denen jeweils ein Text dargestellt wird):

Frames können für manche Zwecke durchaus sinnvoll eingesetzt werden, doch ist die gegenwärtige Inflation an Frames im WWW alles andere als benutzerfreundlich. Dabei ist es beim Komfort heutiger HTML-Editoren keinerlei Kunststück, Frames zu erstellen. Warum also dieses lächerliche Imponiergehabe?!

WWW:

• HyperText Markup Language (HTML) / W3C. -- URL: http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html.  ["This is W3C's home page for HTML. Here you will find pointers to our specifications for HTML, guidelines on how to use HTML to the best effect, and pointers to related work at W3C. When W3C decides to become involved in an area of Web technology or policy, it initiates an activity in that area. HTML is one of many Activities currently being pursued."]

CSS -- Cascading Style Sheets

(CSS: siehe auch Kapitel CSS - Einführung)

• W3C Recommendation. URL:http://www.w3.org/TR/REC-CSS1-961217.html

Obwohl HTML keine WYSIWYG (What you see is what you get) Layout Design Language ist, sondern  als Markup language in erster Linie dazu gedacht, die logische / aufbaumäßige Struktur eines Dokuments zu definieren, wurde HTML immer mehr -- vor allem in proprietären Lösungen von Microsoft und Netscape -- mit Features einer Page definition language (Layout) belastet. Um hier wenigstens im Wesentlichen wieder Klarheit zu schaffen, wurde das Konzept der Cascading Style Sheets entwickelt. Die Arbeitsteilung schaut dann im Prinzip so aus:

• HTML -- logisches, aufbaugemäßes Markup
• CSS -- Darstellungsform (Layout auf Bildschirm bzw. im Druck, Eigenschaften der Sprachsynthese in Audioausgabe usw.)

CSS werden zwar mit HTML verknüpft, bzw. in HTML-Markup eingebunden, sie sind aber selbst nicht in HTML markiert, sondern sind Plaintext.

Ein Style Sheet entspricht dem Satzanweisungsformular im traditionellen Buchdruck, während HTML der Markierung im Manuskript entspricht:

"Bewährt hat sich in Verlagen und Druckereien das vorgedruckte [farbige] Satzanweisungsformular im Format DIN A 4. Der Hersteller des Verlags legt die darin geforderten typographischen Angaben fest: 

• Satzbreite
• Kolumnenbreite
• Schriftart
• Auszeichnungen
• Überschriften
• Einzüge
• Fußnoten
• Kolumnentitel usw.

Der mit dem Manuskript betraute Redakteur oder Lektor wird in Übereinstimmung mit dem Autor die Rechtschreibung und in besonderen Anmerkungen bestimmte Schreibweisen und Einzelheiten angeben. Das ist besonders bei schwierigen wissenschaftlichen Werken mit mathematischen, chemischen oder physikalischen Formeln, bei Fremdsprachensatz oder anderen schwierigen Satzarten erforderlich, um zeitraubende Rückfragen zu vermeiden.

Eine Satzanweisung muss kurz und klar stichwortartig Auskunft geben."

[Satzanweisungen und Korrekturvorschriften : mit ausführlicher Beispielsammlung / hrsg. von der Dudenredaktion und der Dudensetzerei. -- Mannheim : Bibliographisches Institut, ©1969. -- 187 S. : Ill. -- (Duden-Taschenbücher ; 5/5a). -- S. 24]

Abb.: "Klassisches" Style-Sheet-Formular: Satzanweisungsformular

[Quelle der Abb.: Satzanweisungen und Korrekturvorschriften : mit ausführlicher Beispielsammlung / hrsg. von der Dudenredaktion und der Dudensetzerei. -- Mannheim : Bibliographisches Institut, ©1969. -- 187 S. : Ill. -- (Duden-Taschenbücher ; 5/5a). -- S. 26f.]

Cascading Style Sheets sind mehrere Style Sheets, die in der Form eines mehrstufigen Wasserfalls (cascade) aufeinander Einfluss nehmen: Prioritäten regeln, welche Anweisung gilt, wenn mehrere Style Sheets dasselbe unterschiedlich regeln: in der Kaskade tiefer stehende Style Sheets haben Vorrang vor weiter oben stehenden.

Beispiel eines einfachen CSS:

Ein Style Sheet ist einfach eine Ansammlung von rules in Plaintext. Eine rule hat folgende Syntax:

Die wichtigsten style properties sind:

Zuordnung von Style zu einem Dokument:

Es gibt drei Methoden, einem Dokument Style zuzuordnen:

Weiterführende Ressourcen:

CSS2

• W3C Recommendation, Mai 1998. -- URL: http://www.w3.org/TR/REC-CSS2/

Die wohl wichtigste Neuerung von CSS2 ist die Definition von Media-Types, d.h. verschiedenen Medien, in denen derselbe Inhalt dargestellt werden kann (z.B. auf Bildschirm, in Druck, als Hörwerk für Sehbehinderte). Je nach Media-Typ können verschiedene Style-Sheets dasselbe Dokument für die Ausgabe formatieren:

Folgendes Style Sheet bestimmt, dass ein Dokument auf dem Bildschirm in großer Schrift (18 pt) dargestellt wird, im Druck in kleinerer (9 pt)

<STYLE TYPE="text/css">

@media screen 

{BODY 
{font-family: sans-serif;
font-size: 18 pt}
}

@media print 

{BODY
{font-family: serif;
font-size: 9 pt}
}

@media screen, print 

{BODY
(line-height: 150%}

</STYLE>

Von den übrigen neuen Features von CSS seien hier noch genannt die Möglichkeiten, die Ausgabe durch Sprachsynthetisizer (vor allem für Sehbehinderte) festzulegen: