Zurück || Weiter Index Startseite

HTML Einführung: Hypertextlinks (Verweise)
Erstellung von Hypertextlinks

Verweise

In diesem Kapitel finden Sie Informationen über:

  1. Aufbau eines Verweises
  2. Verweise auf andere Dokumente
  3. Verweise auf Textstellen in anderen Dokumenten
  4. Grafiken als Verweise
  5. URL - Unified Resource Locator


Allgemeines

Nun können wir also schon so einiges mit dem Text, den Tabellen und Grafiken anfangen, aber das Wichtigste fehlt bis jetzt noch: Die Verweise.

Verweise zeigen auf andere Texte, die auf dem gleichen Rechner oder auf einem anderen Rechner im Internet liegen können. Es ist auch möglich, bestimmte Stellen in einem Text anzuspringen. - Verweise können Textabschnitte sein, die dann vom Browser besonders gekennzeichnet werden, oder auch Grafiken, auf die man klicken kann. Es ist sogar möglich, unterschiedliche Bereiche einer Grafik mit verschiedenen Verweisen zu versehen.


Aufbau eines Verweises

Ein Verweis (engl. Link) setzt sich aus zwei Komponenten zusammen:
  1. Der Anker. - Das ist der Punkt im Dokument, an den gesprungen wird, wenn auf den Verweis geklickt wird.
  2. Der Verweis. - Das ist der Bereich, auf den geklickt werden muss, um zum Anker zu springen

Das Ankertag (engl. anchor) setzt man an die Stelle des Textes ein, der am oberen Rand des Browserfensters erscheinen soll, wenn er mittels des entsprechenden Verweises angesprungen wird. Das Format sieht wie folgt aus:

    <a name="Marke">Ankertext</a>
Marke kann ein Text aus Buchstaben und Ziffern sein. Dieser Text wird beim Verweis benötigt.
Ankertext ist optional. Er ist ein ganz normaler Text (o.ä.), der im Dokument ausgegeben wird.

Der Verweis wird auch mit dem Anchor-Tag angelegt, allerdings mit der Option href (engl. hyper reference):

    <a href="#Marke">Ankertext</a>
Das Zeichen "#" (Kanalgitter) ist notwendig und signalisiert dem Browser, dass der Verweis sich auf eine Ansprungstelle (im aktuellen Dokument) bezieht. Marke muss identisch mit der Marke aus dem Ankertag sein (Groß-/Kleinschreibung beachten!!). Ankertext ist der Text, der als Verweis markiert wird.


Verweise auf andere Dokumente

Soll der Verweis auf ein anderes HTML-Dokument verweisen, das geladen werden soll, wenn der Verweis aktiviert wird, so lautet das Format:
    <a href="Dateiname">Ankertext</a>
Dateiname ist der Name des HTML-Dokumentes (mit Pfad!), das geladen werden soll.
Ankertext ist der Text, der als Verweis markiert wird.

<a href="tabellen.html">Verweis</a>


Verweise auf Textstellen in einem anderen Dokument

Kombiniert man die beiden Verweistypen aus den letzten beiden Abschnitten, so können wir auch Verweise auf definierte Ansprungstellen in anderen Dokumenten erstellen:
    <a href="Dateiname#Marke">Ankertext</a>
Dieser Verweis sollte uns zurück zur Erklärung der blinden Tabellen bringen. Das entsprechende Tag sieht wie folgt aus:

<a href="tabellen.html#Blinde">Verweis</a>


Grafiken als Verweise

Bis jetzt können wir nur Texte als Verweise nutzen. Dies ist aber nicht zwingend notwendig. Es ist ebenfalls möglich Grafiken als Verweise zu nutzen. Das Format des Tags ist identisch mit den bereits bekannten, der einzige Unterschied besteht darin, dass der Ankertext gegen das Image-Tag <img src=...> ausgetauscht wird:

<a href="Dateiname#Sprungmarke"><img src="Grafikdatei"></a>

Sind sie nicht süß, unsere beiden Kuschelbärchen?  -->   Snoopy and Woodstock


URL - Die allgemeinste Art der Verweise

Bisher haben wir uns bei Verweisen auf lokale Referenzen beschränkt, entweder innerhalb des gleichen Dokuments oder auf ein anderes Dokument auf dem gleichen Rechner.

Es kann aber durchaus vorkommen, dass man einen Verweis auf einen anderen Rechner angeben möchte (z.B. auf eine fremde Homepage). Noch dazu kann dieser Link nicht nur auf ein HTML-Dokument verweisen, sondern auf Daten (allg. Ressourcen), die unter einem anderen Internetdienst angeboten werden (z.B. FTP, Gopher, Telnet - siehe untere Tabelle!). Man kann (und muss bei externen Links sogar!) die Art des Dienstes auch im Verweis angeben und erhält so einen Einheitlichen Ressourcen Verweis, einen sog. URL (engl. Unified Resource Locator).

Das Format eines URL's sieht wie folgt aus:
 Dienst://Rechnername/Verzeichnis/Datei

Dienst kann dabei eines der folgenden sein:

Einige im Internet verfügbare Dienste
Dienst Erklärung
 http  Der Standarddienst des WWW. Dieser Dienst stellt auf Anfrage anderer Rechner die HTML-Dokumente (allg.: Ressourcen) zur Verfügung. (engl. Hyper Text Transfer Protocol)
 ftp  Erlaubt die Übertragung von Dateien (Daten, Programme, Archive, Dokumente) über das Netzwerk (Download oder Upload). (engl. File Transfer Protocoll)
 gopher  Ein menügesteuertes System, mit dem Internetressourcen zur Verfügung gestellt werden können. - Gilt als Vorläufer des World Wide Web.
 telnet  Erlaubt die Anmeldung und das "online-Arbeiten" auf fremden Rechnern. Es wird wie unter Unix nach Login und Passwort gefragt.
 news  Newsgroups. Eine Art "schwarzes Brett", wo Sie Nachrichten posten können, die alle Besucher lesen und darauf antworten können.


Zusammenfassung und Beispiel

Nachdem wir nun (fast) alle Möglichkeiten kennen, wie Verweise anzulegen und zu nutzen sind, wollen wir dies noch einmal praktisch beleuchten:

<html>
<head>
 <title>Verweise</title>
</head>
<body>

<h1>Die Nutzung von URLs</h1>
<h3>Hypertext selbstgestrickt</h3>

<a href="start.html">Zur&uuml;ck zum Index</a><br>
<a href="verweise.html#Zusammenfassung">Zur&uuml;ck zum Beispiel</a>
<br>
Dieses Bild bringt dich wieder zur&uuml;ck:
<a href="verweise.html#Zusammenfassung"><img
  src="img/snoopy.gif"></a><p>
<a href="http://www.altavista.com">Such' was im Internet!</a><br>
<a href="http://www.gesundheitsfoerderung.at">Homepage der GGF</a>

</body>
</html>

Wird dieses Dokument in den Browser geladen, so sieht es wie folgt aus:

Im nächsten Kapitel beschäftigen wir uns mit mehrfachen Verweisen in einer Grafik.

 


Zurück || Weiter Index Startseite
Version 1.2, Jänner 2000 - Copyright © 1999-2000 by Peter Bittner