Lektion 8: Links
In dieser Lektion werden Sie lernen, wie man Links zwischen Internetseiten setzen kann.
Was brauche ich um einen Link zu erstellen?
Um Links zu erstellen, benutzen Sie, was Sie schon die ganze Zeit beim HTML coden benutzen: ein Element. Ein einfaches Element mit einem Attribut und Sie werden zu jeder Seite, die Sie wünschen, einen Link setzen können. Hier ist ein Beispiel, wie z.B. ein Link zur Seite HTML.net aussehen könnte:
Beispiel 1:
<a href="http://www.html.net/">Hier ist ein Link zu HTML.net</a>
sieht im Browser wie folgt aus:
Das Element a steht für “anchor” (englisch für Anker). Das Attribut href ist die Abkürzung für “Hypertext REFerence” und gibt an, wohin der Link führen soll. Meist ist dies eine Internetadresse oder ein Dateiname.
Im obigen Beispiel hat das Attribut den Wert “http://www.html.net”, welches die voll ausgeschriebene Adresse von HTML.net ist. Diese werden auch URL (Uniform Resource Locator) genannt. Bitte beachten Sie, dass “http://” immer in den URLs angegeben werden muss. Der Satz “Hier ist ein Link zu HTML.net” ist der Text, der vom Browser als Link dargestellt wird. Nicht vergessen, das Element mit einem </a> zu schließen.
Was ist mit Links zwischen meinen eigenen Seiten?
Wenn Sie zwischen den Seiten der gleichen Webseite einen Link setzen möchten, müssen Sie nicht die ganze Adresse (URL) ausschreiben. Wenn Sie z.B. zwei Seiten erstellt haben (nehmen wir an, die eine heißt page1.htm, die andere page2.htm) und diese sind im selben Ordner gespeichert, dann ist im Link nur die Angabe des Dateinamens nötig. Unter diesen Umständen sähe ein Link von page1.htm zu page2.htm so aus:
Beispiel 2:
<a href="page2.htm">Zur Seite 2</a>
Wenn page2.htm in einen Unterordner mit dem Namen “ordner” liegen würde, könnte ein Link so aussehen:
Beispiel 3:
<a href="ordner/page2.htm">Zur Seite 2</a>
Umgekehrt würde ein Link von page2.htm (im Unterordner) zu page1.htm so aussehen:
Beispiel 4:
<a href="../page1.htm">Ein Link zur Seite 1</a>
Das ”../” zeigt auf den Ordner eine Ebene über der Position der Datei in der der Link eingefügt wurde. Mit dem gleichen System können Sie auch zwei oder noch mehr Ebenen überspringen. Für zwei Ebenen würde dies so aussehen: ”../../”.
Haben Sie das System verstanden? Als Alternative können Sie auch immer die komplette Adresse (URL) des Linkziels verwenden.
Was ist mit internen Links innerhalb einer Seite?
Sie können auch interne Links kreieren – z.B. ein Inhaltsverzeichnis am Anfang der Seite mit Links auf jedes nachfolgende Kapitel. Alles was Sie dafür verwenden müssen, ist das sehr nützliche Attribut id (“identification”) und die Raute (#).
Nutzen Sie das id-Attribut, um das Element zu markieren, welches Sie verlinken möchten, z.B.:
<h1 id="heading1">Überschrift 1</h1>
Nun können Sie einen Link zu diesem Element erstellen, indem Sie die Raute im Linkattribut verwenden. Das Rautezeichen ‘sagt’ dem Browser gewissermaßen, dass er auf der gleichen Seite bleiben soll. Nach der Raute muss die id des Tags folgen, auf den verlinkt werden soll, z.B.:
<a href="#heading1">Link zur Überschrift 1</a>
Klarer wird es sicherlich im folgenden Beispiel:
Beispiel 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link zur Überschrift 1</a></p>
<p><a href="#heading2">Link zur Überschrift 2</a></p>
<h1 id="heading1">Überschrift 1</h1>
<p>Text text text text</p>
<h1 id="heading2">Überschrift 2</h1>
<p>Text text text text</p>
</body>
</html>
sieht im Browser wie folgt aus:
Überschrift 1
Text text text text
Überschrift 2
Text text text text
(Bemerkung: Der Wert eines id-Attributes muss mit einem Buchstaben beginnen)
Kann ich noch etwas anderes verlinken?
Sie können auch einen Link zu einer e-mail-Adresse erstellen. Das wird nahezu genauso gemacht, wie ein Link zu einem Webdokument:
Beispiel 6:
<a href="mailto:niemand@html.net">e-mail an niemand at HTML.net senden</a>
sieht im Browser wie folgt aus:
Der einzige Unterschied zwischen einem Link zu einer e-mail-Adresse und einem Link zu einer Webdatei ist der, dass man anstatt der Adresse des Dokumentes “mailto:” gefolgt von der e-mail-Adresse schreibt. Wenn der Link angeklickt wird, öffnet sich das Standard-e-mail-Programm mit einer neuen leeren e-mail, die an die angegebene e-mail-Adresse adressiert ist. Bitte beachten Sie, dass dies nur funktionieren kann, wenn ein e-mail-Programm auf Ihrem Rechner installiert ist. Probieren Sie es aus!
Gibt es noch irgendwelche Attribute von denen ich wissen sollte?
Um einen Link zu erstellen, müssen Sie immer das href-Attribut verwenden. Zusätzlich dazu können Sie dem Link mit dem Attribut title noch einen Titel geben:
Beispiel 7:
<a href="http://www.html.net/" title="HTML.net besuchen und HTML lernen">HTML.net</a>
sieht im Browser wie folgt aus:
Das title-Attribut wird dazu benutzt, eine kurze Beschreibung des Links zu geben. Wenn Sie den Mauszeiger – ohne zu klicken – auf dem Link platzieren, erscheint der Text “HTML.net besuchen und HTML lernen”.