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>Text des Titels</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>Text des Titels</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>Text des Titels</title>
</head>
<body>
<h1><a name="anfang">Lange Seite</a></h1>
<p><a href="#kap02">Kapitel 2</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 -->
<h2><a name="kap02">Kapitel 2</a></h2>
<p><a href="#anfang">Seitenanfang</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 keine zu langen Namen. Namen dürfen keine Leerzeichen und keine deutschen Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein. Danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_), den Bindestrich (-), den Doppelpunkt (:) oder den Punkt (.).
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 die Elementverschachtelung immer in dieser Form:
<h2><a name="Ankername">Text der Überschrift</a></h2>
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.
Obwohl HTML nicht zwischen Groß- und Kleinschreibung unterscheidet, ist es in jedem Fall empfehlenswert, Ankernamen bei Ankern und Verweisen dorthin genau gleich zu schreiben. Einige Browser führen den Verweis nämlich nicht aus, wenn der Ankername beim Anker und beim Verweis dorthin unterschiedliche Groß-/Kleinschreibung verwendet.
Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie in jedem Fall auf einheitliche Groß-/Kleinschreibung achten, da XHTML im Gegensatz zu HTML Groß-/Kleinschreibung streng unterscheidet.
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