Die Hyperlinks oder üblicherweise einfach nur Links genannt sind Verknüpfungen und Verweise auf die eigene Internetpräsenz oder eine externe Website. Sie bilden eine Grundlage des World Wide Web.Links bilden auch die Grundlage der eigenen Webpräsenz in dem diese auf interne Seiten verlinken, ein bestimmtes Thema aufrufen oder einen Download anbieten. Verweise machen es möglich, der Seite eine Struktur zu geben in dem man beispielsweise Menüs aufbaut oder Seiten und Artikel untereinander verlinkt. Verlinkungen auf andere Websites sind natürlich ebenso relevant.
Navigation
1. Aufbau von Links
Alle Verweise sind im Grunde gleich Aufgebaut und zwar so :
<a href="Adresse"> Inhalt </a>
Als Adresse wird natürlich angegeben wohin verlinkt wird. Als Inhalt kann meist angegeben werden was man will, es könnte ein ganzer Text als Link markiert werden oder auch nur ein Wort. Auch Bildern und anderen Elementen können Links gesetzt werden.
Des Weiteren kann man dem Link ein bestimmtes Zielfenster zuweisen. Dies geschieht über das Attribut target=”". Es gibt zwei Optionen entweder “_blank” oder “_self”. Mit “_blank” öffnet man ein neues Fenster oder einen neuen Tab. Meist wird ein neuer Tab geöffnet wenn man dennoch in einem eigenen Fenster öffnen will, müsste man JavaScript verwenden. Mit “_self” wird es dann natürlich im aktuellen Fenster geöffnet.
2. Interne Verlinkungen
Für die interne Vernetzung benutze ich oft den direkten Pfad, zum Beispiel: href=”http://www.einfachphp.de/html”. Es wäre aber auch möglich, von Seite1 auf Seite 2 zu verlinken indem man einfach nur den Pfad href=”seite2.html” angibt, aber da dies meiner Meinung nach öfter zu Problemen führen könnte lieber den direkten Pfad. Mit “../” kommt man übrigens eine Ebene höher. Wenn also ein Dokument eine Ebene höher liegt bzw. im darüber liegenden Ordner wird dieser durch hinzufügen von “../” erreicht. Das sähe so aus:
<a href="../seite0.html">Seite 0</a>
Falls eine Datei in einem Ordner befindet, der sich auf der Ebene des jetzigen Dokuments befindet erreicht man das folgendermaßen:
<a href="ordner/datei.html">Datei.html</a>
Dennoch gibt es noch eine andere Art der internen Verweisung und zwar innerhalb eines Textes bzw innerhalb einer Seite. Man kann sogenannte Anker setzen um zwischen diesen zu verlinken. Ein Beispiel dafür: Springe zum Seitenanfang. Diese Art der Verlinkung ist recht Simpel, man brauch einfach ein Element welches eine id=”" besitzt. In diesem Fall hab ich auf das Logo verlinkt welches die id=”logo” hat.
Um nun einen Link zu setzen nimmt man als href=”" die Id und setzt eine Raute davor, in diesem Fall sähe das so aus:
<a href="#logo">Springe zum Seitenanfang</a>
Da id=”", wie schon erwähnt, ein Universalattribut ist, lässt es sich jedem HTML-Element zuordnen. Ich habe Anker meist dort gesetzt, wo die Schrift schon formatiert ist, aber da dies manchmal nicht immer möglich ist, kann dafür Beispielsweise auch <span> benutzen, da dieses an der Schrift selber keine Änderungen vornimmt.
3. Externe Verlinkung
Externe Verlinkungen müssen über die direkten Links gesetzt werden, da es nun mal keine logische Verknüpfung auf dem Webserver gibt. Zum Beispiel:
<a href="http://de.wikipedia.org/"> Des Menschen treuer Ratgeber! </a>
Im Grunde muss hier nicht sehr viel beachtet werden!
4. Verknüpfung zu E-Mail Adressen
Es gibt auch die Möglichkeit E-Mail Adressen zu verknüpfen, dies geschieht ganz einfach, in dem man als Link ein “mailto:” und dann die E-Mail Adresse angibt.
<a href="mailto:schreib@mir.de"> Schreib Mir </a>
Damit wird nicht über den Browser eine E-Mail gesendet, sondern der Browser versucht das Standard-E-Mail Programm zu öffnen. Des Weiteren kann man gewisse Daten mit an die E-Mail übergeben, in dem man gewisse Parameter mit übergibt.
Die wären: CC, BCC, Betreff, Inhalt und weitere Empfänger.
Üblicherweise werden in einem URL Parameter mit ? eingeleitet, in diesem Falle auch und danach folgt der Name des Parameters ein “=” und dann der Inhalt. Bei mehreren Parametern werden diese durch ein Semikolon ; getrennt. Lediglich weitere Empfänger werden durch Komma und Leerzeichen getrennt, wobei dieses Leerzeichen und weitere Sonderzeichen codiert sind. Diese Codierungen sind:
Leerzeichen
!
#
%
*
/
<
>
?
Ä
ä
Ö
ö
Ü
ü
&
%20
%21
%23
%25
%2A
%2F
%3C
%3E
%3F
%C4
%E4
%D6
%F6
%DC
%FC
%DF
Die Parameter wären Betreff > subject, CC > cc, BCC > bcc, Inhalt > body.
Einen zweiten Empfänger fügt man also so hinzu:
<a href="mailto:smpl1@beispiel.de,%20smpl2@beispiel.de"> E-Mail an Zwei</a>
Einen Betreff würde man so hinzufügen:
<a href="mailto:mail@me.de?subject=%20der%20Betreff"> Email mit Betreff </a>
Einen CC würde man so hinzufügen:
< a href=”mailto:me@mail.de?cc=ich@mail.de”> Mail mit CC </a>
BCC und Betreff würde so aussehen:
<a href="mailto:me@mail.de?bcc=you@mail.de;subject=Hall%F6le%21"> Hallo </a>
5. Downloads
Downloads werden auch mit einem Link gesetzt, da es keine eigenen Befehl dafür gibt. Wenn eine Datei nicht vom Browser interpretiert werden kann, wird diese üblicherweise als Download angegeben oder ein Programm zum Öffnen wird vorgeschlagen. Demnach werden Downloads nicht anders angegeben als ein normaler Link:
<a href="http://mypage.de/downloads/info.rar"> Download </a>
Sollten Dateien zum Download angeboten werden, die Browser intern bearbeitet werden können, wie .html oder .txt, sollten diese archiviert werden in eine .zip- oder .rar-Datei. Diese werden üblicherweise als Download interpretiert.