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) |
|
© 2007 Impressum