Links
Was macht eine Webseite erst richtig funktionstüchtig? Klar, die Links! Ein Link ist grundsätzlich alles, was dich "von hier nach dort" kommen lässt. Dabei ist es egal, ob du dabei auf der Webseite bleibst - also hier in meiner Box auf den Link Bibliothek klickst und damit genau dort landest - oder ob du die Seite verlässt, zum Beispiel unter Weltentore den Link zu Jainohs Seite verfolgst.

In diesem Bereich findest du Anleitungen zum
Verlinken innerhalb eines Ordners
Verlinken in andere Ordner
Verlinken aus Ordnern heraus
Verlinken auf andere Webseiten
Verlinken der Email-Adresse
Textanker

 

Verlinken innerhalb eines Ordners

Der einfachste zu verlinkende Fall befindet sich im gleichen Ordner. Du hast jetzt also deine index-Datei erstellt und willst von dieser auf deine Geschichtenseite verweisen. Dazu musst du erst einmal eine neue Datei erstellen, bei der du genauso vorgehst wie bei der Erstellung der index-Datei - natürlich gibst du ihr einen anderen Namen. ^_~ Der Einfachheit halber und für die Übersicht nehme ich hier schlicht geschichten.html

Dann erst füge in der index-Datei den Link ein:

<a href="geschichten.html">Geschichten</a>

Zwischen den beiden " steht die zu verlinkende Datei. Entscheidend ist, dass du keinen Fehler machst. Groß- und Kleinschreibung muss exakt stimmen, deswegen empfehle ich dir dringend, dich gleich zu Beginn für eine Schreibweise von Dateien zu entscheiden: entweder alles groß oder alles klein: GESCHICHTEN.HTML oder geschichten.html Ich habe mich dafür entschieden, alles klein zu schreiben, weil ich es angenehmer zu tippen und leichter zu lesen finde.

Es dürfen auch keine Leerzeichen zu viel oder zu wenig drin sein; jeder Fehler führt dazu, dass es nicht funktioniert. Deswegen auch meine eindringliche Bitte zu Beginn, dass du dich für eine Endungsschreibweise entscheiden sollst, entweder .htm oder .html Was mir beim zu schnellen Tippen ab und an passiert, ist, dass ich nicht .html sondern .hmtl schreibe. Es funktioniert nicht. Probiere es ruhig aus. Es klappt nicht, du wirst sehen.

Was du dann zwischen die beiden Tags schreibst, ist für den Link an sich ziemlich gleichgültig. Ich habe hier Geschichten gewählt, da es sich ja um eben jene handelt. Genauso gut funktioniert aber auch Meine kleine Bibliothek oder Romane; sogar Knüddelfizz führt immer noch zu den Geschichten.

Beachte: Natürlich solltest du den Linknamen so wählen, dass man als Besucher weiß, was einen erwartet. Meine Linkseite verbirgt sich zum Beispiel hinter Weltentore, was ein relativ verbreiteter Begriff bei Fantasy-Seiten ist. In anderen Bereichen sieht das anders aus, und mit dem klassischen Links kann man wenig falsch machen.

Auf diese Weise funktionieren auch Links, die zurück auf eine Seite führen, von der man eben gekommen ist. Wenn man von der Geschichten-Seite aus wieder zurück auf die index-Seite linken will, kann man das auf diese Art einfügen:

<a href="index.html">zurück</a>

 

Verlinken in andere Ordner

Spätestens, wenn die Webseite etwas gewachsen ist, kommt man nicht mehr gut ohne "ordnende Ordner" aus, sonst verliert man die Übersicht. Bleiben wir also mal dabei, dass du Schreiberling bist und eine ordentliche Anzahl an Geschichten online stellen willst. Jede dieser Geschichten hat zwanzig Teile, die du der Übersicht halber einzeln verlinken möchtest. Siehe in meiner Bibliothek die einzelnen Geschichten an - jedes Kapitel ist einzeln anwählbar. Das ergäbe allein bei fünf Geschichten dieser Größenordnung 100 Dateien. Dazu kommen dann noch Grafiken, weil du es hübsch gestalten willst, außerdem die Dateien für die Bilder zu deinen Geschichten, etc. Na ja, dass hier Chaos vorprogrammiert wäre, ist leicht einzusehen.

Der fiktive Titel einer deiner fiktiven Geschichten lautet für dieses Beispiel "Der Tag, an dem der Regen kam". Erinnere dich zuerst an die Regel, dass zu lange Dateinamen keine gute Idee sind. ^_~ Mit "Regen" weißt du aber, was gemeint ist. In dem Ordner Homepage erstellst du nun einen Ordner namens regen (← Achte auf die Schreibweise!). In diesem Ordner erstellst du eine Datei, in der das erste Kapitel deiner Geschichte "Der Tag, an dem der Regen kam" enthalten ist. Benenne es logisch, zum Beispiel regen01.html

Jetzt kehre zu der Seite geschichten.html zurück. Unter den fett geschriebenen Titel "Der Tag, an dem der Regen kam" setzt du den Link zum ersten Kapitel:

<b>Der Tag, an dem der Regen kam</b>
<br><a href="regen/regen01.html">Teil 1</a>

Das System ist nicht schwer zu verstehen, gell? Vor dem Dateinamen sitzt ein / und davor einfach der Name des entsprechenden Ordners. ^_^ Natürlich gilt auch hier: ganz genau auf die Schreibweise achten!

Auf diese Weise kannst du (nahezu) beliebig viele Ordner ineinander stecken. Du willst der Übersicht wegen alle Geschichten in einem Ordner haben? Sicher! Also legst du einen Ordner namens bibliothek an, in den du den Ordner regen verschiebst. Den Link von geschichten.html musst du dann wie folgt verändern:

<a href="bibliothek/regen/regen01.html">Teil 1</a>

Ein weiteres Beispiel gefällig? Die Geschichte "Schatten" bekommt im Ordner bibliothek einen Ordner namens schatten, das elfte Kapitel benennst du mit schatten11.html. Der Link von der Seite geschichten.html sieht dann wie folgt aus:

<a href="bibliothek/schatten/schatten11.html">Teil 11</a>

Oder zum Beispiel eine Kurzgeschichte namens "Die Träume des Magiers" im Ordner kurzgeschichten im Ordner bibliothek:

<a href="bibliothek/kurzgeschichten/traeume.html">Die Träume des Magiers</a>

 

Verlinken aus Ordnern heraus

Natürlich kann mit mit dem Zurück-Knopf des Browsers wieder auf die Seite gelangen, auf der du die Geschichten in der Übersicht präsentierst. Aber netter ist es, wenn du einen eigenen Link dafür anbietest. Rein in die Ordner geht es mit den Namen - und raus? Ganz einfach, mit Punkten.

<a href="../../geschichten.html">Zurück zur Bibliothek</a>

Jeder Ordner, der überwunden werden muss, ist mit ../ zu kennzeichnen. Hast du also im Ordner geschichten eine Datei, von der aus du auf index.html verlinkst, sieht das so aus:

<a href="../index.html">Zur Startseite</a>

 

Verlinken auf andere Webseiten

Die meisten Webseiten haben eine Seite, die ganz allein den Seiten gewidmet ist, zu denen verwiesen wird, weil sie aus dem einen oder anderen Grund gefallen. Dazu muss man die komplette Adresse ausschreiben. Das sieht dann zum Beispiel wie folgt aus:

<a href="http://www.jainoh.de">Jainoh</a>

Als guter Stil gilt dabei, wenn sich die Seite in einem neuen Fenster öffnet - ganz besonders, wenn man mit Frames (siehe den entsprechenden Unterpunkt) arbeitet. Das hat auch den Vorteil, dass sich für den Besucher die Ausgangsseite nicht schließt, wenn er mehreren interessanten Links folgen will. Dazu fügt man in den Tag target=_blank ein, was sich dann so schreibt:

<a href="http://www.jainoh.de" target=_blank>Jainoh</a>

 

Verlinken der Email-Adresse

<a href="mailto:webmaster@chaosgoettin.de">Mail mir!</a>

Damit öffnet sich automatisch ein leeres Mailformular, in dem die Adresse webmaster@chaosgoettin.de als Empfänger eingetragen ist. Natürlich solltest du da deine eigene Email hinschreiben. ^_~ mailto ist schlicht mal wieder englisch und steht logischerweise und nicht schwer zu erkennen für "Mail an".

 

Textanker

Textanker sind Links innerhalb einer Datei - also genau das, mit dem du von oben in diesem Dokument an diese Stelle, das Thema "Textanker", springen kannst. In meiner Bibliothek ist ein weiteres Beispiel dafür zu finden: Von der Navigation aus kann man zum Beispiel zu den unvollendeten Geschichten springen, die man ja auch durch scrollen erreichen könnte. Das hier ist auch ein Textanker: nach oben

Dazu muss man zwei Dinge einrichten. Einmal die Stelle, von der aus man linkt, also den Link an sich. Zum Zweiten die Stelle, zu der man springen möchte. Der Link, um nach hier unten im Dokument zu springen, sieht folgendermaßen aus:

<a href="#textanker">Textanker</a>

Die Raute # sagt dem Browser, dass er nirgends sonst als nur in diesem Dokument suchen muss. Der Name, der nach der Raute folgt, ist frei wählbar, sollte aber dir zuliebe etwas sein, das Sinn ergibt - wie so oft. ^_~

Das Gegenstück dazu sieht so aus:

<a name="textanker">Textanker</a>

Die beiden Tags umfassen das Wort, zu dem der Link hinführt, in diesem Fall die sich über dem Abschnitt befindliche Überschrift "Textanker". (Ich habe die Tags weggelassen, die die Überschrift fett machen, um nicht zu verwirren.) Der Name, den du hier vergibst, muss exakt mit dem übereinstimmen, den du im Link gewählt hast - allerdings ohne die Raute.

Ein weiteres Beispiel aus diesem Dokument, dieses Mal inklusive der Tags für Fettschrift:

Der Link:
<a href="#andere">Verlinken in andere Ordner</a>

Die Stelle, zu der gesprungen wird:
<a name="andere"><b>Verlinken in andere Ordner</b></a>