Online HTML-Kurs (Teil 5): Links mit dem a-Tag
Mit dem <a>-Tag kann man einen Ankerpunkt oder ein Linkziel definieren. Dazu benötigt man aber wieder elementspezifische Attribute um den Unterschied klar zu machen.
Zunächst ein Beispiel für einen Ankerpunkt innerhalb einer Webseite:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<a href="#Anker1">Zu Anker 1 springen</a>
<a name="Anker1"> Hier beginnt Punkt 1</a>
... Inhalt ...
</body>
</html>
Das erste <a>-Tag ist im Code deutlich sichtbar. Das zweite <a>-Tag ist als unser Ankerpunkt unsichtbar. Im ersten <a>-Tag legen wir über das Attribut "href" und dem # fest, dass wir zu einem Punkt innerhalb des Dokumentes springen möchten. Dieser Punkt muss aber auch benannt sein, was mit dem "name"-Attribut an unserem Ankerpunkt passiert.
Nützlich ist die Geschichte mit den Ankerpunkten, wenn man ein langes Dokument hat und am Anfang der Seite so etwas wie ein Inhaltsverzeichnis erstellt, über das man direkt zum gewünschten Unterpunkt springen kann.
Nun ein Beispiel für einen Link welcher einen Verweis auf eine andere Webseite oder einen Download setzt:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<a href="http://www.google.de">Link zu Google</a>
</body>
</html>
Über das Attribut "href" wird im Allgemeinen auf andere Dinge referenziert. Dies kann eine externe Webseite sein oder aber auch eine interne. Verweist man auf ein internes Ziel, so benötigt man eigentlich keine "http://www."-Angabe. Man kann direkt auf den Pfad zeigen, wo das Objekt liegt:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<a href="Dokumentation/Hilfe.html">Link zur internen Hilfeseite</a>
</body>
</html>
Außer dem Aufruf eine Webseite oder der Verweis auf eine herunterladbare Datei, kann man auch noch auf E-Mail-Adressen verweisen:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<a href="mailto:MEINE_ADRESSE@gmx.de">E-Mail von Mir</a>
</body>
</html>
Um eine Mailadresse anzusprechen, muss dringend ein "mailto:" vor der E-Mail-Adresse stehen, da der Browser sonst versucht eine Datei oder eine Webseite dieses Namens zu finden.
Außer dem "href"- und dem "name"-Attribut gibt es noch eine Reihe weiterer Attribute, die vom W3C unterstützt werden. Die beiden wichtigsten aber sind "target" und "title":
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<a href="http://www.google.de" title="Suchmaschine Google" target="_blank">Suchen</a>
</body>
</html>
Wenn wir nun mit der Maus über den Link fahren sehen wir den angegeben Titel. Dies ist die Aufgabe des "title"-Attributs. Das "target"-Attribut hat eine andere Bedeutung. Es definiert, in welchem Fenster oder Frame die neue Seite geöffnet werden soll. Die Angabe "_blank" gibt an, dass ein neues Browserfenster zum Öffnen des Links geöffnet werden soll. Mit "_self" würde es im gleichen Fenster geöffnet. Mit "_parent", "_top" und "EIGENERNAME" öffnet das Fenster in einem speziellen Frame. Zu Frames aber später mehr.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online HTML-Kurs (Teil 5): Links mit dem a-Tag
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/232
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren