Einführung in HTML, Teil 2: Tabellen und Frames

Trotz aller Web-Wizards und -Editoren sind fundierte HTML-Kenntnisse immer noch das tägliche Brot der Homepage-Entwicklung. In unserem neuen Workshop lernen Sie die Grundbegriffe moderner Webseiten-Gestaltung kennen.

Wichtige Internet-Adressen:

[1] mypenguin.de/hpp
[2] multimania.com/nef
[3] rgfsoft.com
[4] tu-harburg.de/~alumnifc
[5] application-systems.de/atari
[5] clauss-net.de/atari.html
[6] icab.de
[7] mypenguin.de/prg/htmlhelp.php3

Text und Coding: Matthias Haagemann
Screenshots: Thomas Raukamp

In der vergangenen Folge haben wir uns die Basis geschaffen, auf der aufbauend wir nun zu fortgeschritteneren Konzepten kommen können. Doch keine Sorge, denn es wird nicht allzu kompliziert werden. In der Website-Gestaltung sind Tabellen oder Frames wesentliche Faktoren für ein gelungenes Design.

Tabellen für jeden Zweck

Unter einer Tabelle in HTML versteht man ein rechteckiges Gerüst aus Zeilen und Spalten. Die Tabellenzellen können alles Mögliche enthalten: Texte oder Bilder genauso wie weitere Tabellen. Solche verschachtelte Tabellen können einen Webbrowser allerdings richtig ins Schwitzen bringen, wenn er zuviel auf einmal berechnen muss. In der Regel berechnet der Browser erst die geeignete Breite einer Tabellenzelle, bevor er die ganze Tabelle anzeigt. Eine Tabelle beginnt man mit <table>, direkt gefolgt von <tr> (Tabellenzeile „table row") und <td> (Tabellenzelle „table data"). Schauen wir uns dazu doch einfach ein Beispiel an:

	<html>
	<head>
	<title>HTML Tutorial</title> </head>
	<body>

	<table border=1> 
	<tr>
	<td>Zeile 1 -Spalte 1</td> <td>Zeile 1 - Spalte 2</td>
	</tr>

	<tr>
	<td>Zeile 2 -Spalte 1</td> <td>Zeile 2 -Spalte 2</td>
	</tr>
	</table>

	</body>
	</html>

Was Sie hier sehen, ist nichts weiter als eine einfache Tabelle mit vier Zellen (zwei Zeilen und zwei Spalten). Normalerweise sind Tabellen also „rechteckig“, mit gleich vielen Zellen in jeder Zeile. Soll sich aber eine Zelle einer Zeile über mehrere Spalten erstrecken, so kann man das mit dem Attribut COLSPAN erreichen; für sich über mehrere Zeilen erstreckende Zellen nimmt man ROWSPAN. Das einzig Besondere an unserer Beispieltabelle ist, dass wir ihr mit „border=1“ einen Rahmen der Pixelstärke 1 gegeben haben. Manche Browser machen auch ohne extra BORDER zu setzen automatisch einen Rahmen. Will man ihn weghaben, sollte man es dem Browser mit „border=0“ ausdrücklich sagen.

Weitere wichtige Attribute für eine Tabelle sind WIDTH und HEIGHT zur Bestimmung der Breite und Höhe, die ebenfalls innerhalb des Table-Tags geschrieben werden. Die Ausrichtung der Tabelle auf der Seite legen Sie mit ALIGN und VALIGN fest, ALIGN für die horizontale und VALIGN für die vertikale Ausrichtung. Ebenso können Sie mit CELLPADDING und CELLSPACING experimentieren. Ersteres ist der Abstand in Pixel vom Inhalt der Zelle zum Rand. Letzteres hingegen der Abstand zwischen den Zellen. Mit all diesen Attributen kann man Tabellen lesbarer machen und verschönern.

Eine framebasierte Website erfordert einen gewissen Aufwand. Im folgenden fügen wir drei Frames auf einer Seite zusammen: einen Frame oben für ein Logo, einen für eine Navigationsleiste unten links und einen mit dem eigentlichen Inhalt unten rechts.

Die Hauptfarbe unserer Website soll hellblau sein (#336699). Links (von oben nach unten) die Website in ihren drei Einzelteilen: title.html, navigation.html und main.html. Wie Sie die Seiten gestalten können, entnehmen Sie bitte dem ersten Teil dieses Kurses.

Nun wollen wir die Site Zeile für Zeile zusammenbauen. Zunächst schreiben wir die Hauptdatei index.html. Ein großes Frameset umfasst die ganze Seite mit einer 85 Pixel großen Zeile und einem weiteren Frameset. Wichtig ist die Vergabe von eindeutigen Namen der Frames. Dank NORESIZE kann man die Frames nicht vergrößern oder verkleinern.

Damit alles etwas besser aussieht, wollen wir die Trennlinien entfernen (wird von CAB leider ignoriert). Ergänzen Sie beide Frameset-Attribute um „border=0“. Internet Explorer zeigt aber trotzdem noch einen Rahmen an. Daher müssen wir noch „frameborder=0“ und „framespacing=0“ anhängen.

Anschließend fügen wir in main.html etwas mehr Inhalt ein, indem wir eine zweispaltige Tabelle erstellen. Wir wollen eine Titelleiste, die sich über alle Zellen in der Tabelle erstreckt. Das machen wir, indem in der ersten Zelle COLSPAN auf 2 gesetzt wird.

Etwas an den Tabellenattributen modifiziert, sieht das ganze schon viel besser aus. Hier: CELLSPACING=1 und CELLPADDING=3.

So ungefähr könnte eine ziemlich knapp geratene Website aussehen.

Das Attribut BGCOLOR zur Bestimmung der Hintergrundfarbe von Zellen oder der ganzen Tabelle wirkt nur, wenn die Zelle beziehungsweise Tabelle nicht leer ist. Dies kann man durch Tricks erreichen, wie das Einfügen eines Leerzeichens („ ") oder einer transparenten, 1x1-pixelgroßen Grafik.

Frames - wenn's sein muss

Mit der Version 2 des Netscape Navigator wurde die Unterstützung sogenannter „Frames" eingeführt, was bis heute immer wieder einen Streit zwischen Frame-Gegnern und -Verfechtern auslöst. Frames sind - wie das englische Wort schon sagt - Rahmen, die den Inhalt eines Browserfensters unterteilen. Normalerweise schreibt man für jeden Frame jeweils ein eigenes HTML-Dokument. Hinzu kommt noch ein HTML-Dokument, welches dem Browser vorgibt, wie er die einzelnen Frames zusammenfügen soll. Insofern verlangt eine rahmenbasierte Website einen größeren Entwicklungsaufwand. Für manche Zwecke können Frames vorteilhaft sein, wenn man zum Beispiel eine statische Navigationsleiste einfügen möchte, die trotz Scrollen immer erreichbar sein soll. Jedoch sollte man keine ellenlange Navigationseinträge im Frame anbieten, denn es ist mehr als lästig, innerhalb der einzelnen Frames scrollen zu müssen.

Alle Frames werden in einem „Frameset“ zusammengefasst. Das Frameset ist ein Container für Frames, der angibt, wie viel Platz sie im Browserfenster beanspruchen sollen und wie sie heißen, um gegebenenfalls von anderen Frames aus „ansprechbar" zu sein. Wie bei Tabellen auch, kann man Framesets ineinander schachteln. Die Attribute COLS und ROWS unterteilen das Frameset spalten- beziehungsweise zeilenweise und erlauben Angaben zur Größe in absoluten Pixelwerten, prozentual oder „relativ". Ein relativer Wert (*) hängt von der Restgröße des Browserfensters ab.

Nach einem Blick auf Bild 1 dürfte auffallen, dass die korrekte Syntax einer HTML-Seite mit Framesets keine Body-Tags enthält. Erst weiter unten hinter