Grafik als Navigationssymbole mit HTML
Grafiken verlinken und Anker hinzufügen
Lassen Sie uns ein einfaches Beispiel für die Verwendung einer Grafik als Verknüpfungspunkt konstruieren. Wenn Sie mehrere zusammengehörige Webseiten haben, zwischen denen man sich in gleichmäßiger Weise bewegen kann (beispielsweise vorwärts, rückwärts, zurück, hoch, an den Anfang und so weiter), ist es sinnvoll, ein Menü mit solchen Bewegungsoptionen am Anfang oder am Ende jeder Seite anzubieten, damit Ihre Leser genau wissen, wie sie ihren Weg durch Ihre Dokumente finden können.
Dieses Beispiel zeigt, wie Sie Symbole (Icons) verwenden, die zum Navigieren durch eine Gruppe linear zusammengehöriger Seiten benutzt werden können.
Sie haben drei Bildchen im PNG-Format: eines für vorwärts, eines für zurück, und ein drittes erlaubt Ihren Lesern, in den Hauptindex der gesamten Dokumentenstruktur zurückzuspringen.
Zunächst schreiben wir die HTML-Struktur, um diese Bildchen (Icons) verwenden zu können. Hier ist die Seite selbst nicht sonderlich wichtig, sodass wir nur den notwendigen Rahmen erzeugen. Abbildung zeigt, wie das Dokument anfangs aussieht.
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<p>
(Lobortis porttitor himenaeos tristique ligula molestie ultricies ad feugiat nam aliquam.)
</p>
<hr />
</body>
</html>
Nun ergänzen Sie am Ende des Dokuments mit Hilfe der <img />-Kennung die drei Grafiken (Abbildung zeigt das Ergebnis):
<img src="arrow_right_24.png" alt="next" />
<img src="arrow_left_24.png" alt="back" />
<img src="arrow_up_24.png" alt="up" />
Ergänzen Sie nun die Anker um die Grafiken, damit diese aktivierbar werden. Abbildung zeigt das gleiche Ergebnis, aber die Grafiken sind verlinkt.
<a href="html-grafik.html"><img src="arrow_right_24.png" alt="next" /></a>
<a href="html-info.html"><img src="arrow_left_24.png" alt="back" /></a>
<a href="index.html"><img src="arrow_up_24.png" alt="up" /></a>
Wenn Sie nun eines der Icons anwählen, so springt der Browser zu der im Verbindungs-Tag angegebenen Seite, gerade so, als hätten Sie normalen Verknüpfungstext dafür benutzt.
Wo wir gerade bei Text sind: Reichen die Icons, so wie sie sind, aus?
Wie wäre es, etwas Text hinzuzufügen, um zu beschreiben, was einen auf der anderen Seite der Verknüpfung erwartet? Sie können den Text sowohl innerhalb als auch außerhalb der Anker platzieren, je nachdem, ob er auch zum Anwählen der Verbindung benutzt werden soll oder nicht. In unserem Beispiel schreiben wir ihn außerhalb der Anker, sodass nur die Icons angewählt werden können. Zudem richten wir den unteren Teil des Textes und der Grafiken mit Hilfe des align-Attributs der <img />-Kennung aus. Schließlich arrangieren wir alles so, dass jedes Element in einer eigenen Zeile steht, da der zusätzliche Text sonst die Icons irgendwie auf mehrere Zeilen verteilen würde. Abbildung zeigt das fertige Menü.
<hr />
<p>
<a href="html-grafik.html"><img src="arrow_right_24.png" alt="next" /></a>
Gehe zur HTML-Grafik
<br />
<a href="html-info.html"><img src="arrow_left_24.png" alt="back" /></a>
Zurück zur HTML-Info
<br />
<a href="index.html"><img src="arrow_up_24.png" alt="up" /></a>
Zur Startseite
</p>
