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 taucht der Body auf. Der Inhalt des Bodys wird nur dann angezeigt, wenn der Browser keine Frames unterstützt. Obwohl kaum noch Surfer solche Browser verwenden, ist es dennoch gute Tradition, einen Noframes-Tag anzuhängen.</p> <h1>Frames: ja oder nein?</h1> <p>Für jeden Webmaster stellt sich die Frage: Soll die Website Frame-basiert sein oder nicht? Zuerst sollten wir uns die Vor- und Nachteile von Frames näher betrachten.</p> <p><strong>Vorteile:</strong></p> <ul> <li>Kann dem Besucher viel Ladezeit ersparen.</li> <li>Macht eine Site einfacher zu navigieren.</li> <li>Ein sauberer Look.</li> <li>So gut wie alle Besucher können Frames „sehen", weil seit Netscape Navigator 2 und Internet Explorer 3 Frames unterstützt werden. Auch CAB und Draconis können Frames darstellen.</li> </ul> <p><strong>Nachteile:</strong></p> <ul> <li>Frames können den Besucher verwirren, weil man in der Adressleiste nicht sehen kann, auf welcher Seite man sich gerade befindet.</li> <li>Macht es dem Besucher schwierig eine bestimmte Seite in seine Bookmarkliste zu speichern.</li> <li>Frame-Seiten auszudrucken ist kompliziert.</li> <li>Suchmaschinen haben es schwer, die komplette Site zu indizieren.</li> <li>Frames verschwenden bei schlechtem Design viel Platz im Browserfenster.</li> <li>Manche Browser stürzen bei Frames ab.</li> </ul> <p>Eine sinnvolle Verwendung von Frames ist zum Beispiel ein Verzeichnis oder ein Lexikon. So könnte ein Frame die Buchstaben von A-Z auflisten und ein weiteres Frame zeigt die Wörter zum jeweiligen Buchstaben an. Ein anderer Grund für Frames kann sein, dass der Webmaster nicht jedes Mal eine Navigationsleiste zu jeder Seite einfügen will. Bei einer Umstrukturierung müsste jede einzelne Seite geändert werden.</p> <p>Jedoch sollte ein guter Webmaster auf Frames verzichten können, da man vom Design her eine NoFrames-Site viel flexibler und attraktiver gestalten kann. Und nicht jede Website muss auch eine unveränderliche Navigationsleiste haben. Schauen Sie sich einfach ein paar gute NoFrames Sites an und werfen einen Blick auf den Quelltext. Gute Ideen kommen aus guten Beispielen.</p> <h1>Fenstergrößen</h1> <p>Nicht jeder Surfer hat einen 21-Zoller mit einer überhohen Auflösung auf dem Schreibtisch stehen. Heutzutage sind 800 x 600 Bildpunkte aufwärts Standard, und auf diese Auflösung sollte man sich beschränken und seine Website nicht unnötig aufblähen - gerade Atari-Anwender werden Ihnen danken.</p> <p>Nehmen wir an, ein Besucher hat die Auflösung 832 x 624 Pixel eingestellt. Damit er jederzeit auf seine Festplatte und andere Icons auf dem Schreibtisch zugreifen kann, hat er sein Browserfenster etwas verkleinert. Dann kommt noch ein Abzug für die möglicherweise entstehende Scrollbar und sonstigen Schnick-Schnack hinzu. Dem Webmaster stehen also noch knapp 600-700 Pixel Breite für den eigentlichen Inhalt zur Verfügung - genug für fast jeden Zweck. Auch hier gilt: weniger ist oft mehr.</p> <h1>Vorschau</h1> <p>In der nächsten Folge behandeln wir Hyperlinks, Bilder und die immer populärer werdende Stilvorlagen für HTML, die sogenannten Cascading Style Sheets (CSS).</p> <p>Syntax: &lt;table&gt;<br /> Haupttag einer Tabelle.</p> <p>Beispiel:<br /> &lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;Inhalt&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;</p> <p>Attribute:</p> <p>background=URL<br /> Hinterlegt die Tabelle mit einem Hintergrundbild.</p> <p>bgcolor=#rrggbb|Farbname<br /> Hintergrundfarbe für die ganze Tabelle</p> <p>border=Zahl<br /> Randbreite in Pixel.</p> <p>cellpadding=Zahl<br /> Abstand zwischen Zellinhalt und Tabellenrand in Pixel.</p> <p>cellspacing=Zahl<br /> Abstand zwischen den Tabellenzellen in Pixel.</p> <p>width=Zahl<br /> Tabellenbreite in Pixel oder Prozenten.</p> <p>height=Zahl<br /> Tabellenhöhe in Pixel oder Prozenten.</p> <p>Syntax: &lt;th&gt;<br /> Tabellenheader, der in der Regel zentriert und in Fettschrift ist.</p> <p>Beispiel:<br /> &lt;th&gt;Inhalt&lt;/th&gt;</p> <p>Attribute:<br /> Siehe &lt;td&gt;.</p> <p>Syntax: &lt;tr&gt;<br /> Definiert eine neue Tabellenzeile.</p> <p>Beispiel:<br /> &lt;tr&gt;<br /> &lt;td&gt;Inhalt&lt;/td&gt;<br /> &lt;/tr&gt;</p> <p>Attribute:</p> <p>bgcolor=#rrggbb[Farbname<br /> Hintergrundfarbe dieser Zeile. Der Tabellenhintergrund wird ersetzt.</p> <p>valign=top|middle|bottom|baseline<br /> Vertikale Anordnung der Zellinhalte dieser Zeile.</p> <p>Syntax: &lt;td&gt;<br /> Tabellenzelle innerhalb einer Zeile.</p> <p>Beispiel:<br /> &lt;td&gt;Inhalt&lt;/td&gt;</p> <p>Attribute:</p> <p>background=URL<br /> Hintergrundbild der Tabellenzelle.</p> <p>bgcolor=#rrggbb|Farbname<br /> Hintergrundfarbe der Tabellenzelle.</p> <p>colspan=Zahl<br /> Legt fest, über wie viele Spalten sich diese Zelle erstrecken soll.</p> <p>rowspan=Zahl<br /> Legt fest, über wie viele Zeilen sich diese Zelle erstrecken soll.</p> <p>align=left|center|right<br /> Horizontale Anordnung des Inhalts.</p> <p>valign=top|middle|bottom<br /> Vertikale Anordnung des Inhalts.</p> <p>width=Zahl<br /> Zellenbreite in absoluten Pixeln oder in Prozent.</p> <p>height=Zahl<br /> Zellenhöhe in absoluten Pixeln oder in Prozent. Das HEIGHT-Attribut ist ab HTML 4.0 nicht mehr Teil der Spezifikation.</p> <p>Syntax:<br /> &lt;frameset&gt;<br /> Container für Frames oder weitere Framesets</p> <p>Beispiel:<br /> &lt;frameset&gt;<br /> &lt;frame&gt;<br /> &lt;/frame&gt;</p> <p>Attribute:</p> <p>border=Zahl<br /> Dicke der Trennlinien zwischen den Frames in Pixel.</p> <p>bordercolor=#rrggbb|Farbname<br /> Farbe der Trennlinien.</p> <p>frameborder=1|0<br /> 3D-Trennlinie an oder aus.</p> <p>framespacing=Zahl<br /> Platz zwischen nebeneinander liegende Frames. cols=Zahl|*</p> <p>Die Anzahl der Spalten ist gleich der Anzahl der mit Komma getrennten Zahlenangaben. In absoluten Zahlen, relativen Zahlen, oder Prozenten.</p> <p>rows=Zahl|*<br /> Die Anzahl der Zeilen ist gleich der Anzahl der mit Komma getrennten Zahlenangeban. In absoluten Zahlen, relativen Zahlen, oder Prozenten.</p> <p>Syntax:<br /> &lt;frame&gt;<br /> Frame innerhalb eines Framesets</p> <p>Beispiel: &lt;frame&gt;</p> <p>Attribute:</p> <p>bordercolor=#rrggbb|Farbname<br /> Rahmenfarbe des Frames.</p> <p>marginwidth=Zahl<br /> Abstand des Inhalts rechts und links vom Rahmen des Frames in Pixel.</p> <p>marginheight=Zahl<br /> Abstand des Inhalts oben und unten vom Rahmen des Frames in Pixel.</p> <p>name=Text<br /> Mit einem Namen kann dieser Frame von anderen Frames „angesprochen" werden.</p> <p>noresize<br /> Verhindert, dass der Nutzer die Größe der Frames verändern kann. Standardmäßig kann man die Größe durch ziehen der Trennlinien verändern.</p> <p>scrolling=yes|no|auto<br /> Legt fest, ob man innerhalb der Frames scrollen kann. Auto bedeutet, es erscheint erst eine Scrollbar, wenn der Inhalt des Frames nicht mehr ganz reinpasst.</p> <p>src=URL<br /> Die im SRC angegebene HTML-Datei wird in diesen Frame geladen.</p> <br clear=all> <b>Matthias Haagemann</b> <hr size="1" noshade> <div align="center"><!--a href="/contact.php">Kontakt Artikel-Archiv</a--> <a href="/links.php">Links</a> <br> <hr size="1" noshade> Copyright-Bestimmungen: siehe <a href="/about.php">Über diese Seite</a> </div> </body> </html>