|
Die Verlinkung verschiedener Objekte und Unterseiten kennen Sie bereits.
Bei längeren Unterseiten ist es oftmals jedoch zur besseren Navigation erforderlich bestimmte Stellen in derselben Seite verlinken zu können, weshalb Sie in diesem Teil noch Anker kennenlernen werden.
Zuerst jedoch zu den Überschriften:
Überschriften werden mit den Tags <h1>, <h2>, <h3>, <h4>, <h5> und <h6> definiert. Dabei steht das "h" in den Tags für "heading" (dt. Überschrift).
<h1> definiert die wichtigste Überschrift, welche am Größten hervorgehoben wird, bis <h6> werden die Überschriften dann immer kleiner. Die Tags <h1> bis <h6> müssen alle wieder geschlossen werden.
Die Überschriften-Tags erzeugen automatisch, falls benötigt, vor und nach der Überschrift einen eigenen Absatz (bzw. Zeilenumbruch). Deshalb zählt <h1> bis <h6> zu den sogenannten "Block-Elementen".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Übersicht der Überschriften</title>
</head>
<body>
<h1>1.Überschrift</h1>
<h2>2.Überschrift</h2>
<h3>3.Überschrift</h3>
<h4>4.Überschrift</h4>
<h5>5.Überschrift</h5>
<h6>6.Überschrift</h6>
</body>
</html>
> Listing 8.1: Übersicht der <h1>- bis <h6>-Tags (Online-Beispiel / Download)
Um auf dieselbe HTML-Seite an verschiedenen Stellen verlinken zu können, müssen Sie sogenannte "Anker" anlegen.
Dazu müssen Sie dem "name"-Attribut im <a>-Tag einen eigenen, einmaligen Namen zuweisen (der <a>-Tag stellt in diesem Fall keinen Link dar!).
Somit haben Sie schon einen Anker erstellt. Bedenken Sie jedoch immer, dass <a>-Tags immer geschlossen werden müssen.
Anker bestehen nämlich lediglich aus einem <a>-Tag mit dem "name"-Attribut (ohne "href"-Attribut!).
Durch Eingabe der normalen Adressierung gefolgt von "#" und dem Namen des Ankers kommen Sie dann sofort zu der Stelle, wo Sie den Anker (den <a>-Tag in obigem Beispiel) platziert haben.
Wenn sich der Anker auf derselben HTML-Seite befindet, wie der Link können Sie die Seitenadresse weglassen und nur "#test" z. B. als Adresse verwenden.
Beispiel für eine Adresse mit Anker: testseite.html#test
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Anker (1)</title>
</head>
<body>
<a href="#test1">Link zum 1.Anker</a><br>
<a href="#test2">Link zum 2.Anker</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="test1"></a>
Hier ist der 1.Anker.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="test2"></a>
Hier ist der 2.Anker.
</body>
</html>
| Erklärung | In den beiden ersten Zeilen des <body>-Bereiches werden die Links gesetzt zu den Ankern gesetzt, die weiter unten gesetzt werden (Anker "Test1" z. B. mit "<a name="test1"></a>"). |
| Die vielen <br>-Tags im Beispiel dienen lediglich zur Veranschaulichung des Beispiels, denn wenn die Anker zu weit oben an den Links wären, würde kein Effekt bei einem Klick auf die Links zu sehen sein. |
Nicht nur <a>-Tags können als Anker fungieren, sondern auch die <h1>- bis <h6>-Tags.
Hierzu wird den Tags über das  Attribut "id" (dieselbe Funktionsweise wie das Attribut "name" beim <a>-Tag) ein jeweils eindeutiger Name zugewiesen.
Die Links auf Anker können hier, ebenfalls wie bei den <a>-Tags, mit der normalen Adressierung gefolgt von "#" und dem Namen des Ankers gesetzt werden.
Hinweis: Mit dem vordefinierten Anker "top" können Sie bei jeder HTML-Seite ganz an den Anfang zurückverweisen (er ist bereits vordefiniert, d. h. er funktioniert, ohne dass Sie diesen einfügen müssen). Mit "<a href="#top">nach oben</a>" können Sie also nach ganz oben wieder verweisen.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Anker (2)</title>
</head>
<body>
<a href="#test1">Link zum 1.Anker</a><br>
<a href="#test2">Link zum 2.Anker</a><br>
<a href="#test3">Link zum 3.Anker</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="test1">Hier ist der 1.Anker.</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2 id="test2">Hier ist der 2.Anker.</h2>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h5 id="test3">Hier ist der 3.Anker.</h5><br><br>
<a href="#top">nach oben</a>
</body>
</html>
| Zusammengefasst | Überschriften können mit den Tags <h1> bis <h6> erstellt werden, wobei <h1> die größte Überschrift erzeugt. |
| Sogenannte "Anker" ermöglichen es auf verschiedene Stellen einer HTML-Seite zu verweisen. |
| Wenn <a>-Tags als Anker verwendet werden sollen, muss diesem ein eindeutiger (d. h. einmaliger) Name per "name"-Attribut zugewiesen werden. |
| Sollen die <h1>- bis <h6>-Tags als Anker fungieren, wird ihnen ein eindeutiger Name mit Hilfe des "id"-Attributes zugewiesen. Beide Tags müssen geschlossen werden. |
| Verwenden Sie das Attribut "bgcolor" um die Hintergrundfarbe der ganzen Seite bzw. der ganzen Tabelle zu bestimmen. |
| Verlinkt werden kann auf einen Anker mit der normalen Adressierung gefolgt von "#" und dem Ankername. |
Weiter zu Teil 9 (Formulare [1]) >
(as)
|
MEMBERS LOGIN
SEITE DURCHSUCHEN
.Ausserdem lernen die meisten wie man so etwas was macht
