Style Sheets & Co
Features von HTML 4

von Karin Takacs (Ausgabe 98/3, 1998)

 

HTML 4, der aktuelle Standard für WWW-Dokumente, wurde im Herbst 1997 vom "WorldWideWeb Consortium" (W3C) festgelegt. Im Rahmen des W3C arbeiten einschlägige Softwarehersteller gemeinsam an der Entwicklung von Normen für die Interpretation web-basierter Inhalte. Dennoch existieren neben dem "offiziellen" Standard HTML 4 noch viele Zusätze und herstellerspezifische Erweiterungen, die nicht unmittelbar mit HTML zusammenhängen.

Auch die browserunabhängige Darstellung von HTML-Dokumenten - eigentlich eine der wesentlichen Eigenschaften des WWW - fällt zunehmend dem Krieg zwischen den marktbeherrschenden Browser-Herstellern Microsoft und Netscape zum Opfer: Jeder Hersteller verwirklicht nur einen Teil des Standards, stattet aber im Gegenzug sein Produkt mit eigenen, "exklusiven" Funktionen aus. Dies hat zur Folge, daß Webseiten häufig für eine bestimmte Software optimiert werden und nur mit dem vom Autor vorgesehenen Browser in voller Pracht bewundert werden können. Um diese unerwünschte Entwicklung zu bremsen, bemüht sich seit kurzem eine Gruppe bekannter Webdesigner unter dem Namen "Web Standards Project" (WSP; siehe http://www.webstandards.org/) um die Einhaltung des Standards.

In den Anfängen des WWW legten die Autoren von Webseiten den Schwerpunkt mehr auf den Inhalt als auf die Aufmachung; durch den Boom im kommerziellen Bereich wurden jedoch Seitenlayout und Effekte immer wichtiger.1)  HTML 4 versucht dieser Entwicklung Rechnung zu tragen, indem es eine Vielzahl von präzisen Gestaltungsmöglichkeiten definiert. Weiters wurden die ohnehin längst weitverbreiteten Frames "legalisiert" und die Möglichkeit zur Verwendung verschiedener Ausgabemedien geschaffen.

Da die Spezifikation von HTML 4 recht umfangreich ist, wird hier nur auf zwei wesentliche Teilbereiche eingegangen: Tabellen und Style Sheets. Das Hauptgewicht liegt dabei auf den Style Sheets, die besonders bei der Verwaltung mehrerer Seiten mit gleichem Erscheinungsbild ("Corporate Identity") äußerst hilfreich sein können. Für das Erstellen von Tabellen wurden zahlreiche Erweiterungen festgelegt, auf die zuvor in einem kurzen Beispiel eingegangen wird. Generell ist zu beachten, daß keineswegs alle der im folgenden erwähnten Möglichkeiten von den beiden gängigsten Browsern (MS-Internet Explorer und Netscape) auch tatsächlich bereits umgesetzt wurden.

Tabellen

HTML 4 bietet die Möglichkeit, dem Browser mittels COLGROUP (= Spaltengruppe) gleich zu Beginn der Tabelle die Spaltenanzahl mitzuteilen; die Spalten selbst werden durch COL (siehe Abb.) genauer definiert. Durch diese Vorgangsweise kann der Browser die Tabelle schneller aufbauen, d.h. Teile davon bereits anzeigen, bevor sie vollständig eingelesen ist. MS-Internet Explorer und Netscape unterstützen dieses Feature jedoch erst ab Version 4.x.

<html>
<head>
<title>Beispiel</TITLE>
</head>
<body>
<table background="hintergrund.gif" bordercolor=blue frame=hsides rules=rows width=600>
<caption align=top>Tabellen&uuml;berschrift</caption>
<colgroup>
<col width="1*">
<col width="3*">
<col width="2*">
</colgroup>
<tr align=left>
<th>Kosten</th>
<th>Verwendungszweck</th>
<th>Datum</th>
</tr>
<tr>
<td>0.33</td>
<td>Werbungskosten</td>
<td>10. 10. 1998</td>
</tr>
</table>
</body>
</html>>

Abb. 1: Beispiel mit Hintergrundbild, blauem horizontalem Rahmen und Tabellenüberschrift (Code & Grafik)

 

Zusätzlich besteht eine Vielzahl weiterer neuer Möglichkeiten: Der Außenrahmen der Tabelle und die Gitternetzlinien können auf verschiedene Art gestaltet werden (z.B. TABLE BORDER FRAME="box"), wobei auch die Darstellung einzelner Teile des Rahmens möglich ist. Tabellen lassen sich jetzt oberhalb, unterhalb oder seitlich beschriften (CAPTION ALIGN="top|bottom|right|left") und auf Wunsch mit einem Hintergrundbild verzieren. Die in HTML4 vorgesehene Einteilung der Tabelle in Kopf-, Daten- und Fußbereich wurde nur vom MS-Internet-Explorer aufgenommen, nicht aber von Netscape. Keiner der beiden Browser unterstützt bisher die ebenfalls vorgesehene Ausrichtung von Zahlenkolonnen nach Dezimalstellen (z.B. ALIGN=char CHAR=",").

Style Sheets

Eine wesentliche Neuerung von HTML 4 ist die Einführung von Style Sheets, mit deren Hilfe die zwei elementaren Bestandteile von Webseiten (Inhalt und Formatierungsanweisungen) voneinander getrennt werden können. Diese Funktion eignet sich insbesondere zur Verwaltung mehrerer HTML-Seiten, die von unterschiedlichen Autoren bearbeitet werden, aber ein einheitliches Erscheinungsbild aufweisen sollen: In einer externen Datei können bestimmte Stile bzw. Formateigenschaften für einzelne HTML-Befehle zentral definiert und dann auf beliebig viele WWW-Seiten angewendet werden. Änderungen an der Formatierung müssen nur einmal durchgeführt werden und wirken sich auf alle betroffenen Dokumente aus. Style Sheets ermöglichen weiters eine präzise Kontrolle über die Bildschirmdarstellung von Webseiten.

Das Konzept der Style Sheets ist nicht neu, sondern wird von Textverarbeitungs- und Layoutprogrammen - z.B. MS-Word, Quark XPress - schon seit einigen Jahren eingesetzt. Style Sheets für HTML-Dokumente zeigen allerdings nur dann die gewünschte Wirkung (= das vom Autor beabsichtigte Erscheinungsbild), wenn der Browser des Benutzers diese Funktion unterstützt. Dies ist beim Internet Explorer und bei Netscape ab Version 4.x der Fall; frühere Versionen unterstützen keine Style Sheets, ignorieren sie aber auch nicht völlig. Die HTML-Editoren MS-FrontPage und Allaire HomeSite sind ebenfalls bereits für die Erstellung von Style Sheets gerüstet.

Cascading Style Sheets

Die Definition von Stilen kann auf mehreren, miteinander kombinierbaren Ebenen erfolgen (daher der Begriff "Cascading Style Sheets" / CSS):

Wird der Stil in einer (oder mehreren) externen Datei(en) mit der Extension .css spezifiziert (siehe Abb. 3), so kann er mit dem -Tag in beliebig viele HTML-Dokumente eingebunden werden. Da CSS nicht die einzige Style Sheet-Sprache ist, sollte der Tag in diesem Fall das Attribut TYPE="text/css" enthalten (siehe Abb. 2, Zeile 4).

1: <HTML>
2: <HEAD>
3: <TITLE>Beispiel</TITLE>
4: <LINK REL="STYLESHEET" TYPE="text/css" HREF="stildefinition.css">
5: <!-- <STYLE type="text/css">
6: #BeispielStil
7: {color:green;
8: border:solid;
9: border-width:thin;
10: border-color:blue;
11: border-style:groove;
12: text-align:center;
13: width:80%}
14: #Stil1 {font-size:12pt; text-decoration:underline};
15: #Stil2 {font-size:14pt; font-weight:bold};
16: </STYLE> -->
17: </HEAD>
18: <BODY>
19: <DIV ID="BeispielStil">......</DIV>
20: <P ID="Stil2">......</P>
21: </BODY>
22: </HTML>

Abb. 2: Verschiedene Stildefinitionen innerhalb eines HTML-Dokuments

 

1: BODY {font:10pt Arial; color:red}
2:
H1 {font:14pt Helvetica; color:blue}
3: P {color:green;
4: border:solid;
5: border-width:thin;
6: border-color:blue;
7: border-style:groove;
8:
text-align: center;
9: width:80%}

Abb. 3: Modifiktioan von Stildefinitionen in einer externen Datei

 

1: <OL>
2: <LI>ein Listenelement</LI>
3: <SPAN STYLE="font-weight:bold; font-style:italic">
4: <LI>dieses Element wird wie auch das n&auml;chste</LI>
5: <LI>fett und kursiv ausgegeben</LI>
6: </SPAN>
7: <LI>jetzt wieder normal</LI>
8: <LI>und das ist das letzte Element</LI>
9: </OL>

 

 

Abb. 4: Verwendung des -Tags für eine Bereichs-Stildefinition (Code & Grafik)

 

Stildefinitionen, die mittels <STYLE>-Tag direkt in eine Webseite eingebettet werden (siehe Abb. 2, Zeilen 5 bis 16), wirken sich nur auf dieses Dokument aus. Handelt es sich dabei um eine Webseite, die mit einem externen Style Sheet verknüpft ist, so werden externe Stildefinitionen durch die eingebetteten Anweisungen außer Kraft gesetzt.

Will man lediglich die Darstellung bestimmter Dokumentbereiche beeinflussen, verwendet man erweiterte HTML-Tags (ID-Attribut; siehe Abb. 2, Zeilen 19 und 20) oder den -Tag mit dem STYLE-Attribut (siehe Abb. 4). So kann beispielsweise innerhalb eines Absatzes oder einer Liste ein Teil des Textes anders dargestellt werden. Bereichs-Stildefinitionen haben für den Browser höchste Priorität - sie überschreiben sowohl externe als auch eingebettete Formatierungsanweisungen.

Aufbau von Stildefinitionen

Jede Stildefinition beginnt mit einem Gitterzeichen (#), gefolgt von einem frei wählbaren Namen für den Stil (siehe Abb. 2, Zeile 6 ff.). Die Eigenschaften des Stils werden innerhalb von geschwungenen Klammern festgelegt. Bei der Modifikation einer bereits bestehenden Formatierungsanweisung - z.B. Änderung der Eigenschaften einer Überschrift - entfällt das Gitterzeichen zu Beginn (siehe Abb. 3, Zeile 2). Um unwillkommene Effekte zu vermeiden, sollte man Stile innerhalb eines HTML-Dokuments stets als "Kommentar" schreiben (): Von Browsern, die solches verarbeiten können, werden die Inhalte eines Kommentars interpretiert; andernfalls entsteht zumindest kein zusätzlicher Schaden, da HTML-Kommentare nicht am Bildschirm angezeigt werden.

Ausgabemedien

Für unterschiedliche Ausgabemedien (Bildschirm, Drucker, Projektor, Lautsprecher, Braille-Medien und Handy) können unterschiedliche Stile definiert werden. Dadurch kann das Informationsangebot des WWW jetzt auch für Sehbehinderte zugänglich gemacht werden. Die innerhalb der Spezifikation für die Druckerausgabe festgelegten Möglichkeiten sollen mittelfristig mit jenen von Layoutprogrammen konkurrieren können bzw. sie durch Plattformunabhängigkeit sogar überbieten. Dieses Feature wurde leider bislang von keinem Browser vollständig verwirklicht.

Gestaltungsmöglichkeiten

Zur exakten Positionierung von Elementen einer Webseite - auch von Text - im Anzeigefenster des Browsers können nun numerische Angaben in allen weitverbreiteten Maßeinheiten verwendet werden. Die Position eines Elements wird entweder absolut (Abstand vom Fensterrand) oder relativ (in bezug auf ein voranstehendes Element) festgelegt.

Folgende Parameter können definiert werden:

  • Startposition von oben oder von links (top, left);
  • Breite eines Elements oder Bereichs (width);
  • Textumfluß eines Elements (float);
  • Aufhebung des Textumflusses (clear);
  • Schichtposition (z-index): legt fest, welche Elemente andere überschreiben, wenn es durch die genaue Positionierung mehrerer Elemente zu Überlappungen kommt;
  • Anzeigebereich eingrenzen (clip): Ist das Element größer als der definierte Bereich, wird es abgeschnitten.

Meist ist es sinnvoll, Angaben zur Positionierung in die Tags und

einzubinden. Das Positionieren von Elementen ist auch eine wichtige Voraussetzung für viele Anwendungsfälle von DHTML ("Dynamic HTML"): Mit Hilfe entsprechender Skriptunterstützung können positionierte Objekte bewegt, ein- oder ausgeblendet und überlappt werden.

Für die Ausrichtung von Elementen stehen ebenfalls einige neue Möglichkeiten zur Verfügung: Text kann entweder vertikal oder horizontal ausgerichtet werden. Die Zeilenhöhe läßt sich mit dem LINE-HEIGHT-Attribut festlegen. Vordefinierte Abstände bei Absätzen, Überschriften oder Tabellen erreicht man mit dem MARGIN-Attribut in Verbindung mit top, bottom, left oder right. Die Abstände können in verschiedenen Maßeinheiten angegeben werden.

<html>
<head>
<title>Beispiel</title>
</head>
<div style="position:absolute; top:5cm; left:5cm">
<img src="logo.gif" width=130.5px height=42.5px alt="Beispielbild" border="0"></div>
<div style="position:absolute; top:2.5cm; left:7cm; width:208px; background-color:#00F000;
border-bottom-style:none; border-bottom-width:1mm; padding:1mm">

Dies ist ein absolut positionierter Text &uuml;ber einer absolut positionierten Grafik.

</div>

<div style="position:absolute; top:6cm; left:2cm; width:208px; background-color:#F00000; line-height:18pt; padding:1mm">

Dies ist ein absolut positionierter Text mit 18pt Zeilenabstand.

</div>
</body>
</html>

Abb. 5: Beispiel für pixelgenaue Positionierung (Code & Grafik)

Um Einfluß auf die Darstellung von Schriften nehmen zu können (Browser ersetzen eine vom Autor festgelegte Schrift unbekümmert durch eine andere, wenn der gewünschte Font auf dem Rechner des Benutzers nicht installiert ist), kann mittels FONT-FAMILY definiert werden, welche Schrifttypen den Vorstellungen des Autors am nächsten kommen. Die Verwendung einer bestimmten Schriftart läßt sich erzwingen, indem man sie auf einem Server irgendwo im Internet zur Verfügung stellt und einen Link dorthin in das HTML-Dokument einbaut, sodaß sie der Browser bei Bedarf herunterladen kann.

HTML 4 bietet viele neue Features für Rahmen: Auch einzelne Absätze können umrandet werden, die Rahmenstärke (border-width) kann in drei Größen (thin, medium, thick) oder durch numerische Angaben festgelegt werden, und Teile des Rahmens lassen sich gesondert definieren (z.B. border-top-width, border-left-width). Man kann Einfluß auf den Abstand zwischen Text und Rahmen nehmen (padding-top|bottom|left|right) und dem Rahmen eine beliebige Farbe zuweisen (border-color:#000000). Auch dem Rahmenstil sind wenig Grenzen gesetzt.

Die bereits bekannten Möglichkeiten zur Hintergrundgestaltung bestehen natürlich auch für Style Sheets; neuerdings können Bilder aber auch einzelnen Absätzen zugewiesen werden. Darüber hinaus sind jetzt genauere Angaben zur Bildwiederholung möglich: Die Voreinstellung ist background-repeat:repeat, man kann aber eine Wiederholung auch ausdrücklich untersagen (background-repeat:no-repeat) oder nur auf einer Achse stattfinden lassen (repeat-x, repeat-y).

Nützliche Links, ...

... falls Sie sich in die Materie genauer einlesen möchten:

 

1) Eine unangenehme Begleiterscheinung davon ist - neben längeren Ladezeiten - der Umstand, dass Webdesigner oft keinerlei Rücksicht auf Benutzer textbasierter Browser nehmen. Versucht man z.B. mit Lynx eine grafikbasierte Seite ohne Alternativtexte abzufragen, sieht man auf seinem Bildschirm zwar einige Male [INLINE] ind [LINK], die eigentliche Information bleibt aber unsichtbar.