Abschnitte zwischen zwei Dokumenten im HTML verbinden
Anker und Verknüpfungen im Dokument
Lassen Sie uns ein Beispiel mit zwei Dokumenten durchspielen. Diese beiden Dokumente sind Teile einer Online-Referenz klassischer Musik, in der jede Webseite die Verweise für einen bestimmten Buchstaben des Alphabets enthält (A.html, B.html und so weiter). Die ganze Referenz hätte auch so organisiert werden können, dass jeder Abschnitt in einer eigenen Datei steht, doch dann wäre eine ziemlich große Menge von Dokumenten zu verwalten, und die Leser hätten eine ziemlich große Menge von Dokumenten zu laden, wenn sie durch die Referenz blättern. Es ist in diesem Fall also günstiger, die zusammengehörigen Abschnitte in buchstabierten Gruppen zusammenzufassen.
Die erste Seite, um die wir uns kümmern, ist jene für den Buchstaben "M", deren erster Abschnitt in HTML so aussieht (Abbildung zeigt die Darstellung auf dem Bildschirm):
<html>
<head>
<title>Classical Music: M</title>
</head>
<body>
<h1>
M
</h1>
<h2>
Madrigals
</h2>
<ul>
<li>William Byrd, <em>This Sweet and Merry Month of May</em></li>
<li>William Byrd, <em>Though Amaryllis Dance</em></li>
<li>Orlando Gibbons, <em>The Silver Swan</em></li>
<li>Roland de Lassus, <em>Mon Coeur se Recommande à vous</em></li>
<li>Claudio Monteverdi, <em>Lamento d'Arianna</em></li>
<li>Thomas Morley, <em>My Bonny Lass She Smileth</em></li>
<li>Thomas Weelkes, <em>Thule, the Period of Cosmography</em></li>
<li>John Wilbye, <em>Sweet Honey-Sucking Bees</em></li>
</ul>
<p>
Secular vocal music in four, five and six parts, usually a capella. 15th-16th centuries.
</p>
<p>
<em>See Also</em> Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye
</p>
</body>
</html>
In der letzten Zeile ("Siehe auch:") wäre es ganz praktisch, zwischen den Namen der Komponisten und ihren jeweiligen Abschnitten irgendwo anders in der Referenz Verbindungen herzustellen. Hätten Sie das Verfahren, das Sie bereits in diesem Kapitel kennen gelernt haben, gewählt, so würden Sie hier eine Verbindung zwischen Byrd und dem Dokument B.html erzeugen. Wenn Ihre Leser dann die Byrd-Verbindung anwählen, würde der Browser Sie an den Beginn der Bs führen. Die armen Leser müssten dann durch alle Bs blättern (und es gibt viele davon: Bach, Beethoven, Brahms, Bruckner), um zu Byrd zu kommen. Eine Menge Arbeit für ein System, das vorgibt, Informationen so zu verknüpfen, dass man sie schnell und leicht finden kann.
Was Sie brauchen, ist also die Möglichkeit, das Wort Byrd in M.html direkt mit dem Abschnitt Byrd in B.html zu verbinden. Hier folgt der für die Verknüpfung relevante Teil von B.html. (Ich habe all die Bs vor Byrd entfernt, um die Datei für dieses Beispiel kürzer zu machen. Nehmen Sie an, sie wären noch da.)
In diesem Beispiel werden Sie die Verwendung der
<em>-Tags kennen lernen. Dieses Tag wird verwendet, um Text hervorzuheben. Im Browser wird die Hervorhebung durch kursive Stellen des Textes erreicht.
<html>
<head>
<title>Classical Music: B</title>
</head>
<body>
<h1>
B
</h1>
<!-- Ich habe alle B-Einträge vor byrd gelöscht, um das Listing kürzer zu halten -->
<h2>
Byrd, William, 1543-1623
</h2>
<ul>
<li>Madrigals</li>
<ul>
<li><em>This Sweet and Merry Month of May</em></li>
<li><em>Though Amaryllis Dance</em></li>
<li><em>Lullabye, My Sweet Little Baby</em></li>
</ul>
<li>Masses</li>
<ul>
<li><em>Mass for Five Voices</em></li>
<li><em>Mass for Four Voices</em></li>
<li><em>Mass for Three Voices</em></li>
</ul>
<li>Motets</li>
<ul>
<li><em>Ave verum corpus a 4</em></li>
</ul>
</ul>
<p>
<em>See Also</em> Madrigals, Masses, Motets
</p>
</body>
</html>
Was nun noch fehlt, ist ein Anker am Anfang des Textes zu Byrd. Sie können dann eine Verbindung zu diesem Anker von der "See also"-Datei (Siehe auch-Datei) unter M eingehen.
Wie im Anker und Verknüpfungen erzeugen beschrieben, brauchen Sie für einen Anker zwei Dinge: einen Anker-Namen und gegebenenfalls etwas Text, der vom Browser möglicherweise hervorgehoben wird, wenn das Dokument geladen wird. Das letztere ist einfach: Die Überschrift des Abschnitts eignet sich hervorragend dafür, da sie der Teil ist, zu dem Sie die Verknüpfung schaffen.
Für den Anker-Namen können Sie nehmen, was immer Sie mögen, aber jeder Anker in einem Dokument muss eindeutig identifizierbar sein. (Wenn Sie zwei oder mehr Anker mit dem Namen "Fritz" in demselben Dokument hätten, woher sollte der Browser dann wissen, an welche Stelle er springen soll, wenn eine Verbindung mit diesem Anker angewählt wird?) Ein kurzer und eindeutiger Anker-Name in unserem Beispiel wäre einfach "Byrd", da es nur eine Stelle in der Datei gibt, wo "Byrd" auftauchen könnte, und die liegt hier vor.
Nun können Sie den Anker selbst in Ihre HTML-Datei schreiben. Fügen Sie die <a>- Kennung in die Byrd-Überschrift ein, doch seien Sie hier vorsichtig. Wäre es normaler Text innerhalb eines Absatzes, so würden Sie einfach die ganze Zeile mit <a> umschließen. Wenn Sie jedoch einen Anker zu einem großen Textabschnitt hinzufügen, der selbst in einem Element enthalten ist (wie eine Überschrift etwa, ein Absatz, eine Anschrift, ein Zitat usw.), schreiben Sie den Anker innerhalb dieses Elements.
Mit anderen Worten, machen Sie es so:
<h2>
<a name="byrd"> Byrd, William, 1543 – 1623 </a>
</h2>
Aber nicht so:
<a name="byrd">
<h2>
Byrd, William, 1543 – 1623
</h2>
</a>
Das zweite Beispiel könnte Ihren Browser durcheinander bringen: Handelt es sich hier um einen Anker, der genauso formatiert ist wie der Text davor und mit einem absonderlich platzierten Überschriften-Tag, oder ist es eine Überschrift, die zugleich auch ein Anker sein soll? Wenn Sie korrekten HTML-Code, mit dem Anker innerhalb der Überschrift, in Ihrer Datei erzeugen, vermeiden Sie solche Konfusionen.
Man vergisst das leicht, besonders wenn Sie so arbeiten wie ich und erst den Text schreiben und dann später die Verknüpfungen und Anker hinzufügen. Es erscheint ja auch sinnvoll, einfach alles mit einer <a>-Kennung zu umgeben. Denken Sie es sich so: Wenn Sie nur ein einzelnes Wort verknüpfen wollten und nicht das gesamte Element, würden Sie die <a>-Kennung ja auch innerhalb der <h2>-Kennung schreiben. Mit der ganzen Textzeile zu arbeiten, ist auch nichts anderes. Behalten Sie diese Regel im Hinterkopf und Sie werden seltener durcheinander kommen.
Sie haben nun also Ihren Anker zu der Überschrift hinzugefügt, und sein Name ist "Byrd". Kehren Sie nun zu Ihrer Datei M.html zurück, in die Zeile mit dem "See Also".
<p>
<em> See Also </em> Byrd, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye
</p>
Sie erzeugen die Verknüpfung hier um das Wort Byrd ganz genauso, wie Sie auch jede andere Verknüpfung erzeugen würden.
Doch wie lautet die URL? Wie Sie im Anker und Verknüpfungen erzeugen gelernt haben, sehen URLs von Ankern so aus:
SeitenName#AnkerName
Wenn Sie also eine Verknüpfung zur B.html-Seite selbst aufstellen würden, hätten Sie folgende href:
<a href="b.html">
Da Sie eine Verknüpfung zu einem Abschnitt innerhalb dieser Seite eingehen, müssen Sie den Anker-Namen hinzufügen, um auf diesen Abschnitt hinzuweisen, und das sieht so aus:
<a href="b.html#byrd">
Achten Sie auf das kleine b. Bei Anker-Namen (generell) und Verknüpfungen (betriebssystemabhängig) wird die Groß-/Kleinschreibung berücksichtigt; wenn Sie #byrd in die href schrieben, würde Ihr Browser den Anker im B-Dokument womöglich nicht finden. Achten Sie darauf, dass der Anker-Name, wie Sie ihn im name-Attribut benutzt haben, auch genauso in der Verknüpfung nach dem "#" steht.
Ein Fehler, der oft gemacht wird, ist, dass das Nummernsymbol (#) sowohl im Anker-Namen als auch in der darauf hinführenden Verknüpfung eingesetzt wird. Das Nummernsymbol wird ausschließlich dazu eingesetzt, die Seite und den Anker in der Verknüpfung auseinander zu halten; Anker-Namen sollten niemals Nummernsymbole enthalten.
Mit dieser neuen Verknüpfung würde die Zeile "See Also" also so aussehen:
<p>
<em> See Also </em> <a href="b.html#byrd"> Byrd </a>, Gibbons, Lassus, Monteverdi, Morley, Weelkes, Wilbye
</p>
Und Sie könnten nun auch weitermachen und Anker und Verknüpfungen in all den anderen Teilen der Online-Referenz für die übrigen Komponisten einfügen.
Mit all Ihren Verknüpfungen und Ankern sollten Sie nun alles testen. Abbildung zeigt den Liederabschnitt mit der fertigen Verknüpfung zu Byrd.
Abbildung zeigt, was erscheint, wenn Sie die Byrd-Verknüpfung anwählen.
