Computervermittelte Kommunikation

Kapitel 13, 2,2,2: OSI-7 -- Application Layer, Teil 2, 2

Die Anwendungsschicht im Internet: WWW -- World Wide Web

2. HTML und CSS

von Margarete Payer

mailto: payer@hbi-stuttgart.de

Zitierweise / cite as:

Payer, Margarete <1942 - >: Computervermittelte Kommunikation. -- Kapitel 13, 2,2,2: OSI-7 -- Application Layer. -- Teil 2, 2: Die Anwendungsschicht im Internet: WWW -- World Wide Web. -- 2. HTML und CSS. -- Fassung vom 9. Juli 1999. -- URL: http://www.payer.de/cmc/cmcs13222.htm. -- [Stichwort].

Erstmals publiziert: 1995

Überarbeitungen: 19. Juni 1997; 9. 7. 1999 [grundlegende Überarbeitung und Erweiterung]

Anlass: Lehrveranstaltungen an der HBI Stuttgart

©opyright: Dieser Text steht der Allgemeinheit zur Verfügung. Eine Verwertung in Publikationen, die über übliche Zitate hinausgeht, bedarf der ausdrücklichen Genehmigung der Verfasserin.

Zur Inhaltsübersicht von Margarete Payer: Computervermittelte Kommunikation.

13.0.Übersicht über Teil 2, 2, 2

• 13.5.2.10.3. HTML -- HyperText Markup Language
  • 13.5.2.10.3.1. Syntax eines HTML-Elements
  • 13.5.2.10.3.2. Attribute
  • 13.5.2.10.3.3. Grundstruktur eines HTML-Dokuments
  • 13.5.2.10.3.4. Elemente des HEAD
  • 13.5.2.10.3.5. Elemente des BODY
    • 13.5.2.10.3.5.1.  Block-Level-Elemente
    • 13.5.2.10.3.5.2.  Text-Level-Elemente
    • 13.5.2.10.3.5.3.  Links (Hypertext-Verknüpfungen)
    • 13.5.2.10.3.5.4.  Graphiken, Bilder und andere Medien
  • 13.5.2.10.3.6.  Frames
  • 13.5.2.10.3.7. Weiterführende Ressourcen zu HTML
• 13.5.2.10.4. CSS -- Cascading Style Sheets
  • 13.5.2.10.4.1. CSS2

13.5.2.10.3. HTML -- HyperText Markup Language

Vorbemerkung: Da es inzwischen sehr gute HTML-Editoren (z.B. Frontpage 2000) 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. -- URL: http://www.cis.ohio-state.edu/htbin/rfc/rfc1866.html. -- Zugriff am 2.7.1999]: 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. -- Zugriff am 2.7.1999]: 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. -- Zugriff am 2.7.1999]: 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/. -- Zugriff am 2.7.1999]: im Dezember 1997 veröffentlicht, revidiert am 24. April 1998. Besteht aus drei DTDs (Document Type Descriptions in SGML):
  • Transitional 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. [Transitional DTD. -- URL: wurden.http://www.w3.org/TR/REC-html40/sgml/loosedtd.html. -- Zugriff am 4.7.1999]
  • 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. -- Zugriff am 4.7. 1999]
  • 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. -- Zugriff am 4.7.1999]

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! (Siehe unten 13.5.2.10.9.)

13.5.2.10.3.1. 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. -- Zugriff am 6.7.1999

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

Eine vollständige Liste der Events bietet:

• http://www.htmlref.com/Reference/AppA/events1.htm. -- Zugriff am 6.7.1999
• http://www.htmlref.com/Reference/AppA/events2.htm. -- Zugriff am 6.7.1999

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

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

13.5.2.10.3.5. Elemente des BODY

13.5.2.10.3.5.1.  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 ß:

 Zur Kodierung allgemein und besonders zur Kodierung in UNICODE siehe: Computervermittelte Kommunikation, 12. Presentation Layer, Teil I

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

Yahoo Categories:

• http://dir.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Imagemaps/. -- Zugriff am 7.7.1999

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. http://www.webtv.net/. -- Zugriff am 7.7.1999).

13.5.2.10.3.5.4.  Graphiken, 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 - >:

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/. -- Zugriff am 8.7.1999

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. -- Zugriff am 8.7.1999

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. -- Zugriff am 8.7.1999

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

Yahoo Categories:

• http://dir.yahoo.com/Computers_and_Internet/Multimedia/. -- Zugriff am 8.7.1999

13.5.2.10.3.6.  Frames (Rahmen)

• 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):

Die Wiedergabe dieses Markup in Ihrem Browser können Sie hier sehen: cmcs1322e.htm

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

13.5.2.10.3.7. Weiterführende Ressourcen zu HTML

Yahoo Categories:

• http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/ -- Zugriff am 28.6.1999
• http://www.yahoo.de/Computer_und_Internet/Internet/World_Wide_Web/Erstellen_von_Webseiten/. -- Zugriff am 28.6.1999
• http://www.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/HTML_Editors/. -- Zugriff am 28.6.1999
• http://www.yahoo.de/Computer_und_Internet/Internet/World_Wide_Web/HTML_Editoren/. -- Zugriff am 28.6.1999
• http://www.yahoo.com/Computers_and_Internet/Software/Internet/World_Wide_Web/HTML_Converters/. -- Zugriff am 28.6.1999. -- [Werkzeuge zum Umwandeln anderer Datenformate in HTML und umgekehrt]
• http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and_Layout/. -- Zugriff am 28.6.1999

Virtual Libraries:

• Creating Web Sites. -- URL: http://www.stars.com/Authoring/. -- Zugriff am 28.6.1999
• HTML. -- URL: http://www.stars.com/Vlib/Authoring/HTML.html. -- Zugriff am 28.6.1999
• HTML editors. -- http://www.stars.com/Vlib/Authoring/HTML_Editors.html. -- Zugriff am 28.6.1999
• Imagemaps. -- http://www.stars.com/Vlib/Authoring/Imagemaps.html. -- Zugriff am 28.6.1999
• META. -- [META-Tag (HTML) und anderes Meta]. -- http://www.stars.com/Vlib/Location/Meta.html. -- Zugriff am 28.6.1999

Argus Clearinghouse Categories:

• HTML. -- URL: http://www.clearinghouse.net/cgi-bin/chadmin/viewcat/Computers_and_Information_Technology/Internet_and_networking/HTML__HyperText_Markup_Language_?kywd++. -- Zugriff am 28.6.1999

WWW:

• HyperText Markup Language (HTML) / W3C. -- URL: http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html. -- Zugriff am 28.6.1999. -- ["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."]

Ressourcen in Printform:

Powell, Thomas A.: HTML : the complete reference. -- 2. ed. -- Berkeley [u.a.] : McGraw-Hill, ©1999. -- 1130 S. : Ill. -- ISBN 0072119772. -- [Sehr gute Gesamtdarstellung]. -- {Wenn Sie HIER klicken, können Sie dieses Buch bei amazon.de bestellen}. -- Sehr nützliche Auszüge dieses Buches sind online zugänglich: URL: http://www.htmlref.com/. -- Zugriff am 6.7.1999

 

13.5.2.10.4.  CSS -- Cascading Style Sheets

• W3C Recommendation. -- Dezember 1996. -- URL:http://www.w3.org/TR/REC-CSS1-961217.html. -- Zugriff am 4.7.1999

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:

Die Wirkungen dieses Style Sheet können Sie, falls Ihr Browser CSS unterstützt, sehen unter der URL: cmcs1322a.htm; das gleiche Dokument mit einem anderen Style Sheet finden Sie unter: cmcs1322b.htm.

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

Die wichtigsten style properties sind:

Style Properties	Beispiele
Schrifteigenschaften: font font-family [mögliche Werte: Serif, Sans-serif, Cursive, Fantasy, Monospace] font-size font-style [mögliche Werte: normal, italic, oblique] font-weight [z.B.: bold, light] font-variant [mögliche Werte: normal, small-caps ] text-decoration [mögliche Werte: blink, line-through, overline, underline, none] text-transform [mögliche Werte: capitalize, uppercase, lowercase, none]	P {font: italic 18pt} BODY {font-family: Arial, Helvetica, Sans-serif}[In diesem Fall gibt die Abfolge der Schriften, die jeweils nächste an, die verwendet werden soll, wenn die vorhergehende nicht verfügbar ist] P {font-size: 18pt} H1 {font-style: italic} STRONG {font-weight: bolder} EM {font-variant: small-caps} .Autor {text-decoration: underline} .hoch {text-transform: uppercase}
Farben und Hintergründe: color [Farben können angegeben werden als 16 Farbnamen, Hexadezimale Farbwerte, RGB-Werte] background background-color background-image background-repeat background-attachement background-position	BODY {color: green} H1 {color: #FF0088} H2 {color: rgb(255,102,153)} P {background: navy http://www.payer.de/tuepfli.gif repeat-y center} P {background-color: navy} BODY {background-image: http://www.payer.de/tuepfli.gif; background-repeat: repeat-x}
Texteigenschaften: word-spacing letter-spacing vertical-align text-align text-indent [Einzug in erster Linie] line-height	BODY {word-spacing: 10pt} .weit {letter-spacing: 12pt} .hochgestellt {vertical-align: super; font-size:smaller} DIV {text-align: center} P.stark {text-indent: 50px} P.doppelt {line-height: 200%}
Ränder usw.: margin-top margin-bottom margin-right margin-left border-style [z.B. double, solid] border-width border-color padding-top [padding= Abstand des Inhalts zum jeweiligen Rand] padding-right padding-bottom padding-left width height float [Umfließen z.B. von Bildern, mögliche Werte: left, right, none]	BODY {margin-top: 20mm; margin-bottom: 50mm; margin-right: 50 mm; margin-left: 30mm} P.boxed {border-style: double; border-width: thick} DIV {padding-top: 1cm} IMG {heigth: 10cm; width: 15%}
Listeneigenschaften: list-style list-style-type [mögliche Werte für geordnete Listen: decimal, lower-roman, upper-roman, lower-alpha, upper-alpha; für ungeordnete Listen: dic, circle, square] list-style-image [URL eines Bullet]	OL {list-style-type: upper-roman} OL OL {list-style-type: lower-roman} OL OL OL {list-style-type: lower-alpha} [Listenzählung: I.ii.a.]

Zuordnung von Style zu einem Dokument:

Es gibt drei Methoden, einem Dokument Style zuzuordnen:

Weiterführende Ressourcen:

Yahoo Categories:

• http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Cascading_Style_Sheets/. -- Zugriff am 30.6.1999

Virtual Libraries:

• http://www.stars.com/Vlib/Authoring/CSS.html. -- Zugriff am 30.6.1999

13.5.2.10.4.1. CSS2

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

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:

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

Weiterführende Ressourcen zu Aural CSS:

• Aural Cascading Style Sheets (ACSS) : W3C Working Draft. --  30-June-1997. -- URL: http://www.w3.org/TR/WD-acss. -- Zugriff am 6.7.1999

Zum nächsten Kapitel: WWW 3: Web-Programmierung und Suchmaschinen