HTML/Tutorials/Einstieg/Kapitel4

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

Informationen zu diesem Text

Lesedauer
15min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine Grundkenntnisse nötig!

Wissen Sie noch, wofür das Akronym HTML steht?

Ja, das war Hypertext Markup Language. Mit Hypertext können Sie nun auf andere Seiten oder Dokumente verlinken oder mehrere Einzelseiten zu einer „Homepage“ verbinden.


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, sodass 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>

In Kapitel 1 hatten wir erwähnt, dass HTML Elemente außer Tags und Inhalt auch noch „Zusatzinfos“ enthalten können, die „Attribute“. Sie werden vom Browser benötigt, um das Element richtig darzustellen oder zu verarbeiten. Bisher sind wir im body ohne Attribute ausgekommen, aber für einen Link benötigen wir zwei Informationen: Der Text, den der Anwender sehen soll, und die Seite, auf der man beim Anklicken des Verweises landen soll. Texte gehören in den Inhalt des Elements, und für das Klickziel verwenden wir ein Attribut.

Das benötigte 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 im Abschnitt Attribute in Tags) im Artikel Element, Tag und Attribut.

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 Dokumenten folgende Pfadangabe:

In Windows: C:\Benutzer\Ihr Name\Dokumente\ (was allerdings Fake-News vom deutschen Windows Explorer ist, der wahre Name lautet C:\Users\Ihr Name\Documents),

in Mac OS X: /Users/Ihr Name/,

und in den meisten Linux-Distributionen: /home/Ihr Name/

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: der Order home, aus dem die HTML-Datei index.html geladen wurde) und beschreiben den Weg vom Ort 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, dem home Ordner, zum Ziel zu kommen, müssen wir Folgendes tun:

  1. Wir müssen in das Verzeichnis html hinein, 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 die Bestandteile der Pfadangabe trennt.
  3. Zum guten Schluss kommt der Dateiname preise.html.

Aus diesen drei Schritten ergibt sich der Pfad html/preise.html zur HTML Seite mit den Preisen.

Verzeichnisangaben in HTML-Dateien sollten immer „relativ“ sein, 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, auf andere Laufwerke und vor allem auf einen Internetserver 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 einen 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:

Startseite der Schreinerei Meier mit einem Menü ansehen …
<!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:

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.

Um Ordnung im home-Order zu halten, haben wir die Seiten für Preise und Bilder in den Unterordner html abgelegt. Wenn jemand die Seite preise.html abruft, ist deshalb der Ordner html der Ausgangspunkt, von dem der Browser aus Pfade zu Dateien bildet. Wir müssen also als erstes aus diesem Unterordner wieder hinaus. Dafür bietet uns das Dateisysteme des Computers ein Pseudoverzeichnis an, dessen Name aus zwei Punkten besteht. Danach folgt der gewohnte Schrägstrich und weitere Schritte im Pfad. Mit ../index.html rufen wir also die Datei index.html aus dem übergeordneten Verzeichnis ab.

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.