HTML-Projekt - Einfache Beispiele

Beispiel für eine Website mit Framesets

Zum Kopieren der Beispiele:
HTML-Editor Phase5 starten. Für jedes Beispiel unter Datei "Neues HTML Dokument" wählen. Dann "Leeres Dokument erstellen". Zurück zu dieser Seite: In die Beispiele hineinklicken und mit rechter Maustaste "kopieren" wählen und bei Phase5 in die jeweils leere Seite "einfügen". Danach mit den in Klammern angegebenen Dateinamen abspeichern. Viel Spaß beim Abwandeln und Experimentieren !

Natürlich kann man an Stelle von Phase5 auch einen einfachen Text-Editor wie "Notepad" verwenden. Die Datei muss hinterher die Endigung ".htm" bzw ".html" bekommen. Da in einigen HTML-Dateien Links auf die anderen Dateien vorkommen, sollte man sich an die angebenen Dateinamen (ist hier auch im Title-Tag angegeben) halten. Alle Dateien haben hier die Endigung .html!

Farbe: Feststehende HTML-Befehlswörter (Tags) Farbe: Selbstgewählte Bezeichnungen

Startdatei index.html mit 2 geschachtelten Framesets TESTEN

<html>
<head>
<title>index.html</title>
</head>
<frameset rows="62,*" border="0">
  <frame src="kopf.html" name="oben" noresize
    scrolling="no" marginheight="0">
  <frameset cols="80,*" border="0">
    <frame src="navigation.html" name="links"
       noresize scrolling="no">
    <frame src="inhalt.html" name="rechts">
  </frameset>
</frameset>
</html>

Anmerkungen zu index.html:
05 1. Frameset =2 Zeilen mit
1. Zeile =62 Pixel für Kopfzeile
2. Zeile =* =restliche Pixel mit
08 2. Frameset =2 Spalten mit
1. Spalte =80 Pixel für Navigation
2. Spalte =* =restliche Pixel für Hauptinhalt. Unter <frame src= 06+09+11 werden jeweils die Dateien kopf.html, navigation.html und inhalt.html in die Frames geladen. Gibt man dem Frame mit <name= einen Namen, so kann man später (wie hier z.B. in den Frame rechts) andere HTML-Dateien hineinladen.

HTML-Datei kopf.html für Frame oben TESTEN

<html>
<head><title>kopf.html</title></head>
<body bgcolor="FF0000" topmargin="0" leftmargin="20">
<font color="#000000" size="7"><i>Projektthema</i>
  </font>
</body>
</html>

Anmerkungen zu kopf.html:
03 Im Body-Tag legt man im Attribut topmargin fest, wieviel Pixel für den oberen Rand bzw. mit leftmargin für den linken Rand frei bleiben. 04 Mit <font> kann man für den eingeschlossenen Text u.a. Schriftfarbe color und Schriftgröße size festlegen.

size="1" bis size="7", normal size="3"

HTML-Datei navigation.html für Frame links TESTEN

<html>
<head>
<title>navigation.html</title>
</head>
<body bgcolor="#FF0000" leftmargin="6"
  link="#FFFFFF" vlink="#FFFF00" alink="#FFFF00">
<font size="4">
 <a href="inhalt.html" target="rechts">Inhalt</a>
<br><br>
 <a href="quellen.html" target="rechts">Quellen</a>
<br><br>
 <a href="layout.html" target="rechts">Layout</a>
<br><br>
 <a href="tabelle.html" target="rechts">Tabelle</a>
<br><br>
 <a href="gelb.html" target="rechts">Gelb</a>
</font>
</body>
</html>

Anmerkungen zu navigation.html:
06 Die Farbe der Links link="#FFFFFF" ist nun weiß, mit vlink="#FFFF00" und mit alink="#FFFF00" werden ein besuchter (v=visited) Link bzw. ein gerade angeklickter Link (a=active Link) gelb dargestellt.
In den Zeilen 08, 10, 12, 14, 16 wird mit target="rechts" die unter href jeweils angegebene Datei in den in index.html in Zeile 11 so benannten Frame rechts geladen. Da die Navigationsspalte bei allen so geladenen HTML-Seiten erhalten bleibt, ist dies wohl die einfachste Möglichkeit, jederzeit, von einer Seite zu jeder beliebigen anderen Seite zu wechseln.

HTML-Datei inhalt.html für Frame rechts TESTEN

<html>  <!-- VERKUERZT = ohne Inhalt ! -->
<head>
<title>inhalt.html</title>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<h1>Projekt - Inhalt</h1>
</body>
</html>

Anmerkungen zu inhalt.html:
Wenn man "Testen" anklickt, erscheint eine Seite mit Inhalt, deren Quelltext hier nicht kommentiert wird. Der links abgebildete Quelltext (ohne diesen Inhalt) kann als Ersatz kopiert werden, damit auch hier die Navigation funktioniert.

HTML-Datei quellen.html für Frame rechts TESTEN

<html> <!-- VERKUERZT = weniger Inhalt ! -->
<head>
<title>quellen.html</title>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<h1>Projekt - Quellen</h1>
<!-- VERKUERZT. Der folgende Quelltext bezieht sich
     nur auf das Bild mit dem daneben stehenden Text
     als weiteres Beispiel zur Gestaltung des Layouts
! -->
<table>
<tr>
<td><img src="../images/vesuv.jpg" width="274"
  height="112" border="0" alt="Abb.1">
</td>
<td valign="top">Fährt man mit der Maus auf das Bild
  und lässt die Maus dort stehen, so wird der Text
  für kurze Zeit sichtbar. - Dies gilt für den
  Internet-Explorer aber z.B. nicht für Mozilla /
  Firefox!
</td></tr>
</table>
</body>
</html>

Anmerkungen zu quellen.html:
Wenn man "Testen" anklickt, erscheint eine Seite zu diesem Thema (Bitte lesen!), deren Quelltext hier aber weitgehend nicht kommentiert wird. Der links abgebildete verkürzte Teil des Quelltextes kann als Ersatz kopiert werden, damit auch hier die Navigation funktioniert.
In den Zeilen 11 bis 22 wird eine 1*2-Tabelle dazu genutzt, um rechts neben dem Bild auch noch Text unterzubringen. 16 valign="top" bewirkt, dass der Text tatsächlich oben neben dem Text erscheint (valign = vertical align).
In der Zeile 13 findet man hinter src= (src=source=Quelle) den relativen Pfad zur Bilddatei. Diese liegt in einem Verzeichnis images, das sich parallel zu dem Verzeichnis, in dem diese aufrufende Datei liegt, befindet. Um dorthin zu gelangen muss man also zuerst mit ../ in das übergeordnete Verzeichnis wechseln.

HTML-Datei layout.html für Frame rechts TESTEN

<html>
<head>
<title>layout.html</title>
</head>
<body bgcolor="#0000FF" text="#FFFFFF"
  vlink="FFFF00">
<h3>Layout-Beispiel mit Hilfe von Tabellen</h3>
<table>
<tr>
<td colspan="2"><img src="../images/meerbl01.jpg"
    width="150" height="113" border="0" alt="Abb.1">
  <img src="../images/rechts1.jpg" width="150"
    height="113" alt="Abb.2">
  <img src="../images/golfsal2.jpg" width="85"
    height="113" alt="Abb.3">
</td>
<td width="80" valign="top" align="right"><b>
  <font size="+1">Golf von<br>Salerno</font></b>
</td></tr>
<tr>
<td><img src="../images/terrass1.jpg" width="150"
  height="113" alt="Abb.4">
</td>
<td width="250" align="center" valign="center">
  <font size="+2">mehr unter</font>
</td>
<td></td></tr>
<tr>
<td colspan="2" height="100" width="330"
  align="right">
  <a target="_blank" href="http://www.paestum.de/">
  <img src="../images/paestumde_300_60.jpg"
    width="300" height="60" border="0"
    alt="www.paestum.de"></a>
</td>
<td align="right" valign="top">
  <a href="../index.htm" target="_top">
  <img hspace="8" src="../g48/bktrawhi.gif"
    width="48" height="48" border="0"></a>
</td></tr>
</table>
</body>
</html>

Anmerkungen zu layout.html:
Zum besseren Verständnis ist es günstiger, die Seite tabelle.html mit TESTEN zu öffnen!

... wird DEMNÄCHST fertiggestellt.

HTML-Datei tabelle.html für Frame rechts TESTEN

<html>
<head>
<title>tabelle.html</title>
</head>
<body bgcolor="#0000FF" text="#FFFFFF"
  vlink="FFFF00">
<h3>Layout-Tabelle (nun mit Rahmen)</h3>
<table border="8">
<tr>
<td colspan="2"><img src="../images/meerbl01.jpg"
  width="150" height="113" border="0" alt="Abb.1">
  <img src="../images/rechts1.jpg" width="150"
    height="113" alt="Abb.2">
  <img src="../images/golfsal2.jpg" width="85"
    height="113" alt="Abb.3">
</td>
<td width="80" valign="top" align="right"><b>
  <font size="+1">Golf von<br>Salerno</font></b>
</td></tr>
<tr>
<td><img src="../images/terrass1.jpg" width="150"
  height="113" alt="Abb.4">
</td>
<td width="250" align="center" valign="center">
  <font size="+2">mehr unter</font>
</td><td> </td></tr>
<tr>
<td colspan="2" height="100" width="330"
  align="right">
  <a target="_blank" href="http://www.paestum.de/">
  <img src="../images/paestumde_300_60.jpg"
    width="300" height="60" border="0"
    alt="www.paestum.de"></a>
</td>
<td align="right" valign="top">
  <a href="../index.htm" target="_top">
  <img hspace="8" src="../g48/bktrawhi.gif"
    width="48" height="48" border="0"></a>
</td></tr>
</table>
</body>
</html>

Anmerkungen zu tabelle.html:
Hier ist gegenüber der Datei layout.html nur die Zeile 08 verändert. Die Tabelle hat durch border="8" einen sichtbaren Rahmen bekommen, wodurch man den Aufbau der Tabelle und den Einfluss einiger Attribute wie z.B. valign etc. besser erkennen kann.

HTML-Datei gelb.html für Frame rechts TESTEN

<html>
<head><title>gelb.html</title></head>
<body bgcolor="#FFFF00">
<h1>GELB</h1>
</body>
</html>

Anmerkungen zu gelb.html:

DEMNÄCHST, wenn die Seite einen Inhalt bekommen hat.

Helmut Klatt 16.12.04