SELFHTML/Navigationshilfen HTML/XHTML Verweise (Links)
Projekt-interne Verweise
Verweise zu Dateien oder Quellen im Projekt
Anker definieren und Verweise zu Ankern
| SELFHTML/Navigationshilfen HTML/XHTML Verweise (Links) |
|
|
Projekt-interne Verweise |
|
|
|
| | |
Verweise zu Dateien oder Quellen im ProjektEin Web-Projekt besteht typischerweise aus mehreren bis vielen Einzelseiten, die miteinander verlinkt sind. Einleitende Bemerkungen dazu finden Sie im Abschnitt 
Informationsverteilung und Dateiorganisation.
Um Verweise auf andere Projektdateien zu definieren, empfiehlt es sich, relative Angaben zum Verweisziel zu machen. Das Projekt bleibt dadurch flexibler, und die Verweise funktionieren auch in anderen Umgebungen (z.B. solange Sie das Projekt lokal auf Ihrem PC erstellen und austesten wollen, oder wenn Sie es mal auf CD-ROM präsentieren möchten).
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Relative Verweise zu Dateien oder Quellen im Projekt</title>
</head>
<body>
<h1>Homepage</h1>
<p>Dies ist eine ganz einfache Homepage mit einem
<a href="zweiteseite.htm">Verweis zu einer anderen Seite des Projekts</a>.
Eine <a href="../../tabellen/anzeige/layout.htm">aufwendigere Homepage
mit projektinternen Verweisen</a> können Sie aber ebenfalls aufrufen.
</p>
</body>
</html>
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Relative Verweise zu Dateien oder Quellen im Projekt</title>
</head>
<body>
<div style="width:100%; border:thin solid gray; padding:5px">
<a href="index.htm">Homepage</a>
</div>
<h1>Zweite Seite</h1>
<p>Ja, hurra, geschafft!</p>
</body>
</html>
Das Beispiel zeigt zwei kleinere HTML-Dateien. Die erste - mit Namen index.htm - enthält einen Verweis zur zweiten Datei. Der Dateiname der zweiten Datei lautet zweiteseite.htm. Beide Dateien sind im gleichen Verzeichnis abgelegt. Deshalb genügt bei href die Angabe des Dateinamens ohne weitere Zusätze. Im Beispiel der Datei index.htm wird aber auch noch gezeigt, wie Verweise zu Dateien in anderen Verzeichnissen definiert werden. Die genaue Syntax solcher relativen Angaben wird im Abschnitt Mit relativen Pfadangaben relativ zum Basis-URI referenzieren beschrieben.
Die zweite Datei im Beispiel (zweiteseite.htm) enthält einen typischen "Rückverweis" auf die erste Seite, also auf die "Einstiegsseite". Ein Rückverweis ist kein spezieller Verweis, sondern einfach wieder ein Verweis auf die gewünschte Datei. Da beide Dateien im gleichen Verzeichnis liegen, genügt auch in diesem Fall wieder die Angabe des Dateinamens, also href="index.htm"
Der "Rückverweis" in der zweiten Datei wird im obigen Beispiel mit Hilfe eines allgemeinen Bereichs, dem ein paar CSS-Formate zugewiesen sind, optisch etwas aufgewertet. Er steht am Anfang des sichtbaren Dateikörpers und durch den Rahmen, den er dank CSS erhält, wirkt der Bereich wie eine Navigationsleiste. Es ist sehr empfehlenswert, solche typischen Navigationsverweise immer an der gleichen Stelle einer Seite zu notieren und optisch so zu gestalten, dass der Navigationszweck ersichtlich ist. HTML bietet keine speziellen Verweise oder gestalterischen Möglichkeiten für Navigationsleisten und Navigationsverweise an. Navigationsleisten müssen Sie mit den zur Verfügung stehenden Bordmitteln selbst kreieren. (Genaugenommen ist diese Aussage falsch: HTML bietet sehr wohl so etwas an, nämlich mit der Möglichkeit, logische Beziehungen zu definieren. Leider wird dies jedoch von den Browsern bis heute nicht unterstützt.)
Anker definieren und Verweise zu AnkernSie können innerhalb einer HTML-Datei Anker definieren. Dann können Sie Verweise zu solchen Ankern setzen, um einen Sprung genau an die Ankerstelle innerhalb der Datei zu veranlassen. Der Verweis kann in der gleichen Datei stehen. Dann wird einfach ein Sprung innerhalb der angezeigten Seite ausgeführt. Der Verweis kann aber auch in einer anderen Datei stehen. Dann wird die Zieldatei geladen, und der Browser springt, sobald er die Stelle mit dem Anker geladen hat, an die entsprechende Stelle innerhalb der Datei.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Anker definieren und Verweise zu Ankern</title>
</head>
<body>
<h1><a name="anfang">Lange Seite</a></h1>
<h2><a name="kapitel1" href="#kapitel1">Kapitel 1</a></h2>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->
<h2><a name="kapitel2">Kapitel 2</a></h2>
<p><a href="#anfang">Seitenanfang</a>, <a href="#kapitel2">Kapitel 2</a> oder
<a href="../projektintern.htm#anker">Anker definieren und Verweise zu Ankern</a></p>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
<!-- usw. lauter Trennlinien, um Raum zu schaffen -->
</body>
</html>
Ein Anker wird genau wie ein Verweis mit Hilfe des a-Elements erzeugt. Der Unterschied besteht darin, dass kein Attribut href notiert wird, sondern stattdessen ein Attribut name. Ein kompletter Anker sieht also so aus:
<a name="ankername">...</a>
Den Ankernamen können Sie frei vergeben. Vergeben Sie möglichst kurze, aber prägnante und lesbare Namen. Sie sollten im Ankernamen lediglich die lateinischen Buchstaben, die arabischen Ziffern sowie als Sonderzeichen höchstens den Unterstrich (_), den Bindestrich (-) und den Punkt (.) benutzen. Als erstes Zeichen des Namens sollten Sie einen Buchstaben wählen.
Diese Empfehlung ist eine Faustregel, die sich in der Praxis als sicher herausgestellt hat. Es gibt nämlich keine klaren und eindeutigen Vorschriften für Ankernamen. HTML 4 schränkt nicht ein, welche Zeichen Sie in Ankernamen verwenden dürfen. Demnach dürfen im name-Attribut alle in HTML zugelassenen Zeichen und Sonderzeichen notiert werden, z.B. <a name="Ein ♥ für Kinder">...</a> rein formal zulässig.
Trotzdem gelten einige Regeln dadurch, dass Ankernamen in einer URI auftauchen, sobald sie einen Verweis mit dem Anker als Ziel notieren. Diese Regeln der technischen Standards RFC 2396 und RFC 3986 sind aber immer noch sehr freizügig: Neben lateinischen Buchstaben (a-z bzw. A-Z) und arabischen Ziffern (0-9) sind zahlreiche Sonderzeichen erlaubt (/?:@.-_~!$&'()*+,;=). Alle anderen Zeichen, darunter das Leerzeichen und deutsche Umlaute, können nicht direkt notiert werden, sondern müssen kompliziert umschrieben werden. Das Zeichen wird mittels der Kodierung UTF-8 mit ein oder mehreren Bytes ausgedrückt. Die zweistelligen Hexadezimalwerte der Bytes werden nacheinander notiert, indem ihnen jeweils ein Prozentzeichen % vorangestellt wird. Zum Beispiel wird das Gatterzeichen # mit %23 umschrieben und der Umlaut ö mit %C3%B6.
Soweit die graue Theorie - denn die Praxis sieht ganz anders aus. Fast kein Browser unterstützt all diese Sonderzeichen in Ankernamen und verarbeitet Verweise auf solche Anker korrekt. Sie sollten sich daher auf die wenigen genannten Zeichen beschränken, die den verbreiteten Browsern keine Probleme machen.
Die Zurückhaltung beim Wählen geeigneter Ankernamen ist auch für die "Zukunftsfähigkeit" Ihrer HTML-Dateien sinnvoll. Denn seit HTML 4 können Anker alleine mit dem Universalattribut id anstelle eines a-Elements mit name-Attribut notiert werden. Dies hat einige Vorteile, denn Sie können bereits vorhandenen Elementen, z.B. Überschriften, id-Attribute zuweisen. Somit kann das a-Element eingespart werden:
<h2 id="ankername">Text der Überschrift</h2>
Manche alte Browser wie Netscape 4 verstehen jedoch nur die Notation <a name="ankername">...</a>. Der entscheidende Punkt ist nun, dass für das id-Attribut in HTML 4 sehr strenge Regeln gelten: Neben den lateinischen Buchstaben A-Z und den arabischen Ziffern sind nur der Unterstrich, der Bindestrich, der Punkt und der Doppelpunkt erlaubt. Sie sehen, diese Anforderungen stimmen mit der oben genannten Faustregel nahezu überein. Wenn Sie also momentan oder in Zukunft Anker mit dem id-Attribut realisieren möchten, sollten Sie diese Regel berücksichtigen.
Für XHTML gelten wieder andere Regeln für das Attribut name beim a-Element sowie das Universalattribut id. XHTML 1.0 erlaubt im Gegensatz zu HTML 4.x zwar unzählige Zeichen aus allen Schriftkulturen der Welt im name-Attribut (darunter deutsche Umlaute). Aber von den genannten Sonderzeichen sind lediglich der Unterstrich, der Bindestrich, der Punkt und der Doppelpunkt erlaubt. Gleichzeitig werden Anker in XHTML nicht mehr über das name-, sondern nur noch über das id-Attribut definiert, für das ähnliche Einschränkungen gelten. In abwärtskompatiblen XHTML-Dokumenten können Sie beide Attribute mit identischem Attributwert notieren, wie es unter Unterschiede zwischen XHTML und HTML: Verweise zu Ankern beschrieben ist:
<h2><a name="ankername" id="ankername">Text der Überschrift</a></h2>
Was Sie zwischen <a name="ankername"> und </a> als Inhalt notieren, ist das Sprungziel für Verweise, die zu diesem Anker führen. Es ist durchaus erlaubt, einen leeren Anker zu notieren, also <a name="ankername"></a>. Einige ältere Browser führen Verweise zu leeren Ankern jedoch nicht aus, weshalb es besser ist, den Anker immer um einen konkreten Inhalt zu setzen. Beachten Sie dabei aber, dass das a-Element selber ein Inline-Element ist und keine Block-Elemente als Inhalt haben darf. Wenn Sie also beispielsweise eine Überschrift als Anker definieren wollen, was ja durchaus typisch ist, dann notieren Sie wie im obigen Beispiel in der Überschrift den Anker und darin den Text der Überschrift.
Um innerhalb einer Datei einen Verweis zu einem in der Datei vorhandenen Anker zu notieren, gilt folgendes Schema:
<a href="#ankername">Verweistext</a>
Das Verweisziel beginnt also mit einem Gatterzeichen #, unmittelbar gefolgt vom Ankernamen.
Wenn der Verweis zu einem Anker in einer anderen Datei führen soll, wird zuerst die Datei adressiert. Hinter dem Dateinamen folgt das Gatterzeichen # und dahinter der Ankername.
Beim Definieren von Ankern sowie in Verweisen dorthin müssen Sie auf die gleiche Groß- und Kleinschreibung bei der Ankernamen achten. Denn gemäß dem HTML-Standard müssen Browser den Anker namens ankername nicht anspringen, wenn der Verweis auf einen Anker namens Ankername zeigt. Auch wenn dies viele Browser nicht so streng sehen, sollten Sie auf einheitliche Groß-/Kleinschreibung achten. Verzichten Sie möglichst auf Großschreibung und nutzen Sie einheitlich Kleinbuchstaben.
Wenngleich Browser beim Anspringen von Ankern zwischen Groß- und Kleinschreibung unterscheiden sollen, darf ein Anker unabhängig von seiner Groß- und Kleinschreibung nur einmal im Dokument vorkommen. Das heißt, dass die Anker <a name="Ankername">...</a> und <a name="ankername">...</a> nicht gleichzeitig in einem Dokument vorkommen dürfen, denn sie unterscheiden sich nur in der Groß-/Kleinschreibung. Zudem dürfen Sie <a name="ankername">...</a> nur einmal im Dokument notieren.
Daran anschließend gilt die Regel, dass das name-Attribut beim a-Element (und anderen) denselben Namensraum wie das id-Attribut besitzt. Das bedeutet, dass Sie z.B. den Anker ankername nicht gleichzeitig einmal mit <a name="ankername"> und einmal mit id="ankername" an einem anderen Elementen definieren dürfen. Wenn Sie also gleichzeitig beide Methoden nutzen, um einen Anker zu notieren, sollten Sie das id-Attribut direkt beim a-Element notieren: <a name="ankername id="ankername">...</a>. Dies ist wie beschrieben vor allen Dingen in XHTML-Dokumenten wichtig.
Bei Verweisen innerhalb einer Datei erzeugt der Web-Browser, wenn die Datei in einer HTTP-Umgebung angezeigt wird, keinen neuen Server-Zugriff, sofern er die Datei so vollständig in den Arbeitsspeicher geladen hat, dass er den Sprung ausführen kann.
Einige Browser, z.B. der Internet Explorer, kennen auch "intern reservierte" Ankernamen wie top. Wenn Sie also einen Verweis <a href="#top">...</a> notieren und kein Anker dieses Namens in der Datei existiert, springt der Browser beim Ausführen des Verweises an den Anfang der Seite.
Manche Browser haben Schwierigkeiten, zu Ankern zu springen, die innerhalb einer 
Tabelle notiert sind.
Es ist durchaus möglich, a-Elemente zu notieren, die sowohl ein href- als auch ein name-Attribut haben. Absichtlich selbstbezügliche Verweise können Sie beispielsweise so erzeugen:
<a name="hier" href="#hier">immer schön hierbleiben!</a>
|
| |
 |
Projekt-externe Verweise
|
 |
Verweise definieren und gestalten
|
| SELFHTML/Navigationshilfen HTML/XHTML Verweise (Links) |
|
© 2005 Impressum