Direktnavigation

Weitere Infos

Sie lesen:
LB Teil 1 (2009)

Little Boxes Teil 1 (Cover)

Aktuell (2015)
Einstieg in CSS

Einstieg in CSS (Cover)


2. Auflage!

Einstieg in CSS (Cover)

Beispielseiten

Inhaltsbereich

4.1 Hyperlinks: das Besondere am WorldWideWeb

Hyperlinks sind das Hyper in Hypertext. In gewisser Weise typisch für HTML ist, dass das wichtigste Element in dem ganzen Laden nicht hyperlink oder link heißt, sondern schlicht und einfach a (wie Anker).

Anatomie eines Hyperlinks

Hyperlinks haben immer denselben Aufbau:

<a href="..." title="...">Sichtbarer Text</a>

Hier das Beispiel im Detail:

  • Das Element zum Erstellen eines Hyperlinks heißt einfach nur a.
  • Das Attribut href steht kurz für Hypertext Reference und enthält die Wegbeschreibung zur Webseite, die nach einem Klick im selben Browserfenster angezeigt wird. Das kann ein Dateiname sein oder auch eine komplette URL.
  • Zwischen <a> und </a> steht der Text, der vom Browser standardmäßig blau und unterstrichen hervorgehoben wird.
  • </a> beendet den Hyperlink.

 

ToDo: Erstellen Sie einen Hyperlink
  1. Erstellen Sie folgenden Quelltext auf der Beispielseite unterhalb der verschachtelten Liste und innerhalb von #textbereich:

    <p>Besuchen Sie <a href="http://little-boxes.de/">die Website zum Buch</a> für weitere Informationen.</p>

  2. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

So sieht der Hyperlink im Browser aus:

Abbildung 4.1: Ein Hyperlink im Browser
Abb. 4.1: Ein Hyperlink im Browser

Optional können Sie einem Hyperlink mit dem Attribut title auch noch ein paar Zusatzinformationen mit auf den Weg geben:

<a href="http://little-boxes.de/" title="little-boxes.de – mit Infos zum Buch">die Website zum Buch</a>

title erzeugt bei Berührung mit dem Mauszeiger im Browserfenster eine kleine gelbe Quickinfo. So sieht der Absatz mit Hyperlink und Quickinfo im Browser aus:

Abbildung 4.2: Ein Hyperlink mit dem Attribut title
Abb. 4.2: Ein Hyperlink mit dem Attribut title

Die Navigation: eine ungeordnete Liste mit Hyperlinks

Eine Navigation ist im Prinzip eine Auflistung von Hyperlinks, und aus diesem Grund wird sie oft als ungeordnete Liste notiert. Das Aussehen der Liste wird später per CSS geregelt.

ToDo: Erstellen Sie eine Navigationsliste
  1. Ergänzen Sie den fett gedruckten Quelltext auf der Beispielseite innerhalb des Navigationsbereichs:

    <div id="navibereich">
    <ul>
    <li id="navi01"><a href="index.html">Startseite</a></li>
    <li id="navi02"><a href="kontakt.html">Kontakt</a></li>
    </ul>
    </div> <!-- Ende navibereich -->

  2. Speichern Sie die Seite und betrachten Sie sie in einem Browser.

Die Seite kontakt.html wird erst am Ende dieses Kapitels erstellt, aber der Link kann trotzdem schon eingebaut werden. Die IDs navi01 und navi02 in den beiden Listenelementen benötigen Sie später zur Gestaltung der Navigationsseite.

Der obere Bereich der Beispielseite sieht im Browser jetzt so aus:

Abbildung 4.3: Die Beispielseite mit Navigationsliste
Abbildung 4.3: Die Beispielseite mit Navigationsliste

Gestaltet wird diese einfache Navigation per CSS später. 

Hyperlinks mit dem Attribut title

Mit dem optionalen Attribut title könnten Sie auch den Hyperlinks in der Navigation zusätzliche Informationen mit auf den Weg geben. Zum Beispiel so:

<a href="kontakt.html" title="Zu unserem Kontaktformular">Kontakt</a>