HTML frames – Weg vom Fenster

HTML frames – Relikt alten Zeiten

Frames sind eine veraltete Technik des Webdesigns. Sie beeinträchtigen den freien Zugang zur Webseite sowohl für Benutzer mit Handicaps als auch mit mobilen Geräten. Seit 2000 sind nicht mehr Teil des HTML-Standards.

Frames waren beliebt, weil feste Bereiche wie Navigation, Header und Footer als selbstständige Datei in jede Webseite eingebunden werden konnten. Eine Änderung in einer Datei des Framesets reichte, um eine Änderung der Navigation oder des Footers in alle Seiten einzuspielen. Heute stehen dafür solide Techniken wie PHP und Content Management Systeme, Server Side Includes oder iframes zur Verfügung.

Ein frameset organisiert mehrere Frames – entweder horizontal mit dem Attribut rows oder vertikal mit dem Attribut cols. Jedes Fenster wird durch ein frame-Element erzeugt, jedes Frame-Element ist eine Datei.

Frames müssen entweder in Zeilen oder in Spalten organisiert sein – ein Mix ist nicht möglich. Aber da Framesets ineinander verschachtelt werden dürfen, können komplexe Seitenstrukturen erzeugt werden.

frameset Beispiel — Beispiel für den Aufbau einer Seite mit HTML-Frames: drei Spalten (links.html, (oben/mitte/unten), rechts.html) und drei Zeilen (oben.html, mitte.html, unten.html)

HTML-Frames werden heute nicht mehr eingesetzt, denn sie bringen schwerwiegende Nachteile mit sich: Sie sind nicht responsiv, nicht für die kleinen Monitore von Mobilgeräten geeignet und bilden ein Hindernis für die Suchmaschinen. Wer als Webdesigner heute Webseiten in HTML-Frames begegnet, wird die Inhalte schleunigst aus den verschachtelten Framesets befreien.

frameset Markup

Das frameset-Tag ersetzt das body-Tag. Wenn das frameset-Tag benutzt wird, darf das body-Tag definitiv nicht verwendet werden (das iframe-Tag hingegen darf innerhalb eines body-Tags eingesetzt werden).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Frames</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<frameset cols="*,380,*">
    <frame src="links.html" name="links" />
    <frameset rows="*,160,*">
        <frame src="oben.html" name="oben" />
        <frame src="mitte.html" name="mitte" />
        <frame src="unten.html" name="unten" />
    </frameset>
    <frame src="rechts.html" name="rechts" />
    <noframes>
        <body> <p>Kurzbeschreibung der Seite</p> </body>
    </noframes>
</frameset>
</html>

Innerhalb eines frameset-Tags sind nur frame-Tags sowie ein noframe-Tag und weitere frameset-Tags erlaubt.

frameset – cols

Das Attribut col beschreibt die Spalten innerhalb eines Framesets. Die Angabe ist indirekt, da die aktuelle Anzahl der Spalten nicht angegeben wird. Stattdessen wird eine durch Kommas getrennte Liste von Werten angegeben, in der jeder Wert die Breite einer Spalte repräsentiert. Stehen drei Werte in der Liste, hat der Frameset also drei Spalten. Die drei Werte können angegeben werden als

ein Prozentsatz der Breite des Frames,
eine ganzzahlige Anzahl von Pixeln,
die Angabe eines Prozentsatzes oder einer Anzahl von Pixeln plus einem Stern *.

<frameset cols="*,380,*">

Der Stern weist einer Spalte den Platz zu, der bleibt, wenn die übrigen Rahmen den zugewiesenen Platz eingenommen haben. Die Angabe 3* weist dabei gegenüber der Angabe * die dreifache Größe auf. Beispiele für mögliche Angaben:

zwei Spalten: <frameset cols="40%, 60%" >
drei Spalten: <frameset cols="20%, 50%, 30%" >
drei Spalten: <frameset cols="50, 75, 150" >
zwei Spalten: Die erste mit 150 Pixel Breite, die zweite Spalte mit dem verbleibenden Platz im Frameset: <frameset cols="150, * ">
vier Spalten: Die zweite Spalte umfasst 50% der Breite des Framesets, die anderen drei Spalten teilen den verbleibenden Raum zu gleichen Anteilen.: <frameset cols="*, 50%, *, * ">

frameset rows

Anzahl der Zeilen innerhalb eines Framesets. Die Angabe ist indirekt, da die aktuelle Anzahl der Zeilen nicht angegeben wird. Stattdessen wird eine durch Kommas getrennte Liste von Werten angegeben, in der jeder Wert die Höhe einer Zeile repräsentiert. Stehen drei Werte in der Liste, hat der Frameset also drei Zeilen. Wenn das Attribut rows benutzt wird, kann das cols-Attribut nicht verwendet werden. Die drei Werte können angegeben werden als

ein Prozentsatz der Höhe des Framesets,
eine ganzzahlige Anzahl von Pixeln,
die Angabe eines Prozentsatzes oder einer Anzahl von Pixeln plus einem Stern *.

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

Der Stern weist einer Zeile den Platz zu, der bleibt, wenn die übrigen Rahmen den zugewiesenen Platz eingenommen haben. Die Angabe 3* weist dabei gegenüber der Angabe * die dreifache Größe auf. Beispiele für mögliche Angaben:

zwei Zeilen: <frameset rows="40%, 60%" >
drei Zeilen: <frameset rows="20%, 50%, 30%" >
zwei Zeilen: Die erste mit 150 Pixel Höhe, die zweite Zeile mit dem verbleibenden Platz im Frameset: <frameset rows="150, * ">
vier Zeilen: Die zweite Zeile umfasst 50% der Höhe des Framesets, die anderen drei Zeilen teilen den verbleibenden Raum zu gleichen Anteilen: <frameset rows="*, 50%, *, * ">

PHP-Includes

Server Side Includes oder einfache PHP-Includes sind heute ein effizienter Ersatz für Frames. Was zuvor in individuellen Frames-Dateien gespeichert wurde (z.B. Seitenkopf und Seitenfuß) wandert in eine Datei mit der Endung .php.

Dabei sitzt in der head.php keine einzige Zeile PHP, sondern reines HTML. Anders als Frames, die vom Browser geladen und zu einer Seite zusammengesetzt werden, wird die HTML-Seite schon auf dem Server zusammengesetzt und in einem Stück an den Browser geliefert. Das Zusammensetzen der einzelnen HTML-Stücke ist einfacher als der Umgang mit Frames.

<!DOCTYPE html>
<html lang="de">
  <head>
    <?php include("header.php"); ?>
  </head>
  <body>
  …
    <?php include("footer.php"); ?>
  </body>
</html>

Die Seite selber muss ebenfalls mit der Dateiendung .php gespeichert werden.

Server Side Includes – SSI

Server Side Includes sind ebenfalls eine Alternative für HTML frames. Auch hier werden feste Inhalte für die Bereiche der Seite wie die Seiten-Navigation und der Seitenfuß in externen Dateien gespeichert. In der individuellen Seite werden SSI-Dateien eingebunden mit

<!DOCTYPE html>
<html lang="de">
    <head>
        <!--#include virtual="head-elements.inc" -->
    </head>
    <body>
        <!--#include virtual="navigation.inc" -->
        …
    </body>
</html>

Auch Server Side Includes werden bereits auf dem Server eingesetzt. Die offizielle Datei-Endung für SSI-Webseiten ist shtml, mit einem Eintrag in die .htaccess-Datei läßt sich das shtml aber wieder durch html ersetzen. Auch NGINX-Server verarbeiten Server Side Includes.

Der Haken sowohl von PHP-Includes als auch von SSI: Sie wirken nur auf dem Webspace eines Servers, nicht aber im Dateisystem des Desktop-Rechners. Die meisten Code-Editoren zeigen dementsprechend die Includes nicht an.

AddType text/html .shtml
AddHandler server-parsed .shtml
Options Indexes FollowSymLinks Includes

AddType text/html .html
AddHandler server-parsed .html

Mit Vorsicht zu genießen, denn jeder Provider macht kleine Unterschiede im Umgang mit SSI.

Nachteile und Mankos

Heute stehen moderne Methoden (PHP, Ajax, Server Side Includes, CSS-Positionierung) zuverlässig zur Verfügung und Frames werden im modernen Webdesign nicht mehr eingesetzt, denn sie bringen gravierende Nachteile mit:

Es gibt keine Lösung für die Monitore von Handys oder Tabletts: frames sind nicht responsive.
Die Navigation mit der Tastatur innerhalb des Browserfensters ist kompliziert: Zuerst von Frame zu Frame, dann innerhalb des Frames …
Das Drucken einer Webseite mit Frames stellt den Besucher ebenfalls vor die Frage »Welcher Frame denn nun«?
Frame-Seiten lassen sich kaum durch Bookmarks speichern.
Seiten mit Frames lassen sich auch kaum durch einen Link anbinden. Der Link auf eine Seite, die aus Frames aufgebaut ist, wird nur die Startseite erreichen, aber nicht den tatsächlich referenzierten Inhalt.
Suchmaschinen können die Inhalte nicht indexieren, denn sie erreichen nur die frameset-Seite, die aber keine Inhalte aufweist. U.u. indexiert die Suchmaschine nur den Inhalt des noframe-Elements.
Wenn die Suchmaschine Inhalt aus einer Frame-Seite indexiert, bekommt der Besucher die Adresse des Frames, nicht die übergeordnete Frameset-Seite. Damit sich die Frameseite korrekt in die Organisation des Framessets einbinden kann, muss fast immer Javascript herhalten.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

frame Attribute

frameborder: legt einen Rahmen um den Frame oder entfernt ihn. Die möglichen Werte sind 0 oder no und 1 oder yes. Der Wert von yes oder 1 erlaubt die Darstellung eines Rahmens. Ein Wert von no oder 0 unterdrückt die Ausgabe eines Rahmens.
longdesc: ist die URL-Adresse eines HTML-Dokuments, das eine ausführlichen Beschreibung des Frames enthält. Das Attribut ist dafür gedacht, mehr Informationen zur Verfügung zu stellen, als das title-Element darstellen kann.
marginheight: setzt einen Abstand nach unten und nach oben zwischen Framerahmen und Inhalt und wird in Pixel angegeben. Bei unrealistischen Werten ignoriert der Browser das Attribut.
marginwidth: setzt einen Abstand nach links und nach rechts zwischen Framerahmen und Inhalt und wird in Pixel angegeben. Wenn unrealistische Werte angegeben werden, ignoriert der Browser das Attribut.
name: eine Zeichenfolge, die den Frame identifiziert. Der Name muss eindeutig sein und darf nur einmal im Dokument vorkommen.
noresize: verhindert Änderungen der Framegröße durch den Benutzer.
scrolling: legt eine horizontale und vertikale Scrollleiste fest, die im Frame erscheint. Wenn der Inhalt größer ist als der Frame, erlaubt sie dem Besucher, aufwärts und abwärts oder nach rechts und links zu scrollen, um den gesamten Inhalt zu sehen. Die drei möglichen Werte sind: yes, womit festgelegt wird, dass stets eine Scrollleiste erscheint, no, womit nie eine Scrollleiste erscheint, und auto, das die Scrollleiste einspielt, wenn sie erforderlich ist. Wenn kein Wert angegeben wird, ist die Voreinstellung auto.
src: gibt die URL-Adresse einer HTML-, ASP-, PHP- oder anderen Seite an. Der Inhalt der referenzierten URL wird im Frame dargestellt.

HTML noframes

HTML noframes stellt alternativen Inhalt für Browser zur Verfügung, die Frames nicht erkennen oder darstellen können – z.B. eine Zusammenfassung der Inhalte und Links zu den jeweiligen Dokumenten.

Wenn der Browser Frames darstellen kann, wird der Inhalt des noframes-Elements nicht angezeigt. Aber der Inhalt des noframes-Tags kann eine Zusammenfassung des Inhalts für die Suchmaschinen abgeben.

<frameset cols="*,380,*">
    <frame src="links.html" name="links" />
    <frameset rows="*,160,*">
        …
    </frameset>
    <framesrc="rechts.html" name="rechts" />
    <noframes>
        <body> <p>Kurzbeschreibung der Seite</p> </body>
    </noframes>
</frameset>

Das <noframes>-Tag muss direkt im ersten frameset-Tag liegen.