Erstellen eines Verknüpfungs-Menüs im HTML
Webseiten Menü erstellen
Nachdem Sie bereits gelernt haben, wie Sie Listen erstellen, und etwas über Verknüpfungen erfahren haben, sind Sie in der Lage, Verknüpfungs-Menüs zu erstellen. Verknüpfungs-Menüs sind Verknüpfungen auf Ihrer Webseite, die in Listenform oder in irgendeinem anderen knappen, leicht lesbaren und leicht verständlichen Format angeordnet sind. Verknüpfungs-Menüs eignen sich hervorragend für Seiten, die hierarchisch angeordnet sind, für Inhaltsverzeichnisse und für die Navigation zwischen verschiedenen Seiten. Webseiten, die nur aus Verknüpfungen bestehen, organisieren ihre Verknüpfungen oft in Menüform.
Verknüpfungs-Menüs (Link Menus) sind kurze Listen von Verknüpfungen auf Webseiten, die Ihren Lesern einen schnellen Überblick über die Möglichkeiten geben, wohin sie von der aktuellen Seite aus springen können.
Der Sinn eines Verknüpfungs-Menüs besteht darin, kurze, beschreibende Begriffe für die Verbindung zu benutzen, mit entweder gar keinem weiteren Text unmittelbar nach der Verknüpfung oder mit weiteren Beschreibungen, die der Verknüpfung folgen. Verknüpfungs-Menüs sehen in einem eingerückten oder ungeordneten Listenformat am besten aus; Sie können aber auch Glossar-Listen oder einfache Absätze verwenden. Verknüpfungs-Menüs ermöglichen Ihren Lesern, die Liste der Verbindungen schnell durchzusehen, und erleichtern ihnen, das zu finden, wonach sie suchen, etwas, das schwieriger sein könnte, wenn Sie Ihre Verbindungen einfach im Text der Seite verbergen.
Beginnen wir mit einer einfachen Seitenstruktur: eine Überschrift der ersten Ebene und ein wenig einfacher, erklärender Text:
<!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>
</head>
<body>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<p>
Die Gestaltung Ihrer eigenen Webseite mit HTML. HTML bildet immer die Grundlage.
</p>
Nun fügen Sie die Liste hinzu, die Verknüpfungen enthalten wird, ohne die Verbindungs-Kennungen selbst. Es ist immer leichter, mit dem Verknüpfungs-Text zu beginnen und die richtigen Verbindungen später zu ergänzen. Für diese Liste verwenden wir die <ul>-Kennung, um eine eingerückte Liste einzelner Kapitel zu erzeugen. Sie könnten hier die <menu>-Kennung genausogut benutzen, nur die <ol>-Kennung wäre nicht angemessen, weil die Nummern andeuten würden, dass Sie die Kapitel in irgendeiner Weise klassifizieren wollen. Hier ist also die HTML-Liste der Kapitel; Abbildung zeigt, wie die Seite im Moment im Safari aussieht.
<ul>
<li><i>HTML - Info</i> by Darko Pipiv</li>
<li><i>HTML - Text gestalten</i> by Darko Pipic</li>
<li><i>HTML - Multimedia einbinden</i> by Darko Pipic</li>
<li><i>HTML - Tabelle erstellen</i> by Darko Pipic</li>
</ul>
</body>
</html>
Nun modifizieren Sie jeden Listeneintrag so, dass er die jeweils passende Verknüpfungs-Kennung enthält. Sie müssen die <li>-Kennung dort stehen lassen, da sie ja anzeigt, wo die Listeneinträge beginnen. Hier verbinden wir das Menü mit den Dateien auf dem lokalen Laufwerk im gleichen Verzeichnis, in dem auch diese Datei enthalten ist, wobei jede Datei die Besprechung eines bestimmten Kapitels enthält:
<ul>
<li><a href="html-info.html"><i>HTML - Info</i> by Darko Pipic</a></li>
<li><a href="html-text-gestalten.html"><i>HTML - Text gestalten</i> by Darko Pipic</a></li>
<li><a href="html-multimedia-einbinden.html"><i>HTML - Multimedia einbinden</i> by Darko Pipic</a></li>
<li><a href="html-tabelle-erstellen.html"><i>HTML - Tabelle erstellen</i> by Darko Pipic</a></li>
</ul>
Das Menü der Kapitel sieht gut aus, obwohl es ein wenig spärlich ist. Ihre Leser wissen weder, um welche Art von Kapitel es sich handelt (obgleich einige der Namen andeuten, welche Art von Thema behandelt wird), noch, ob die Besprechung gut oder schlecht ausfällt. Es wäre besser, einen kurzen Erklärungstext nach den Verknüpfungen einzufügen, um einen Hinweis darauf zu geben, was einen auf der anderen Seite der Verbindung erwartet.
<ul>
<li><a href="html-info.html"><i>HTML - Info</i> by Darko Pipic</a>. Es handelt sich bei HTML um eine einfache Sprache, die definiert, welche Elemente eine Webseite enthält und wie diese aussehen.</li>
<li><a href="html-text-gestalten.html"><i>HTML - Text gestalten</i> by Darko Pipic</a>. HTML-Dokumente sind reine Textdokumente mit Inhalt (Texte, Überschriften, Bilder, Tabellen etc.), dem Sie eine Struktur (und somit ein Aussehen) zuweisen</li>
<li><a href="html-multimedia-einbinden.html"><i>HTML - Multimedia einbinden</i> by Darko Pipic</a>. Dieses Kapitel befasst sich mit der Einbindung von Multimedia-Objekten in HTML-Dokumente.</li>
<li><a href="html-tabelle-erstellen.html"><i>HTML - Tabelle erstellen</i> by Darko Pipic</a>. Tabellen dienen der einfachen Darstellung der verschiedensten Informationen. Auch als Gerüst für das Design einer Homepage sind Tabellen mit HTML universell einsetzbar.</li>
</ul>
Die überarbeitete Liste sieht dann aus wie in Abbildung gezeigt.
