HTML-Tutorial

Details
Zuletzt aktualisiert am Sonntag, 01. Juli 2012 08:11
Geschrieben von Jan Pionzewski
Seite 7 von 10

 


6. Links (Verweise)

Ein wesentlicher Bestandteil von Internetseiten sind Verweise, oder auch Links genannt. Verweise können sich auf Punkte innerhalb einer HTML-Datei beziehen, oder auf fremde Webseiten, Downloads, etc. Den Möglichkeiten sind dabei praktisch keine Grenzen gesetzt.


6.1 Standard-Verweis auf eine andere Webseite

Mit dem HTML-Tag <a> lassen sich Verweise auf andere Webseiten setzen. Dazu muss das Attribut href="/..." angegeben werden, da hiermit das Verweisziel definiert wird.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="/seite2.htm">Seite 2</a></p>
<p><a href="http://www.webmasterparadies.de">Webmasterparadies.de - ... everything for your web-start</a></p>

</body>
</html>


Erläuterung:

Bei dem ersten Link wird die HTML-Datei "seite2.htm" geöffnet, die sich auf Ihrem Webserver im gleichen Verzeichnis befinden muss. Mit dem zweiten Link hingegen wird http://www.webmasterparadies.de angesteuert. Beide Links öffnen sich im gleichen Fenster bzw. Frame.


6.2 Verweisziele

Natürlich haben Sie auch die Möglichkeit, einem Link verschiedene Ziele zuzuordnen.

Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="/seite2.htm" target="_top">Seite 2</a></p>
<p><a href="/seite2.htm" target="_parent">Seite 2</a></p>
<p><a href="http://www.webmasterparadies.de" target="_blank">Webmasterparadies.de - ... everything for your web-start</a></p>

</body>
</html>


Erläuterung:

Mit dem zusätzlichen Attribug target="_top" wird die seite2.htm zwar im gleichen Browser-Fenster angezeigt, jedoch werden dabei z.B. die Frames entfernt. Das Attribut target="_parent" wird dann verwendet, wenn Sie beispielsweise mit Frames arbeiten und die seite2.htm im gleichen Frame geöffnet werden soll. Mit dem Attribut target="_blank" erreichen Sie, dass die Zielseite in einem neuen Browserfenster geöffnet wird - sinnvoll zum Beispiel für Links auf fremde Seiten.


6.3 eMail-Adressen verlinken

Auch eMail-Adressen lassen sich mit einem Hyperlink versehen. Voraussetzung für diese Methode ist, dass der Benutzer auf seinem Computer ein eMail-Programm installiert haben muss. Hat er dies nicht (z.B. weil er einen Web-Mailer wie GMX benutzt), funktioniert diese Methode nicht.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<p><a href="mailto:name@domain.de">eMail schreiben</a></p>
<p><a href="mailto:name@domain.de?subject=Hallo">eMail mit vordefinierter Betreffzeile schreiben</a></p>
<p><a href="mailto:name@domain.de?body=Sehr geehre Damen und Herren">eMail mit vordefiniertem Text schreiben</a></p>
<p><a href="mailto:name@domain.de,name2@domain.de?cc=name@domain2.de">eMail an zwei Hauptempfänger und einen cc-Empfänger schreiben</a></p>
<p><a href="mailto:name@domain.de?subject=Feedback&body=Sehr geehrte Damen und Herren">eMail-Link kombiniert mit Betreffzeile und vordefiniertem Text</a></p>

</body>
</html>

 

Erklärung:
Ein eMail-Link lässt sich mit verschiedenen Optionen versehen. Der erste Link in dem Beispiel schreibt eine ganz normale eMail ohne vordefinierten Text an den genannten Empfänger. Der zweite Link gibt einen entsprechenden Text in der Betreffzeile vor. Einen vordefinierten Text in der eMail (beispielsweise eine Anrede) lässt sich mit dem dritten Link bewerkstelligen. Der vierte Link hingegen schickt eine eMail an zwei Hauptempfänger und einen sichtbaren (cc) Kopieempfänger. Der letzte Link kombiniert eine vordefinierte Textzeile mit einem vordefinierten Text.

Hinweis:
Die genannten Optionen sind nicht als HTML-Standard definiert. Sie werden dennoch von vielen Browsern korrekt interpretiert. Eine Garantie für die Funktion bei jedem Browser und jedem Mail-Programm gibt es jedoch nicht.


6.4 Anker definieren

Wenn Sie innerhalb einer langen HTML-Seite eine Möglichkeit zur Navigation zur Verfügung stellen möchten, können Sie die Anker-Methode verwenden. Dabei wird ein Textbestandteil als Anker definiert. Der Verweis zeigt dann jedoch nicht zu einer anderen Webseite, sondern eben zu diesem Anker. So kann innerhalb eines langen Dokumentes per Mausklick hin und her gesprungen werden.


Beispiel:

<html>
<head>
  <title>Überschrift der Seite</title>
</head>
<body>

<h1><a name="anfang">Anfangsüberschrift, mit Anker. Das sind viele Linien</a></h1>
<p><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><

hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr></p>
<h2><a name="kapitel1">Kapitel 1, mit Anker</a></h2>
<p>Dies könnte ein sehr langer Beispieltext werden, wir verkürzen das ganze aber mit Linien</p>
<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>

<hr><hr><hr><hr>
<h2><a name="kapitel2">Kapitel 2, mit Anker</a></h2>
<p>Wenn Sie möchten, können Sie nun zu <a href="#kapitel1">Kapitel 1</a> zurückspringen, oder aber zum <a href="#anfang">Anfang</a></p>

</body>
</html>


Erläuterung:

Dieses etwas unkonventionelle Beispiel erzeugt eine HTML-Datei, die in verschiedene "Kapitel" aufgeteilt ist. Dazwischen finden sich unzählige, horizontale Linien, um das Prinzip zu deutlicher machen zu können.
Wenn Sie nun zum Ende dieser Datei scrollen, finden Sie dort zwei Links, mit denen Sie zu Kapitel 1, oder zum Anfang zurückspringen können.
Um Anker nun erfolgreich einsetzen zu können, müssen Sie dabei folgendes Beachten: Der Anker wird über den Tag <a name="ankername"> definiert. Wenn Sie nun einen Link zu diesem Anker setzen möchten, müssen Sie als Zielseite den Ankernamen mit einer vorangestellten Raute verwenden: <a href="#ankername">.

 


Kommentar schreiben

Sicherheitscode
Aktualisieren