4. HTML: Links und Anker setzen

So kannst du Links auf Ankerstellen in der Seite, eigene und fremde Seiten oder auf Bilder in HTML-Seiten einfügen

In diesem Kapitel lernst du, wie man mit der a-Marke Text oder Bilder auf der Seite zu Ankerstellen und verweisende Links bestimmt, mit dem title-Attribut das Verweisziel beschreibt und Links in ein neues Fenster lenkt

Link auf andere Datei | Anker definieren | Link auf Anker setzen | mailto: | weitere Attribute
Wir brauchen: Computerraum

Wiederholung

Im letzten Kapitel haben wir gelernt, wie man mit HTML-Marken Bilder einfügt, generell mit Attributen Wertzuweisungen vornimmt, die Ausrichtung zum Text steuert und einen Rand um ein Bild erzeugt

Link auf eine andere Datei setzen

Mit der Marke <a href=""></a> bestimmst du eingeschlossenen Text oder ein Bild zum Link.

Ist das Verweisziel eine Datei, wird im Attribut href die Pfadangabe zur Datei, genau wie bei img im src-Attribut, angegeben. Befindet sich die Zieldatei im selben Verzeichnis, ist die Pfadangabe gleich dem Dateinamen.

Beispiel Link auf eigene HTML-Datei :

<a href="los_05.htm">Beispiel5</a>

Die neue Seite wird beim Anklicken im Browserfenster geöffnet.

Beispiel Link auf ein Bild:

<a href="schifahren_01.jpg">Bild von der Schifreizeit</a>

Das Bild wird beim Anklicken des Textes im Browserfenster geöffnet.

Befindet sich die Datei in einem anderen Verzeichnis, oder auf einem fremden Server, musst du die Regeln für Pfadangaben in HTML beachten, damit das Ziel vom Browser auch gefunden werden kann. Allgemeines über Pfadangaben in HTML findest du in HTML 3: Bilder einfügen/Pfadangabe.

Beispiel Link auf fremde HTML-Datei:

<a href="http://www.google.de/">Google Suche</a>

Es ist allgemeine Praxis, den Link auf eine fremde HTML-Seite in einem neuen Fenster zu öffnen. Die eigene Seite bleibt dadurch weiter geöffnet und man verliert seinen Besucher nicht auf ewig.
Mehr Information dazu im Absatz weitere Attribute unter target="".

Verweisender Text in der Marke <a href="">Verweisender Text</a> wird vom Browser automatisch durch Unterstreichen und farbige Darstellung hervorgehoben. Bilder dagegen erhalten einen farbigen Rand, der mit border="0" unterdrückt werden kann.

Zwischen den Marken steht der verweisende Text. Du solltest dir gut überlegen, wie der Inhalt des Links hier kurz und prägnant beschrieben werden kann. Der Besucher deiner Seiten sollte sich ein Bild davon machen, was ihn erwartet.

Anker im Text definieren

Was sind Ankerpunkte?

Ankerpunkte, engl. bookmarks (= Bucheinmerker, Seitenhalter) sind markierte Stellen innerhalb einer Datei, die mit einem Verweis direkt angesteuert werden können.
Der Benutzer erreicht diese Stellen im Text bequem per Mausklick auf einen verweisenden Link, ohne lange und umständlich scrollen zu müssen.

Stellen im Text, die als Ankerpunkt funktionieren sollen, werden mit der Marke <a name=""></a> eingefasst.
Dem Attribut name der Marke a wird ein selbstvergebener Name zugewiesen, unter dem die so markierte Stelle wiedergefunden werden kann. Damit alle Ankerstellen eindeutig sind, sollte jeder Name nur einmal vergeben werden.

(Mit JavaScript kannst du auch mehrere Anker des selben Namens über Indexnummern unterschiedlich ansprechen. Mit reinem HTML dagegen findet ein Link auf einen mehrfach vorkommenden Anker immer nur den ersten im Dokument notierten Anker.)

Wir öffnen den Quelltext unseres Beispiels mit dem Editor, die markierte Überschrift h4 soll zu einem Ankerpunkt bestimmt werden.

Dabei wird dem jeweiligen
sozialen und kulturellen Umfeld der Schule Rechnung getragen,
aber auch den individuellen St&auml;rken von Sch&uuml;lern und
Lehrern Raum gegeben.</p>
<h4>Im Zentrum des t&auml;glichen
Handelns stehen gleichwertig Unterricht
(traditioneller Unterricht und offene Lernformen),
Erziehung, Beratung und Gespr&auml;che.</h4>
<p>In diesem Arbeitsfeld geht es darum, die Schule nach Innen zu

Die Marken dafür sehen folgendermaßen aus:

<h4><a name="erstens">Im Zentrum des t&auml;glichen
Handelns stehen gleichwertig Unterricht
(traditioneller Unterricht und offene Lernformen),
Erziehung, Beratung und Gespr&auml;che.</a></h4>

Dem Attribut name wurde der Name "erstens" zugewiesen.

Zum ersten Mal stossen wir nunmehr auf die Verschachtelungsregeln der HTML. Beachte bitte das die a-Marke nur nackten Text, inline-Elemente oder Bilder enthalten darf! Blockelemente wie Überschriften sind verboten!
Eine Markierung in der Form <a name="erstens"><h4>bla bla bla...</h4></a> ist ungültig!

Auf das Aussehen der Datei im Browser hat die Markierung <a name="">/<a> keinen Einfluss. Dennoch hat sie eine große Wirkung - wenn wir nämlich ein Link auf diese Ankerstelle setzen, und das tun wir auch sogleich...

Hyperlink auf einen Anker setzen

Verweisende Links auf Ankerpunkte weiter unten im Text setzt man praktischerweise zu Beginn des Dokuments, wie in unserem Beispiel 6:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Schulprofil der Kapellenhauptschule</title>
</head>
<body>
<h1>Schulprofil der Kapellenhauptschule - Entwicklung einer
individuellen Schulhauskultur</h1>
<img src="img/kartusche.JPG"
alt="St&auml;dtische Volksschule"
width="320" height="240"
align="left" hspace="20">
<a href="#erstens">Unsere Ziele</a>
<p><em>Unsere Arbeit ist gepr&auml;gt vom engen Zusammenwirken von
Sch&uuml;lern, Kollegen, Schulleitung und Eltern. Ziel ist es,
einen Lern- und Lebensraum zu schaffen, der die Entwicklung der
Pers&ouml;nlichkeit der Sch&uuml;ler f&ouml;rdert und den
Bed&uuml;rfnissen einer gemeinwesenorientierten Schulgemeinschaft
entgegenkommt.</em></p>

Mit derm Attribut href="" legst du, wie schon vorher beim Verweis auf eine externe Datei, das Verweisziel fest.
Aber: ist das Ziel eine Ankerstelle, so wird der Name der Ankerstelle an der Absprungstelle duch ein Gatterzeichen (#) eingeleitet.

Achtung!
Das Gatterzeichen nie in der Wertzuweisung an das name-Attribut verwenden!

Klickt der Besucher nun auf das Link am Anfang des Dokuments, so springt der Browser blitzschnell an die Stelle, die du zuvor als Ankerstelle definiert hast.
Eine praktische Sache!

Übrigens kannst du auch Links auf Ankerstellen in externen (anderen) Dateien setzen. Der Browser zeigt dann die markierte Stelle ganz oben im Fenster an.
Beispiel:<a href="los_07.htm#mittendrin"></a>. Dazu musst du nur an die Pfadangabe ( hier = Dateiname) das Gatterzeichen und den Ankernamen anhängen, aber: alles in einem Stück schreiben, keine Leerzeichen verwenden!

Ein netter Service für den Besucher ist es übrigens auch, wenn du ihm am Ende des Dokuments einen Link anbietest, der ihn wieder zum Anfang des Dokuments zurückbefördert. (Dazu musst du natürlich schon einen Ankerpunkt am Anfang des Dokuments erstellt haben).

So etwas demonstriert dir Beispiel 7:

<html>
<head>
<title>nach oben</title>
</head>
<body>
<a name="oben">Hier ist Oben</a>
....
....
....
....
<a href="#oben">zur&uuml;ck nach oben</a>
</body>
</html>

Wie du gleich siehst, geht es auch kreuz und quer, denn die a-Marke kann sowohl das name- als auch das href-Attribut enthalten.
Das zeigt uns Beispiel 8

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>nach oben und nach unten</title>
</head>
<body>
Hier ist Oben, wenn du mich klickst geht es<br>
<a name="oben" href="#unten">nach unten</a>
...
...
...
...
<a href="#oben" name="unten">zur&uuml;ck nach oben</a>
</body>
</html>

Der mailto-Link

Öffne das Beispiel 9. Du findest die Adresse, Telefonnummern und eine E-Mail-Adresse kapellen.vs.stadt@augsburg.de, unter der man die Kapellenschule Augsburg erreichen kann. Diese Mailadresse kannst du mit HTML so bearbeiten, dass bei einem Klick auf die Adresse das E-Mailprogramm gestartet, eine neue E-Mail-Nachricht erzeugt und in sie automatisch die E-Mail-Adresse des Empfänger eingetragen wird.
Und so einfach ist es:

E-mail:<a href=
"mailto:kapellen.vs.stadt@augsburg.de">kapellen.vs.stadt@augsburg.de</a>

Du verwendest wieder das schon bekannte a href-Tag. Statt einem Dateinamen oder einem Anker schreibst du einfach die Adresse hinein, eingeleitet von dem Kürzel: mailto:

Die so markierte E-Mail-Adresse kannst du zusätzlich noch mit der Marke <address></address> einfassen. Das bewirkt eine kursive Darstellung des Textes und einen Absatz: Siehe Beispiel 10

<address>E-mail:<a href=
"mailto:kapellen.vs.stadt@augsburg.de">kapellen.vs.stadt@augsburg.de</a></address>

Weitere mögliche Attribute für a-Marken

Hier eine Übersicht über einige Möglichkeiten:

Attribute für a-Marken
Bedeutung	Attribut	Werte
Kurzbeschreibung des Verweisziels	title =	z.B. "Bilder vom Turnierspiel"
Sprache des Verweisziels	hreflang =	z.B. "de" für Deutsch, "en" für Englisch
Fenster, in dem der Link geöffnet werden soll	target =	"_blank" oder "_top" für neue Seite
bestimmt ein einzelnes Zeichen als Hotkey für den Hyperlink	accesskey =	z.B. "h"

Mit Hilfe des Attributs accesskey kann eine Taste bestimmt werden, mit der das Verweisziel direkt angesprungen wird. Zuvor muss allerdings die alt-Taste gedrückt werden. Das Ziel des Verweises wird in der Statusleiste (unterhalb des Browserfensters) eingeblendet. Durch Drücken der return-Taste wird der Verweis dann entgültig ausgeführt.

Beispiel: HTML- Schule [Alt]+[h]

<a href="html.htm" accesskey="h">HTML- Schule</a> [Alt]+[h]

Weiter geht's:

HTML-Schule