Zurück ] Inhalt ] Weiter ]

Textmarken und Hyperlinks

HTML-Seiten sind in den meisten Fällen in Netzwerken gespeichert, z.B. im Intranet eines Unternehmens oder im Internet. HTML-Seiten können auf andere Seiten verweisen, die an einer anderen Stelle im Netz gespeichert sind. Auf diese Weise entsteht ein Netz aus HTML-Seiten. Für den Leser der Seite hat diese Art der Verknüpfung von HTML-Seiten den Vorteil, daß der Benutzer selbst entscheiden kann, ob er dem Verweis folgen möchte oder weiter auf der aktuellen Seite weiterlesen möchte. Die Verweise werden Hyperlinks genannt.

Um Hyperlinks zu verwenden, sind zunächst Kenntnisse in URLs notwendig. URLs werden in der Spezifikation des Hyperlinks verwendet. Ein Hyperlink verweist auf eine andere HTML-Seite, auf eine bestimmte Stelle innerhalb des aktuellen oder eines anderen HTML-Dokuments. Die Stellen, auf die Hyperlinks in HTML-Dokumenten verweisen können werden Anker (bzw. Textmarken in Frontpage) genannt.

URLs

URL ist eine Abkürzung für Unified Resource Locator. URLs werden im Internet verwendet, um den Speicherort von Objekten zu beschreiben. Der allgemeine Aufbau einer URL lautet:

Protokoll://Rechnername:Port/Pfad/Dokument#Anker

Das Protokoll bestimmt, wie das Objekt im Internet übermittelt werden soll. Im World Wide Web wird meistens das HTTP-Protokoll (Hypertext Transfer Protokoll) verwendet, um HTML-Dokumente und die in den HTML-Dokumenten spezifizierten Objekte zu übertragen. Ein weiteres häufig verwendetes Protokoll ist FTP (File Transfer Protokoll). Nach dem Protokoll muß der Rechnername angegeben werden. Im Rechnername www.uni-mannheim.de bezeichnet "www" den Webserver der Universität Mannheim. Der Webserver gehört zur Domain "uni-mannheim.de", dem Universitätsnetz der Universität. Das Suffix ".de" besagt, daß der Rechner in Deutschland steht. Die Angabe des Ports ist optional und sollte nur angegeben werden, wenn es unbedingt notwendig ist. Das HTTP-Protokoll wird standardmäßig über den Port 80 abgewickelt. Der Pfad legt das Verzeichnis auf dem Rechner fest, in dem das Dokument gespeichert ist, und das Dokument bezeichnet das zu übertragende Dokument. Der Anker legt die Stelle innerhalb eines HTML-Dokuments fest. Auch die Angabe des Pfades, des Dokuments und des Ankers ist optional. In diesem Fall landet man normalerweise auf der Homepage des angegebenen Rechners. Die Homepage wird in der Regel als Startpunkt verwendet, von dem aus man auf weiter Dokumente gelangt.

Anker

Ein Anker bezeichnet eine bestimmte Stelle innerhalb eines HTML-Dokuments. Man wird den Anker an Stellen im HTML-Dokument definieren, auf die man sich später beziehen möchte. Das kann z.B. ein Schlüsselwort im Textrumpf oder eine Überschrift sein. Anker werden in Frontpage Textmarken genannt. Wenn man eine Textmarke definieren möchte, setzt man zuerst den Cursor auf die Stelle, auf die man sich später mit einem Hyperlink beziehen möchte. Anschließend ruft man den Menüpunkt Einfügen/Textmarke auf. Im erscheinenden Dialog sollte man einen ausdrucksvollen Namen für die Textstelle angeben.

Im HTML-Code wird ein Anker mit dem Tag <A NAME="Name">Textbereich</A> definiert. Das Attribut NAME legt den Namen des Ankers (bzw. der Textmarke) fest. Textbereich ist der Bereich des HTML-Dokuments, der mit dem Anker bezeichnet werden soll. Der Textbereich wird im Browser angezeigt. Der Textbereich kann auch weggelassen werden.

Hyperlinks

Mit Hyperlinks kann man auf andere HTML-Dokumente, auf Stellen im selben oder in anderen HTML-Dokumenten oder auch auf andere Objekte verweisen. Um einen Hyperlink zu definieren, markiert man zuerst den Textbereich, den man als Hyperlink verwenden möchte. Der markierte Textbereich wird anschließend unterstrichen (normalerweise in blauer Farbe) dargestellt. Dann ruft man den Menüpunkt Einfügen/Hyperlink oder die entsprechende Schaltfläche in der Symbolleiste auf. Im erscheinenden Dialog muß nun im Eingabefeld URL die URL angegeben werden, auf die man sich beziehen möchte.

Es gibt eine Unmenge von Möglichkeiten, die URL anzugeben. Zunächst muß zwischen absoluten und relativen Links unterschieden werden.

Absolute Links spezifizieren die gesamte URL inklusive Protokoll, Rechnername, Pfad und Dokument. Absolute Links sollten bei Verweisen außerhalb des eigenen Webs oder gar auf andere Rechner verwendet werden, z.B. http://www.java.sun.com/ verweist auf die Internetseiten über die Java-Programmiersprache auf dem Server der Firma Sun.

Relative Links verweisen auf Stellen auf demselben Rechner relativ zum Speicherort der  aktuellen Seite. Bezieht man sich auf eine HTML-Seite im selben Verzeichnis, braucht man nur "andere_seite.html" als URL anzugeben. Verweist man auf das übergeordnete Verzeichnis, gibt man "../andere_seite.html" als URL an und bei untergeordnete Verzeichnissen trägt man "Unterverzeichnis/andere_seite.html" als Verweis ein.

Relative Links sollte man immer dann verwenden, wenn sich die relative Position der Seiten nicht verändern wird. Das ist normalerweise dann der Fall, wenn HTML-Seiten zum selben Web gehören. Der Vorteil der relativen Links besteht darin, daß die Verweise unabhängig vom konkreten Speicherort sind. Man kann daher ohne weitere Schwierigkeiten ein Web innerhalb des Servers verschieben oder offline browsen.

Die Links soweit verweisen auf den Beginn des spezifizierten Dokuments. möchte man auf eine bestimmte Stelle innerhalb des Dokuments verweisen, kann man sich auf definierte Anker beziehen. Dazu gibt man nach dem Dokumentnamen noch "#Name" an. Dabei ist Name der Name eines definierten Ankers.

Im HTML-Code legt man Links mit Hilfe des Tags <A HREF="url">Textbereich</A> fest. "url" ist der Verweis auf eine andere Seite. Textbereich ist der Teil der Textes, der im Browser (normalerweise blau) unterstrichen dargestellt wird. Wenn man auf diesen Hyperlink klickt, gelangt man zu der verwiesenen Seite. Die nachfolgende Tabelle enthält ein Paar Beispiele von Hyperlinks.

Beispiele für Hyperlinks
Darstellung im Browser HTML-Code Bedeutung
Inhaltsverzeichnis <A HREF="index.html">
Inhaltsverzeichnis</A>
relativer Link zu Seite im selben Verzeichnis
übergeordnetes Verzeichnis <A HREF="../">
übergeordnetes Verzeichnis</A>
relativer Link auf das übergeordnete Verzeichnis, erzeugt u.U. einen Fehler beim Anklicken
untergeordnetes Verzeichnis <A HREF="subdir/">
untergeordnetes Verzeichnis</A>
relativer Link auf das untergeordnete Verzeichnis "subdir", erzeugt u.U. einen Fehler beim Anklicken, wenn diese Verzeichnis nicht existiert
absoluter Link <A HREF=
"http://www.uni-mannheim.de/">
absoluter Link</A>
ein absolute Link auf die Homepage der Universität Mannheim
relativer Link mit Anker <A HREF="#anker">
relativer Link mit Anker</A>
Verweis auf den Anker "anker" im aktuellen Dokument
absoluter Link mit Anker <A HREF=
"http://www.uni-mannheim.de/
index.html#top">
absoluter Link mit Anker</A>
Verweis auf die Homepage der Universität Mannheim, und innerhalb der Seite auf den Anker "top"

Beim Verwenden von Frames kann als weitere Eigenschaft der Zielframe angegeben werden.

Grafiken mit Hyperlinks verknüpfen

Nachdem man eine Grafik in des HTML-Dokument eingefügt hat, kann man die gesamte Grafik mit einem Hyperlink verknüpfen. Wenn man auf das Bild klickt, wird das Dokument geöffnet, das im Hyperlink angegeben wurde. Zum Einfügen des Hyperlinks markiert man die Grafik und wählt den Menüpunkt Einfügen/Hyperlink. Im erscheinenden Dialog gibt man im Eingabefeld URL die Adresse des Hyperlinks ein. Dise Technik bietet sich an, wenn man eine kleine Vorschau verwendet, um auf eine große Grafikdatei zu verweisen. Die große Grafik wird nur dann geladen, wenn der Benutzer die Grafik betrachten möchte. Beim Verwenden von Grafiken zusammen mit Hyperlinks sollte man beachten, daß nicht jeder Benutzer Grafiken anzeigen will oder kann. Deshalb sollte man bei der Definition der Grafik einen alternativen Text angeben, der statt der Grafik angezeigt wird. Dann ist der Hyperlink, der mit dem Bild verknüpft ist, auch verfügbar.

Im HTML-Code wird die Definition des Bildes noch von einer Definition des Hyperlinks umschlossen:

<a href="http://bild_verknuepft.net">
       <img src="ein_bild.gif" alt="bild" width="50" height="50">
</a>

Eine aufwendigere Möglichkeit, Bilder mit Hyperlinks zu versehen stellen Image-Maps dar.

Zur Verwaltung von Hyperlinks bietet Frontpage Tools an. U.a. kann man Hyperlinks darauf hin überprüfen, ob das referenzierte Objekt existiert.


Skript - MS Frontpage
[ Top Zurück ] Inhalt ] Weiter ] Norman May