Zum Inhalt springen

Websiteentwicklung: XHTML: Frames

Aus Wikibooks

Rahmen oder Fenster (englisch frames) sind dazu gedacht, mehrere Dokumente gleichzeitig oder nebeneinander zu präsentieren. Dabei geht es primär um eine visuelle Präsentation. Darstellungsprogramme ohne visuelle Präsentationsmöglichkeit können nur eine Liste der Dokumente anbieten, aus der der Nutzer dann auswählen kann, welches Dokument als nächstes dargestellt werden soll.

Um die Rahmentechnik umzusetzen, ist eine komplett andere Dokumentstruktur notwendig als bei 'normalen' XHTML-Dokumenten, wo eine barrierefreie, zugängliche und lineare Rezeption von Inhalten dem Konzept entspricht, daher gehört die Rahmentechnik nicht zur normalen Syntax von XHTML, dafür ist ein spezielles Modul notwendig, welches diese Dokumentstruktur beschreibt. Die Technik ist in XHTML1.0 als veraltet gekennzeichnet und taucht dort daher nur in der transitional-Variante mit einer speziellen Dokumenttypdeklaration auf. In der Modulvariante von XHTML1.1 gibt es ein entsprechendes Modul mit eigener Dokumenttypdeklaration. Das Modul wird allerdings in keiner empfohlenen Version von XHTML1.1 integriert.

Die innerhalb der Rahmen präsentierten Dokumente können wieder beliebige Formate sein. Allerdings haben nicht alle Formate und Varianten die notwendige Funktionalität, um den Austausch von Dokumenten in den verschiedenen Rahmen zu ermöglichen. Dazu wird das Attribut target gebraucht. Dies ist verfügbar in XHTML1.0 transitional und XHTML+RDFa, aber auch etwa im Format SVG.

Wann kann es sinnvoll sein, mehrere Dokumente auf einmal präsentieren zu wollen? Dies könnte etwa nützlich sein, wenn zwei Dokumente miteinander verglichen werden sollen, etwa bei zwei Sprachversionen eines Textes oder eines Textes und einer Interpretation dazu. Das läßt sich allerdings auch mit mehreren Elementen object realsieren, die mit CSS nebeneinander angeordnet werden. Damit lassen sich allerdings die Dokumente nicht austauschen.

Auch bei einer Plauderecke (englisch chat) kann die Rahmentechnik recht nützlich sein. Dort ist es günstig, einen Rahmen mit einem Formular zu haben, um Text einzutippen und unabhängig davon ein anderer, bei dem die Unterhaltung gelesen wird und automatisch aktualisiert. All das ist nur plausibel für Menschen, die zum einen normale Lesefähigkeiten haben und zum anderen mit mehreren Dokumenten gleichzeitig umgehen können. Es ist also nicht einfach, solch eine Plauderecke so zu gestalten, dass sie wirklich von jedem verwendet werden kann. Für Langsamleser und Blinde muß die automatische Aktualisierung durch eine manuelle ersetzbar sein, zudem muß diese Nutzergruppe auch in die Lage versetzt werden, zügig zischen Ein- und Ausgabe zu wechseln.

Die Mehrfenstertechnik gibt es seit HTML4, proprietär bereits seit 1995. Sie war ein beliebtes Mittel, um nur bestimmte Inhalte auszutauschen, während andere, wie beispielsweise die Navigation, erhalten blieben. Da sich die Geschwindigkeit enorm erhöht hat, mit der Seiteninhalte übertragen und aufgebaut werden, und mit CSS auch im Quelltext linear notierte Inhalte nebeneinander angeordnet werden können, wurde die Rahmentechnik für solche Anwendungen erfreulicher Weise inzwischen weitgehend überflüssig.


Vor- und Nachteile

[Bearbeiten]

Die folgende Tabelle zeigt Ihnen die Vor- und Nachteile der Mehrfenstertechnik:

Vorteile Nachteile
Einfache Strukturierung in verschiedene Bereiche Da mehrere Fenster gleichzeitig geladen werde müssen, kann es zu Verzögerungen beim Aufbau der Präsentation kommen. Gegenüber den Möglichkeiten von CSS sind die Strukturierungsmöglichkeiten sehr eingeschränkt.
Außer der Inhaltsseite muß nichts mehr rollen, da alles Andere fixiert werden kann Die URIs zu den Unterseiten werden nicht angezeigt. Es wird nur die URI zu der Rahmen-Seite angezeigt. Das ist von Nachteil, da man die URI zu einer Unterseite nicht sehen kann. Somit ist es auch nicht deutlich, ob die aufgetauchte Unterseite zum Projekt des Autors gehört oder aus einem fremden Projekt eines anderen Autors stammt.
Die Navigation wird nur einmalig in einem Dokument notiert, nämlich in einem separaten Fenster. Diese muss nicht in jedem XHTML-Dokument notiert werden Suchmaschinen zeigen bei der Suche nach bestimmte Inhalten direkt die Unterseiten an. Diese aber werden ohne Rahmen angezeigt. Somit bleiben andere Bereiche, wie die Navigation verborgen, wenn eine Unterseite direkt aufgerufen wird. Das führt zu Zugänglichkeitsproblemen.
Probleme beim Ausdrucken. Es wird das Fenster ausgedruckt, welches mit der Maus fixiert worden ist.

Das Grundgerüst

[Bearbeiten]

Das Grundgerüst mit den Rahmen wird also in einem gesonderten Dokument notiert. Jeder Rahmen ist rechteckig. Im Grundgerüst wird festgelegt, wieviele Rahmen verwendet werden sollen und wie sie angeordnet werden. Jeder Rahmen kann allerdings ein weiteres Dokument referenzieren, in welchem ein Grundgerüst mit weiteren Rahmen steht. Die in den Rahmen darzustellenden Dokumente könnmen wie gehabt erstellt werden. Sofern target verwendet wird, ist allerdings XHTML1.0 transitional, XHTML+RDFa oder SVG zu verwenden.

Das Grundgerüst mit den Rahmen erfordert eine besondere Dokumentstruktur. Das Wurzelelement heißt nach wie vor html, darin wird wie üblich als erstes das Element head mit bereits erläutertem Inhalt notiert. Statt body ist dann allerdings das Element frameset zu notieren, welches weitere, für die Rahmentechnik spezifische Elemente enthält. Darauf kann ein Element noframes verwendet werden, um alternativen Inhalt für jene Nutzer anzubieten, bei deinen keine Rahmen angezeigt werden können. In noframes wird dann der Inhalt in einem Element body notiert. In XHTML1.0 transitional kann zudem noframes auch in anderen Dokumenten verwendet werden, um alternativen Inhalt in den einzelnen Dokumenten anzubieten, etwa ein Verweis zur Startseite des Projektes und einer Seite mit einer Liste der Dokumente des Projektes, um zum Beispiel das genannte Problem zu umgehen, dass bei einem Einzelaufruf eines für einen Rahmen gedachten Dokumentes die Relation zum Rest des Projektes nicht mehr ersichtlich ist.

So sieht der Quelltext prinzipiell aus:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekttitel</title>
 </head>
 <frameset>
    <!-- ...hier werden Rahmen eingefügt --> 
   <noframes>
     <body>
    <!-- alternativer Ersatzinhalt -->
     </body>
   </noframes>
 </frameset>
</html>

frameset

[Bearbeiten]

Das Element frameset hat zwei spezifische Attribute: cols und rows. Damit wird die Präsentation in Spalten und Zeilen ähnlich einer Tabelle eingeteilt. In jeder Zelle wird dann ein Dokument dargestellt.

Von den allgemein verwendbaren Attributen können xml:space, id. class und title notiert werden.

Im Element frameset können die Elemente frameset und frame verwendet werden.

Das Attribut cols

[Bearbeiten]

cols steht für Spalten. Der Wert ist eine kommaseparierte Liste von Längen. Die Anzahl der Listenpunkte bestimmt die Anzahl der Spalten, der jeweilige Listenpunkt bestimmt die Breite der jeweiligen Spalte von links nach rechts. Eine Länge kann eine positive ganze Zahl sein, die steht dann für eine Länge in Pixeln. Eine Länge kann auch ein Prozentwert sein, eine positive Zahl gefolgt vom Zeichen '%'. Die ist dann der prozentuale Anteil am verfügbaren Platz. Die dritte Möglichkeit besteht darin, eine Liste von relativen Angaben zu notieren. Dabei ist jeder Wert der Liste entweder ein '*' oder eine Zahl gefolgt von einem '*'. Dabei entspricht nur '*' dem Wert '1*'. Um die Aufteilung zu ermitteln, werden alle Werte einer Liste aufaddiert. Wird nun jeder Listenpunkt durch diese Summe geteilt, so erhält man den Anteil für die zugehörige Spalte. Bei einer ebenfalls möglichen Mischung von Pixelwerten, Prozentwerten und relativen Angaben bezieht sich die Summe auf den Rest, der verbleibt, wenn die Pixel und die Prozente vom insgesamt verfügbaren Platz abgezogen sind.

Bei der Verwendung von Pixeln und Prozentwerten ist natürlich darauf zu achten, dass es dem Darstellungsprogramm möglich sein sollte, alles auf 100% aufzuteilen.

Beispiel:

Ausgabe des Beispiels
<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Drei Fenster</title>
 </head>
  <frameset cols="30%,40%,30%">
   <frame />
   <frame />
   <frame />
  </frameset>
</html>

Innerhalb vom frameset-Element kommen die frame-Elemente hinzu. Deren Anzahl ist genau so groß, wie die Anzahl der Listenpunkte in dem cols-Attribut.

Das Attribut rows

[Bearbeiten]

rows steht für Zeilen. Der Wert ist eine kommaseparierte Liste von Längen. Die Anzahl der Listenpunkte bestimmt die Anzahl der Zeilen, der jeweilige Listenpunkt bestimmt die Höhe der jeweiligen Zeile von oben nach unten. Für Längen gelten die gleichen Möglichkeiten wie bei cols beschrieben.

Beispiel:

Ausgabe des Beispiels
<?xml version="1.0"?>
<!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" xml:lang="de">
<head>
<title>Drei Fenster</title>
</head>
 <frameset rows="30%,40%,30%">
  <frame />
  <frame />
  <frame />
 </frameset>
</html>

Kombination aus cols und rows (Verschachtelung)

[Bearbeiten]

Wenn Sie cols und rows gleichzeitig benutzen, dann können Sie die Seite sowohl in horizontaler, als auch in vertikaler Richtung teilen.

<?xml version="1.0"?>
<!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" xml:lang="de">
<head>
<title>Vier Fenster</title>
</head>
 <frameset rows="60%,40%" cols="40%,60%">
  <frame />
  <frame />
  <frame />
  <frame />
 </frameset>
</html>

Die Reihenfolge entspricht dann der wie bei Tabellen, also oben links, oben rechts, unten links, unten rechts.

Es können nicht nur frame-Elemente in frameset notiert werden, sondern auch frameset selbst, damit kann dann eine unregelmäßigere Struktur erreicht werden:

Im nächsten Beispiel wird folgendes erreicht: Oben und unten ist ein durchgehender Rahmen. Die Mitte teilt sich in zwei Bereiche:

Ausgabe des Beispiels
<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Meine Seite</title>
 </head>
 <frameset rows="15%,*,10%">
  <frame />
   <frameset cols="25%,75%">
    <frame />
    <frame />
   </frameset>
  <frame />
 </frameset>
</html>

Element frame

[Bearbeiten]

Das Element frame ist ein leeres Element, welches innerhalb von frameset notiert werden kann.

Von den allgemein verwendbaren Attributen können xml:space, id. class und title notiert werden.

Daneben gibt es folgende für das Element spezifische Attribute: name, frameborder, longdesc, marginheight, marginwidth, noresize, scrolling, src.

Attribut src

[Bearbeiten]

Mit dem Attribut src wird angegeben, welches Dokument in dem Rahmen dargestellt werden soll. Der Wert ist eine URI. Es ist unzulässig, die URI des aktuellen Dokumentes zu verwenden oder nur einen Fragmentidentifizierer, da dies unmittelbar eine rekursive unendliche Schleife auslösen würde. Solche Schleifen sind im allgemeinen nicht sinnvoll. Sollte man aus künstlerischen Gründen oder zu Testzwecken doch mal eine brauchen, kann man auf ein Dokument mit Rahmen verweisen, die wiederum das erste Dokument in einem Rahmen referenzieren. Es bleibt allerdings dem Darstellungsprogramm überlassen, die Schleife abzubrechen, wenn die Rahmen so klein werden, dass keine sinnvolle Anzeige mehr zu realisieren ist.

Beispiel:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Menschenrechte mehrsprachig</title>
 </head>
  <frameset cols="*,3*,3*">
   <frame src="sprachauswahl.xhtml"/>
   <frame src="menschenrechte.de.xhtml"/>
   <frame src="menschenrechte.fr.xhtml"/>
  </frameset>
</html>


Attribute id und name

[Bearbeiten]

Das id-Attribut gibt dem Fenster einen eindeutigen Namen. Auch wenn in anderen, zum Projekt gehörigen Dokumenten weitere Rahmen definiert werden, sollte sich der Wert nicht wiederholen.

Wird in einem anderen Dokument bei einem Verweis der Name mit dem Attribut target angeben, soll das Verweisziel in dem Rahmen mit dem Namen angezeigt werden.

Mit dem gleichen Wert wie id kann auch das veraltete Attribut name notiert werden, wenn rückwärtskompatibel zu HTML gearbeitet werden soll. Sollte das XHTML1.1-Modul verwendet werden, so entfällt name komplett, weil es als veraltet gestrichen ist.

Man beachte, dass Namen, die mit '_' beginnen, reserviert sind, siehe dazu auch die Ausführungen zum Attribut target des Elementes a.

Beispiel referenzierendes Dokument (etwa in sprachauswahl.xhtml aus dem folgenden Rahmen-Dokument):

Sprache zweiter Rahmen:
 <a href="menschenrechte.en.xhtml" target="inhalt2">englisch</a>,
 <a href="menschenrechte.fr.xhtml" target="inhalt2">französisch</a>,
 <a href="menschenrechte.es.xhtml" target="inhalt2">spanisch</a>,
 <a href="menschenrechte.it.xhtml" target="inhalt2">italienisch</a>

Dokument mit den Rahmen:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Menschenrechte mehrsprachig</title>
 </head>
  <frameset cols="20%,*,*">
   <frame src="sprachauswahl.xhtml"/>
   <frame src="menschenrechte.de.xhtml" id="inhalt1" name="inhalt1"/>
   <frame src="menschenrechte.en.xhtml" id="inhalt2" name="inhalt2"/>
  </frameset>
</html>

Wird also der vierte Verweis angeklickert, erscheint 'menschenrechte.it.xhtml' im Rahmen 'inhalt2'. Das impliziert auch, dass mit einem Verweis immer nur der Inhalt eines Rahmens auf einmal ausgestauscht werden kann. Sollen die Inhalte mehrerer Rahmen getauscht werden, kann etwa das Dokument mit den Rahmen selbst ausgetauscht werden. Hier kann man natürlich eine weitere Liste für den Rahmen 'inhalt1' anfertigen, dessen Inhalt dann unabhängig von 'inhalt2' getauscht werrden kann.

Attribute longdesc

[Bearbeiten]

Mit dem Attribut longdesc kann eine längere Beschreibung zum Rahmen referenziert werden. Der Wert ist eine URI. Für Kurzbeschreibungen kann hingegen das Attribut title verwendet werden.

Beispiele:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Plauderecke</title>
 </head>
  <frameset cols="20%,*">
   <frame src="eingabe.php"
          title="etwas sagen"
          longdesc="plaudereckeninfo.xhtml"/>
   <frame src="ausgabe.php"
          id="inhalt" name="inhalt"
          title="Beiträge lesen"
          longdesc="funktionsuebersicht.xhtml"/>
  </frameset>
</html>

Nützlich ist longdesc auch, um eine referenzierte Pixelgraphik zu beschreiben, um die Zugänglichkeit zu gewährleisten:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekt</title>
 </head>
  <frameset rows="200,*">
   <frame src="kopflogo.png"
          title="Projekt-Logo"
          longdesc="logo-beschreibung.xhtml"/>
   <frame src="start.xhtml" id="inhalt" name="inhalt"/>
  </frameset>
</html>


Attribute marginheight, marginwidth und frameborder

[Bearbeiten]

Mit den Attributen wird die Abstand oder Rand zwischen zwei Rahmen angegeben, also marginheight für die Höhe und marginwidth für die Breite. Der Wert ist eine positive ganze Zahl als Länge in Pixeln.

frameborder gibt an, ob überhaupt ein Rand zu malen ist. Der Wert ist entweder '0' oder '1'. Bei '0' wird kein Rand verwendet, bei '1' schon. '1' ist die Voreinstellung.

Es ist nicht explizt festgelegt, wie groß der Rand ist, wenn marginheight, marginwidth nicht angegeben sind. Ist frameborder nicht explizit auf '0' gesetzt, wird jedenfalls ein Rahmen angezeigt.

Beispiel:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekt</title>
 </head>
  <frameset cols="20%,*" rows="20%,*">
   <frame src="logo.svg" frameborder="0" />
   <frame src="kopf.xhtml"/>
   <frame src="navigation.xhtml"
          marginwidth="5" marginheight="5" />
   <frame src="start.xhtml"
          id="inhalt" name="inhalt"
          marginwidth="5" marginheight="5" />
  </frameset>
</html>

Attribut noresize

[Bearbeiten]

Generell ist es dem Nutzer möglich, am Darstellungsprogramm die relative Größe von Rahmen zu ändern, indem der Rand zwischen zwei Rahmen verschoben wird. Will der Autor dies für einen Rahmen unterbinden, gibt er das Attribut noresize mit dem Wert 'noresize' an. Auch wenn der Rand deaktivert ist, kann es für die Leser natürlich schwierig werden, die Rahmengröße zu ändern.

Beispiel:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekt</title>
 </head>
  <frameset rows="200,*">
   <frame src="kopflogo.svg" noresize="noresize"/>
   <frame src="start.xhtml" id="inhalt" name="inhalt"/>
  </frameset>
</html>

Das Problem dabei ist, dass der Autor ja die Schriftgröße nicht kennt, die der jeweilige Leser bevorzugt und voreingestellt hat. Daher kann der Autor auch nicht beurteilen, ob etwa die Breite eines Rahmens für den Text ausreicht, daher ist es in der Praxis oft nur sinnvoll, noresize zu notieren, wenn etwa ein Bild mit fester Breite oder Höhe im Rahmen referenziert ist.

Attribut scrolling

[Bearbeiten]

Ist in einem Dokument mehr Inhalt vorhanden, als im zugehörigen Rahmen Platz ist, werden wie gewöhnlich für XHTML Rollbalken angezeigt.

Mit dem Attribut scrolling kann dies Verhalten beinflußt werden. Möglich sind die Werte 'yes', 'no' und die Voreinstellung 'auto'.

Bei 'auto' werden die Rollbalken bei Bedarf angezeigt, also nur wenn der Platz nicht ausreicht. Bei 'yes' werden die Rollbalken immer angezeigt, zeigen aber nur eine Funktion, wenn der Platz nicht ausreicht. Bei 'no' werden keine Rollbalken angezeigt. Reicht der Platz nicht aus, wird Inhalt abgeschnitten, also unzugänglich. Bei einigen Darstellungsprogrammen mag es dennoch mit anderen Funktionalitäten oder Tricks gelingen, den abgeschnittenen Inhalt sichtbar zu machen oder eben das komplette Dokument in einem neuen Fenster anzuzeigen. Bei 'no' ist es offenbar die Aufgabe des Autors zu verhindern, dass relevanter Inhalt nicht sichtbar ist, da nicht zu erwarten ist, dass alle Leser Tricks und Funktionalitäten beherrschen, um ein gegebenenfalls auftretendes Problem mit dem Rahmensatz selbst zu lösen. Sinnvoll kann 'no' etwa bei einer Graphik bekannter Größe als Inhalt sein. Ein anderes Beispiel wäre, wenn sich die Größe eines SVG-Dokumentes automatisch an den verfügbaren Platz anpaßt:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekt</title>
 </head>
  <frameset rows="10%,*">
   <frame src="kopflogo.svg" scrolling="no" />
   <frame src="start.xhtml" id="inhalt" name="inhalt"/>
  </frameset>
</html>

Der Wert 'yes' kann sinnvoll sein, um ein einheitliches Erscheinungsbild zu gewährleisten oder wenn ohnehin immer ein Rollbalken notwendig ist, etwa weil eine Karte referenziert wird, die ohnehin größer als jeglicher Bildschirm ist:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Karte von Hannover</title>
 </head>
  <frameset rows="80%,*">
   <frame src="hannover.svg" scrolling="yes" />
   <frame src="legende.xhtml" scrolling="auto" />
  </frameset>
</html>


Element noframes

[Bearbeiten]

In noframes kann Inhalt notiert werden, der angezeigt wird, wenn der Rahmensatz nicht angezeigt wird. noframes kann innerhalb von frameset als letztes Element notiert werden.

Der Inhalt ist ein Element body, in welchem wiederum der übliche Inhalt von body notiert werden kann.

In Dokumenten der Version XHTML1.0 transitional kann noframes zudem selbst als Blockelement oder inzeiliges Element notiert werden, um Inhalt in Dokumenten bereitzustellen, die eigentlich in Kombination mit einem Rahmensatz gedacht sind, aber auch einzeln angezeigt werden können, falls der Rahmensatz technisch nicht darstellbar ist. Das löst nicht das Problem, dass entstehen kann, wenn solche Dokumente aus sonstigen Gründen einzeln ohne den Rahmensatz aufgerufen werden.

Bei noframes können die allgemein verwendbaren Attribute verwendet werden.

Beispiel:

<?xml version="1.0"?>
<!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" xml:lang="de">
 <head>
  <title>Projekt</title>
 </head>
  <frameset cols="20%,*">
   <frame src="navigation.xhtml"
          title="Navigation des Projektes"/>
   <frame src="start.xhtml"
          id="inhalt" name="inhalt"
          title="Hauptinhalte des Projektes" />
   <noframes>
    <body>
     <h1>Projekt</h1>
     <ul>
       <li><a href="navigation.xhtml">Navigation</a></li>
       <li><a href="uebersicht.xhtml">Projektübersicht</a></li>
     </ul>
    </body>
   </noframes>
  </frameset>
</html>


Element iframe

[Bearbeiten]

In XHTML 1.0 transitional kann als inzeiliges Element auch iframe verwendet werden. Die Funktionalität ist ähnlich der von object, das Attributsortiment lehnt sich allerdings mehr an die Rahmenelemente an.

Solange der Autor nicht mittels target das Element als Verweisziel angeben möchte, kann iframe problemlos durch object ersetzt werden, welches in allen XHTML-Versionen verfügbar ist.

Möglicher Inhalt sind inzeilige Elemente und Text oder Blockelemente. Im Sinne einer guten Dokumentstruktur sollte man sich für eines von beiden entscheiden und nicht mischen. Wie bei object dient dieser Inhalt als Alternative, wenn der referenzierte Inhalt nicht angezeigt werden kann. Wird ein XHTML-Dokument referenziert, ist natürlich davon auszugehen, dass dies mit einem aktuellen Darstellungsprogramm auch angezeigt werden kann, textbasierte Programme oder solche mit akustischer Ausgabe oder sehr alte Programme mögen aber auch damit Probleme haben, daher ist es immer wichtig, eine echte Alternative anzugeben und nicht etwa einen Hinweis darauf, dass der Inhalt nicht angezeigt werden kann, was nicht weiterhilft. Generell können mit dem Element aber auch andere Formate referenziert und eingebettet werden. Und da ist dann genau wie bei object nicht mehr so klar, dass diese auch dargestellt werden können, weswegen dort erst recht eine sinnvolle Alternative notwendig ist.

Neben den allgemein verwendbaren Attributen hat iframe die optionalen Attribute width, height, src, longdesc, marginheight, marginwidth, scrolling und frameborder.

Zudem gibt es das veraltete Attribut name, welches mit dem gleichen Wert wie id verwendet werden kann, wenn rückwärtskompatibel zu HTML gearbeitet werden soll. Wie bei frame dienen die Werte dieser Attribute dann dazu, um das Element als Ziel für Verweise mit target zu identifizieren.

Auch die Attribute src, longdesc, marginheight, marginwidth, scrolling und frameborder haben die gleiche Bedeutung wie für frame und sind dort bereits beschrieben.

Mit width und height werden Breite und Höhe des Elementes angegeben, also der Anzeigebereich für den zu referenzierenden Inhalt. Die Werte sind Längen, also jeweils entweder eine positive ganze Zahl oder ein Prozentwert, also eine positive Zahl gefolgt vom Zeichen '%'.

Das folgende Beispiel veranschaulicht den Aufbau:

Ausgabe des Beispiels
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
 <head>
   <title>Über mich</title>
 </head>
 <body>
  <h1>Über mich</h1>
  <p>
    <a href="biografie.xhtml" target="iframe">Biografie</a>,
    <a href="fotos.xhtml" target="iframe">Fotos</a>,
    <a href="hobbys.xhtml" target="iframe">Hobbys</a>
  </p>
  <div>
  <iframe src="biografie.xhtml" id="iframe" name="iframe" width="600" height="500">
   <p><a href="uebersicht.xhtml">Über mich, Übersichtsseite</a></p>
  </iframe>
  </div>
 </body>
</html>

Beispiel als kleine Bildergalerie:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
 <head>
   <title>Kleine Werkauswahl, Pfanny Haxe</title>
 </head>
 <body>
  <h1>Pfannies Bildergalerie</h1>
  <p>Bild auswählen:</p>
  <p>
    <a href="b2010-03-03f07.svg" target="iframe"><img
       src="b2010-03-03f07.png" alt="b2010-03-03f07" width="50" height="50" /></a>,
    <a href="b2010-07-09a01.svg" target="iframe"><img
       src="b2010-07-09a01.png" alt="b2010-07-09a01" width="50" height="50" /></a>,
    <a href="b2011-05-13c33.svg" target="iframe"><img
       src="b2011-05-13c33.png" alt="b2011-05-13c33" width="50" height="50" /></a>,
    <a href="b2012-09-23l27.svg" target="iframe"><img
       src="b2012-09-23l27.png" alt="b2012-09-23l27" width="50" height="50" /></a>,
    <a href="b2012-11-18l20.svg" target="iframe"><img
       src="b2012-11-18l20.png" alt="b2012-11-18l20" width="50" height="50" /></a>
  </p>
  <div>
  <iframe src="leer.svg" id="iframe" name="iframe" width="600" height="600">
   <ul>
   <li><a href="interpretationen.xhtml">Beschreibungen und Interpretationen</a>
   der abstrakten Bilder von Silke und Maik.</li>
   <li><a href="geschichten.xhtml">Abstrakte Bildergeschichten</a>
   von Dieter und Hanna.</li>
   <li><a href="png-alternative.xhtml">Alternative PNG-Bilderauswahl</a></li>
   </ul>
  </iframe>
  </div>
 </body>
</html>