Websiteentwicklung: XHTML: Verweise
Aus Wikibooks
Inhaltsverzeichnis |
Auch ohne Links käme man im Internet nicht weit. Der Link verbindet die Seiten einer Hompepage, verbindet Homepages mit Homepages oder er erleichtert die Navigation innerhalb einer Seite. Wir unterscheiden zwei verschiedene Arten von Links einmal die externen, die Homepages oder Seiten miteinander verbinden und andererseits die internen Links, die die Navigation innerhalb der Seite erleichtern.
[Bearbeiten] Beispiel 1: externe Links
<a href="http://de.wikipedia.org/">die Wikipedia</a><br /> <a href="http://www.wikibooks.org/">Wikibooks - Inhaltsoffene Lehrbücher</a><br /> <a href="bilder.htm">Zum nächsten Kapitel</a>
[Bearbeiten] Erklärung
Die Links, egal ob externe oder interne, werden mit dem a-Tag definiert. Dann folgt das Attribut href="...". Anstelle der Punkte wird die Adresse der Seite geschrieben. Achtung: Wenn Sie auf eine andere Homepage verweisen, müssen Sie http:// voranstellen. Ist dies nicht der Fall, sucht der Browser nach einer Datei im gleichen Verzeichnis, die so heisst. Optional können Sie dann noch den Befehl target="..." schreiben. Das brauchen Sie dann vor allem bei Frames. Mit diesem Befehl bestimmen Sie, in welchem Zielfenster der Link geöffnet werden soll. Der Text im a-Tag erscheint dann auch auf dem Fenster des Surfers. Auf diese Textstelle muss der Surfer klicken, wenn er den Link benutzen will. Dieser Text kann beliebig lang sein. Er sollte aber das Ziel möglichst treffend beschreiben. Denn wenn sie schreiben, dass der Link zu einer Suchmaschine führt, und dann bei einer Pornoseite landet, kann das sehr verärgernd sein. Damit der Browser weiss, dass der Link nun "fertig" ist, wird das Tag mit </a> abgeschlossen.
Wenn Sie eine lange Seite mit viel Inhalt haben, können Sie irgendwo auf der Seite einen Link zu einer anderen Stelle schreiben. Sie können am Anfang der Seite ein kleines Inhaltsverzeichnis ertellen, und dann mit Hilfe der Links den Surfer zur richtigen Textstelle führen.
[Bearbeiten] Beispiel 2: Anker
<p id="oben"> Dies ist der Anfang der Seite. Scrollen Sie nun nach unten.<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> ...<br />...<br />...<br /> <a href="#oben">Nach oben</a></p>
[Bearbeiten] Erklärung
Als erstes müssen Sie dem Browser mitteilen, wo die Stelle ist, zu der gesprungen werden soll. Dazu geben sie einem beliebigen Element eine ID, wie hier im Beispiel id="oben" beim p-Element. Alternativ lässt sich eine Sprungmarke auch mit <a name="oben"> Text</a> oder auch <a name="oben" /> definieren.
Am Ende der Seite fügen Sie dann einen ganz normalen Link ein. Doch statt der Adresse der Seite schreiben Sie einen Gartenzaun # und dann den Namen der Stelle, zu der gesprungen werden soll. Der Gartenzaun sagt dem Browser, dass nun ein Anker folgt.
Sie können die internen und externen Links auch kombinieren. Der Link sieht dann folgendermassen aus:
<a href="datei.htm#name">An die Stelle "name" der Datei datei.htm gehen</a>
