Themen

Projekte

Links

Software

Themen

Erste Schritte mit CSS

Theoretische Informatik

Das "HT" in HTML

Das "ML" (Markup-Sprache) in HTML haben wir bereits kennengelernt. Nun geht es um das "HT" in HTML: Hypertext. Mit Hilfe von Hypertext ist es möglich von einer Webseite aus auf andere Webseiten zu verlinken. Um Links zu realisieren, brauchen wir ein neues Element, das <a>-Element.

KopfüBar neu und verbessert

Die KopfüBar-Webseite soll verbessert werden: Es sollen Links eingefügt werden, die auf Webseiten mit dem Getränkeangebot bzw. einer Wegbeschreibung zur KopfüBar verweisen. Das Getränkeangebot ist auf einer Webseite mit dem Namen elixir.html gespeichert, die Wegbeschreibung in der Datei wegbeschreibung.html. Beide Dateien werden im selben Verzeichnis gespeichert wie unsere Startseite bar.html.

Um die Verknüpung zwischen bar.html und den Seiten elixir.html und wegbeschreibung.html herzustellen, sind einige Änderungen an bar.html nötig.

Die neue Version von bar.html sieht so aus:

<html>
  <head>
    <title>Kopf&uuml;Bar</title>
  </head>
  <body>
    <h1>Willkommen in der neuen und verbesserten Kopf&uuml;Bar</h1>
    <img src="getraenke.gif">
    <p>
      Kommen Sie einfach mal vorbei. Bei uns finden Sie jeden Abend erfrischende
      <a href="elixir.html">Elixire</a>, 
      Unterhaltung, und vielleicht interessiert Sie auch die eine oder andere Runde
      <em>Dance, Dance, Revolution</em>. Wireless-Zugang ist jederzeit verf&uuml;gbar,
      aber BSIEWSM (Bringen Sie Ihren eigenen Webserver mit).
    </p>
    <h2>Wegweiser</h2>
    <p>
      Sie finden uns unmittelbar im Zentrum der Altstadt von Webville.
      Falls Sie Probleme haben uns zu finden, werfen
      Sie einen Blick auf unsere
      <a href="wegbeschreibung.html">Wegbeschreibung</a>.
      Kommen Sie mal vorbei!
    </p>
  </body>
</html>

bar.html

Was haben wir gemacht?

Zunächst muss der Text, der für den Link angezeigt werden soll, in ein <a>-Element eingeschlossen werden:

<a>Elixir</a> bzw. <a>Wegbeschreibung</a>

Der Inhalt des <a>-Elements kann auf einer Webseite angeklickt werden.

Nachdem wir für beide Links eine Beschriftung haben, müssen wir noch etwas HTML hinzufügen, damit der Browser weiß, wohin der Link führt:

<a href="elixir.html">Elixir</a>
bzw.
<a href="wegbeschreibung.html">Wegbeschreibung</a>

Das href-Attribut ("hypertext reference") teilt dem Browser das Ziel des Links mit.

Attribute verstehen

Mit Hilfe von Attributen können Sie zusätzliche Informationen zu einem Element geben. Wir kennen schon einige Beispiele für Attribute:

<style type="text/css">
<a href="elixir.html">
<img src="bild.jpg">

Attribute werden immer auf die gleiche Weise geschrieben: zuerst der Attributname, gefolgt von einem Gleichheitszeichen, dann der Attributwert in doppelten Anführungszeichen.

So ist es richtig:

<a href="elixir.html">

DOPPELTE ANFÜRHUNGSZEICHEN!

So ist es falsch:

<a href=elixir.html>

KEINE DOPPELTEN ANFÜHRUNGSZEICHEN!

Im Beispiel ist href der Attributname und elixir.html der Attributwert.

Organisationssache

Die KopfüBar-Webseite besteht nun bereits aus einer ganzen Menge an Dateien. Neben den drei HTML-Dateien bar.html, elixir.html und wegbeschreibung.html ist auch jede Grafik in einer eigenen Datei gespeichert: gruen.jpg, blau.jpg, getraenke.jpg, hellblau.jpg, rot.jpg. Bisher haben wir alle Dateien in einem Ordner gepeichert. Selbst eine mäßig große Webseite lässt sich aber wesentlich besser pflegen, wenn Sie die Webseiten, Grafiken und sonstigen Ressourcen in separaten Ordnern ablegen.

Eine sinnvolle Speicherstruktur könnte folgendermaßen aussehen:

Planen Sie Ihre Pfade...

Was machen Sie, wenn Sie einen Urlaub mit der Familienkutsche planen? Sie nehmen eine Karte zur Hand, beginnen an Ihrer momentanen Position und suchen einen Weg zum Ziel. Die Fahrtrichtung ist dabei immer relativ zu Ihrem Standort. Wenn Sie in einer anderen Stadt wären, müssten Sie in eine andere Richtung fahren!

Um einen relativen Pfad für Ihre Links anzugeben, gehen Sie genauso vor: Sie beginnen auf der Seite, die den Link enthält und suchen den Weg durch Ihre Ordnerstruktur, bis Sie bei der Datei ankommen, auf die Sie verweisen wollen.

In ein Unterverzeichnis verlinken

Zunächst wollen wir auf der Seite bar.html einen Link auf die Seite elixir.html einbauen. Anhand der Grafik lässt sich der relative Pfad nachvollziehen.

Nachdem wir den Pfad jetzt kennen, müssen wir ihn nur noch in ein Format bringen, das der Browser versteht. Das wird so geschrieben:

getraenke/elixir.html

Die einzelnen Teile des Pfads werden also mit einem "/" (Slash) getrennt. Am Ende der Pfadangabe steht der Dateiname der Datei, mit der hier verlinkt wird.

Unser vollständiger Link in der Datei bar.html muss also folgendermaßen geschrieben werden:

<a href="getraenke/elixir.html">Elixire</a>

In einen übergeordneten Ordner verlinken

Nun möchten wir auf der Seite mit der Wegbeschreibung einen Link zurück auf die Seite bar.html einbauen.

Wiederum kennen wir also den Pfad und müssen ihn nur noch in ein entsprechendes Format bringen:

../bar.html

Die zwei Punkte ".." stehen dabei für den Wechsel in eine übergeordnete Verzeichnisebene. Wir gehen sozusagen mit den zwei Punkten in der Verzeichnisstruktur um eine Ebene "nach oben". Der vollständige Link lautet:

<a href="../bar.html">Zurück zur Bar</a>

» drucken: pdf | html