Verweise (Hyperlinks)


"Normaler" Text wird hintereinander (d.h. linear) geschrieben und gelesen. Hypertext hingegen ist eine Möglichkeit der nicht-linearen Präsentation von Texten. Durch Setzen von Verweisen, auch Hyperlinks genannt, ist es möglich, direkt auf andere Textstellen, HTML-Dokumente oder auch Dateien im World Wide Web zuzugreifen. Der Erfinder dieser Technologie Vannevar Bush hegte bereits 1945 die Hoffnung, mittels einer solchen Vernetzung von Texten das Verfassen und Lesen von Texten dem menschlichen Denken und Verstehen besser anpassen zu können als bisher.

Der allgemeine Aufbau eines Verweises

Ein Verweis (href = Hypertext Reference) besteht prinzipiell immer aus zwei Teilen:

  1. dem Verweisziel (eine andere Textstelle, Webseite oder eine E-Mail-Adresse) und
  2. einem "Auslöser" des Verweises, d.h. ein Text oder eine Grafik, die durch einen Mausklick das Springen zu dem gewünschten Ziel auslöst.

Dementsprechend sieht auch der Aufbau eines Verweises aus:
<a href="Verweisziel">Hier bitte draufklicken</a>

Verweis zu einer Email-Adresse

Email ist eine wichtige Form der Kommunikation in einem Computernetzwerk. Deshalb sollte prinzipiell auf jeder Webseite im World Wide Web die Möglichkeit bestehen, dem Autor der Seite eine elektronische Nachricht in Form einer Email zukommen zu lassen. Dazu sollte auf der Seite ein anklickbarer Hinweis platziert sein, der dem Besucher der Seite die Möglichkeit bietet, eine Email zu schreiben.

Der entsprechende HTML-Tag sieht folgendermaßen aus:
<a href="mailto:max.mustermann@provider.de">Email an Max Mustermann </a>

Aufgabe:
Fügen Sie auf Ihrer Übungswebseite einen Verweis auf Ihre Email-Adresse ein. Wandeln Sie dazu Ihren Namen im Fuß der Seite in einen entsprechenden Hyperlink um.

[Seitenanfang]

Graphischer Verweis

Natürlich kann man auf eine Webseite auch Grafiken einfügen. Beispielsweise kann man den Verweis auf die Email-Adresse auch grafisch hervorheben. Im Gegensatz zum vorhergehenden Abschnitt soll nun auf eine kleine Grafik geklickt werden, um eine Email zu verfassen.

Laden Sie sich zunächst den Email-Button in Ihr Verzeichnis und entpacken Sie die Datei. Achten Sie darauf, dass die Grafik im gleichen Verzeichnis liegt wie die HTML-Datei.

Um eine Grafik in eine Webseite einzubinden, benötigt man den image-Tag:
<img src="post.gif" alt="Email" border=0>

Jetzt muss man nur noch den Verweis hinzufügen. Die Vorgehensweise ist dieselbe wie im vorhergehenden Abschnitt. Anstelle des Textes Email an Max Mustermann ist aber nun die Grafik einzufügen:
<a href="mailto:max.mustermann@provider.de">
<img src="post.gif" alt="Email" border=0>
</a>

Aufgabe:
Fügen Sie einen grafischen Verweis auf Ihre Email-Adresse in Ihre Übungsseite ein. Dazu wird zunächst, wie oben beschrieben, die Grafik eingefügt.
Hinweis: Soll die Grafik zentriert eingefügt werden, bietet sich der Einsatz des <div>...</div> - Elements an. Damit können mehrere Elemente wie Texte, Grafiken, Tabellen etc. in einen gemeinsamen Bereich eingeschlossen werden. Für diesen Bereich können dann Eigenschaften wie z.B. eine zentrierte Ausrichtung (<div align="center">) vorgenommen werden, welche dann für alle Elemente des Bereichs übernommen werden.

[Seitenanfang]

Verweise auf andere Dokumente

Seine volle Leistungsfähigkeit entfaltet die Philosophie des Hypertextes jedoch erst, wenn Verweise auf andere Dokumente in eine Webseite eingefügt werden. Diese Dokumente können sich sowohl im gleichen Verzeichnis des Datenträgers, wie auch in anderen Verzeichnissen des Datenträgers oder aber sonst irgendwo im weltweiten Netz befinden. Wichtig ist allein die richtige Pfadangabe, damit das referenzierte Dokument auch gefunden wird. Näheres hierzu findet sich z.B. bei https://wiki.selfhtml.org/wiki/HTML/Referenzieren_in_HTML.

Der entsprechende Tag für den Hyperlink sieht folgendermaßen aus:

Die relative Referenzierung ist für Projekte, die aus mehreren Webseiten bestehen sehr zu empfehlen. Das Projekt kann dann problemlos als Ganzes an einen anderen Ort auf dem aktuellen Datenräger oder auf ein anderes Gerät verschoben werden. Die internen Verweise funktionieren dann immer noch. Sollen die Seiten des Projektes z.B. auf CD-Rom oder anderen Medien veröffentlicht werden, ist eine relative Referenzierung unverzichtbar.

Aufgaben:

  1. Hinterlegen Sie auf Ihrer Übungsseite die Einträge der Liste Ihrer persönlichen Hobbys und Interessen mit Verweisen auf entsprechende Websites im Internet. Testen Sie anschließend die Funktionalität der Hyperlinks.
  2. Erstellen Sie zwei Webseiten datei1.html und datei2.html, die Sie wechselseitig verlinken. Fügen Sie dementsprechend auf der Seite1 einen Link auf Seite2 und auf Seite2 einen Link auf Seite1 ein.

[Seitenanfang]

Verweis zu einer Textstelle

Innerhalb umfangreicher Dokumente ist es oft wünschenswert von einer bestimmten Textstelle direkt zu einer anderen Textstelle springen zu können, ohne dass man lange nach ihr suchen muss. Beispielsweise möchte man vom Inhaltsverzeichnis eines E-Books direkt zu einem bestimmten Kapitel springen können. Dazu ist es erforderlich, zunächst ein Verweisziel als Sprungmarke zu definieren:
<a name="verweisziel">
Anschließend kann man einen Verweis zu der definierten Sprungmarke setzen: Den Verweis zu der Sprungmarke
<a href="#verweisziel">Sprungmarke</a>
kann man im laufenden Text setzen.

Aufgaben:

  1. Laden Sie die Datei Paul.zip herunter und entpacken Sie diese anschließend in Ihrem Verzeichnis.
  2. Erstellen Sie ein neues HTML-Dokument Paul.html und kopieren Sie den Inhalt der Datei Paul.txt in Ihr neues HTML-Dokument.
  3. Strukturieren Sie den Inhalt des Dokumentes so, dass die Überschrift und die sechs Strophen des Liedes als einzelne Textabschnitte zu erkennen sind. Dazu bildet jede Strophe einen eigenen Absatz und jede Zeile sollte mit einem manuellen Zeilenumbruch abgeschlossen werden.
  4. Fügen Sie über der Überschrift nach obigem Muster eine Sprungmarke ein.
  5. Fügen Sie unter jeder Strophe einen Verweis zur Sprungmarke oberhalb der Überschrift ein.
  6. Testen Sie die Funktionalität der Verweise.

[Seitenanfang]


zuletzt geändert am:
Eine Seite von Mirko Hans