Websiteentwicklung: XHTML: Verweise

Websiteentwicklung XHTML Verweise

Ein Verweis (englisch: hyperlink, link) oder eine Verknüpfung, ist ein namensgebender Bestandteil von (X)HTML (Extensible Hypertext Markup Language) und ein entscheidender Grundbaustein des World Wide Web, denn erst die Nutzung dieser macht das WWW zu einem Netzwerk (Web). Solche Verknüpfungen sind Querverweise zu anderen elektronischen Dokumenten (häufig andere (X)HTML-Dokumente) oder innerhalb eines Dokumentes. Ohne diese Verweise käme man mit (X)HTML nicht weit.

Um Verweise zu realisieren, gibt es verschiedene Möglichkeiten. Im Kopfbereich eines XHTML-Dokumentes wird dafür das Element link verwendet, welches im Kapitel über Kopfdaten erläutert wird. Im normalen Textfluss wird das im Folgenden erläuterte Element a für Anker (engl: anchor) verwendet. Ferner gibt es auch noch verweissensitive Graphiken (und Formulare), mit denen Verweise oder eine ähnliche Funktionalität realisiert werden können.

Verweise mit dem Anker-Element a

Ein Verweis, bzw. Hyperlink oder kurz Link, im normalen Textfluss wird mit dem Element a notiert. Dies ist ein inzeiliges Element. In einem a-Element können Text und andere inzeilige Elemente notiert werden. Ein a-Element darf allerdings nicht Nachfahre eines anderen a-Elementes sein.

Der Inhalt des a-Elementes, welches daher nie leer sein sollte, dient der Aktivierung des Verweises. Bei einer graphischen Darstellung etwa wird dieser Inhalt meist bunt (oft blau) und unterstrichen hervorgehoben und die Aktivierung erfolgt durch anklicken. Anmerkung: Hervorhebung und Darstellung von Links sind nicht genormt sondern frei wählbar.

Natürlich sollte der umschlossene Text das Verweisziel möglichst treffend beschreiben, damit der Benutzer ungefähr weiß, wohin er gelangt, wenn der Verweis aktiviert wird. Mit dem allgemein verwendbaren Attribut title können auch Zusatzinformationen angeboten werden, die nicht im normalen Fließtext integriert werden, sondern dem Benutzer nur bei Bedarf oder vor eventueller Aktivierung des Verweises außerhalb des normalen Textflusses angezeigt werden.

Neben den allgemein verwendbaren Attributen hat a einige spezifische Attribute. Dies sind: href, hreflang, type, charset, rel, rev, tabindex, accesskey, shape und coords. In XHTML+RDFa (und XHTML 1.0 transitional) kommt dazu noch das Attribut target. Diese sind allesamt optional.

shape und coords werden im Kapitel über verweissensitive Graphiken zusammen mit diesen erläutert und sind nur für diese relevant.

Attribut href

Das Attribut href gibt die URI (Netz-Adresse) des gewünschten Verweiszieles an. Alternativ kann auch ein # angegeben werden, direkt gefolgt von einem Fragmentidentifizierer auf der aktuellen Seite.

Wird kein Attribut href angegeben, so kann das Element a natürlich auch nicht dazu dienen, einen Verweis zu aktivieren. Bei früheren Versionen von (X)HTML hatte a dann noch eine spezielle Funktion, die aber mit der Einführung des Fragmentidentifizierers mit dem allgemein verwendbaren Attribut id überflüssig geworden ist.

Absolute Adressierung

Es ist möglich, eine absolute Adressierung anzugeben, angefangen mit Protokoll, gefolgt vom Namen oder der IP des Rechners und der Verzeichnisstruktur bis zur Angabe des Dokumentnamens.

Dabei ist zu beachten, dass bei dem Teil mit der Angabe zur Verzeichnisstruktur und dem Dokumentnamen Groß- und Kleinschreibung signifikant ist.

Die absolute Adresse besteht aus der Angabe eines Schemas, gefolgt vom Namen oder der IP des Rechners, über dessen Dienst das referenzierte Dokument verfügbar gemacht werden soll.

Damit können also Verweise zu externen Dokumenten auf einem anderen Rechner notiert werden, sofern der angegebene Rechner bereit ist, über den mit dem Schema angegeben Dienst das Dokument auszuliefern. Natürlich lassen sich so auch Verweise auf Ziele auf demselben Rechner realisieren, was allerdings dann unpraktisch ist, wenn sich IP oder Rechnername ändern.

Beispiel:

<a href="http://www.wikibooks.org/">Wikibooks - Inhaltsoffene Lehrbücher</a>
<a href="http://www.example.org/w/index.xhtml">Index-Dokument 
  im Verzeichnis "w" des Rechners www.example.org</a>

Es lässt sich als Schema natürlich nicht nur das Protokoll http verwenden, sondern auch andere, zum Beispiel https, ftp, sftp oder tel und auch Pseudoprotokolle, von denen in folgenden Abschnitten noch zwei erläutert werden. Alle Schemata werden grundsätzlich von einem Doppelpunkt gefolgt notiert, z.B. http:. Neben den von der IANA registrierten existieren auch weitere, nicht standardisierte, anwendungsspezifische Schemata, wie zum Beispiel about für die interne Verwendung in einigen Darstellungsprogrammen oder apt für die gleichnamige Paketverwaltung unter Linux.

Zusätzlich kann das Protokoll/Schema auch entfallen, wobei Anzeigeprogramme das Protokoll des aufrufenden Dokumentes einsetzen. Dies ist insbesondere bei Dokumenten hilfreich, die sowohl über http als auch https erreichbar sind. Die URL wird dann lediglich mit zwei anführenden Schrägstrichen notiert:

<a href="//www.wikibooks.org/">Wikibooks - Inhaltsoffene Lehrbücher</a>

Relative Adressierung

Alternativ kann auch eine relative Adressierung erfolgen. Relativ angegebene Adressen muß das Darstellungsprogramm immer zu einer absoluten Adresse auflösen, bevor ein Dokument abgerufen werden kann.

Wird im Dateikopf das Element base verwendet, gibt dieses an, worauf sich die relative Angabe bezieht, sonst bezieht sie sich auf das aktuelle Dokument beziehungsweise Verzeichnis. So oder so vervollständigt das Darstellungsprogramm die relative Angabe zu einer absoluten, bevor eine Anfrage an ein Dienstprogramm erfolgt.

base wird im Kapitel über Kopfdaten erläutert.

Dabei kann wiederum unterschieden werden zwischen relativen und absoluten Pfadangaben. Relativ sind Angaben relativ zum aktuellen Dokument beziehungsweise Verzeichnis oder sofern mit base anderweitig angegeben auch relativ dazu:

<a href="bilder_10.xhtml">Bilder vom Oktober 2011 angucken</a> *
<a href="../2010/bilder_10.xhtml">Bilder vom Oktober 2010 angucken</a> *
<a href="../../index.xhtml">Heim</a>

Es ist auch möglich, eine absolute Pfadangabe zu notieren, bei welcher der Verweis auf das Wurzelverzeichnis des jeweiligen Dienstes zielt, entweder auf dem lokalen Rechner oder bei der Angaben von base auf dem damit angegebenen Rechner. Dabei ist zu beachten, dass je nach Dienst das Wurzelverzeichnis anders sein kann, insbesondere auch anders als das Wurzelverzeichnis im Dateisystem des Rechners, auf dem der Dienst läuft.

Eine absolute Pfadangabe beginnt mit einem einzelnen Schrägstrich:

<a href="/">oberstes Verzeichnis des aktuellen Dienstes</a>
<a href="/w/index.php">Index-PHP-Skript im Verzeichnis "w" des aktuellen Dienstes</a>

Verweise auf Fragmentidentifizierer

Statt URIs können auch Fragmentidentifizierer verwendet werden, wobei „id=“ hier den Identifikator (engl.: identifier) einleitet, gefolgt von einem beliebigen in Anführungszeichen im Schreibmaschinensatz gefassten "Erkennungsmerkmal". Beispiele:

<h1 id="B2010">Bilder 2010</h1>

<h2 id="Jan">Januar</h2>
<div>...</div>
<h2 id="Feb">Februar</h2>
<div>...</div>
<h2 id="Mar">März</h2>
<div>...</div>
<h2 id="Apr">...</h2>
<div>...</div>

<h1 id="Nav">Navigation</h1>

<ul>
<li><a href="#B2010">Bilder 2010</a></li>
<li><a href="#Jan">Bilder Januar</a></li>
<li><a href="#Feb">Bilder Februar</a></li>
<li><a href="#Mar">Bilder März</a></li>
<li>...</li>
<li><a href="#Nav">Navigation</a></li>
</ul>

Dabei können die Verweise vor oder hinter den Fragmentidentifizierern stehen. Das Darstellungsprogramm analysiert die komplette Seite und sofern ein passender Fragmentidentifizierer irgendwo auf der Seite vorhanden ist, dient das zugehörige Element als Verweisziel, zu dem gesprungen wird. Dabei wird nur die Darstellung geändert, bei Verweisen zu Zielen im selben Dokument aber keine neue Anfrage an ein Dienstprogramm gestellt, also das Dokument nicht erneut geladen.

Fragmentidentifizierer können auch mit URIs kombiniert werden. Zu beachten ist dabei, dass das Darstellungsprogramm die Angaben zum Fragmentidentifizierer immer selber auswertet, diese also nicht Bestandteil der Anfrage an das Dienstprogramm sind.

Beispiel:

<p>
Vergleiche den Zustand des Excimer-Lasers im
<a href="bilder_10.xhtml#B37">Oktober 2011</a> mit dem im 
<a href="../2010/bilder_10.xhtml#B48">Oktober 2010</a> oder mit dem 
<a href="http://example.org/exci-neu/#Detail13">Excimer-Laser der example-Kollegen</a>.
</p>

Verweise auf E-Mail-Adressen

Wenn Sie den Besuchern eines Projektes die Möglichkeit anbieten wollen, direkt per E-Mail Kontakt aufzunehmen, dann kann das Pseudoprotokoll mailto: in dem href-Attribut verwendet werden. Gefolgt wird es von der E-Mail-Adresse, an welche die elektronische Post versendet werden soll. Voraussetzung für diese Möglichkeit ist, dass der Besucher über ein E-Mail-Programm verfügt und dies dem Darstellungsprogramm bekannt ist. Sollte das der Fall sein, öffnet sich beim Betätigen des Verweises ein Fenster oder das bevorzugte E-Mail-Programm, mit dem man seine E-Mail-Adresse und Nachricht bequem einfügen und senden kann. Sonst kommt zumeist eine Nachfrage, wie der Leser weiter vorgehen möchte.

<a href="mailto:vorname.nachname@example.org">vorname.nachname@example.org</a>

Verweise mit data:

Entsprechend zu mailto: kann auch das Pseudoprotokoll data: verwendet werden. Dieses Pseudoprotokoll dient dazu, komplette Dateien in das Dokument einzubinden, was zum Beispiel nützlich ist, wenn für Bewerbungen oder sonstige Korrespondenz nur ein Dokument verschickt werden soll, welches aber weitere Dateien als Anhang bereitstellen soll.

Sinngemäß sieht das wie folgt aus:

href="data:application/xhtml+xml;base64,-Dokumentdaten-"

Die URI beginnt mit der Angabe des Protokolles 'data', gefolgt von einem Doppelpunkt ':'. Dann folgt die Angabe des Inhaltstyps (ehemals MIME-Typ) des einzubettenden Dokumentes, zum Beispiel 'application/xhtml+xml' für ein XHTML-Dokument, 'image/png' für ein PNG-Dokument, 'image/jpeg' für ein JFIF/JPEG-Dokument, 'image/svg+xml' für ein SVG-Dokument etc. Dann folgt ein Semikolon ';'.

Bei Textdateien kann dann eine Angabe zur Kodierung des Textes erfolgen, etwa 'charset=UTF-8', gefolgt von einem Komma ',' und dann den Daten des Dokumentes. Da in einer URI einige typisch in Dokumenten auftauchende Zeichen nicht einfach so auftreten dürfen, sind diese entsprechend zu maskieren (englisch: URL encode). Ein Konflikt tritt zum Beispiel bereits auf, wenn in den Dokumentdaten die gleichen Anführungszeichen auftreten wie jene, mit denen der Attributwert umschlossen wird. Auch Leerzeichen sind in URIs problematische Zeichen.

Mit base64 gibt es eine weitere effektive Methode, um eine geeignete Maskierung vorzunehmen. In dem Falle wird hinter der Angabe des Inhaltstyps und des Semikolons 'base64' angegeben, gefolgt von einem Komma und den Dokumentdaten.

Attribut hreflang

Mit dem Attribut hreflang kann angegeben werden, in welcher Sprache das referenzierte Dokument verfaßt ist. Der Wert entspricht dem vom allgemein verwendbaren Attribut xml:lang, siehe auch dort. Als Wert dient also ein Sprachkürzel gemäß BCP47, also im einfachsten Fall 'de' für deutsch, 'en' für englisch, 'fr' für französisch, 'it' für italienisch, 'es' für spanisch und so weiter, insbesondere noch 'x' für selbst festgelegte, experimentelle Varianten. Sprachvariationen werden optional festgelegt, indem deren Kürzel hinter einem Bindestrich angefügt wird, also etwa de-1996 für deutsch nach den Rechtschreibregeln von 1996 oder de-1901 für die von 1901 oder de-AT für die Variante aus Österreich, de-CH für die aus der Schweiz, en-US für englisch im amerikanischen Dialekt etc. Auch hier kann das 'x' wieder dafür herhalten, eine eigene Sprachvariante anzugeben, zum Beispiel en-x-Hixie oder als weitere Untervariante auch en-US-x-Hixie (dies ist tatsächlich beim Arbeitsentwurf vom 2011-05-25 für HTML5 zu finden ;o).

Beispiel:

<p>Zum Thema 'Prosopagnosie im Alltag von Lehrern' 
   gibt es neben den Erfahrungsberichten auf dieser Seite auch 
   internationale Berichte, etwa aus 
<a href="http://example.org/prosop_us/" 
   hreflang="en-US">den Vereinigten Staaten von Amerika</a>,
<a href="http://example.org/prosop_gb/" 
   hreflang="en-GB">Großbritannien</a>, 
<a href="http://example.org/prosop_ch/" 
   hreflang="de-CH">Schweiz</a>,
<a href="http://example.org/prosop_fr/" 
   hreflang="fr">Frankreich</a>,
<a href="http://example.org/prosop_kl/" 
   hreflang="x-klingon">Klingonien</a>.
</p>
<p>
Das Problem ist nicht neu, 
wie Berichte aus frühreren Jahrzehnten aus Deutschland zeigen. 
Es gibt bereits Berichte von
<a href="http://example.org/prosop_de_KR/" 
   hreflang="de-1901">vor dem ersten Weltkrieg</a>, 
aber auch welche aus der
<a href="http://example.org/prosop_de_BRD/" 
   hreflang="de-1901">Bundesrepublik vor der 'Wiedervereinigung'</a> 
und solche aus der
<a href="http://example.org/prosop_de_DDR/" 
   hreflang="de-1901">Deutschen Demokratischen Republik</a>.
</p>

Attribut charset

Der Wert von charset macht eine Angabe zur Zeichenkodierung des referenzierten Dokumentes, was aber nur relevant ist, wenn sonst keine andere Quelle zur Ermittlung der Zeichenkodierung verfügbar ist.
Siehe dazu auch in Kapitel über Kopfdaten den Abschnitt über die XML-Verarbeitungsanweisung.

Beispiel: charset="UTF-8"

Attribut type

Der Wert von type gibt den Inhaltstyp (ehemals MIME-Typ) des referenzierten Dokumentes an, was aber vorrangig relevant ist, wenn sonst keine andere Quelle zur Ermittlung des Inhaltsyps verfügbar ist. Kann das Darstellungsprogramm den Typ allerdings nicht darstellen, kann die Information auch dazu dienen, das referenzierte Dokument gar nicht erst zu laden, sondern etwa den Nutzer zu fragen, was passieren soll.
Beispiel (SVG-Dokument): type="image/svg+xml"
Beispiel (PNG-Dokument): type="image/png"
Beispiel (JFIF/JPEG-Dokument): type="image/jpeg"
Beispiel (XHTML-Dokument): type="application/xhtml+xml"
Beispiel (HTML-Dokument): type="text/html"

Beispiel:

<a href="KarteSkulpturenInHannover.svg" 
   type="image/svg+xml">Interaktive 
   Karte mit Standorten der Skulpturen</a>,
<a href="SkulpturenInHannover.oga" 
   type="audio/ogg">Vortrag 
   über Skulpturen in Hannover</a>

Attribute rel und rev

Mit den Attributen rel und rev wird ein Bezug zwischen dem referenzierenden und dem referenzierten Dokument hergestellt. Mittels rel wird angegeben, welche Beziehung das referenzierte Dokument zum aktuellen hat. Bei rev ist es umgedreht. Bei einigen Werten können Aussagen über das andere Dokument eine Abwertung implizieren, etwa wenn damit angedeutet wird, dass das referenzierte Dokument veraltet oder ungültig sei. Damit solche Aussagen nachprüfbar und verlässlich sind, sollte das referenzierte Dokument dann jeweils eine inverse Information über das referenzierende machen, dass das andere also etwa die neue oder korrigierte Version ist, sonst werden solche Informationen zumeist nicht als relevant eingestuft, weil nicht automatisch vom Darstellungsprogramm beurteilt werden kann, ob ein Autor eines Dokumentes dazu qualifiziert ist, relevante Aussagen zu einem anderen Dokument zu machen. Teilweise ist die Verwendung von rev bei einigen Werten nicht sinnvoll, das ergibt sich dann automatisch aus dem Definition des Wertes.

Der Wert von rel und rev ist eine Liste von Einzelwerten, die mit Leerzeichen voneinander separiert werden. Explizit definiert sind für HTML4 und XHTML bis Version 1.1 und XHTML+RDFa folgende Werte:

Alternate

Eine Alternativversion des Dokumentes, dabei kann etwa mittels hreflang angegeben werden, in welcher anderen Sprache eine Alternative vorliegt. Entsprechend kann es auch zusammen mit media' verwendet werden, um Alternativen für unterschiedliche Ausgabemedien anzubieten.

Stylesheet

Angabe einer Stilvorlagendatei, meist eine CSS-Datei. In Kombination mit 'Alternate' und title kann so eine Auswahl von Stilvorlagen bereitgestellt werden. Diese Möglichkeit ist für das Element a nicht sinnvoll und sollte bei diesem nicht verwendet werden.

Start

Anfang einer Gruppe von zusammengehörigen Dokumenten.

Next

Nächstes Dokument einer Gruppe von zusammengehörigen Dokumenten.

Prev

Vorheriges Dokument einer Gruppe von zusammengehörigen Dokumenten.

Contents

Inhaltsverzeichnis

Index

Index für ein Dokument

Glossary

Dokument mit Begriffs- und Abkürzungserklärungen

Copyright

Angaben zu Kopierrechten oder Urheberrechten

Chapter

Kapitel einer Gruppe von zusammengehörigen Dokumenten.

Section

Abschnitt einer Gruppe von zusammengehörigen Dokumenten.

Subsection

Unterabschnitt einer Gruppe von zusammengehörigen Dokumenten.

Appendix

Anhang einer Gruppe von zusammengehörigen Dokumenten.

Help

Hilfeseite, weitergehende Informationen

Bookmark

Vorschlag für ein Lesezeichen, in title sollte dann ein passender Text notiert sein.

Autoren können auch andere Werte verwenden. Damit diese eine Bedeutung haben, sollte diese allerdings eindeutig definiert werden, etwa anhand eine Profils (Attribute profile von head).

In XHTML+RDFa sind rel und rev übrigens allgemein verwendbare Attribute, im Kapitel über RDFa werden weitere dadurch definierte Attributwerte genauer erläutert.

Beispiel einer Navgationsmöglichkeit, um die Sprache manuell auf eine Alternative umzustellen:

<p>Alternative Sprachvarianten des Indexes: 
<a href="index.de.xhtml" hreflang="de" 
      rel="Index">de</a>, 
<a href="index.en.xhtml" hreflang="en" 
      rel="alternate Index">en</a>,
<a href="index.fr.xhtml" hreflang="fr" 
      rel="alternate Index">fr</a>,
<a href="index.it.xhtml" hreflang="it" 
      rel="alternate Index">it</a>,
<a href="index.es.xhtml" hreflang="es" 
      rel="alternate Index">es</a>,
<a href="index.kl.xhtml" hreflang="x-klingon" 
      rel="alternate Index">kl</a>
</p>

Natürlich besteht hier das Problem, dass Mitmenschen, die deutsch nicht verstehen, Probleme haben werden, die erste Zeile zu lesen. Immerhin stammen 'Alternative' und 'Index' aus dem Lateinischen und sind daher in vielen Sprachen ähnlich. Es kann allerdings auch helfen, zusätzlich zu den Sprachkürzeln noch kleine Flaggen als Piktogramme anzugeben, denn diese Methode ist weit verbreitet, um auf andere Sprachvarianten hinzuweisen, als Alterantivtext oder zusätzlich kann natürlich auch das Sprachkürzel gemäß hreflang zusätzlich direkt im Fließtext angegeben werden. Ebenfalls hilfreich kann es sein, eine Liste der Verweise einfach so anzulegen, dass jeder Listenpunkt in der Sprache des Verweiszieles auf dessen Inhalt verweist. Dazu ist dann natürlich bei jedem Listenpunkt auch für xml:lang der passende Wert zu setzen.

Attribut accesskey

Verwendet der Leser eines XHTML-Dokumentes eine Tastatur oder eine Funktionalität, die dieser gleichkommt, so kann dieser auch über Zugriffstasten Verweise oder auch bestimmte andere Elemente fokussieren oder aktivieren, wenn bei dem jeweiligen Element mit dem Attribut accesskey angegeben ist, mit welcher Taste dies Element aktiviert werden können soll.

Der Wert ist ein einzelnes Zeichen aus dem Vorrat der für das Dokument angegebenen Kodierung. Damit es verwendet werden kann, sollte das Zeichen natürlich auch über die Tastatur des jeweiligen Lesers (einfach) einzugeben sein, was die Auswahl oft auf die üblichen Buchstaben und Zahlen reduziert, denn es ist dem Autor der Seite natürlich nicht bekannt, was für eine Tastatur der Leser verwendet. Zudem sollte natürlich nur jedes Zeichen maximal einmal im Dokument als Zugriffstaste notiert werden, sonst ist das Verhalten nicht definiert.

Es ist in (X)HTML nicht festgelegt, wie Darstellungsprogramme Zugriffstasten zugänglich machen. Dies kann zum Beispiel auch passieren, indem zuvor eine spezielle Taste betätigt wird, worauf es dann eine Information gibt, welche Zugriffstasten im Dokument definiert sind. Bei anderen Programmen kann es auch sein, dass die Fokussierung direkt bei Betätigung der Taste erfolgt.

Dem Leser mitzuteilen, dass Zugriffstasten verfügbar sind und welche für welchen Zweck, ist Aufgabe des Autors. Dieser kann zum Beispiel in einem gesonderten Abschnitt oder einer gesonderten Seite des Projektes auf derartige Nutzungshilfen hinweisen.

Beispiel:

<p>
Springe zum 
<a href="#Anfang" accesskey="A">Anfang (Taste A)</a> 
oder zum 
<a href="#Ende" accesskey="E">Ende (Taste E)</a>
des Dokumentes.
</p>

Attribut tabindex

Der Leser kann in einem Dokument auch zu fokussierbaren Elementen mit dem Tabulator (oder einer äquivalenten Funktionalität des Darstellungsprogrammes) springen. Der normale, sogenannte Navigationsring folgt dabei der Reihenfolge, wie diese Elemente im Quelltext stehen und fährt am Ende mit dem Anfang fort.

Bei einem gut strukturierten Dokument wird dies oft bereits eine sinnvolle und hilfreiche Reihenfolge sein. Trotzdem kann es passieren, dass eine modifizierte Reihenfolge die Nutzbarkeit und Bedienbarkeit der Seite verbessern kann. Mit dem Attribut tabindex kann daher der Autor die Reihenfolge modifizieren.

Der Wert muss eine Zahl zwischen 0 und 32767 sein, im Bedarfsfalle auch mit führenden Nullen.

Das Element mit dem niedrigsten Wert für tabindex größer als 0 wird dann zuerst fokussiert, dann jenes mit dem nächsthöheren Wert und so weiter. Danach kommen erst die anderen fokussierbaren Elemente in der Reihenfolge dran, in welcher sie im Quelltext stehen. Zum Schluß kommen jene Elemente, für welche tabindex auf 0 gesetzt ist. Haben mehrere Elemente den gleichen tabindex, so erfolgt für eine solche Untergruppe die Fokussierung wiederum in der Reihenfolge, in der die Elemente im Quelltext stehen. Sind alle Element durchlaufen, so springt der Fokus im nächsten Schritt wieder auf das erste fokussierbare Element.

Ein Darstellungsprogramm hat meist auch eine Funktionalität, mit welcher die Elemente des Navigationsrings rückwärts durchlaufen werden können, ausgehend vom aktuellen Element.

Beispiel:

<div>
<h1>Projekt-Menü</h1>

<ul>
<li><a href="index.xhtml" tabindex="0">Heim</a></li>
<li><a href="kontakt.xhtml">Impressum</a></li>
</ul>

<h2><a tabindex="11">Bilder 2011</a></h2>

<ul>
<li><a href="#Q4" tabindex="400">viertes Quartal</a></li>
<li><a href="#Q3" tabindex="300">drittes Quartal</a></li>
<li><a href="#Q2" tabindex="200">zweites Quartal</a></li>
<li><a href="#Q1" tabindex="100">erstes Quartal</a></li>
</ul>

<h2>Bilder anderer Jahre</h2>

<ul>
<li><a href="2010.xhtml" tabindex="10">2010</a></li>
<li><a href="2009.xhtml" tabindex="09">2009</a></li>
<li><a href="2008.xhtml" tabindex="08">2008</a></li>
<li><a href="2007.xhtml" tabindex="07">2007</a></li>
</ul>

</div>

Sofern im gesamten Dokument sonst keine fokussierbaren Elemente vorhanden sind, beginnt die Fokussierung also bei tabindex 07, arbeitet sich die untere Liste weiter hoch bis 10, springt dann hoch zur 11, dann wieder ein Stück herunter zur 100 und arbeitet sich dann hoch bis zu 400. Das Impressum hat keinen tabindex, kommt also danach dran und als letztes der tabindex 0.

Die Nummer 11 zeigt übrigens, wie mit dem Element a ohne Attribut href auch der Inhalt einer Überschrift fokussiert werden kann, was im Allgemeinen ein Element ist, welches in XHTML allein nicht fokussierbar ist, hier aber inhaltlich einen Sinn ergeben kann, weil sonst unklar sein könnte, auf welches Jahr sich die folgenden Quartalsangaben beziehen.

Schon bei dem Beispiel stellt sich die Frage, ob dieses Hin- und Herspringen für den Leser wirklich so sinnvoll ist, was es immer zu bedenken gilt, wenn die normale Reihenfolge manipuliert wird. Wenn die hier mit tabindex erzwungene Reihenfolge für eine Tabulatornavigation dem Autor richtig und wichtig erscheint, warum ist die Reihenfolge ohne Tabulatornavigation dann ganz anders? Statt leichtfertig zu basteln, lohnen sich für den Autor solch kritische Fragen und Betrachtungen oft, um die allgemeine Struktur eines Dokumentes oder sogar eines gesamten Dokumentes zu verbessern.

Attribut target

Mit dem Attribut target kann der Autor einen Vorschlag machen, wo der referenzierte Inhalt angezeigt werden sollte.

Je nach Möglichkeiten des Darstellungsprogrammes und Voreinstellunungen und Wünschen des Nutzers des Darstellungsprogrammes wird das Darstellungsprogramm dann versuchen, einen für den Nutzer optimalen Darstellungsort bereitzustellen.

Das Attribut wurde ursprünglich eingeführt zusammen mit einer Rahmentechnik (englisch: frames) um mehrere Dokumente zu einer gemeinsamen Darstellung in einem Bereich zusammenzuführen. Diese Technik gilt weitgehend als veraltet und taucht daher als abgetrennte Variante von XHTML 1.0 auf, bei der Modulvariante von XHTML 1.1 gibt es auch ein entsprechendes Modul, welches aber nicht Bestandteil von XHTML 1.1 ist.

Allerdings kann das Attribut target auch unabhängig von der Rahmentechnik eine Funktion haben, weswegen es in XHTML 1.0 (transitional) und XHTML+RDFa definiert ist. In XHTML 1.1 und XHTML 1.0 (strict) darf es allerdings nicht verwendet werden. Der Grund für die zwischenzeitliche Streichung lag in der Verknüpfung mit der Rahmentechnik. Die Argumente, weswegen es dann doch wieder aufgenommen wurde, dürften darin liegen, dass es auch weitergehende Funktionen hat und es in einem Dokument, welches in einem anderen Dokument referenziert wird, welches Rahmentechnik verwendet, auch noch dazu in der Lage sein sollte vorzuschlagen, wo referenzierte Inhalte dargestellt werden zum Beispiel auch statt des Dokumentes mit der Rahmentechnik, um diese Anzeigemethode zu beenden.

Zum einen kann der Wert von target ein Name eines Rahmens sein, dort mit dem Attribut id, beziehungsweise in XHTML1.0 auch noch mit dem veralteten name angegeben. Ein solcher beginnt immer mit einem Buchstaben (a-z, A-Z).

Zum anderen einen gibt es reservierte Werte für target zur unabhängigen Verwendung von der Rahmentechnik. Die reservierten Werte sind folgende einschließlich Bedeutung:

_blank

Das Darstellungsprogramm sollte das referenzierte Dokument in einem neuen, unbenannten Fenster anzeigen, entsprechend neuer Möglichkeiten kann am Programm auch eingestellt sein, dass das Dokument in einem neuen Anzeigebereich (auch Reiter, englisch: tab) dargestellt wird.

_self

Das referenzierte Dokument sollte das referenzierende im selben Rahmen ersetzen.

_parent

Wird Rahmentechnik verwendet, so sollte das referenzierte Dokument im Elternrahmen darstellt werden, also dem nächsten übergeordneten. Wird keine Rahmentechnik verwendet, so ist das Verhalten das gleiche wie für '_self'.

_top

Wird Rahmentechnik verwendet, so sollte das referenzierte Dokument im obersten Fenster darstellt werden, alle anderen Rahmen ersetzend, die Rahmentechnik also beendend. Wird keine Rahmentechnik verwendet, so ist das Verhalten das gleiche wie für '_self'.

Beispiel für den Fall, dass sich ein Autor dagegen wehren muss, von anderen Autoren in anderen Projekten eingerahmt zu werden:

<p>
<a href="index.xhtml" 
   target="_top">Aus fremden Rahmen befreite 
                 Darstellung der Startseite</a>
</p>

Beispiel Vergleich von Dokumenten:

<p>
Vergleiche verschiedene Spaßvarianten des Liedes 
'Mein Hut der hat drei Ecken' mit dem Original auf dieser Seite:
</p>
<ul>
<li><a href="meinHuhnDasLegt3Eier-Meier.xhtml" 
  target="_blank">Mein Huhn das legt drei Eier</a> (Meier)</li>
<li><a href="meineWurstEsseIchIn3Happen-Wegener.xhtml" 
  target="_blank">Meine Wurst esse ich in drei Happen</a> (Wegener)</li>
<li><a href="meinMannDerHat3Geliebte-Schmitt.xhtml" 
  target="_blank">Mein Mann der hat drei Geliebte</a> (Schmitt)</li>
</ul>

Verweise und Dokumentenstrukturen

Die entstehenden Strukturen

Die Verweise bestimmen die Struktur eines gesamten Projektes. Dadurch können Sie festlegen, wie der Besucher sich in Ihrem Projekt bewegen kann.

Es gibt insgesamt vier Strukturen, die durch Verweise entstehen können:

1. Lineare Struktur: Hier gelangt der Benutzer in einer bestimmten Reihenfolge von einer Seite aus zu einer anderen. Der Benutzer nimmt dabei eine passive Rolle ein.
2. Baumstruktur: Der Benutzer ist in einer aktiven Rolle. Er hat die freie Auswahl zwischen mehreren untergeordneten Seiten.
3. Netzstruktur: Der Benutzer hat hier eine hohe Interaktivität. Er kann von jeder Seite aus zu einem beliebigen Seite springen. Dabei kann er die Struktur nur schwer überblicken.
4. Sternstruktur: Diese Struktur orientiert sich sehr am Inhalt der Seite. Der Benutzer kann aussuchen, zu welcher Seite er von einer Seite aus gelangen kann. Das wird häufiger in digitalen Lexika benutzt.

Meistens verwendet man in einem Projekt eine Mischung aus mehreren Strukturen.

Aufgabe 9

1. Erstellen Sie ein Verzeichnis. Nennen Sie es "aufgabe_9".
2. Erstellen Sie im Verzeichnis "aufgabe_9" ein Unterverzeichnis. Nennen Sie es "aufgabe_9b".
3. Erstellen Sie im Verzeichnis "aufgabe_9" eine neue Seite. Nennen Sie sie "verweise" und speichern Sie sie ab.
4. Erstellen Sie das Grundgerüst der Seite.
5. Die Seite soll den Titel "Verweise" bekommen.
6. In der ersten Überschriftsebene soll "Europäische Union" stehen.
7. Erstellen Sie einen externen Verweis. Es soll auf folgende Adresse verwiesen werden: "http://de.wikipedia.org/wiki/Eu". Für die Betrachter soll der Text "Hier gelangen Sie zum Thema EU in deutschen Wikipedia" erscheinen.
8. Speichern Sie die Wikipedia-Seite in Ihrem Unterverzeichnis "aufgabe_5b" ab.
9. Erstellen Sie im Dokument "verweise.html" einen Verweis auf das gespeicherte Dokument "Eu.htm", das im Unterverzeichnis "aufgabe_5b" liegt. Die Betrachter sollen auf dem Bildschirm den Text "Sollte die Wikipedia nicht online sein, dann gelangen Sie hier zu einem Offline-Dokument von Wikipedia (Stand TT.MM.JJJJ)".
10. Stellen Sie die beiden Verweise in einer ungeordneten Liste auf.
11. Fügen Sie "Mitgliedstaaten" in der zweiten Überschriftsebene ein.
12. Nun listen Sie alle Mitgliedsstaaten der EU in einer geordneten Liste auf. Aktuelle Mitgliedsstaaten finden Sie auf http://de.wikipedia.org/wiki/Mitgliedstaaten_der_Europäischen_Union
13. Versuchen Sie mit Hilfe eines Ankers vom letzten Mitgliedstaat zum ersten Mitgliedstaat zu gelangen.
14. Unter der dritten Überschriftsebene Kontakt soll Ihre E-Mail-Adresse als Kontaktmöglichkeit angegeben werden.
15. Dazu notieren sie "Bei Problemen wenden Sie sich bitte an folgende E-Mail-Adresse".
16. Fügen Sie zum Schluss einen Verweis auf Ihre E-Mail-Adresse ein.

Lösung

Zurück zu Aufzählungen | Hoch zu XHTML | Vor zu Grafiken