HTML-Kurs (Teil 2):

Tabellen und Frames (Rahmen)


Der TABLE - Befehl :

Der Befehl <TABLE> ... </TABLE> erzeugt eine Tabelle. Die Spalten werden mit <TD> ... </TD> und die Zeilen mit <TR> ... </TR> definiert. Damit die Tabelle optisch besser als eine Tabelle erkennbar ist, sollte man den <TABLE>-Befehl dem Parameter BORDER=x ergänzen <x = beliebige Zahl, zum Beispiel 5>. Siehe folgendes TABLE - Beispiel :

<tr> steht für Table Row, d.h. das Aufmachen einer neuen Zeile. 
Anschließend muß ein<td> kommen, also ein Table Data. Für den Browser heißt das, daß ab hier die Inhalte einer Tabelle beginnen.
Je mehr <td> definiert werden, desto mehr Zellen stehen nebeneinander. Erst mit der Defination eines neuen <tr>wird eine neue Zeile begonnen.

<TABLE border=5>
<TR>
<TD>Spalte 1 in Zeile 1</TD>
<TD>Spalte 2 in Zeile 1</TD>
<TD>Spalte 3 in Zeile 1</TD>
</TR>
<TR>
<TD>Spalte 1 in Zeile 2</TD>
<TD>Spalte 2 in Zeile 2</TD>
<TD>Spalte 3 in Zeile 2</TD>
</TR>
</TABLE>

Ergebnis :


Spalte 1 in Zeile 1 Spalte 2 in Zeile 1 Spalte 3 in Zeile 1
Spalte 1 in Zeile 2 Spalte 2 in Zeile 2 Spalte 3 in Zeile 2


 

< td bgcolor="#0000ff"> : so bestimmen Sie die Farbe der einzelnen Tabellenfelder
< border=5 bordercolor="#ff0000">: so bestimmen Sie die Farbe der Tabellen- rahmen.

Beispiel:

<TABLE border=5 bordercolor="#ff0000">
<TR>
<TD bgcolor="#0000ff">Spalte 1 in Zeile 1</TD>
<TD bgcolor="#0000ff">Spalte 2 in Zeile 1</TD>
<TD bgcolor="#0000ff">Spalte 3 in Zeile 1</TD>
</TR>
<TR>
<TD bgcolor="#0000ff">Spalte 1 in Zeile 2</TD>
<TD bgcolor="#0000ff">Spalte 2 in Zeile 2</TD>
<TD bgcolor="#0000ff">Spalte 3 in Zeile 2</TD>
</TR>
</TABLE>

Ergebnis :


Spalte 1 in Zeile 1 Spalte 2 in Zeile 1 Spalte 3 in Zeile 1
Spalte 1 in Zeile 2 Spalte 2 in Zeile 2 Spalte 3 in Zeile 2


 

Frames

Mit Hilfe von Frames wird der Bildschirm in mehrere Bereiche aufgeteilt. So ist es zum Beispiel möglich, einen Teil des Bildschirms als Navigationsbereich und einen anderen Teil als Informationsbereich zu definieren.

Das folgende Beispiel teilt den Bildschirm in zwei Fenstern unterschiedlicher Größe auf. Das erste Fenster ist auf der linken Seite und nimmt 22% der Bildschirmbreite in Anspruch. Dieses Fenster trägt die Bezeichnung "Navigationsbereich". Das zweite Fenster (also rechts), wird als "Informationsbereich" definiert und hat eine Größe von 78% der Bildschirmbreite. In diesem Info-Fenster werden dann alle HTML-Dokumente der Homepage erscheinen, die über den Navigationsbereich angeklickt werden können.

Um dieses Beispiel zu realisieren benötigt man mindestens zwei HTML-Dokumente (hier als "frames.htm" und "navigat.htm" bezeichnet). Die Datei "frames.htm" übernimmt die Steuerung, sprich Einteilung des Bildschirms, während die Datei "navigat.htm" regelt, welche Dokumente im Info-Bereich sichtbar werden. Damit die Homepage im Framesformat aktiviert werden kann, muß die Datei "frames.htm" im Browser aufgerufen werden.

Programmierungscode der Datei : frames.htm

<HTML>
<HEAD>
<TITLE>Beispiel einer Frames-Datei</TITLE>
</HEAD>
<frameset cols="22%,78%" border=0>
<frame src="navigat.htm" name="Navigationsbereich">
<frame src="welcome.htm" name="Informationsbereich">

<noframes>
Sie benötigen einen Browser, der Frames darstellen kann.
</noframes>
</frameset>

</HTML>

Programmierungscode der Datei : navigat.htm

<HTML>
<HEAD>
<TITLE>Inhalt der Navigationsdatei</TITLE>
</HEAD>
<BODY>

<U>Navigation</U><P>

<A HREF="homepage.htm">Zur Homepage</A><BR>
<A HREF="datei1.htm" target="Informationsbereich">Link 1</A><BR>
<A HREF="datei2.htm" target="Informationsbereich">Link 2</A><BR>
<A HREF="datei3.htm" target="Informationsbereich">Link 3</A><BR>
<A HREF="datei4.htm" target="Informationsbereich">Link 4</A><BR>
<A HREF="mailto:E-Mail@Adresse.de">E-Mail</A><P>

</BODY>
</HTML>
 

Programmierungscode der Datei : welcome.htm

<HTML>
<HEAD>
<TITLE>Willkommen</TITLE>
</HEAD>
<BODY>
 

<center><h6> <font face="Times New Roman,Times"><font size=+3>Willkommen auf meiner Homepage</font></font></h6></center>

</BODY>
</HTML>
 
 

Die in der Datei "navigat.htm" genannten Links (datei*.htm) werden durch die entsprechenden Homepage-Dateien ersetzt.
Zum Beispiel :
<A HREF="computer.htm" target="Informationsbereich"> Computer</A>

Darstellung des o.g. Beispiels (vertikales Framesformat) :


Navigation

Zur Homepage
Link 1
Link 2
Link 3
Link 4
E-Mail

 Willkommen auf meiner Homepage

Befehl : <frameset cols="22%,78%">
Prozentuale Festlegung der Bildschirmbreiten aller Fenster, die vertikal nebeneinander liegen.

Befehl : <frameset rows="22%,78%">
Prozentuale Festlegung der Bildschirmbreiten aller Fenster, die horizontal übereinander liegen.

Befehl : <frame src="navigat.htm" target="Navigationsbereich">
Festlegung, daß der Inhalt der Datei "navigat.htm" im Fenster mit der Bezeichnung "Navigationsbereich" dargestellt wird.

Befehl : <frame src="welcome.htm" target="Informationsbereich">
Festlegung, daß der Inhalt der Datei "welcome.htm" als Begrüßung ins Fenster mit der Bezeichnung "Informationsbereich" geladen wird.

Befehl : <noframes>Bitte einen Browser verwenden, der Frames darstellen kann</noframes>
Dieser Text wird angezeigt, wenn ein Benutzer, einen Browser verwendet, der das Framesformat nicht darstellen kann.

Verschachtelung von Frames

In einen Frames können beliebig viele weitere Frames eingebaut werden. Bsp. zur Darstellung eines Navigationsbereichs (links), eines Informationsbereichs (rechts) und in diesem größeren, rechten Fenster unten ein weiteres Fenster für Werbung oder andere Infos.

Hierfür muß das zweite "<frame src ...>" in der Datei "frames.htm" durch ein zusätzliches "<frameset ...>" ersetzt werden. Sinnvoll ist hier die Verwendung von "<frameset rows="80%,20%">" für die horizontale Einteilung des zweiten Fensters. Danach bestehen also drei Fenster und somit müssen auch drei "<frame src ...>" definiert werden. Als "target" für das dritte Fenster man bsp. "Werbefenster" festlegen.

<frameset cols="22%,78%" border=0>
<frame src="navigat.htm" name="Navigationsbereich">
<frameset rows="80%,20%" border=0>
<frame src="welcome.htm" name="Informationsbereich">
<frame scr="werbung.htm" name="Werbefenster">
</frameset>
<noframes>
Bitte anderen Browser verwenden.
</noframes>
</frameset>

Die Datei "werbung.htm" ist mit der Datei "navigat.htm" vergleichbar und ist ähnlich zu programmieren (mit Links und / oder Grafiken, etc.).

Tip zur Verwendung von Frames

Der Einsatz von Frames kann eine hilfreiche Möglichkeit sein, (gerade bei umfangreichen Homepages) eine schnelle Navigation zu bieten. Allerdings sollte das Framesformat sparsam eingesetzt werden, da ansonsten die Gefahr besteht, daß das Aussehen der Homepage zu sehr beeinträchtigt wird. Zudem sollte man bei der Programmierung unbedingt darauf achten, daß es zu keiner Rückkopplung (Frames in Frames) kommen kann.