Verlinkungen
Das Verlinken von Internetseiten oder anderen Dateien erfolgt über das Ankerelement <a>.
Um auf ein Ziel zu verweisen, wird das Pflichtattribut "href" (Hyperreferenz) benötigt, welches das Ziel als Wert zugewiesen bekommt.
Der sichtbare Teil des Links wird im Beispiel mit "Hier Klicken" repräsentiert.
<a href="Pfad zur Datei">Hier Klicken</a>
Das Ergebnis im Browser, sieht in etwa so aus.
Der Link führt natürlich ins Leere, weil der Pfad nicht existiert.
Interner Hyperlink
Wenn eine Webanwendung auf dem Computer erstellt oder auf einem Server geladen wird, dann befindet sich diese in einem Ordner. Von diesem Ordner aus können wir mit relativen Pfaden arbeiten. Das bedeutet, dass wir von unserer Ausgangssituation in eine bestimmte Richtung gehen. Zum Beispiel wollen wir von unserem Standpunkt aus in den Ordner "Bilder" und darin die Datei "Bild01.jpg" öffnen. Dann sieht der relative Pfad so aus:
<a href="Bilder/Bild01.jpg">Hier Klicken</a>
Nach dem Klicken öffnet sich die Datei Bild01.jpg aus dem Ordner.
Um einen Ordner zurück zu gehen, wird die Zeichenfolge ../ verwendet.
<a href="../Grafiken/Grafik01.jpg">Hier Klicken</a>
Jetzt gehen wir zuerst einen Ordner zurück und dann erst gehen wir in den Ordner "Grafiken" und greifen auf die Datei "Grafik01.jpg" zu, die sich darin befindet.
Externer Hyperlink
Wer von seiner Webanwendung auf eine externe Datei oder Seite verlinken möchte, der verwendet anstelle der relativen Pfade einfach die absoluten Pfade.
<a href="http://www.example.com">Hier Klicken</a>
Der absolute Pfad kann selbstverständlich auch für die Verlinkung innerhalb der eigenen Anwendung verwendet werden.
Link zu einer Position
Wenn eine Seite doch etwas größer wird und man einen Link auf derselben Seite zu einer anderen Position setzen möchte, dann verwendet man das #-Zeichen und eine Id für das Element.
Mit dem #-Symbol verweisen wir auf das Element mit der Id.
<p id="oben"></p>
<a href="#oben">Hier Klicken um nach Oben zu gelangen</a>
<a href="#unten">Hier Klicken um nach Unten zu gelangen</a>
<p id="unten"></p>
Weiter mit Formulare