HTML-Einführung von Hubert Partl, August 1996

Layout und Spezialeffekte

Schönes Layout mit HTML - wie geht das?

Logisches Markup und Layout-Hinweise

Wie im Abschnitt "Inhalt und Form" erläutert, wird im HTML-File am WWW-Server nur die logische Bedeutung der Text-Teile festgelegt, und sie werden von den Web-Browsern der Benutzer auf deren Client-Bildschirmen jeweils so dargestellt, wie es für diesen Benutzer und diesen Client am besten ist.

Man kann aber im HTML-File Hinweise angeben, wie und in welchem Layout die Elemente am Client nach Maßgabe der technischen Möglichkeiten und der persönlichen Einstellungen des Benutzers dargestellt werden sollen. Damit kann das Layout zwar nicht zwingend vorgeschrieben, aber weitgehend beeinflußt werden. Die verschiedenen Web-Browser befolgen diese Hinweise jeweils so gut wie möglich. Besonders interessant ist in diesem Zusammenhang die in HTML 3 vorgesehene Möglichkeit von "Style-Sheets".

In Spezialfällen, bei denen das genaue Layout wichtig ist, kann es sinnvoll sein, die Information als PostScript- oder PDF- oder RTF-File oder als Bild oder "Image-Map" verfügbar zu machen.

Wenn die Glocken locken...

Es ist niemals günstig, spezielle Layout-Effekte dadurch zu erreichen, daß man HTML-Befehle für etwas anderes als deren logische Bedeutung einsetzt.

Es mag zum Beispiel lustig aussehen, in einem Text alle Anfangsbuchstaben mit fetten Buchstaben darzustellen. Aber in einer Konstruktion wie 

<strong>F</strong>rohe <strong>F</strong>eier 
mit <strong>G</strong>locken und <strong>F</strong>l&ouml;ten
würden manche Suchhilfen nicht die Stichwörter frohe, Feier, Glocken und Flöten finden sondern die Stichwörter rohe, Eier, locken und löten, und auch im Falle einer Sprachausgabe oder bei einer automatischen Übersetzung in eine andere Sprache würden dieselben Mißverständnisse auftreten.

Solche Spezialeffekte kann man besser mit Hilfe von Klassen und Style-Sheets erreichen.

Norm oder nicht Norm, das ist hier die Frage

Sie als Autor haben die Wahl: Die Kunst des HTML-Autors besteht darin, die genormten alten HTML-Befehle und die Browser-spezifischen neuen HTML-Befehle so zu kombinieren, daß die Web-Seiten mit den gängigen Web-Browsern möglichst schön aussehen und trotzdem mit allen Web-Browsern zumindestens sinnvoll lesbar sind.

Bitte beachten Sie in diesem Zusammenhang auch die Warnung vor Firmenabhängigkeiten.

Diese Grundsätze gelten nicht nur für die HTML-Files sondern für alle Files, die für den Zugriff durch viele Benutzer gedacht sind. Wenn Sie zum Beispiel einen Text im Binär-Format von "MS-Word 6.0 für Windows" abspeichern, kann er von Benutzern anderer PC-Programme oder von Macintosh-Benutzern nicht verwendet werden. Günstiger wäre es in diesem Fall, den Text im "Rich Text Format" (RTF) abzuspeichern, das von allen Textverarbeitungsprogrammen verstanden wird, oder als PostScript-File oder noch besser als normgerechtes HTML-File.

Klassen (class) und Style-Sheets <style>

HTML 3 sieht eine Möglichkeit vor, vom Autor definierte Markups ("Klassen") für spezielle Elemente zu verwenden und in eigenen "Style-Sheets" anzugeben, in welchem Layout die Elemente von den Web-Browsern nach Maßgabe der technischen Möglichkeiten dargestellt werden sollen.

Diese Style-Sheets sind ein sehr mächtiges Instrument. Sie bieten dem Autor vielfältige Möglichkeiten, sehr schöne und wirkungsvolle, aber auch sehr häßliche oder verwirrende Layouts zu erzeugen. Deshalb ist ein gutes Konzept und die Hilfe von professionellen Layout-Designern oder von guter Fachliteratur zu diesem Thema empfehlenswert.

Beispiele:

Ein Autor kann besonders wichtige Hinweise zwischen <note class="wichtig"> und </note> einschließen und im Style-Sheet angeben, daß alle mit class="wichtig" markierten Notes eingerückt und in einer großen, fetten Schrift geschrieben werden sollen.

Ein Autor kann das sogenannte "Kleingedruckte" in einem Vertragstext mit <p class="unwichtig"> markieren und im Style-Sheet angeben, daß alle mit class="unwichtig" markierten Texte in einer kleineren Schrift auf hellblauem Hintergrund geschrieben werden sollen.

Eine Firma kann mit Hilfe eines Style-Sheet für alle ihre Web-Pages ein besonderes, einheitliches, für die Firma typisches Layout festlegen ("Corporate Identity"): die Schriftart, die Farben von Text und Hintergrund, die Abstände und Einrückungen von Absätzen und Listen, die Größe und Farbe der Überschriften, und so weiter.

Ein Autor kann für Gruppen von Web-Pages, die für verschiedene Zwecke dienen (z.B. Marketing oder technische Details) oder die sich an verschiedene Zielgruppen wenden (z.B. an Kinder oder Erwachsene) jeweils verschiedene, dafür geeignete Layouts einsetzen.

- - -

Wenn der Web-Browser keine Style-Sheets unterstützt, werden die Class-Hinweise ignoriert. Wenn ein Client bestimmte im Style-Sheet geforderte Elemente nicht darstellen kann (z.B. keine Farben), werden diese Style-Angaben ignoriert oder durch andere Effekte ersetzt. Klassen und Style-Sheets geben dem Autor also die Möglichkeit, das zum logischen Markup gehörende Layout so zu spezifizieren, daß das Aussehen am Client so genau wie möglich seinen Wünschen und Vorstellungen entspricht, die Information aber trotzdem auf allen verschiedenen Clients dargestellt werden kann.

Die "Style-Sheets" werden am besten als separate Files gespeichert, die von mehreren HTML-Files verwendet werden können. Dieses Style-File wird jeweils im Head des HTML-Files mit einem Link-Befehl der Form
<link rel=stylesheet href="URL" type="text/css">
angegeben. Einzelne Style-Angaben können auch innerhalb des HTML-Files angegeben werden, und zwar zwischen <style> und </style> ebenfalls innerhalb des Head.

Der Inhalt der Style-Sheets wird in einer Sprache wie CSS1 (Cascading Style Sheets) oder DSSSL (Document Style and Semantics Specification Language) festgelegt. Für die kompletten Spezifikationen und für Hinweise und Beispiele zu ihrer Verwendung wird auf die Referenzen verwiesen.

Hier nur ein kurzes Beispiel, eine Skizze für eine bunte Seite, auf der der normale Text schwarz auf weiß erscheinen soll, wichtiger Text rot auf weiß in fetter Schrift, die Bezeichnung "BOKU" grün in der jeweiligen Schriftart, und Hinweise (notes) eingerückt werden: 

<html>
<head>
<title>Die bunte Studentenseite der BOKU</title>

<style type="text/css">
BODY { color: black; background: white; font-family: times serif }
A:link, A:visited { color: dark-red; background: white; 
     text-decoration: underline }
A:active { color: dark-red; background: yellow }
.boku    { color: dark-green; background: white }
.wichtig { color: red; background: white; 
     font-style: normal; font-weight: bold }
EM { font-style: normal; font-weight: demi-bold }
NOTE { margin-left: 3em; margin-right: 3em }
</style>

</head>
<body>
<h1>PCs f&uuml;r <em class="boku">BOKU</em>-Studenten</h1>
<p>
Der <em>Zentrale Informatikdienst</em> der
<em class="boku">Universit&auml;t f&uuml;r Bodenkultur</em>
stellt den 
<em class="boku">BOKU</em>-Studenten 
PCs in den Benutzerr&auml;umen zur Verf&uuml;gung.
<p><note class="wichtig">
Achtung!
Diese PCs d&uuml;rfen nur f&uuml;r die Lehre und Forschung der 
<em class="boku">BOKU</em>
verwendet werden und nicht f&uuml;r andere Zwecke!
</note><p>
Genauere Informationen ...
</body>
</html>
- - -

Style-Sheets werden derzeit noch nicht von allen Web-Browsern unterstützt.

Deshalb sollten Sie die Style-Angaben nicht wie im obigen Beispiel zwischen <style> und </style> innerhalb des HTML-Files angeben (weil das manche Browser verwirren könnte) sondern in einem separaten Style-File, das mit <link> angegeben wird, und Sie sollten die Style- und Klassen-Angaben mit den von verschiedenen Web-Browsern unterstützten anderen HTML-Tags wie z.B. <em>, <strong>, <body>, <font> etc. so kombinieren, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern erreichen.

Ein dementsprechend erweitertes Beispiel finden Sie in den folgenden drei Files, die Sie separat ansehen und ausprobieren bzw. ausdrucken können:

Vorwort . Wegweiser . Inhaltsverzeichnis . Wörterbuch . Referenzen . Copyright
© Hubert Partl, BOKU Wien