HTML/Tutorials/Einstieg/Kapitel5

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Einstieg
Wechseln zu: Navigation, Suche

Auf Seiten verlinken

Sofern Sie unserer Empfehlung gefolgt sind, befindet sich unsere erste Seite, die Begrüßungsseite index.html in dem Ordner home, und die zweite Seite mit der Preistabelle preise.html in dem Ordner html, der sich selbst wiederum in dem Ordner home befindet:

Pfadangaben

Allerdings besteht zwischen den beiden Seiten aus Sicht eines Besuchers bislang keine Verbindung. Aus dem Internet kennen Sie es aber bestimmt so, dass es irgendwo auf den Seiten ein Menü gibt, von dem aus man auf die anderen Seiten gelangt. So ist es z.B. auch im SELFHTML-Wiki, in dem Sie gerade lesen: links oben auf jeder Seite befindet sich ein Menü.

Das Menü besteht wiederum aus Verweisen (englisch: link, wörtlich: Verbindung, Verknüpfung), auf die man mit dem Mauszeiger draufklicken kann, so dass man automatisch auf einer anderen Seite landet.

So etwas wollen wir jetzt auch machen. Dazu erweitern wir die Homepage der Schreinerei Meier um eine weitere ungeordnete Liste, die wiederum die Verweise enthält. Da man mit einem Verweis verschiedene Webseiten aneinander „befestigen“ (englisch: to anchor) kann, ergibt sich somit auch der Name des Elements für Verweise:

<a></a>

Bei diesem Element erleben wir nun eine Besonderheit: Es gibt ein so genanntes „Attribut“, d.h. eine weitere Information, die der Browser benötigt, um das Element richtig darzustellen oder zu verarbeiten. In diesem Fall müssen wir dem Browser einfach nur sagen, auf welcher Seite man beim Anklicken des Verweises landen soll.

Das zugehörige Attribut heißt href (englisch: hyper reference = Hyper[text]-Referenz). Darauf folgt das Gleichheitszeichen (=) und darauf, eingeschlossen in doppelte Anführungszeichen, die „Adresse“ (HTML-Datei) zu der man beim Anklicken gelangen soll (weitere Informationen zu Attributen erhalten Sie übrigens unter HTML/Regeln/Element,_Tag_und_Attribut#Attribute_in_Tags).

Beispiel: für einen Verweis
<a href="zieldatei.html">Hier klicken!</a>

Hier klicken! ist also der Text, auf den man dann draufklicken kann, und zieldatei.html ist die HTML-Datei, die nach dem Klicken angezeigt wird.

Da sich die Datei preise.html im Verzeichnis html befindet, müssen wir allerdings eine Pfadangabe voranstellen.

Beachten Sie: Linktexte sollten so aussagekräftig wie möglich sein. Das beispielhafte Hier klicken! ist der denkbar ungünstigste Linktext, den Sie notieren könnten. Eine bessere Lösung in diesem Beispiel wäre Unsere Preise, da auf die Datei preise.html verlinkt werden soll. Im späteren Verlauf dieses Tutorials werden wir uns natürlich daran halten.

Zwischendurch: Pfadangaben

Pfadangaben sind tatsächlich ein so vielschichtiges Thema, dass diese Dokumentation ihnen eine eigene Seite widmet:

Referenzieren in HTML. Hier das Wichtigste in Kürze:

Pfadangaben kennen Sie vermutlich von Ihrem Betriebssystem. Zum Beispiel hat das Verzeichnis mit Ihren persönlichen Dateien üblicherweise folgende Pfadangabe:

C:\Dokumente und Einstellungen\Ihr Name\Eigene Dateien\ unter Windows,

/Users/Ihr Name/ unter Mac OS X und

/home/Ihr Name/ unter den meisten Linux-Distributionen.

Bei HTML ist das Prinzip ähnlich. Für unsere Zwecke brauchen wir auch nicht sämtliche Unterschiede und Details zu erforschen, sondern konzentrieren uns auf das Wesentliche:

Die Bestandteile des Pfades werden nicht wie unter Windows mit einem sogenannten "Backslash" (\) getrennt, sondern mit dem normalen Schrägstrich (/), also so, wie es auch bei anderen Betriebssystemen üblich ist.

Für unsere Zwecke ist es sinnvoll, „relative“ Pfadangaben zu verwenden. Das heißt, wir gehen von unserer jetzigen Position aus (in unserem Fall: die HTML-Datei index.html) und beschreiben den Weg von dieser HTML-Datei zur Zieldatei preise.html:

"Pfadangaben

Der grüne Pfeil in der obigen Abbildung zeigt an, welchen „Pfad“ der Browser gehen muss, um zur „Zieldatei“ zu gelangen. Unglücklicherweise können wir nicht einfach den direkten Weg nehmen - irgendwie schräg durch alle Ebenen - wie der Pfeil oben, sondern müssen dem Browser Schritt für Schritt sagen, wo er lang gehen soll, um zum Ziel zu kommen.

Um also von der jetzigen Position zum Ziel zu kommen, müssen wir Folgendes tun:

  1. Wir müssen in das Verzeichnis html rein, also ist der erste Bestandteil der Pfadangabe html. (Das geht ohne weitere Angaben, weil die Datei index.html, von der aus wir losgehen, im gleichen Verzeichnis liegt wie das Unterverzeichnis html.)
  2. Wir fügen den Schrägstrich an (/), mit dem man ja die Bestandteile der Pfadangabe trennt.
  3. Zum guten Schluss kommt der Dateiname preise.html.

Aus diesen drei Schritten ergibt sich also die folgende Pfadangabe: html/preise.html.

Verzeichnisangaben in HTML-Dateien sollten also „relativ“ sein, eben so, wie wir es Ihnen gerade gezeigt haben. Beachten Sie, dass in diesen Pfadangaben keine Laufwerksbezeichnungen (unter Windows z.B. C:\) oder Verzeichnisse außerhalb unseres Projekts vorkommen. Relative Pfadangaben haben den Vorteil, dass Sie Ihr Projekt als Ganzes beliebig auf Ihrer Festplatte oder auf andere Laufwerke verschieben oder kopieren können, und die Pfadangaben trotzdem noch funktionieren.

Übrigens: Wenn Sie es wirklich ernst damit meinen, Ihre Dateien ins Internet zu stellen (also so, dass diese unter einer Adresse wie etwa www.example.com erreichbar sind), dann ist es auch ratsam, die Verzeichnisstruktur so vorausschauend zu organisieren, dass Sie sie später nicht ständig ändern müssen. Viele nicht funktionierende Verweise (englisch: broken links), über die Sie sich vielleicht auch schon geärgert haben, sind durch solche nachträglichen Umstrukturierungen zustande gekommen. Näheres hierzu erfahren Sie unter Dateiorganisation.

Weiter geht's mit dem Menü

Die obige Pfadangabe schreiben wir nun ins href-Attribut des a-Elements:

Beispiel: für den Verweis auf die Preistabelle der Schreinerei Meier)
<a href="html/preise.html">Unsere Preise</a>

Im Browser wird dieser Verweis erstmal als unterstrichener Text dargestellt.

Das ganze Menü besteht in unserem Fall aus einer ungeordneten Liste. Damit unsere Liste nicht allzu karg aussieht, und damit wir die Dateien jetzt nicht ständig ändern müssen, bauen wir auch schon den Verweis auf die HTML-Seite mit den Bildern (die wir gleich erstellen wollen) ein:

Beispiel: für ein Menü (ungeordnete Liste mit Verweisen)
<ul>
  <li><a tabindex="0" aria-current="page">Startseite</a></li>
  <li><a href="html/preise.html">Unsere Preise</a></li>
  <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
</ul>

Wie Sie sehen können, ist der erste Eintrag zwar ein Verweis, der aber anstelle des href-Attributs auf eine andere Seite ein ARIA-Attribut hat, das Screenreadern anzeigt, auf welcher Seite sich der Benutzer befindet.

Das dient dazu, dass das Menü einen einheitlichen Aufbau hat. Denn wir müssen das Menü nun ja auf allen Seiten einfügen, die zu unserem Webangebot gehören. Schließlich will der Anwender ja auf allen Seiten ein Menü haben, um auf unseren Seiten hin- und herspringen zu können. Auf den anderen Seiten muss dort, wo jetzt nur der leere Link „Startseite“ steht, ein Verweis auf index.html eingebaut werden (mehr dazu später).

Wenn wir solche „Leereinträge“ jedes Mal weglassen würden, dann wäre das Menü auf jeder Seite anders aufgebaut, und das wäre für den Benutzer ziemlich verwirrend.

Hier haben wir die Startseite index.html einmal mit einem solchen Menü versehen:

Beispiel: für die Startseite der Schreinerei Meier mit einem Menü So sieht's aus
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Schreinerei Meier, Dingenskirchen</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a tabindex="0" aria-current="page">Startseite</a></li>
        <li><a href="html/preise.html">Unsere Preise</a></li>
        <li><a href="html/bilder.html">Bilder von unseren Produkten</a></li>
      </ul>
    </nav>
    <h1>Willkommen bei der Schreinerei Meier im Internet!</h1>
    <p>Ma illo vostre instruction sed, sed appellate secundarimente o, in uno nostre intention distinguer. Da nos union greco-latin, un magazines demonstrate pro. Es inviar subjecto web. Ha vide millennios non. Regula preparation il sed. Le scriber interlinguistica duo, duo le independente interlinguistica, il uso capital millennios simplificate.</p>
    <h2>Unsere Leistungen:</h2>
    <ul>
      <li>Möbel nach Ihren Wünschen
        <ul>
          <li>Küchenmöbel</li>
          <li>Regale und Schrankwände</li>
          <li>Badezimmermöbel</li>
        </ul>
      </li>
      <li>Haustüren</li>
      <li>Gartenzäune</li>
      <li>Reparaturen</li>
    </ul>
     <p>Web de major tentation primarimente, se periodicos denominator que. Sia un lista studio millennios, asia vices regno non se. Non e tamben subjecto denomination, de duce regno altere sed, ha pote medio continentes nos. Asia europeo duo le, medio synonymo interlinguistica ma del.</p>
     <p>Libro anglese denomination duo e. Romanic effortio al sed. Pro su texto existe technologia, sitos spatios linguistic da con. Malo encyclopedia ma nos. Multo responder interlinguistica de web, publicava greco-latin se web.</p>
  </body>
</html>

Das Menü haben wir außerhalb des normalen Textflusses ganz nach oben gesetzt, damit man es sofort sieht. Es ist innerhalb eines nav-Elements platziert, damit es gleich als (Haupt-)Menü erkannt wird. Wenn Sie die bisherigen Dateien auf Ihrer Festplatte abgespeichert haben, probieren Sie das neue Menü ruhig einmal aus. Wenn Sie mehr als einen Versuch durchführen, werden Sie vielleicht auch bemerken, dass sich die Farbe des Verweistextes ändert. Der Browser merkt sich nämlich in gewissem Rahmen, welche Verweise Sie bereits besucht haben und kennzeichnet bereits „besuchte“ Verweise gewöhnlich in einer anderen Farbe als die noch nicht besuchten Verweise. Beobachten Sie auch, was passiert, wenn Sie auf die Datei bilder.html klicken, die ja noch fehlt.

Nun haben wir die Datei preise.html ebenfalls mit einem solchen Menü versehen. Dabei haben wir uns natürlich an der obigen Vorlage bedient, mussten aber einige Veränderungen vornehmen:

Beispiel: für das Menü in der Datei preise.html
<nav>
  <ul>
    <li><a href="../index.html">Startseite</a></li>
    <li><a tabindex="0" aria-current="page">Unsere Preise</a></li>
    <li><a href="bilder.html">Bilder von unseren Produkten</a></li>
  </ul>
</nav>

Der erste Eintrag in der Liste war ursprünglich ein „leerer“ Eintrag (einfacher Text), da wir uns da ja noch auf der Startseite befunden haben. Nun braucht der Anwender aber einen Weg zurück zur Startseite.

Unglücklicherweise ist die Datei index.html nicht in demselben Ordner wie die Datei preise.html. Wir wollen also eine Verzeichnisebene „zurück“, ins Verzeichnis home. Das geht bei HTML mit zwei Punkten (..). Damit kommen wir wieder eine Verzeichnisebene zurück. Es folgt der gewohnte Schrägstrich (/) und der Dateiname.

Da wir uns gerade auf der Seite „Unsere Preise“ befinden, ist der nächste Eintrag der „leere Eintrag“.

Der nächste Verweis geht dieses Mal aber einfacher. Da wir uns bereits im Ordner html befinden, in dem wir später auch die Datei bilder.html ablegen werden, brauchen wir hier nur den Dateinamen anzugeben.

Wir überlassen es Ihnen als kleine Übung, das obige Menü in die Datei preise.html einzubauen.