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.
Tabellen kommen bei der Webseitenerstellung zwei wichtige Aufgaben zu:
Schauen wir uns zuerst an, wie Tabellen definiert werden.
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.
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.
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>
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.
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> </td>
<th>1990</th>
<th>1999</th>
</tr>
...
Alle Zeilen einer Tabelle müssen die gleiche Anzahl von Zellen enthalten.
Das Leerzeichen 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> </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).
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"> </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>
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.)
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"> </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>
Ein <col>-Element kann für eine einzelne Spalte oder für mehrere benachbarte Spalten stehen (span-Attribut).
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.
<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).
<table frame="void">
Das Attribut frame bietet seit HTML 4.0 neue Möglichkeiten für die Gestaltung des äußeren Randes der Tabelle.
<table rules="none">
Über das Attribut rules können Sie die Umrahmung der einzelnen Zellen steuern.
<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
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.
Mögliche Werte sind: left, center, right, justify (Block) und char (Ausrichtung an einem Zeichen) | |
Kann beispielsweise verwendet werden, um die Zahlen einer Spalte am Dezimapunkt ».« auszurichten. | |
Tabelle 3.3: Attribute für die Ausrichtung von Zelleninhalten
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.
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">
Die Breite einer Tabelle kann man in Pixeln oder in Prozent des Browserfensters angeben. Dies räumt uns eine Vielzahl von Gestaltungsmöglichkeiten ein.
<table border="0" width="75%">
<table border="0" width="100%">
<table border="0" width="550">
<div align="center">
<table border="0" width="550">
...
</table>
</div>
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.
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%"> </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%"> </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.
Zeitungen und Zeitschriften zeichnen sich meist durch mehrspaltigen Text aus. Mit Hilfe einer Tabelle kann man einen solchen Seitenaufbau auf Webseiten nachstellen.
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.
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
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?
Frameseiten werden in zwei Schritten erstellt:
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.
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.
<!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 -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.
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>
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.
Tabelle 3.4: Breiten und Höhen der Frames
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:
<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.)
<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.
<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.
<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.
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.
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.
<frame name="frame2" src="seite2.html" />
<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
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.
Als »target« können Sie neben den von Ihnen definierten Frame-Namen auch vier von HTML definierte Standardnamen angeben.
Tabelle 3.6: Vordefinierte target-Werte
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.
Tabelle 3.7: Browser-Aufteilungen mit verschachtelten Framesets
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>
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.
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.
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)
Den Anzeigebereich, der für jede Seite verschieden ist, sparen wir erst einmal aus.
Die Hyperlinks weisen auf die noch anzulegenden Seiten: panther.html, herbsttag. html, saal.html und karussell.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">
</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.
Wir legen eine Kopie von tabelle.html an und speichern diese unter dem Namen panther.html ab. Damit übernehmen wir in einem Arbeitsgang das vorgegebene Layout, Design und die Navigationsstruktur.
Wenn die Seite panther.html aufgerufen wird, soll das Gedicht »Der Panther« in den Anzeigebereich eingeblendet werden. Wir fügen also den HTML-Code zur Anzeige des Gedichts in die Tabellenzelle für den Anzeigebereich ein:
<table border="0" width="700" cellpadding="10" cellspacing="0">
...
<td width="500" valign="top">
<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>
</td>
</tr>
</table>
Auf die gleiche Weise legen wir die Webseiten für die restlichen Gedichte an (die Texte finden Sie in den gleichnamigen HTML-Seiten auf der Buch-CD).
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.
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.
<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>
Im Header-Abschnitt legen wir den Inline-Frame anzeige als Standardziel für die Frames der Seite fest.
<head>
<title>Rilke-Gedichte</title>
<base target="anzeige">
</head>
Der vollständige HTML-Code der Startseite sieht damit wie folgt aus:
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>
<!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>
Auf die gleiche Weise legen wir die Webseiten für die restlichen Gedichte an (die Texte finden Sie in den gleichnamigen HTML-Seiten auf der Buch-CD).
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
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.
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.
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.
Der Netscape Navigator zeigt Steuerelemente nur dann an, wenn Sie in <form>-Tags gefasst sind.
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.
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).
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.
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:
<!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 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.
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
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.
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>
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:
<form action="/cgi-bin/gaestebuch.pl" method="get">
...
</form>
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).
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>
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> </td>
<td><input type="submit" value="In Gästebuch eintragen" />
<input type="reset" value="Formular zurücksetzen" /></td>
</tr>
</table>
</form>
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.
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">
Internet Explorer 5 und Netscape 6 unterstützen zudem die Stileigenschaften padding und margin, mit denen Sie den Inhalt einzelner Zellen von deren Rändern abrücken können. Folgende Anweisung rückt den Zelleinhalt beispielsweise 20 Pixel vom linken Rand und 10 Pixel vom oberen Rand ab (mehr zu den Eigenschaften padding und margin in Kapitel 4.3.2):
<td width="450" style="padding-left: 20px; padding-top: 10px">
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.
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.
Abbildung 3.16: Stellen Sie diese Tabelle nach.
Abbildung 3.17: Nachzustellendes Layout
