Formatierung in Webseiten

Text in HTML-Seiten lässt sich natürlich auch durch Eingeben von Tags in einem Texteditor formatieren. Die gebräuchlichere und einfachere Variante ist jedoch der Einsatz eines Web-Editors wie z.B. Macromedia Dreamweaver. Die folgende Beschreibung von Formatierungs-Elementen für HTML-Seiten stellen aber auch den zugehörigen HTML-Code dar, damit grundlegende Konstrukte besser verstanden werden.

Beim Layout einer Webseite muss (oder sollte zumindest) unterschieden werden zwischen Struktur und Stil. Die Zusammensetzung des Inhalts aus Textabsätzen, Bildern, Tabellen u. ä. bestimmt die (logische) Struktur der Seite. Diese HTML-Elemente bilden auch den eigentlichen "Kern" der HTML-Seite. Die Formatierung dieser Elemente (Schriftart, Ausrichtung, Farbe, Größe), also der Stil, sollte getrennt davon (ev. sogar in einer eigenen Datei) notiert werden. Näheres dazu lesen Sie auch im Modul Stylesheets (CSS).

In diesem Modul gehen wir auf die reine Strukturierung der Webseite ein. Zu Beginn sollen Möglichkeiten für die grobe Strukturierung einer Webseite mit Frames oder Bereichen gezeigt werden. Dann wollen wir einige wichtige Strukturbausteine, nämlich die HTML-Elemente

• Text
• Bilder
• Tabellen
• Formulare

(ohne Anspruch auf Vollständigkeit) darstellen.

Die Ausführungen in diesem Modul sollen nur einen groben Überblick über die Möglichkeiten zur Strukturierung von Webseiten geben. Ein ausführliche Beschreibung zu den einzelnen HTML-Elementen finden Sie auf den Seiten von SELFHTML.

Eine gebräuchliche Möglichkeit, eine grobe Struktur für eine Webseite zu erzeugen, sind Frames. Damit können mehrere HTML-Dokumente in einem Fenster angezeigt werden. Dabei wird das "Haupt"-Fenster in mehrere Bereiche, sog. Frames (horizontal und/oder vertikal) zerlegt, von denen jeder ein Dokument enthält. Die Anordnung der Frames wird im Hauptfenster notiert:

Sie können die einzelnen Seiten titel_frame.htm (oberes Dokument), menu_frame.htm (linkes Dokument), main_frame.htm (Inhaltsseite) und natürlich frameset.htm (die ganze Datei, obenstehende Grafik) auch einzeln betrachten.

Zur Navigation in einen anderen Menüpunkt muss nun nur mehr die Inhaltsseite neu geladen werden, Überschrift und Menü bleiben nicht nur im Aussehen gleich, sie müssen nur einmal erstellt und auch nur einmal in den Browser geladen werden. Damit eine Seite, die unter dem Menüpunkt 2 erscheinen soll, im Inhaltsfenster erscheint, verwendet man die Eigenschaft "target" im Link:

<a href="menuepunkt2.htm" target="mainFrame">Menue2</a>

Der Vorteil beim Einsatz von Frames liegt in den verringerten Ladezeiten. Wenn beispielsweise in der Überschrift oder der Navigationsleiste (Menü-Frame) viele (ladezeitintensive) Bilder enthalten sind, müssen diese Frames nicht jedesmal neu geladen werden, sondern nur die jeweilige Detail-Seite. Es gibt jedoch auch einige Nachteile von Frames-Seiten: Nicht alle Browser können Frames interpretieren, der Einsatz von Suchmaschinen wird erschwert. Findet z. B. eine Suchmaschine eine Detail-Seite, und der Benutzer lädt diese direkt, so fehlen Überschrift und Navigation. Die Verwendung von Frames sollte also wohl überlegt sein.

Eine modernere Variante, die grobe Struktur eine Webseite festzulegen, sind Bereiche (auch Ebenen, Block-Elemente, Container, CSS-Bereiche oder <div>-Elemente genannt). Solche Bereiche können auch gut durch CSS formatiert werden. Es handelt sich einfach um eine Zusammenfassung von Text, Bildern, Tabellen etc., die durch den Tag <div> </div> umschlossen und so als gemeinsamer Bereich gekennzeichnet werden. Solche Bereiche können dann auf der Webseite positioniert und formatiert werden.

Nicht zu verwechseln sind <div>-Elemente mit den Layern, die Netscape für seine Version 4.x einführte, die aber mit neueren Versionen nicht mehr funktionieren. Sie wurden durch den Tag <layer> </layer> gekennzeichnet.

Der Inhalt eines Bereiches kann natürlich direkt in der HTML-Seite stehen, aber auch aus einer anderen Datei importiert werden. Das folgende Beispiel enthält beides:

Hier können Sie die Seite in Ihrem Browser aufrufen. Tipp: Klicken Sie in Ihrem Browser mit der rechten Maustaste in die Seite und wählen sie "Quelltext anzeigen" oder "Seitenquelltext anzeigen" oder "Show Page Source" (je nach Browser und Sprache etwas unterschiedlich). So können Sie den verwendeten Code untersuchen.

Die Datei ist aus vier Bereichen aufgebaut, die alle absolut positioniert sind. Oben finden Sie den Bereich mit der Überschrift, im untersten Bereich ist ein Logo und Text eingeblendet. Auch das Textfenster ist fix, hat keine Hintergrundfarbe, dafür einen Rahmen. Der linke Bereich mit der Navigation wird durch den Befehl <!--#include file="bereich_menue.htm" --> aus einer externen Datei importiert. An den Bereichen, die zwischen den Tags <div> und </div> stehen, können Sie die Struktur der Webseite (Überschrift, Navigation, Inhalt und Fussleiste) erkennen. Die Formatierung wird durch den Einsatz von CSS getrennt vorgenommen und könnte auch in eine externe Datei ausgelagert werden.

Die Verwendung von CSS-Bereichen wird auch für barrierefreies Webdesign empfohlen, da die Struktur auch von alternativen Browsern gut erkannt und wiedergegeben werden kann.

Für eine übersichtliche Struktur einer Webseite ist die Textgestaltung von maßgeblicher Bedeutung. In HTML gibt es einige Elemente, welche die Strukturierung von Texten erleichtern bzw. ermöglichen:

Absätze

Textabsätze beginnen nach einem <p>-Tag und werden von einem </p>-Tag abgeschlossen. Sie werden durch einen Abstand vor- und nachher von anderen Elementen optisch getrennt. Textabsätze können mit CSS formatiert werden.

Zeilenumbruch

Wenn Sie keinen Abstand zwischen zwei Zeilen, sondern nur eine neue Zeile beginnen wollen, so verwenden Sie den <br>-Tag. Dieser bewirkt einen (expliziten) Zeilenumbruch.

Normalerweise wird Text in einem Browser automatisch umbrochen, je nachdem, wie groß das Browserfenster ist. Wenn Sie in einem Textabschnitt diesen (automatischen) Zeilenumbruch verhindern möchten, so setzen Sie ihn zwischen <nobr> und </nobr>. Wenn Sie nur den automatischen Zeilenumbruch zwischen zwei Wörtern verhindern wollen, so setzen Sie dazwischen ein geschütztes Leerzeichen durch die Angabe der Zeichenfolge &nbsp; - dies kann beispielsweise bei Währungsangaben (€ 20,-) o.ä. sinnvoll sein.

Überschriften

Eine einfache aber sehr wirkungsvolle Möglichkeit der Textstrukturierung ist das setzen von Überschriften. Diese werden durch den Tag <h1> </h1> (Überschrift der Ebene 1; lässt sich untergliedern bis zur Ebene 6) gekennzeichnet. Text, der als Überschrift markiert ist, wird mit Abstand (nach oben und unten) vom restlichen Text, fettgedruckt und größer dargestellt. Die Darstellungsform kann jedoch mit CSS-Angaben selbst angepasst werden.

Listen

Ebenfalls zur Strukturierung trägt der Einsatz von Listen bei. Dabei gibt es verschiedene Varianten von Listen, die durch bestimmte Tags gekennzeichnet werden:

• Aufzählungslisten oder ungeordnete Listen - sind mit sog. Bullets (Aufzählungszeichen) versehen
• Nummerierte Listen - Eintragungen werden automatisch durchnummeriert
• Definitionslisten - gemacht für Glossare: je ein Ausdruck und (eingerückt) die Definition

Auch listen können mit CSS formatiert werden: z. B. Art der Bullets defnieren (auch eigene Grafiken), Nummerierung arabisch, römisch etc.

Grundregeln

Beachten Sie auch einige Grundregeln für gelungene Textgestaltung:

• Wählen Sie keine zu kleine Schriftgröße.
• Achten Sie auf guten Kontrast für Textbereiche.
• Gliedern Sie längere Texte optisch durch Absätze.
• Wählen Sie Textspalten nicht zu breit. Je breiter die Spalte, desto größer der Zeilenabstand.
• Setzen Sie Zwischenüberschriften ein.
• Markieren Sie wichtige Wörter durch Fettdruck, Farbe o. ä.

Bilder können beinahe an jeder beliebigen Stelle einer HTML-Seite eingebunden werden. Die beiden wichtigsten Grafikformate, die auch so gut wie alle (grafikorientierten) Browser darstellen können, sind GIF (Graphics Interchange Format) mit der Endung ".gif" und JPEG (Joint Photographic Expert Group) mit der Endung ".jpg" oder ".jpeg". Ein etwas neueres Format ist PNG (Portable Network Graphic), Endung ".png". Zum Einbinden eines Bildes wird der -Tag verwendet:

Mit dem Attribut src werden Name ("bild1.jpg") und Speicherort (Verzeichnis "pic") der Datei angegeben, wenn das Bild am selben Server abgelegt ist. Der Speicherort wird relativ (durch Angabe des Pfades) zur referenzierenden Datei angegeben. Aber auch vollständige URL-Angaben sind möglich:

Das Attribut alt beinhaltet alternativen Text, der dargestellt wird, wenn das Bild nicht geladen wurde. Dies ist dann der Fall, wenn der Benutzer das Laden von Bildern aus Performancegründen abgeschaltet hat oder das Laden der Seite vorzeitig abbricht. Der Benutzer sieht dann ein sog. "broken image"-Bild und weiß durch den Zusatztext, was an dieser Stelle zu sehen wäre. Besonders wichtig ist das, wenn für die Navigation Grafiken eingesetzt werden.

Außerdem sollte bei einem Bild immer die Größe (Höhe und Breite) als Attribute mitgegeben werden, damit der Browser gleich weiß, welchen Platz er zur Darstellung eines Bildes bereithalten soll (noch bevor das Bild vollständig geladen ist):

Die oben aufgeführten Beispiele können Sie an dieser Datei selbst testen. (Tipp: Schalten Sie erst einmal an Ihrem Browser das Laden von Bildern aus - so sehen Sie auch den Alternativtext.)

Zum Platzieren von Bildern setzen Sie diese in andere HTML-Elemente wie Textabsätze, CSS-Bereiche, Tabellenzellen o.ä. hinein. Dort können sie dann (wie Text) zentriert etc. werden.

Ein wichtiges Gestaltungselement für Webseiten sind Tabellen. Diese sollen natürlich hauptsächlich dazu verwendet werden, um tabellarische Daten (mehrspaltige Listen u. ä.) auf Webseiten darzustellen. Sie können aber auch zum Schaffen eines Seitenlayout eingesetzt werden. Dies ist umstritten ("Tabellen sollen nach ihrem eigentlichen Zweck eingesetzt werden!", "Tabellen sollen nicht missbraucht werden!", ...) aber sehr verbreitet. Der Vorteil liegt darin, dass Seiteninhalt durch Tabellen relativ einfach strukturiert werden kann. Die Nachteile liegen aber auf der Hand: Nicht alle Browser stellen Tabellen immer gleich dar; manchmal wird so das Layout einer Seite verzerrt dargestellt. Auch können z. B. akustische Browser für Behbehinderte die Struktur von Tabellen (die durch Verschachteln derselben mitunter recht kompliziert werden kann) nicht gut erkennen, was die Navigation stark erschwert. Tabellen eignen sich deshalb nicht für das Layout von barrierefreien Webseiten.

Tabellen sind modular aufgebaut. Sie beginnen mit dem Tag <table> und enden mit </table>. Hier wird die Breite der Tabelle und auch (für die ganze Tabelle) der Rahmen festgelegt. Wenn der Rahmen unsichtbar sein soll, muss das Attribut border="0" heißen. Dazwischen befinden sich Zeilen (begrenzt durch <tr> und </tr>), innerhalb dieser stehen Zellen (zwischen <td> und </td>). Eine einfache Tabelle (3 Zeilen, 2 Spalten, 200 Pixel breit, Rahmenbreite 1) sieht so aus:

Folgende kleine Tabelle wurde nun durch Verschachtelung und Verbindung von Zellen etwas erweitert. Der zugehörige Code liest sich nun schon etwas schwieriger:

<table width="300" border="2" bgcolor="#99FFCC">
<tr>
<td colspan="2"><div align="center">Zellen &uuml;ber die ganze Breite verbunden</div></td>
<td rowspan="2">3. Spalte</td>
</tr>
<tr>
<td><table width="100%" border="1" bgcolor="#FFCCCC">
<tr>
<td>Hier</td>
<td>wurde</td>
<td>eine</td>
</tr>
<tr>
<td>ganze</td>
<td>Tabelle</td>
<td>herein-</td>
</tr>
<tr>
<td>gesetzt</td>
<td>(ver-</td>
<td>schachtelt)</td>
</tr>
</table></td>
<td>2. Spalte</td>
</tr>
</table>

Werden ganze Webseiten mit Hilfe von (mehrfach verschachtelten) Tabellen aufgebaut, so geht der Überblick - auch in einem Web-Editor - bald verloren. Auch Änderungen lassen sich dann nur mehr schwer anbringen, beispielsweise wenn Zellen wieder getrennt und anders verbunden werden sollen. Für überschaubare Strukturen innerhalb einer Webseite sind Tabellen jedoch - auch für nicht rein tabellarische Daten - recht brauchbar.

Übrigens lassen sich auch Tabellen durch CSS formatieren.

Wenn Interaktion mit dem Benutzer in dem Sinn geschaffen werden soll, dass der Benutzer Daten angibt und an den Webserver schickt, werden meist Formulare eingesetzt. Damit können Textfelder zum Ausfüllen zur Verfügung gestellt werden, Listen - in verschiedenen Formen - zum Auswählen von mehreren Vorgaben, Checkboxen etc. Wenn der Benutzer das Formular abschicken möchte, klickt er dann eine Button, und die Daten werden an den Server zur weiteren Verarbeitung geschickt. Hier sehen Sie ein Beispiel für ein Formular:

Da Formulare zwar zur Gestaltung einer Webseite beitragen, jedoch immer einen bestimmten Zweck erfüllen, wird für eine nähere Ausführung auf Formulare in Webseiten verwiesen.