vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 3

Tabellen, Frames und Formulare

Am gestrigen Tag hatten wir viel Stoff zu bewältigen. Heute werden es zwar weniger Themen, aber fast genau so viel Stoff sein, mit dem wir uns zu beschäftigen haben. Beginnen werden wir mit den Tabellen, die traditionell nicht nur zur Darstellung von tabellarischen Inhalten auf Webseiten, sondern auch zur Gestaltung des Seitenlayouts genutzt werden. Um die Konzeption des Seitenaufbaus geht es auch bei unserem zweiten Thema: den Frames. Frames sind bei Webdesignern ebenso beliebt wie verpönt. Warum, das werden Sie hier erfahren. Zum Schluss lassen wir den Tag mit einer Vorausschau auf die Einrichtung von Webformularen gemütlich ausklingen.

Die Themen heute:

3.1 Tabellen

Tabellen kommen bei der Webseitenerstellung zwei wichtige Aufgaben zu:

Schauen wir uns zuerst an, wie Tabellen definiert werden.

Tabellen aufbauen

Im einfachsten Fall ist eine Tabelle ein in Zellen und Spalten aufgeteilter Block von Daten, gegebenenfalls mit einer Überschrift versehen.

Abbildung 3.1:  Tabelle in Webbrowser

Schauen wir uns an, wie man eine solche Tabelle aufbaut.

<table></table>

Die komplette Tabellendefinition wird in die <table>-Tags eingeschlossen. Die Definition der einzelnen Zeilen und Spalten findet innerhalb dieses Bereichs statt.

Im Start-Tag der Tabelle kann man gleich festlegen, wie dick die Rahmenelemente (Attribut border) und wie breit die gesamte Tabelle (Attribut width) sein sollen.

<table border="1" width="550">
</table>

Die Breite der Tabelle wird üblicherweise in Pixel (siehe oben) oder in Prozent des Browserfensters (beispielsweise width="100%") angegeben.

Tabellenüberschrift

Unter dem <table>-Tag können Sie eine Überschrift für die Tabelle angeben. Die Überschrift wird in das <caption>-Tag eingeschlossen.

<table border="1" width="550" >
<caption>Bananen: Produktion in Mio t</caption>

<tr></tr> - Zeilen definieren

Danach werden die einzelnen Zeilen angelegt. Zeilen werden in die <tr>-Tags eingefasst (tr = table row = Tabellenzeile).

<table border="1" width="550" >
<caption>Bananen: Produktion in Mio t</caption>
<tr> ...

Die Reihenfolge ist hierbei wichtig: Erst wird eine neue Zeile definiert, dann werden die Spalten für diese Zeile definiert.

<td></td> und <th></th> - Zelleninhalt

Die einzelnen Zellen (Spalten) in der Zeile werden mit den <td>-Tags definiert (td = table data = Tabellendaten). In diesen Tags können Sie beliebigen Inhalt (Text oder Bilder) einfassen.

Für Zellen, die Überschriften enthalten (üblicherweise die Zellen in der obersten Zeile und gegebenenfalls auch der linken Spalte) fasst man in <th>-Tags definiert (th = table header = Tabellenüberschriften) ein. Der Zelleninhalt wird dann von den Browsern besonders hervorgehoben (meist durch Fettdruck und automatische Zentrierung).

<table border="1" width="550" >
<caption>Bananen: Produktion in Mio t</caption>
<tr>
<td>&nbsp;</td>
<th>1990</th>
<th>1999</th>
</tr>
...

Alle Zeilen einer Tabelle müssen die gleiche Anzahl von Zellen enthalten.

Das Leerzeichen &nbsp; in leeren Zellen soll sicherstellen, dass die Tabellendarstellung von den Browsern möglichst beibehalten wird (einige Browser behandeln ganz leere Zellen recht eigenwillig).

Die vollständige HTML-Definition der Tabelle aus Abbildung 3.1 sieht wie folgt aus:

<table border="1" width="550" >
<caption>Bananen: Produktion in Mio t</caption>
<tr>
<td>&nbsp;</td>
<th>1990</th>
<th>1999</th>
</tr>
<tr>
<th>Indien</th>
<td>6,734 </td>
<td>10,200</td>
</tr>
<tr>
<th>Brasilien</th>
<td>5,506</td>
<td>5,592</td>
</tr>
<tr>
<th>Ecuador</th>
<td>3,055</td>
<td>4,600</td>
</tr>
</table>

In HTML 4 wurden drei neue Tags zur Strukturierung von Tabellen definiert: <thead>, <tfoot> und <tbody>. Mit <tbody> können Sie eine Tabelle in mehrere Bereiche aufteilen; mit <thead> und <tfoot>, die beide vor den <tbody>-Teilen definiert werden müssen, können Sie Kopf- und Fußzeilen definieren, die bei längeren Tabellen auf jeder Seite angezeigt werden. Allerdings werden derzeit nicht alle Möglichkeiten von den Browsern unterstützt (siehe Abschnitt <colgroup></colgroup> - Spalten gruppieren).

Zellen verbinden

Mit Hilfe der Attribute rowspan beziehungsweise colspan können Sie festlegen, über wie viele Zeilen beziehungsweise Spalten sich die aktuelle Zelle ausdehnen soll. Auf diese Weise kann man benachbarte Zellen verbinden:

<table border="1" width="550" >
<tr>
<td rowspan="2">&nbsp;</td>
<th colspan="2">Bananenproduktion in Mio t</th>
</tr>
<tr>
<th>1990</th>
<th>1999</th>
</tr>
<tr>
<th>Indien</th>
<td>6,734 </td>
<td>10,200</td>
</tr>
<tr>
...
</table>

Abbildung 3.2:  Tabelle mit verbundenen Zellen

<colgroup></colgroup> - Spalten gruppieren

Mit Hilfe des <colgroup>-Tags kann man Tabellen strukturieren. Diese Strukturierung sieht so aus, dass man am Anfang der Tabelle mit Hilfe von <colgroup>-Elementen angibt, aus wie vielen Spalten die Tabelle aufgebaut ist und welche dieser Spalten zu Spaltengruppen zusammengefasst werden sollen. Am Aufbau der Tabelle ändert sich dadurch nichts, oder zumindest fast nichts. Dafür hat die Strukturierung andere Vorteile:

Greifen wir noch einmal die Tabelle aus Abbildung 3.2 auf. Diese soll mit Hilfe von <colgroups> neu formatiert werden, so dass sie wie in Abbildung 3.3 aussieht.

Die im Folgenden vorgestellte Formatierung der Tabelle ist zwar vollkommen HTML- und CSS-konform, wird aber von vielen Browsern nicht unterstützt. In Übung 3 überarbeiten wir den HTML-Code der Tabelle, so dass die Tabelle in den wichtigsten Browsern ordentlich dargestellt wird. (In Kapitel 4.6 finden Sie allgemeine Tipps und Tricks wie man Browsern, die sich mit der Unterstützung der aktuellen Standards etwas schwer tun, ein wenig nachhelfen kann.)

Abbildung 3.3:  Tabelle mit Spaltengruppen

Die Tabelle enthält drei Spalten, die nun in zwei Gruppen aufgeteilt werden.

<table border="1" width="550">
<colgroup></colgroup>
<colgroup span="2"></colgroup>

Wie viele Spalten zu einer Spaltengruppe gehören, gibt man über das span-Attribut an. Eine Spaltengruppe, für die kein span-Attribut angegeben wird, besteht aus einer einzigen Spalte.

Jetzt können wir die einzelnen Spaltengruppen formatieren. Die erste Spalte soll 120 Pixel breit sein. Ihr Text soll rechtsbündig ausgerichtet werden, mit einem Abstand von 20 Pixeln zum Spaltenrand. Die Zelleninhalte der zweiten Spaltengruppe sollen zentriert werden:

<table border="1" width="550">
<colgroup width="120" style="text-align: right;
padding-right: 20px"></colgroup>
<colgroup span="2" style="text-align: center"></colgroup>

Schließlich sollen Gitterelemente nicht mehr zwischen allen Zellen angezeigt werden, sondern nur noch zwischen den Spaltengruppen und zwischen Überschrift- und Datenzellen. Dazu setzt man im <table>-Tag das Attribut rules auf groups. Damit zwischen den Überschrift- und Datenzellen Rahmenelemente gezogen werden, müssen wir die Zeilen in einen <thead>- und einen <tbody>-Bereich aufteilen:

Listing 3.1: Bananentabelle.html

<table border="1" width="550" rules="groups" style="margin-left: 30px">
<colgroup width="120" align="right"
style="padding-right: 20px"></colgroup>
<colgroup span="2" align="center"></colgroup>
<thead>
<tr>
<td rowspan="2">&nbsp;</td>
<th colspan="2">Bananenproduktion in Mio t</th>
</tr>
<tr>
<th>1990</th>
<th>1999</th>
</tr>
</thead>
<tbody>
<tr>
<th>Indien</th>
<td>6,734 </td>
<td>10,200</td>
</tr>
<tr>
<th>Brasilien</th>
<td>5,506</td>
<td>5,592</td>
</tr>
<tr>
<th>Ecuador</th>
<td>3,055</td>
<td>4,600</td>
</tr>
</tbody>
</table>

Spalten in Spaltengruppen getrennt formatieren

Wenn Sie die Spalten in einer Spaltengruppe zum Teil unterschiedlich formatieren wollen, können Sie die einzelnen Spalten mit Hilfe des <col>-Tags innerhalb der Spaltengruppe getrennt auflisten:

   <colgroup span="2">
<col style="..." />
<col style="..." />
</colgroup>

Mit dem width-Attribut können Sie die Breite der einzelnen Spalten angeben. Dabei können Sie neben Pixelwerten (Zahl ohne Einheit) und Prozentangaben auch angeben, wie sich Spalten den Rest des Browserfensters aufteilen. Die Angabe 1* bedeutet beispielsweise, dass die Spalte die Restbreite der Tabelle einnimmt, die von den anderen Spalten übrig gelassen wird (siehe auch Abschnitt 3.2 zu Frames).

Ein <col>-Element kann für eine einzelne Spalte oder für mehrere benachbarte Spalten stehen (span-Attribut).

Tabellen formatieren

Tabellen können in vielfältiger Weise angepasst und formatiert werden. Einige Formatierungsmöglichkeiten kennen Sie bereits aus dem vorangehenden Abschnitt, andere werden wir Ihnen hier nun vorstellen.

Rahmenstärke

<table border="0">

Die Rahmenstärke der gesamten Tabelle lässt sich über das border-Attribut einstellen. Wenn Sie als Wert Null angeben, erzeugen Sie eine Tabelle ohne sichtbares Gitternetz, wie sie häufig zur Gestaltung des Seitenlayouts verwendet werden (siehe nachfolgender Abschnitt).

Rahmenstil

<table frame="void">

Das Attribut frame bietet seit HTML 4.0 neue Möglichkeiten für die Gestaltung des äußeren Randes der Tabelle.

frame-Wert

Bedeutung

void

Kein Rahmen

above

Rand oben

below

Rand unten

hsides

Rand oben und unten

vsides

Rand links und rechts

lhs

Rand links

rhs

Rand rechts

box

Rand an allen Seiten

border

Rand an allen Seiten

Tabelle 3.1: frame-Werte

Gitterlinien

<table rules="none">

Über das Attribut rules können Sie die Umrahmung der einzelnen Zellen steuern.

rules-Wert

Bedeutung

none

Kein Rahmen

groups

Rahmenelemente zwischen Zeilengruppen (thead, tfoot, tbody) und Spaltengruppen (colgroup)

rows

Rahmenelemente zwischen Zeilen

cols

Rahmenelemente zwischen Spalten

all

Rahmenelemente zwischen Zeilen und Spalten

Tabelle 3.2: rules-Werte

Zellenabstand

<table cellspacing="0">
<table cellpadding="5">

Über das Attribut cellspacing legen Sie den Abstand zwischen den Zellen der Tabelle fest.

Über das Attribut cellpadding legen Sie den Abstand zwischen den Zelleninhalten und den Zellenrändern fest.

Abbildung 3.4:  Spacing und Padding

Ausrichtung des Zelleninhalts

Für die Ausrichtung des Zelleninhalts gibt es verschiedene Attribute, die sowohl für die gesamte Tabelle als auch für Spaltengruppen, Zeilen oder einzelne Zellen spezifiziert werden können.

Attribut

Bedeutung

align

Horizontale Ausrichtung

Mögliche Werte sind: left, center, right, justify (Block) und char (Ausrichtung an einem Zeichen)

valign

Vertikale Ausrichtung

Mögliche Werte sind: top, middle, bottom und baseline

char

Ausrichtung an einem Zeichen

Kann beispielsweise verwendet werden, um die Zahlen einer Spalte am Dezimapunkt ».« auszurichten.

charoff

Abstand von Ausrichtungszeichen

Tabelle 3.3: Attribute für die Ausrichtung von Zelleninhalten

Stylesheets

Mit Hilfe von Stylesheets kann man auf jeder Ebene (von der Gesamttabelle über Spaltengruppen bis hin zu Tabellenzellen) auf die Darstellung der Tabelle und ihres Inhalts Einfluss nehmen. Im Abschnitt 3.1.1 konnten Sie bereits ein paar Beispiele zur Formatierung mit Inline-Stilen verfolgen. Ausführlichere Informationen zur Formatierung mit Stylesheets finden Sie in Kapitel 4.

Webdesign mit Tabellen

Der Einsatz von Tabellen beschränkt sich nicht nur auf die tabellarische Darstellung von Daten, sondern wird auch oft zur Gestaltung des Seitenaufbaus eingesetzt. Das W3C- Konsortium rät zwar mittlerweile davon ab, Tabellen auf diese Weise zu missbrauchen, da man heute mit Hilfe von Stylesheets (CSS2 Positioning) sauberere und oft auch bessere Ergebnisse erzielen kann, doch wird die CSS2-Positionierung die Seitengestaltung mit Tabellen wohl nie ganz verdrängen können. Und dies liegt nicht nur an der Unbelehrbarkeit der Webdesigner!

Wenn Sie Tabellen zum Seitenaufbau einsetzen, nicht vergessen, den Tabellenrahmen auf 0 zu setzen: <table border="0">

Tabellenbreite und Seitenbreite

Die Breite einer Tabelle kann man in Pixeln oder in Prozent des Browserfensters angeben. Dies räumt uns eine Vielzahl von Gestaltungsmöglichkeiten ein.

Die Verwendung des align-Attributs ist für das <table>-Tag eigentlich »deprecated«. Laut HTML-Standard sollte man das Attribut nur noch zur Ausrichtung des Inhalts einzelner Tabellenzellen (-zeilen oder -spalten) verwenden. Im Internet Explorer und Navigator 4 kann man Tabellen zentrieren, indem man sie in <div>-Blöcke einfasst, für die die Stileigenschaft text-align gesetzt ist: <div style="text-align: center">. Der Netscape 6-Browser interpretiert diese Formatierungsanweisung allerdings so, dass er den Inhalt der Tabelle und nicht die Tabelle selbst zentriert.

Dieses Layout besteht aus:

Listing 3.2: segenDerErde.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Segen der Erde</title>
</head>

<body style="margin-top: 30px; margin-left: 30px;
¬background-color: black; color: white"
text="white">

<table border="1" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="10%">&nbsp;</td>
<td width="450">
<h1>Segen der Erde</h1>
<p>Der lange, lange Pfad über das Moor in den Wald hinein - wer
hat ihn ausgetreten? ...</p>
</td>
<td width="10%">&nbsp;</td>
</tr>
</table>

</body>
</html>

Wie wird diese Webseite im Browser angezeigt?

Bei normaler Browsergröße erscheint der Text zentriert, die Stylesheet-Eigenschaft margin- top im <body>-Tag sorgt für den Abstand zum oberen Rand, die beiden leeren Tabellenspalten und die Stileigenschaft margin-left für den Abstand zu den seitlichen Rändern.

Betrachtet der Besucher die Webseite bei größerer Bildschirmauflösung oder in einem größerem Browserfenster, passt die linke Tabellenspalte den Abstand vom linken Seitenrand an. Der Text wird nicht weiter ausgedehnt - was für den Leser meist recht angenehm ist, denn zu lang gezogene Textzeilen, bei denen das Auge weit nach rechts und links wandern müssen, machen das Lesen anstrengend.

Betrachtet der Besucher die Webseite bei kleinerer Bildschirmauflösung oder in einem kleineren Browserfenster, verhindert der linke feste Rand, dass der Text gleich ganz an den Seitenrand gedrückt wird. Bei etwas breiterem Browserfenster wird die linke Tabellenspalte immer breiter und rückt den Text der Tabelle weiter in die Fenstermitte.

Zeitungslayout

Zeitungen und Zeitschriften zeichnen sich meist durch mehrspaltigen Text aus. Mit Hilfe einer Tabelle kann man einen solchen Seitenaufbau auf Webseiten nachstellen.

Bildergalerien

Wie soll man Bilder- oder Fotosammlungen im Web ausstellen. Eine Möglichkeit ist, jedes Bild auf einer eigenen Seite zu präsentieren. In so einem Fall wird man das Bild vermutlich mittig zentrieren. Was aber macht man, wenn man mehrere Bilder untereinander auf einer Seite präsentieren will?

Am Einfachsten ist es natürlich, die Bilder von oben nach unten aufzuführen und unter jedem Bild den beschreibenden Text einzufügen, bevor unter diesem das nächste Bild folgt. Ein solcher Aufbau ist allerdings auch recht langweilig. Spannender ist zweifelsohne eine dreispaltige, zentrierte Tabelle, in deren mittleren Spalte untereinander die Bilder aufgeführt werden, während die Beschriftungen abwechseln links und rechts stehen. Dazu ein schwarzer Hintergrund (und weiße Schrift) und die Präsentation wirkt gleich etwas edler.

Freies Layout

Dank der vielfältigen Möglichkeiten zum Aufbau von Tabellen (Zellen verbinden, Spalten gruppieren, Tabellen ineinander verschachteln), kann man mit Tabellen auch ganz freie und eigenwillige Seitenaufteilungen erzeugen. So lassen sich Textelemente und Bilder scheinbar frei auf der Webseite platzieren.

Abbildung 3.6:  Freies Seitenlayout mit Tabellen

3.2 Frames

Frames dienen dazu, ein Webdokument - oder aus Perspektive des Lesers: den Anzeigebereich im Browser - aufzuteilen. Wozu kann man dieses Konzept verwenden und wie funktioniert es?

Framesets, Frames und Webseiten

Frameseiten werden in zwei Schritten erstellt:

  1. Zuerst setzt man die eigentliche Frameseite auf. Diese enthält keinen anzuzeigenden Text, sondern definiert lediglich die Aufteilung des Browserfensters in Frames. Diese Seite wird der Websurfer später aufrufen.
  2. Dann erzeugt man ganz normale Webseiten, deren Inhalt in den Frames angezeigt werden soll. Im Code der Frameseite kann man festlegen, welche Webseite in welchen Frame eingeblendet werden soll.

Schauen wir uns einfach mal ein Beispiel an:

Listing 3.3: zweiframes.html - Frameseite für zwei nebeneinander liegenden Frames

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameseite</title>
</head>

<frameset cols="20%,80%">

<frame name="inhalt" src="inhaltsverzeichnis.html" />
<frame name="hauptframe" src="hauptseite.html" />

</frameset>
</html>

Was an diesem HTML-Code sofort auffällt, ist, dass es keinen <body>-Abschnitt gibt. Denkt man ein wenig darüber nach, wird einem schnell klar warum. Da Frameseiten keinen wirklichen anzuzeigenden Inhalt enthalten, brauchen sie auch keinen <body>-Abschnitt. Dafür enthalten Frameseiten einen <frameset>-Abschnitt, in dem die Aufteilung des Browserfensters in Frames festgelegt wird.

Die in einem <frameset>-Abschnitt definierte Gruppe von Frames bezeichnet man als »Frameset«.

Noch im <frameset>-Starttag teilen wir dem Browser mit, in wie viele Spalten (cols) das Browserfenster aufzuteilen ist. Statt der genauen Anzahl geben wir für jede Spalte eine Größenangabe an (der Browser kann dann selbst zusammenzählen, wie viele Spalten es sind).

<frameset cols="20%,80%">

Im <frameset>-Abschnitt werden dann die Frames für die »Spalten« definiert.

  <frame name="inhalt" src="inhaltsverzeichnis.html" />
<frame name="hauptframe" src="hauptseite.html" />
</frameset>

Hier werden zwei Frames definiert. Der erste Frame, der 20% der Breite des Browserfenster einnehmen soll, erhält den Namen inhalt und wird mit dem HTML-Dokument inhaltsverzeichnis.html verbunden. Der erste Frame, der 80% der Breite des Browserfenster einnehmen soll, bekommt den Namen hauptframe zugewiesen und wird mit dem HTML- Dokument hauptseite.html verbunden.

Wenn Sie diese Frameseite in Ihren Browser laden (der hoffentlich Frames unterstützt), werden Sie eventuell zuerst zwei Fehlermeldungen erhalten, die Sie darauf hinweisen, dass die Seiten inhaltsverzeichnis.html und hauptseite.html nicht gefunden werden können, bevor dann schließlich doch noch die in Frames aufgeteilte Frameseite erscheint (siehe Abbildung 3.7).

Abbildung 3.7:  Frames im Browser

Wenn Sie die Frameseite von Ihrem lokalen Server aus laden, wird dieser vermutlich in die Frames entsprechende Fehlermeldungen einblenden, dass die angeforderten URLs für die Frames nicht verfügbar sind.

Seiten für die Frames aufsetzen

Um das Beispiel abzuschließen, setzen wir jetzt noch zwei einfache Seiten für die beiden Frames unserer Frameseite auf.

Für den linken Frame erstellen wir ein kleines Inhaltsverzeichnis für drei Rilke-Gedichte.

Listing 3.4: inhaltsverzeichnis.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inhaltsverzeichnis</title>
</head>


<body>

<dl>
<dt>Rilke</dt>
<dd>Der Panther</dd>
<dd>Herbsttag</dd>
<dd>Im Saal</dd>
</dl>


</body>
</html>

Ich habe das Inhaltsverzeichnis mit einer Definitionsliste erzeugt (siehe Kapitel 2.4). Eine Nummerierung schien mir für einen Gedichtband unangebracht und die Definitionsliste hat den Vorteil, dass die Gedichte unter dem Dichter gleich schön eingerückt werden.

In der HTML-Seite für den zweiten Frame führen wir untereinander die Gedichttexte auf.

Listing 3.5: hauptseite.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gedichte</title>
</head>

<body>


<h2>DER PANTHER</h2>

<pre>
Sein Blick ist vom Vorübergehn der Stäbe
so müd geworden, daß er nichts mehr hält.
Ihm ist, als ob es tausend Stäbe gäbe
und hinter tausend Stäben keine Welt.

Der weiche Gang geschmeidig starker Schritte,
der sich im allerkleinsten Kreise dreht,
ist wie ein Tanz von Kraft um eine Mitte,
in der betäubt ein großer Wille steht.

Nur manchmal schiebt der Vorhang der Pupille
sich lautlos auf - dann geht ein Bild hinein,
geht durch der Glieder angespannte Stille -
und hört im Innern auf zu sein.
</pre>
<br />
<br />

<h2>HERBSTTAG</h2>
...

Ich verwende hier das <pre>-Tag, damit der Browser die Formatierung im HTML-Code (insbesondere die Zeilenumbrüche und das Einrücken mit Leerzeichen) übernimmt und ich nicht lauter <br />-Tags und &nbsp;-Sonderzeichen einfügen muss.

Abbildung 3.8:  Frame-Aufteilung in Inhaltsverzeichnis und Textseite

Soweit wie wir es hier sehen, ist das Beispiel noch in mancher Hinsicht unvollkommen. Beispielsweise wird der Verzeichniseintrag »Der Panther« umgebrochen, wenn das Browserfenster kleiner gemacht wird. Unbefriedigend ist auch, dass man die Gedichte nicht durch Anklicken im Inhaltsverzeichnis (linker Frame) in den Anzeigebereich des rechten Frames rücken kann. Um diese Mängel zu beheben, müssen wir ein bisschen mehr über den Aufbau und die Konfiguration von Frameseiten lernen.

Framesets aufbauen

Die Aufteilung des Browserfensters in Frames geschieht wie gesagt in der Frameseite, die zu diesem Zweck statt des <body>-Abschnitts einen <frameset>-Abschnitt definiert.

Wenn Sie mit <!DOCTYPE>-Versionsinformationen in die Seite aufnehmen (was Sie tun sollten), denken Sie daran als HTML-Version HTML 4.01 Frameset//EN und als Dokumententypdeklaration frameset.dtd anzugeben (siehe Kapitel 2.2.1).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Frameseite</title>
</head>

<frameset cols="20%,80%">

<frame name="inhalt" src="inhaltsverzeichnis.html" />
<frame name="hauptframe" src="hauptseite.html" />

</frameset>
</html>

<frameset></frameset>

Die gesamte Frames-Deklaration wird in den <frameset>-Tags eingeschlossen. Über die Attribute rows und cols kann man festlegen, in wie viele Zeilen (rows) und Spalten (cols) das Browserfenster aufgeteilt werden soll. Wenn Sie eines dieser Attribute auslassen, geht der Browser davon aus, dass Sie nur eine Zeile oder Spalte (je nachdem, ob Sie rows oder cols weglassen) wünschen.

Als Wert für rows und cols führen Sie eine durch Kommata getrennte Liste von Größenangaben auf. Als Größenangaben kommen Pixelwerte (30, 250), Prozentangaben (30%, 75%) oder Verhältniswerte (*, 3*) in Frage. Frames mit Verhältniswerten teilen sich den Platz, der nach Abzug der Pixel- und Prozentwerte verbleibt, gemäß ihrer Verhältniswerte auf (wobei * für 1* steht).

Das klingt alles ein wenig kompliziert, wird aber schnell klar, wenn man sich ein paar Beispiele anschaut.

HTML-Code

Frames

<frameset cols="20%,80%">

Eine Zeile mit zwei Spalten, d.h. zwei nebeneinander liegende Frames. Der erste (linke) Frame nimmt 20 % des Browserfensters ein, der zweite (rechte) Frame nimmt 80 % ein.

<frameset rows="20%,80%">

Eine Spalte mit zwei Zeilen, d.h. zwei untereinander liegende Frames. Der erste (obere) Frame nimmt 20 % des Browserfensters ein, der zweite (untere) Frame nimmt 80 % ein.

<frameset cols="50,300">

Eine unsinnige Angabe! Wenn Sie für alle Frames in der Breite oder Höhe feste Werte vorgeben, gibt es keine Möglichkeit für den Browser, die Anzeige an die Abmaße des Browserfensters anzupassen. Er müsste eigentlich die Abmaße seines eigenen Fensters korrigieren. Da er dies nicht kann (oder nicht will), übergeht er Ihre Anweisungen.

<frameset rows="50,*"
cols="100,*">

Vier Frames in zwei Zeilen und Spalten.

Der erste Frame ist 50 Pixel hoch und 100 Pixel breit (erste Spalte in erster Zeile).

Der zweite Frame ist 50 Pixel hoch und nimmt in der Breite den Rest des Browserfensters ein (zweite Spalte in erster Zeile).

Der dritte Frame nimmt in der Höhe den Rest des Browserfensters ein und ist 100 Pixel breit.

Der vierte Frame nimmt in Breite und Höhe den verbleibenden Raum ein.

<frameset
rows="100,1*,3*">

Drei untereinanderliegende Frames. Der erste Frame ist genau 100 Pixel hoch. Die beiden anderen Frames teilen sich die verbleibende Höhe im Verhältnis 1:3.

Wenn das Browserfenster beispielsweise 500 Pixel hoch ist, nimmt der erste Frame davon 100 Pixel ein. Die restlichen 400 Pixel werden im Verhältnis 1:3 aufgeteilt, also 100 Pixel Höhe für den zweiten und 300 Pixel Höhe für den dritten Frame.

Tabelle 3.4: Breiten und Höhen der Frames

Frames definieren und konfigurieren

Innerhalb der <frameset>-Tags werden die einzelnen Frames definiert, und zwar in der Reihenfolge, in der sie auf die Zeilen und Spalten der Frameseite aufgeteilt werden sollen. Zuerst kommen die Frames der ersten Zeile, angegeben von links nach rechts. Dann die Frames der zweiten Zeile, von links nach rechts, und so weiter bis zur letzten Zeile.

Um einzelne Frames zu definieren, verwendet man das <frame>-Tag.

<frame src="seite1.html" />
<frame src="bild1.gif" />

Das wichtigste Attribut zu dem <frame>-Tag ist das src-Attribut, das als Wert den absoluten oder relativen URL (siehe Kapitel 2.6) zu der Webseite oder dem Bild enthält, das in dem Frame angezeigt werden soll. Doch auch die anderen Attribute sind recht interessant:

Rahmenelemente ein- und ausblenden

<frame frameborder="1" ...

Der Wert 1 zeigt dem Browser an, dass um den Frame Rahmenelemente gezeichnet werden sollen.

Der Wert 0 zeigt dem Browser an, dass um den Frame keine Rahmenelemente gezeichnet werden sollen. Das heißt aber noch nicht, dass um den Frame wirklich keine Rahmenelemente zu sehen sind. Grenzt der Frame an Frames, für die frameborder="1" ist, wird zwischen diesen Frames ein Rahmenelement eingezeichnet.

Wenn Sie für Ihre Frames das Attribut frameborder auf 0 setzen, werden zwar keine Rahmenelemente zwischen den Frames gezeichnet, doch bedeutet dies nicht, dass die Inhalte der Frames dann nahtlos ineinander übergehen. Wenn Sie beispielsweise für alle Webseiten der Frames die Hintergrundfarbe auf Rot (style="background-color: red") setzen, werden Sie feststellen, dass ein Netz weißer Linien zurückbleibt. Um diese Lücken zwischen den Frames zu schließen, müssen Sie für den Internet Explorer und den Netscape Navigator im <frameset>-Tag das Attribut border auf 0 setzen. (Hinweis: Offiziell ist das border-Attribut für das <frameset>-Tag nicht definiert.)

Rahmenelemente verschieben

<frame noresize="noresize" ...

Wenn Sie es nicht anders vorgeben, kann der Besucher Ihrer Website die Rahmenelemente zwischen den Frames mit der Maus aufnehmen und verschieben. Wenn Sie dieses Verhalten unterbinden wollen, setzen Sie in dem betreffenden Frame das Boolesche Attribut noresize.

Aber Achtung! Diese Einstellung bedeutet nur, dass die Rahmenelemente des Frames bei der Anzeige in einem Browser nicht mit der Maus verschoben werden können. Es bedeutet nicht, dass sich die Größe des Frames nicht ändert, wenn der Anwender den ganzen Anzeigebereich des Browser vergrößert oder verkleinert. Dazu müssen Sie die Größe des Frames zusätzlich in Pixel definieren. (Eine Garantie ist dies aber auch nicht, da die Frames ja zusammen den Anzeigebereich des Browsers ausfüllen müssen.)

Und nochmals Achtung! Wird die Größe eines Frames als nicht veränderbar eingestellt, bedeutet dies, dass seine Rahmenelemente nicht im Browser verschoben werden können. Dies betrifft dann aber natürlich auch die angrenzenden Frames.

Abstand von den Rahmenelementen

<frame marginwidth="20px" marginheight="20px" ...

Diese Attribute werden derzeit auf sehr seltsame Weise von den Browsern unterstützt, so dass sich ihr Effekt nur sehr schwierig voraussagen lässt. Wir empfehlen daher zum einrücken der Frame-Inhalte in den Webseiten der Frames die margin-Stileigenschaften für das <body>-Tag zu setzen: <body style="margin-left: 25px; margin-top: 25px">. Dies funktioniert aber natürlich nur für Webseiten, die man selbst aufsetzt.

Die Attribute marginwidth und marginheight sollten Sie stattdessen beide auf 0 setzen. Denn nur so können Sie sicherstellen, dass die Webseiten, die in einen Frame geladen werden, diesen auch im Netscape Navigator voll ausfüllen.

Bildlaufleisten ein- und ausblenden

<frame scrolling="no" ...

Kann in einem Frame nicht der komplette Inhalt der eingeblendeten Webseite angezeigt werden, so fügt der Browser automatisch Bildlaufleisten hinzu.

Mit dem Attribut scrolling können Sie vorgeben, ob Bildlaufleisten in Frames eingeblendet werden sollen.

Wert

Beschreibung

scrolling = "no"

Es werden keine Bildlaufleisten angezeigt.

scrolling = "yes"

Es werden immer Bildlaufleisten angezeigt.

scrolling = "auto"

Bildlaufleisten werden eingeblendet, wenn der Inhalt der Webseite nicht vollständig im Frame angezeigt werden kann.

Tabelle 3.5: Bildlaufleisten in Frames

Jetzt fehlt uns nur noch ein frame-Attribut: name. Dieses Attribut ist besonders in Verbindung mit der Verwendung von Hyperlinks in Frames interessant.

Frames und Hyperlinks - ein Kapitel für sich

Für einen kurzen Moment wollen wir nun die Frameseite verlassen und wenden uns den Webseiten zu, die in den Frames angezeigt werden.

Wenn man innerhalb eines Frames auf einen Hyperlink klickt, folgt der Browser dem Link, beschafft die Webseite (oder Grafikdatei), auf die der Link verweist, und zeigt ihren Inhalt in dem Frame an, in dem der Hyperlink stand. Das bedeutet, die Seite, die aktuell in dem Frame angezeigt wird, wird durch eine neue Seite ersetzt.

Dies ist nicht immer das Verhalten, das man sich als Webautor wünscht. Am Ende des Abschnitts 3.2.1 haben wir bereits festgestellt, dass es nett wäre, wenn man über einen Hyperlink aus Frame A (in unserem Beispiel der Frame mit dem Inhaltsverzeichnis zu den Rilke-Gedichten) einen Textpassage in der Webseite eines anderen Frames ansteuern beziehungsweise eine neue Webseite in diesen Frame laden könnte. Erfreulicherweise stellt dies kein großes Problem dar.

  1. Weisen Sie dem Frame, der von dem Hyperlink angesteuert werden soll, in seiner Definition im HTML-Code der Frameseite einen Namen zu:
    <frame name="frame2" src="seite2.html" />
  2. Geben Sie in den <a>-Ankern der Hyperlinks den Namen des Zielframes als Wert für das target-Attribut an:
    <a href="seite_2_2.html" target="frame2" />

Wie wäre es mit einer kleinen Zwischenübung?

Überarbeiten Sie die Dateien zweiframes.html, inhaltsverzeichnis.html und hauptseite.html (Listing 3.3 bis Listing 3.5) so, dass im linken Frame Hyperlinks angezeigt werden, über die man zu den Anfängen der drei Gedichte springen kann. Als Ausgangsbasis können Sie die Listings auf der Buch-CD nehmen. Hinweis: Da alle Gedichte in einer Datei stehen, müssen Sie die Überschriften der Gedichte mit benannten Anker-Elementen versehen, die Sie ansteuern können (siehe Kapitel 2.6).

Wenn Sie irgendwo hängen bleiben, lesen Sie in Übung 4 nach, wie es geht.

Abbildung 3.9:  Frameseite nach Klick auf den Herbsttag-Link

Zielframe für eine ganze Webseite

Häufig haben alle oder zumindest ein großer Teil einer Webseite den gleichen Zielframe. Im Falle unserer Gedichtesammlung haben beispielsweise alle Hyperlinks der Seite inhaltsverzeichnis.html den rechten Frame als Ziel.

In so einem Falle kann man sich viel Arbeit sparen, indem man den Target-Frame mit Hilfe des <base>-Tags im Header-Abschnitt der Webseite definiert:

<head>
...
<base target="frame2" />
</head>

Was aber macht man, wenn es auf der Seite einen oder zwei Hyperlinks gibt, die einen anderen Zielframe haben?

Dann behält man den im <base>-Tag spezifizierten Zielframe als Standard-Zielframe der Webseite bei und gibt für alle Hyperlinks mit abweichendem Zielframe im Anker-Element ein passendes target-Attribut an:

<a href="seite.html" target="frame4">Klick mich</a>

Für alle Hyperlinks ohne eigenes target-Attribut im Anker-Element gilt dann der Zielframe aus dem <base>-Tag. Für Hyperlinks mit target-Attribut im Anker-Element hat dieses Vorrang.

Standardnamen

Als »target« können Sie neben den von Ihnen definierten Frame-Namen auch vier von HTML definierte Standardnamen angeben.

target-Wert

Beschreibung

_blank

Das Dokument, auf das der Link verweist, wird in einem ganz neuen Browserfenster angezeigt.

_self

Das Dokument, auf das der Link verweist, wird in dem aktuellen Frame angezeigt.

Dieser target-Wert ist interessant für Webseiten, die in ihrem Header-Abschnitt einen anderen Frame als Standard-Zielframe definieren (<base>-Tag).

_parent

Das Dokument, auf das der Link verweist, wird in den übergeordneten Frame (siehe nachfolgender Abschnitt zur Verschachtelung von Framesets) geladen. Wenn kein übergeordneter Frame existiert, wird das Dokument in den aktuellen Frame geladen.

_top

Das Dokument, auf das der Link verweist, wird in das aktuelle Browserfenster geladen und ersetzt dort die Frameseite.

Dieser target-Wert stellt eine Möglichkeit dar, die Frame-Aufteilung des Browserfensters aufzuheben.

Tabelle 3.6: Vordefinierte target-Werte

Framesets verschachteln

Mit nur einem Frameset kann man ein Browserfenster nur in Zeilen gleicher Spaltenzahl (oder Spalten gleicher Zeilenzahl) aufteilen. Viele interessante Aufteilungen kann man auf diese Weise nicht erzeugen - beispielsweise die Aufteilung in Banner-, Inhaltsverzeichnis- und Hauptframe. Diese werden erst möglich, wenn man Framesets ineinander verschachtelt.

Selbstverständlich sollte man die Verschachtelung nicht übertreiben - schließlich führt die Verschachtelung dazu, dass die einzelnen Frames immer kleiner werden. Bestimmte Verschachtelungen sind aber durchaus typisch und weit verbreitet.

Frame-Aufbau

HTML-Code der Frameseite

In die obere Zeile kommt ein grafisches Banner. Die untere Zeile nimmt den Rest des Browserfensters ein und ist in zwei Spalten geteilt.

Die erste Spalte ist für ein Inhaltsverzeichnis gedacht. Diese Spalte hat eine feste Breite und definiert als Zielframe den neben ihr liegenden Hauptframe, in dem die verschiedenen Seiten des Webs eingeblendet werden.

<frameset rows="64,*">

<frame name="Banner" scrolling="no" noresize="noresize" />

<frameset cols="150,*">

<frame name="Inhalt" noresize="noresize" target="Hauptframe" />

<frame name="Hauptframe" />

</frameset>

</frameset>

In die obere Zeile kommt eine Navigationsleiste. Je nachdem, welcher Link in der Navigationsleiste gedrückt wird, wechseln die Auswahl der angebotenen Links im Inhaltsverzeichnis (Frame links unten).

Die erste Spalte ist für ein Inhaltsverzeichnis gedacht. Diese Spalte hat eine feste Breite und definiert als Zielframe den neben ihr liegenden Hauptframe, in dem die verschiedenen Seiten des Webs eingeblendet werden.

<frameset rows="64,*">

<frame name="Banner" scrolling="no" noresize="noresize" target="Inhalt" />

<frameset cols="150,*">

<frame name="Inhalt" noresize="noresize" target="Hauptframe" />

<frame name="Hauptframe" />

</frameset>

</frameset>

Bei dieser Seitenaufteilung wäre es schön, wenn bei einem Klick auf einen Link in der Navigationsleiste nicht nur das Inhaltsverzeichnis, sondern auch die Hauptseite aktualisiert würde. Mit Hilfe von JavaScript ist dies möglich (siehe Kapitel 12.2).

Dieser Aufbau ist eine Erweiterung des obigen Layouts. Hinzugekommen ist eine Fußleiste am unteren Ende, die die gleiche Navigationsleiste wie die Kopfleiste enthält.

<frameset rows="64,*,64">

<frame name="Oben" scrolling="no" noresize="noresize" target="Inhalt" />

<frameset cols="150,*">

<frame name="Inhalt" target="Hauptframe" />

<frame name="Hauptframe" />

</frameset>

<frame name="Unten" scrolling="no" noresize="noresize" target="Inhalt" />

</frameset>

Alternativ könnte man die Fußleiste auch zum Anzeigen von Kontaktinformationen zum Webadministrator nutzen. In diesem Fall würde die Angabe des Zielframes für die Fußleiste entfallen.

Aufteilung in zwei Spalten. In die linke Spalte kommt eine Navigationsleiste (Inhaltsverzeichnis). Je nachdem, welcher Link in der Navigationsleiste gedrückt wird, wechselt die Auswahl der angebotenen Links im Inhaltsverzeichnis (Frame rechts oben). Die rechte Spalte nimmt den Rest des Browserfensters ein und ist in zwei Zeilen geteilt.

Die erste Zeile ist für ein Inhaltsverzeichnis gedacht. Diese Zeile definiert als Zielframe den neben ihr liegenden Hauptframe, in dem die verschiedenen Seiten des Webs eingeblendet werden.

<frameset cols="150,*">

<frame name="Links" scrolling="no" noresize="noresize"target="ROben" />

<frameset rows="20%,*">

<frame name="ROben" noresize="noresize"target="RUnten" />

<frame name="RUnten" />

</frameset>

</frameset>

Tabelle 3.7: Browser-Aufteilungen mit verschachtelten Framesets

Probleme mit Browsern ohne Frame-Unterstützung

Es soll sie ja noch geben: älterer Browser, die keine eingebaute Frame-Unterstützung implementiert haben. Es gehört daher zum guten Ton eine alternative Darstellung vorzusehen, die in älteren Browsern statt der Frames angezeigt wird.

Wo definiert man die alternative Anzeige?

Natürlich im HTML-Code der Frameseite, eingeschlossen in das <noframes>-Tag. Man kann dies nutzen, um einen Hyperlink zu einer alternativen Seite anzubieten oder sich einfach darauf beschränken, den Websurfer darauf hinzuweisen, was schief gelaufen ist.

<frameset cols="20%,80%">

<frame name="inhalt" src="inhaltsverzeichnis.html" />
<frame name="hauptframe" src="hauptseite.html" />

<noframes>
<body>
<p>Sorry, dies ist eine Frameseite und Ihr Browser unterstützt
offensichtlich keine Frames</p>
</body>
</noframes>

</frameset>

3.3 Inline-Frames

Frames eröffnen dem Webdesigner eine ganze Reihe von interessanten Gestaltungsmöglichkeiten:

Trotz ihrer Vorzüge sind Frames bei Webdesignern nicht unumstritten. Dies hat zum Teil sicherlich historische Gründe (früher gab es keine Möglichkeit, die Rahmenelemente auszublenden), liegt aber auch daran, dass die Platzierung der Frame-Inhalte von den Browsern unterschiedlich gehandhabt wird, so dass es zu Verrückungen kommen kann.

Webs mit aufwendigem grafischem Design verzichten daher oftmals auf den Einsatz von Frames. Leider ging damit bisher auch die Möglichkeit verloren, einzelne Seitenabschnitte mit eigenen Bildlaufleisten zu versehen.

<iframe></iframe>

Die Lösung zu diesem Problem brachte das <iframe>-Tag von HTML 4.

Mit dem <iframe>-Tag kann man einzelne Frames, sogenannte Inline-Frames, in ganz normale Webseiten (ohne Framesets-Definition) einbauen.

Interessant ist dies beispielsweise für Seitenlayouts mit Inhaltsverzeichnis und Anzeigebereich, wenn die über das Inhaltsverzeichnis angesteuerten Dokumente, die in den Anzeigebereich geladen werden, recht lang sind.

Zur Verdeutlichung des Problems lassen Sie uns eine kleine Design-Studie betreiben.

Der Netscape Navigator 4.x unterstützt keine Inline-Frames.

Inhaltsverzeichnisse ohne Frames

In Abschnitt 3.2 haben wir mit Hilfe von Frames ein Web mit Gedichten von Rainer Maria Rilke aufgesetzt. Stellen Sie sich jetzt bitte vor, dieses Web soll ein aufwendiges grafisches Design erhalten, dass sich mit Frames nur unbefriedigend lösen lässt. Wir entscheiden uns daher für ein Tabellen-Design.

Die Seiten unseres Webs bestehen aus einem Kopfbereich, einem Inhaltsverzeichnis und einem Anzeigebereich. Kopfbereich und Inhaltsverzeichnis sind auf allen Seiten gleich, der Anzeigebereich variiert - je nachdem, welcher Link im Inhaltsverzeichnis angeklickt wurde.

Abbildung 3.10:  Grund-Design, das allen Seiten gemeinsam ist (das Tabellengitter ist nur zur Verdeutlichung der Tabellenstruktur eingeblendet)

  1. Wir beginnen mit der Hauptseite tabelle.html. Wir stellen sie soweit fertig, dass sie alle Elemente enthält, die den Seiten des Webs gemeinsam sind: das Tabellenlayout, den Kopfbereich und das Inhaltsverzeichnis (siehe Abbildung 3.10). (Aus didaktischen Gründen besteht der Kopfbereich aus einer normalen Überschrift und das Inhaltsverzeichnis ist eine Definitionsliste. Das »aufwendige, grafische Design«, wegen dem wir auf die Verwendung von Frames verzichten, denken Sie sich bitte dazu. ;-) .)

Listing 3.6: tabelle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rilke-Gedichte</title>
</head>

<body>

<table border="0" width="700" cellpadding="10" cellspacing="0">
<colgroup span="2">
<col width="200">
<col width="500">
</colgroup>
<tr>
<td colspan="2">
<h1>Ausgewählte Rilke-Gedichte<h2>
</td>
</tr>
<tr>
<td width="200" valign="top">
<dl>
<dt>Rilke</dt>
<dd><a href="panther.html">Der Panther</a></dd>
<dd><a href="herbsttag.html">Herbsttag</a></dd>
<dd><a href="saal.html">Im Saal</a></dd>
<dd><a href="karussell.html">Das Karussell</a></dd>
</dl>
</td>
<td width="500" valign="top">
&nbsp;
</td>
</tr>
</table>


</body>
</html>

Die Breite der Spalten für das Inhaltsverzeichnis und den Anzeigebereich geben wir auf zwei verschiedene Weisen an: durch die colgroup-Definition und durch die width-Angabe in den <td>-Tags der Spalten. Letzter Weg wird zwar vom HTML-Standard als nicht empfehlenswert (deprecated) eingestuft, ist aber derzeit immer noch der einzig verlässliche Weg sicherzustellen, dass alle wichtigen Browser die Breitenangaben wie gewünscht berücksichtigen.

  1. Als Nächstes erstellen wir die Webseiten, die über die Hyperlinks geladen werden. Da wir nicht mit Frames arbeiten, wird die neu geladene Webseite das gesamte Browserfenster füllen und die aktuelle Datei komplett ersetzen. Die Webseite muss also die allen Webseiten gemeinsamen HTML-Elemente plus den individuellen HTML-Code für den Anzeigebereich enthalten. Beginnen wir mit der Seite panther.html.
  1. Zum Schluss kann man noch den Anzeigebereich der Startseite tabelle.html mit einem Begrüßungstext oder Ähnlichem füllen.

Fertig! Laden Sie die Seite tabelle.html jetzt in Ihren Browser und folgen Sie den Hyperlinks. Lesen Sie auch das Gedicht »Das Karussell«. Dieses Gedicht ist etwas länger. Wenn man es ganz liest, muss man die Anzeige des Browserfensters soweit herunterscrollen, dass die Hyperlinks aus dem Inhaltsverzeichnis danach verschwunden sind. Um also das nächste Gedicht auswählen zu können, muss man wieder an den Beginn der Webseite hochscrollen - was nicht sonderlich benutzerfreundlich ist. Um dieses Manko zu beheben, gibt es verschiedene Möglichkeiten:

Das oben dargestellte Design hat gegenüber der Verwendung von Frames auch noch einen weiteren Nachteil. Werden Änderungen an den gemeinsamen Seitenteilen erforderlich (soll beispielsweise ein weiteres Gedicht in das Inhaltsverzeichnis aufgenommen werden), müssen alle Seiten des Webs aktualisiert werden.

Inhaltsverzeichnisse mit Inline-Frames

Inline-Frames (<iframe>) werden genauso wie normale Frames (<frame>) definiert - nur dass sie nicht Teil einer Frameset-Deklaration sein müssen, sondern an beliebiger Stelle im <body>-Bereich einer normalen Webseite definiert werden.

Was bedeutet dies für unsere Sammlung von Rilke-Gedichten?

Wir können das »aufwendige grafische Design« wie gewünscht mit Hilfe einer Tabelle realisieren und trotzdem von den Vorteilen der Frames profitieren (eigene Bildlaufleiste, über Hyperlinks ansteuerbar), indem wir in die Tabellenzelle für den Anzeigebereich einen Inline-Frame einfügen.

Inline-Frames werden derzeit leider noch nicht vom Netscape Navigator unterstützt.

  1. Zuerst setzen wir wieder die Hauptseite tabelle.html mit dem Tabellenlayout, dem Kopfbereich und dem Inhaltsverzeichnis auf (siehe Abbildung 3.10). Wir können dazu die Vorlage aus dem vorangehenden Abschnitt verwenden (legen Sie ein neues Verzeichnis an und kopieren Sie einfach die Datei tabelle.html).

Listing 3.7: Die Startseite tabelle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rilke-Gedichte</title>
<base target="anzeige">
</head>

<body>

<table border="0" width="700" cellpadding="10" cellspacing="0">
<colgroup span="2">
<col width="200">
<col width="500">
</colgroup>
<tr>
<td colspan="2">
<h1>Ausgewählte Rilke-Gedichte<h2>
</td>
</tr>
<tr>
<td width="200" valign="top">
<dl>
<dt>Rilke</dt>
<dd><a href="panther.html" >Der Panther</a></dd>
<dd><a href="herbsttag.html">Herbsttag</a></dd>
<dd><a href="saal.html">Im Saal</a></dd>
<dd><a href="karussell.html">Das Karussell</a></dd>
</dl>
</td>
<td width="500" valign="top">
<iframe name="anzeige" src="blank.html" width="450" height="350"
scrolling="auto" frameborder="0">
<p>Sorry, Ihr Browser unterstützt keine Inline-Frames</p>
</iframe>
</td>
</tr>
</table>


</body>
</html>
  1. Als Nächstes erstellen wir die Webseiten, die über die Hyperlinks geladen werden. Da wir die Seiten in einen Frame einblenden, brauchen die Webseiten wieder nur den HTML-Code für den Anzeigebereich (sprich die Gedichte) zu enthalten. Beginnen wir mit der Seite panther.html:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Rilke-Gedichte</title>
    </head>

    <body>

    <h2>DER PANTHER</h2>

    <pre>
    Sein Blick ist vom Vorübergehn der Stäbe
    so müd geworden, daß er nichts mehr hält.
    Ihm ist, als ob es tausend Stäbe gäbe
    und hinter tausend Stäben keine Welt.

    Der weiche Gang geschmeidig starker Schritte,
    der sich im allerkleinsten Kreise dreht,
    ist wie ein Tanz von Kraft um eine Mitte,
    in der betäubt ein großer Wille steht.

    Nur manchmal schiebt der Vorhang der Pupille
    sichlautlos auf - dann geht ein Bild hinein,
    geht durch der Glieder angespannte Stille -
    und hört im Innern auf zu sein.
    </pre>

    </body>

    </html>
  1. Zum Schluss setzen wir noch eine leere Webseite blank.html auf. Bei der Definition des Inline-Frames haben wir diese Seite als Wert für das src-Attribut angegeben. Der Browser wird diese Datei also in den Frame laden, wenn die Startseite tabelle.html zum ersten Mal aufgerufen wird.

Listing 3.8: Eine leere Webseite - blank.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Rilke-Gedichte</title>
</head>

<body>
</body>

</html>

Statt einer leeren Webseite könnte man anfänglich natürlich auch einen Begrüßungstext oder Ähnliches laden.

Abbildung 3.12:  Mit Inline-Frames kann man einzelne Seitenabschnitte mit Bildlaufleisten ausstatten

3.4 Steuerelemente und Formulare

Wer im Internet schon einmal etwas bestellt oder sich für das Download kostenloser Demoversionen bei einem Software-Anbieter hat registrieren lassen, dem dürfte die Verwendung von Formularen auf HTML-Seiten bereits wohl vertraut sein. Wo immer Daten von Webbesuchern an den Server (und damit an den Webbetreiber) übermittelt werden sollen, stößt man auf Formulare: Bestellformulare, Registrierformulare, Formulare zur Eintragung in Gästebücher.

Als Websurfer füllen Sie die Formulare Schritt für Schritt aus: Sie tippen Ihre Daten in die dafür vorgesehenen Eingabefelder, Sie aktivieren oder deaktivieren Optionsfelder, Sie wählen aus den Vorgaben eines Listenfeldes, und zum Schluss klicken Sie auf den Abschicken-Schalter, um Ihre Eingaben an den Webserver zu schicken.

Schwieriger als das Ausfüllen und Abschicken eines Formulars ist es ein Formular aufzusetzen. Formulare bestehen immer aus zwei Teilen: der Eingabemaske, die dem Webbesucher angezeigt wird, und dem Programmcode, der die Formulareingaben verarbeitet, wenn der Webbesucher den Abschicken-Schalter drückt. In diesem Kapitel werden wir uns erst einmal auf das Aufsetzen der Eingabemaske beschränken. In den Kapiteln 11 und 17 können wir uns dann ganz auf die Bearbeitung der Formulareingaben konzentrieren.

Die HTML-Steuerelemente, die wir aus den Formularen kennen, können aber auch außerhalb von Formularen verwendet werden - beispielsweise zum Aufbau von dynamischen Benutzerschnittstellen. Es lohnt sich also, zuerst einmal die HTML- Steuerelemente für sich zu betrachten.

Der Netscape Navigator zeigt Steuerelemente nur dann an, wenn Sie in <form>-Tags gefasst sind. Wir fassen daher in diesem Buch grundsätzlich alle Steuerelemente in <form></form>-Tags ein - auch wenn wir gar kein richtiges Formular (mit Abschicken-Schalter) erstellen wollen und laut HTML-Standard eigentlich auf die <form>-Tags verzichten könnten.

HTML-Steuerelemente

Der Standardweg zur Erzeugung von Steuerelementen führt über das <input>-Tag. Mit Ausnahme von Auswahllisten (Menüs) und Labeln können alle HTML-Steuerelemente mit dem <input>-Tag erzeugt werden.

Steuerelemente erzeugen

Das <input>-Tag kennt eine ganze Reihe von Attributen. Zwei dieser Attribute sind besonders wichtig und sollten für alle Steuerelemente definiert werden: name und type.

 <input type="button" name="schalter1" />

Der Netscape Navigator zeigt Steuerelemente nur dann an, wenn Sie in <form>-Tags gefasst sind.

Steuerelemente konfigurieren

Für die meisten Steuerelementtypen kennt das <input>-Tag zusätzliche Attribute, über die man das Steuerelement konfigurieren kann. Eines dieser Attribute ist das value-Attribut, über das man dem Steuerelement einen Wert zuweisen kann. Speziell für Schalter gibt man über dieses Attribut den Schaltertitel an.

<input type="button" name="schalter1"
value="Klick mich!" />

Wenn Sie für einen Schalter das value-Attribut setzen, passt der Browser die Größe des Schalters an seinen Titel an.

Es gibt noch einige andere Attribute, die man zur Konfiguration der Steuerelemente verwenden kann. Allerdings werden diese Attribute nicht immer von allen Browsern gleichermaßen gut unterstützt (zu dem Zeitpunkt, da dieses Buch geschrieben wurde, bot der Internet Explorer die beste Unterstützung).

Attribut

Beschreibung

alt= "Vornamen eingeben"

Kurze Beschreibung für Browser, die keine Grafiken und Steuerelemente anzeigen können.

tabindex="1"

Zur Festlegung der Reihenfolge, in der Steuerelemente über die (Tab)-Taste angesteuert werden können.

Steuerelemente mit niedrigeren, positiven Werten werden zuerst angesteuert, ansonsten (kein Wert vorgegeben oder mehrere Steuerelemente mit gleichen Werten) gilt die Definitionsreihenfolge.

disabled="disabled"

Das Steuerelement wird deaktiviert (graue Darstellung, kann nicht verwendet werden)

accesskey="V"

Zur Festlegung eines Tastaturkürzels (einzelnes Zeichen) für ein Steuerelement. Tippt der Besucher der Webseite das entsprechende Zeichen ein, erhält das Steuerelement, das dieses Zeichen als Tastaturkürzel verwendet, den Eingabefokus.

Tabelle 3.8: Allgemeine Steuerelement-Attribute

Welche weiteren Attribute für welche Steuerelemente verwendet werden können, entnehmen Sie bitte Tabelle 3.9 im nachfolgenden Abschnitt.

Ereignisbehandlung für Steuerelemente

Steuerelemente in HTML-Seiten sind ziemlich sinnlos, wenn man nicht auch irgendwie darauf reagiert, wenn der Anwender mit dem Steuerelement interagiert. Eigentlich ist dies das Thema der Kapitel 11 und 17, doch sollten wir uns zum Austesten der Steuerelemente durchaus den Spaß gönnen, die Steuerelemente mit ein wenig dynamischem HTML zu verbinden. Dazu bedarf es zwei kleiner Änderungen:

Im Header-Abschnitt müssen wir die verwendete Skriptsprache angeben:

<meta http-equiv="Content-Script-Type" content="text/javascript"> 

Im <input>-Tag verbinden wir eines der Steuerelementereignisse mit JavaScript-Code, der ausgeführt wird, wenn das Steuerelement ausgewählt wird. Zur Demonstration wählen wir das onclick-Ereignis (wird ausgelöst, wenn das Steuerelement angeklickt wird) und verbinden es mit JavaScript-Code, der eine Erfolgsmeldung ausgibt:

<input type="button" name="schalter1"
value="Klick mich!" onclick="alert('Treffer')" />

Der vollständige Quelltext einer Testseite könnte jetzt wie folgt aussehen:

Listing 3.9: schalter.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Schalter</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>

<body>
<h2>Schalter als Beispiel für ein Steuerelement</h2>

<form>
<input type="button" name="schalter1"
value="Klick mich!" onclick="alert('Treffer')" />
</form>

</body>
</html>

Abbildung 3.13:  Beim Klicken auf den Schalter wird eine Meldung angezeigt

Die verschiedenen Steuerelemente

Die meisten Steuerelemente können wie gesagt mit Hilfe des <input>-Tags erzeugt werden, für andere (mehrzeiliges Textfeld, Label) gibt es eigene Tags. Wie die verschiedenen Steuerelemente erzeugt werden und welche spezifischen Attribute für die verschiedenen Steuerelemente gesetzt werden können, zeigt die folgende Tabelle.

Formularfeld

Beschreibung

Einzeiliges Textfeld

<input type="text" name="T1"

value="hier eintippen" size="20"

maxlength="40" />

Steuerelement, in das der Webbesucher einen Text eingeben kann (beispielsweise seinen Namen).

Mit value kann ein Text im Textfeld angezeigt werden.

Mit size kann man die Größe des Elements in Textzeichen angeben, maxlength ist die maximale Anzahl von Zeichen, die man in das Textfeld eingeben kann. Ist maxlength größer als size scrollt der Browser gegebenenfalls die Anzeige.

Mit readonly="readonly" kann man verhindern, dass der Leser den Text im Textfeld verändern kann.

Passwortfeld

<input type="password" ... />

Variante des einzeiligen Textfeldes, bei dem die Eingabe jedoch verschlüsselt wird (statt der eingegebenen Zeichen sieht man auf dem Bildschirm nur Sternchen)

Mehrzeiliges Textfeld

<textarea name="S1" rows="2" cols="20"></textarea>

Mehrzeiliges Eingabefeld - beispielsweise für Kommentare, Diskussionsbeiträge, etc. Über die Attribute rows und cols kann man angeben, wie viele Zeilen und Spalten (Zeichen in einer Zeile) gleichzeitig (ohne Scrollen) sichtbar sein sollen.

Mit readonly="readonly" kann man verhindern, dass der Leser den Text im Textfeld verändern kann.

Schaltfläche

<input type="button" name="B1"

value="Schaltfläche" />

Schaltfläche, die beim Anklicken irgendwelche Aktionen ausführt. Über value gibt man den Titel des Schalters an.

Alternativ kann man Schalter auch mit dem <button>-Element erzeugen:

<button type="button" value="1" name="B3">

Klick mich!

</button>

In diesem Fall wird der Titel des Schalters zwischen den <button>-Tags angegeben (und kann auch ein Bild enthalten). Über value gibt man einen Wert an, der an den Server geschickt wird, wenn der Schalter gedrückt wird (und ein Programm zur Verarbeitung der Formulardaten vorgesehen ist).

Abschicken-Schalter

<input type="submit" name="B2"

value="Abschicken" />

Schaltfläche zum Abschicken von Formulardaten (siehe Kapitel 11 und 17).

Zurücksetzen-Schalter

<input type="reset" name="B3"

value="Zurücksetzen" />

Schaltfläche zum Zurücksetzen von Formulardaten (siehe Kapitel 11 und 17).

Kontrollkästchen

<input type="checkbox" name="C1" value="1"

checked="checked" />

Zum Aktivieren und Deaktivieren einzelner Optionen.

Durch Setzen des Booleschen Attributs checked kann man vorgeben, dass das Steuerelement anfangs gesetzt ist.

Über value kann man das Steuerelement mit einem Wert verbinden.

Optionsfeld

<input type="radio" value="1"

checked="checked" name="R1" />

Zum Aktivieren und Deaktivieren einzelner Optionen. Optionsfelder können im Gegensatz zu Kontrollkästchen intern gruppiert werden, wobei innerhalb einer Gruppe immer nur eine Option ausgewählt werden kann. Optionsfelder werden gruppiert, indem man allen Optionsfeldern einer Gruppe den gleichen Namen zuweist (in obigem Beispiel also R1.

Durch Setzen des Booleschen Attributs checked kann man vorgeben, dass das Steuerelement anfangs gesetzt ist.

Über value kann man das Steuerelement mit einem Wert verbinden.

Auswahlfeld

<select multiple="multiple" size="1" name="D1">

<option>Bananen</option>

<option selected="selected">Äpfel</option>

<option>Orangen</option>

</select>

Aufklappbare Liste, die eine Reihe verschiedener Optionen zur Auswahl bereitstellt.

Wenn das Boolesche Attribut multiple gesetzt ist, können mehrere Optionen gleichzeitig ausgewählt werden. Das Attribut size gibt an, wie viele Optionen in der nicht aufgeklappten Liste angezeigt werden.

Über das Boolesche Attribut selected kann man festlegen, welche Optionen anfangs ausgewählt sein sollen.

Versieht man die Optionen mit label-Attributen und ordnet sie in <optgroup>-Elementen an, kann man hierarchische Auswahlfelder erzeugen (siehe HTML 4-Standard). Die gängigen Browser unterstützen derzeit noch keine hierarchischen Auswahlfelder.

Bild

<input type="image" name="I1" src="bild.gif" />

Zur Anzeige von Bildern und Grafiken in Formularen.

Zur Unterstützung von ImageMaps stehen die Attribute usemap und ismap zur Verfügung.

Da dieses Steuerelement jedoch nicht von allen Browsern unterstützt wird, empfiehlt es sich, Bilder auch in Formularen mit dem <img>-Tag einzubinden.

Datei

<input type="file" name="T1" />

Zur Auswahl einer Datei, die an den Server geschickt werden soll (siehe auch Erläuterungen zum enctype-Attribut in Abschnitt 3.4.2).

Beschriftung

<label>Beschriftung</label>

Zur Beschriftung anderer Steuerelemente.

Wenn das andere Steuerelement über eine id-Kennung verfügt, kann man das Label über sein for-Attribut mit dem anderen Steuerelement verbinden.

<label for="vorname">Vorname : </label>

<input type="text" name="T1" id="vorname" size="20">

Wenn ein solches Label den Fokus erhält, gibt es diesen an sein zugeordnetes Steuerelement weiter.

Tabelle 3.9: Typen von Steuerelementen

Wenn Sie sich anschauen wollen, wie die einzelnen Steuerelemente in Ihrem Browser aussehen, laden Sie einfach die Datei steuerelemente.html von der Buch-CD

HTML-Formulare

Wenn man die HTML-Befehle zur Erzeugung von Steuerelementen kennt, stellt der Aufbau von Formularen keine Schwierigkeit mehr dar. Betrachten Sie einmal das Formular aus Abbildung 3.14, über das sich Besucher einer Website in ein Gästebuch eintragen können.

Abbildung 3.14:  Formular zur Eintragung in ein Gästebuch

Schauen wir uns an, wie man dieses Formular in drei bis vier Schritten erstellen kann.

Steuerelemente aufsetzen

Zuerst richten wir die Steuerelemente für die gewünschten Benutzereingaben ein:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gästebucheintrag</title>
</head>
<body>
<h1>Tragen Sie sich bitte in mein Gästebuch ein:</h1>

<!-- Hier beginnen die Steuerelemente -->
<p>Geben Sie bitte Ihren Namen an :
<input name="name" size="30" maxlength="50" /></p>

<p>Möchten Sie Ihre EMail hinterlassen :
<input name="email" size="30" maxlength="50" /> </p>

<p>Haben Sie auch eine eigene Website :
<input name="website" size="30" maxlength="50" /></p>

<p>Ihr Kommentar :</p>
<p><textarea name="kommentar" rows="9" cols="50"></textarea></p>

</body>
</html>

Umwandlung der Steuerelemente in ein Formular

Bisher haben wir nur eine Sammlung von Steuerelementen, die von verschiedenen Browsern noch nicht einmal angezeigt würde. Um aus diesen Steuerelementen ein Formular zu machen, fassen wir Sie in <form>-Tags ein:

<form action="/cgi-bin/programm.pl" method="get">
...
</form>

Um aus einer Sammlung von Steuerelementen ein Formular zu machen (dass auch vom Netscape Navigator angezeigt wird und das man mit JavaScript-Skripten auswerten kann), braucht man im <form>-Starttag keine Attribute anzugeben. Die meisten Formulare (Bestellformulare, Registrierformulare, Eingabeformulare für Gästebücher) sind aber darauf angewiesen, dass die vom Besucher der Website eingetippten Daten über das Internet zurück an den Server geschickt werden.

Will man die Formulareingaben über das Internet zurück an den Server schicken, muss man mindestens zwei weitere Angaben machen:

Der Vollständigkeit halber sei erwähnt, dass man auch noch die Codierung der Formulareingaben durch den Browser einstellen kann. Der HTML-Standard sieht dafür das Attribut enctype vor, dem man zwei Werte zuweisen kann: "application/x-www-form-urlencoded" (der Standardwert) und "multipart/form-data" (für Dateiuploads, siehe file-Steuerelement).

Schalter zum Abschicken des Formulars hinzufügen

Wie kann der Besucher unserer Webseite das Formular abschicken? Natürlich indem er den Schalter zum Abschicken anklickt. Dazu müssen wir diesen Schalter aber erst einmal einrichten.

Springen Sie zum Ende des Formulars und richten Sie einen Schalter zum Abschicken - und eventuell auch einen Schalter zum Zurücksetzen - des Formulars ein. Wie in Tabelle 3.9 aus Abschnitt 3.4.1 erwähnt, handelt es sich dabei um ganz normale Schalter, deren type-Attribut auf submit beziehungsweise reset gesetzt wird.

<form action="/cgi-bin/gaestebuch.pl" method="get">
<p>Geben Sie bitte Ihren Namen an :
<input name="name" size="30" maxlength="50" /></p>

<p>Möchten Sie Ihre EMail hinterlassen :
<input name="email" size="30" maxlength="50" /> </p>

<p>Haben Sie auch eine eigene Website :
<input name="website" size="30" maxlength="50" /></p>

<p>Ihr Kommentar :</p>
<p><textarea name="kommentar" rows="9" cols="50"></textarea></p>
<input type="submit" value="In Gästebuch eintragen">
<input type="reset" value="Formular zurücksetzen">
</form>

Formatierung

An sich ist unser Formular jetzt fertig, doch es sieht im Browser nicht sonderlich gut aus (siehe Abbildung 3.15).

Abbildung 3.15:  Unformatiertes Formular

Der schnellste Weg die Beschriftungen und Steuerelemente eines Formulars schön und übersichtlich aneinander auszurichten, führt meist über eine Tabelle. Der folgende HTML-Code erzeugt beispielsweise das Formular aus Abbildung 3.14.

Listing 3.10: Formular aus formulare.html

<h1>Tragen Sie sich bitte in mein Gästebuch ein:</h1>
<form action="/cgi-bin/gaestebuch.pl" method="get">
<table border="0" cellspacing="0" cellpadding="10">
<colgroup span=2">
<col width="230">
<col width="450">
</colgroup>
<tr>
<td align="right" valign="top" width="230">
Geben Sie bitte Ihren Namen an : </td>
<td><input name="name" size="30" maxlength="50" /></td>
</tr>
<tr>
<td align="right" valign="top" width="230">
Möchten Sie Ihre EMail hinterlassen : </td>
<td><input name="email" size="30" maxlength="50" /></td>
</tr>
<tr>
<td align="right" valign="top" width="230">
Haben Sie auch eine eigene Website : </td>
<td><input name="website" size="30" maxlength="50" /></td>
</tr>
<tr>
<td align="right" valign="top" width="230">Ihr Kommentar :</td>
<td><textarea name="kommentar" rows="9" cols="50"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" value="In Gästebuch eintragen" />
<input type="reset" value="Formular zurücksetzen" /></td>
</tr>
</table>
</form>

3.5 Zusammenfassung

Tabellen werden in HTML mit Hilfe des <table>-Tags definiert. Ein typisches Tabellengerüst hat folgenden grundlegenden Aufbau:

<table border="1" width="550" >
<caption>Dies ist die Überschrift</caption>
<tr>
<th>Überschrift Spalte 1.</th>
<th>Überschrift Spalte 2</th>
</tr>
<tr>
<td>Feld 11</td>
<td>Feld 12</td>
</tr>
<tr>
<td>Feld 21</td>
<td>Feld 22</td>
</tr>
<tr>
<td>Feld 31</td>
<td>Feld 32</td>
</tr>
</table>

Tabellen können in vielfältiger Weise konstruiert und formatiert werden. So kann man beispielsweise auch den Rahmen und das Gitternetz der Tabelle ausblenden (<table border="0">, je nach Bedarf auch noch cellspacing und cellpadding auf 0 setzen) - ein Umstand der dazu geführt hat, dass Tabellen zu einem beliebten und wichtigen Mittel zur Gestaltung des Seitenlayouts wurden.

Ein weiteres, ebenfalls sehr interessantes Mittel zur Gestaltung des Seitenlayouts ist die Aufteilung in Frames. Hierbei wird der <body>-Abschnitt der Webseite durch die in <frameset>-Tags gefasste Definition der Frames ersetzt.

<frameset cols="20%,80%">

<frame name="inhalt" src="inhaltsverzeichnis.html">
<frame name="hauptframe" src="hauptseite.html">

<noframes>
<p>Sorry, dies ist eine Frameseite und Ihr Browser unterstützt
offensichtlich keine Frames</p>
</noframes>

</frameset

Über das target-Argument des <a>-Tags kann man steuern, in welchen Frame die Webseite, auf die der Link verweist, geladen werden soll. Definiert man das target- Argument im <base>-Tag einer Webseite, legt man den angegebenen Frame als Standard- Zielframe für die Hyperlinks der Webseite fest.

Zum Abschluss dieses Tages haben wir uns noch den Aufbau von Formularen und die Verwendung von Steuerelementen angesehen.

3.6 Fragen und Antworten

Frage:
Der Browser verändert immer meine Vorgaben für die Breite der Tabellenspalten. Wie kann ich das verhindern?

Antwort:
In Übereinstimmung mit dem HTML-Standard hat der Browser das Recht die Breitenangaben an den Inhalt der Zellen anzupassen. Die verschiedenen Browser machen davon in unterschiedlichem Maße Gebrauch. Wenn Sie dieses Verhalten gänzlich unterbinden wollen, müssen Sie die Stileigenschaft table-layout auf fixed setzen.

<table width="700" cellspacing="10px" style="table-layout: fixed">

Antwort:
Allerdings wird diese Stileigenschaft derzeit nur vom Netscape 6-Browser unterstützt.

Frage:
Wie kann ich den Text einer Zelle von den Rändern der Zelle abrücken?

Antwort:
Wenn Sie global für die gesamte Tabelle festlegen wollen, dass der Inhalt der Zellen von allen Rändern der Zelle gleichermaßen abzurücken ist, verwenden Sie das <table>-Attribut cellpadding:

<table border="1" width="100%" cellpadding="10">

Frage:
Kann man Tabellen ineinander verschachteln?

Antwort:
Ja, selbstverständlich.

Frage:
Ich verwende Frames ohne Rahmen (border="0", frameborder="0"). Trotzdem reicht der Inhalt meiner Frames nicht bis an den Rand des Browserfenster heran. Mache ich etwas falsch?

Antwort:
Nein. Sie müssen nur im <body>-Tag der Webseite, die in den Frame geladen werden soll marginwidth="0" marginheight="0" topmargin="0" und leftmargin="0" setzen (sonst erzeugen manche Browser-Versionen einen Standardrand). Hinweis: Man kann marginheight=0 marginwidth=0 auch in <frame> einfügen, aber Netscape Navigator 4 gibt nichtsdestotrotz noch einen Pixel Abstand dazu.

3.7 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Mit welchem Tag definiert man eine Tabellenzeile, mit welchem Tag eine Tabellenzelle?
  2. Wie kann man zwei benachbarte Zellen zu einer Zelle verschmelzen?
  3. Kann man in einer Zelle einer bestehenden Tabelle eine neue Tabelle anlegen?
  4. Wie zentriert man eine Tabelle auf der Webseite?
  5. Wie zentriert man den Inhalt einer Tabellenzelle?
  6. Wie teilt man Webseiten in Frames auf?
  7. Wie kann man die Rahmen der Frames ausblenden?
  8. Wie kann man verhindern, dass der Websurfer die Rahmen verschiebt?
  9. Welche Möglichkeiten gibt es, den Zielframe eines Hyperlinks festzulegen?

Übungen

  1. Welcher HTML-Code könnte folgende Tabelle erzeugen?.

    Abbildung 3.16:  Stellen Sie diese Tabelle nach.

  2. Wie erzeugt man folgenden Seitenaufbau?

    Abbildung 3.17:  Nachzustellendes Layout

  3. Überarbeiten Sie den HTML-Code der Tabelle aus bananenproduktion.html (Listing 3.1) so, dass die Tabelle im Internet Explorer und Netscape Navigator möglichst gleich dargestellt wird.
  4. Vervollständigen Sie das Beispiel aus Abschnitt 3.2.4, indem Sie das Inhaltsverzeichnis mit entsprechenden Hyperlinks versehen.
  5. Sie wollen auf Ihrer Webseite eine Umfrage durchführen. Da die Internet-Autobahnen immer mehr verstopfen, plädieren Sie für den Internet-freien Sonntag. In einem passenden Umfrageformular können die Besucher Ihrer Website abstimmen, ob sie diesen Vorschlag gutheißen oder ablehnen.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH