====== Hyperlinks ======
Verweise sind ein entscheidender Bestandteil jedes Hypertext-Projekts des World Wide Web.

Mit Hilfe von Verweisen strukturiert man ein Projekt. Wenn man beispielsweise eine HTML-Datei mit einer Einstiegsseite und verschiedene HTML-Dateien für Themenseiten plant, braucht man in der Einstiegsseite Verweise zu allen Themenseiten und in jeder Themenseite einen Rücksprungverweis zur Einstiegsseite.\\
Erst dadurch wird aus der losen Dateisammlung ein zusammenhängendes Web-Projekt, eine Homepage. 

==== Grundlegender Aufbau von Verweisen ====
Für Verweise in HTML gibt es das a-Element (a = anchor = Anker) - ''<a>-Tag''. Damit jedoch ein Verweis aus diesem Element wird, ist das Attribut ''href'' erforderlich (href = hyper reference = Hyper(text)-Referenz). Als Wert an das href-Attribut weist man das gewünschte Verweisziel zu. Als Inhalt des a-Elements, also zwischen ''<a>'' und ''</a>'', steht der Text, der schließlich, meist unterstrichen bzw. andersfärbig, angezeigt wird, und durch Anklicken zum gewünschten Ziel führt.

===== Projekt-interne Verweise =====
Eine Homepage besteht meist aus mehreren Seiten, die mit Hilfe projekt-interner Verweise miteinander verlinkt sind.

<code html>
Hier kommst du auf die <a href="zweite_Seite.html">zweite Seite</a>.
</code>

Genau genommen spricht man hier von einem **relativen Hyperlink**. Diese verweisen auf Dateien, die sich im selben Verzeichnis wie die aktuelle Datei befinden. Um Seiten, die sich im selben Verzeichnis befinden, miteinander zu verknüpfen, reicht eine die Angabe des Dateinamens aus.

Neben relativen Hyperlinks gibt es auch noch **absolute Hyperlinks**. Diese enthalten die gesamte Pfadangabe.

=== Aufgabe ===
Öffne das Dokument Layout.html!\\
Füge in der für die Navigation vorgesehenen Zelle relative Hyperlinks zu den bereits erstellten Dokumenten ''Steckbrief.html'' und ''Zauberlehrling.html''.\\
Um die Benutzerfreundlichkeit der Homepage zu verbessern füge auf den genannten Seiten auch wieder einen Hyperlink zurück zur Startseite ein! 

==== Verweise zu Dateien und Quellen im Projekt ====
Mithilfe von Hyperlinks kann von jeder Position in einem HTML-Dokument auf eine andere beliebige Position **innerhalb** der gleichen Datei verwiesen werden.

Dazu sind folgende Schritte notwendig:
  * Definieren eines Verweisziels, auf das verlinkt werden soll: Dies erfolgt mithilfe des Attributs ''name''. ''<a name="Ankername">...</a>''
  * Setzen eines Hyperlinks zu dem Verweisziel: ''<a href="#Ankername">...</a>''.\\
Durch die Angabe der Zeichen ''#'' (Raute) vor einem Name wird auf eine Position innerhalb einer Seite verwiesen.

=== Aufabe ===
Öffen das Dokument "Hexenmeister.html"!
Kopiere den gesamten Text nochmals, damit ein längeres Dokument entsteht.
Nun füge einen Hyperlink "Ende" am Seitenbeginn ein, der auf einen Anker in der letzten Zeile verweist.


===== Projekt-externe Verweise =====
Um einen projekt-externen Verweis auf eine andere Internetseite zu setzen, sind absolute Hyperlinks notwendig. Es ist deshalb notwendig, die vollständige Internetadresse anzugeben.

=== Beispiel ===
<code html>
<a href="http://www.wetter.at">Wetter</a>
</code>

=== Aufgabe ===
Gehe wieder zum Dokument Layout.html!
Erweitere die Navigation um einen Link zur Homepage der Schule!

===== Verweis auf eine E-Mail-Adresse =====
<code hmtl>
<a href="mailto:Adresse">...</a>
</code>

Das Attribut ''mailto'' verweist auf eine E-Mail-Adresse. Bei einem Klick auf den Verweis wird das voreingestellte E-Mail-Programm gestartet und das Feld //Empfänger // mit der angegebenen Mail-Adresse ausgefüllt.

=== Aufgabe ===
Erweitere die Navigation in ''Layout.html'' um einen Verweis auf deine Mail-Adresse!



===== Farben der Links ändern =====
Hyperlinks können über drei Farbeinstellung auf einer Webseite hervorgehoben werden. Dies erleichtert den Besuchern die Übersicht, welche Links sie bereits besucht haben und welche nicht.

Die Standardfarben sind browserabhängig, können jedoch vom Benutzer geändert werden. Es besteht jedoch für den Ersteller einer Homepage die Möglichkeit mittels Attribute die Farben so festzulegen, dass sie zum Layout der Seite passen. Die Definition erfolgt direkt im ''<body>''-Tag.

<code html>
link="Farbe"
</code>
Mit dem Attribut ''link'' definiert man die Farbe für Verweise auf **noch nicht besuchte** Seiten.

<code html>
vlink="Farbe"
</code>
Mit diesem Attribut //(visited link = besuchte Seite) // definiert man die Farbe für Verweise auf **bereits besuchte** Seiten.

<code hmtl>
alink="Farbe"
</code>
Dieses Attribut //(activated link = aktivierter Verweis) // dient zum Definieren der Farbe für Verweise, die der Anwender **anklickt**.

=== Aufgabe ===
Definiere in ''Layout.html'' deine persönlichen drei Farbe für Hyperlinks.

=== Öffnen einer Verlinkung in einem neuen Fenster ===

<code html>
<a href="Zauberlehrling.html" target="_blank">Zauberlehrling</a>
</code>