Seiten und Inhalte verlinken
70 Seiten verlinken Erstellen Sie zwei HTML-Seiten und speichern Sie sie unter den Namen seite.html und seite.html. Fügen Sie in seite.html ein <a>-tag ein, um auf Seite zu verlinken. Geben Sie im Attribut href den Zieldateinamen an, also im Beispiel seite.html. Das Setzen von Hyperlinks ist eines der Haupteinsatzzwecke im World Wide Web. Eine gute Struktur der Website ist das A und O eines Webauftritts. W I S S E N
Seiten und Inhalte verlinken 7 Legen Sie innerhalb des <a>-tags den Text des Links fest. Im Attribut title geben Sie einen Alternativtext für den Link an. Wenn Sie in seite.html auf den Link klicken, lädt der Browser seite.html. Fahren Sie mit der Maus über den Link, erscheint der Alternativtext. Achten Sie auf einen sinnvollen Linktext. Hier klicken ist nicht gerade zielführend. Apropos Linktext: Suchmaschinen werten den ebenfalls aus; ein Grund mehr gegen Hier klicken. Achten Sie bei den Linkzielen auf Groß- und Kleinschreibung. Windows ist es egal, der Mehrzahl der Webserver leider nicht. T I P P T I P P
7 Relative und absolute Links Der einfachste Fall bei der Verlinkung liegt dann vor, wenn die Zieldatei im selben Verzeichnis liegt wie die Startdatei. Liegt die Datei in einem Unterverzeichnis, geben Sie dieses an. Achten Sie auf Groß- und Kleinschreibung sowie auf Schrägstriche als Trennzeichen. Sie erreichen ein übergeordnetes Verzeichnis, indem Sie.. als Verzeichnisnamen verwenden. Beim Verlinken beginnt die Berechnung der Zieldatei immer in dem Verzeichnis, in dem die aktuelle Datei liegt, deswegen relative Links. Beginnt der Link mit /, beginnt die Berechnung im Hauptverzeichnis des Servers, deswegen absolute Links. W I S S E N
Seiten und Inhalte verlinken 7 Beginnt die URL des Links mit einem Schrägstrich, fängt der Browser im Hauptverzeichnis des Webservers an zu suchen. Die gezeigten Techniken lassen sich auch miteinander kombinieren. Wenn Sie auf Seiten auf anderen Servern verlinken möchten, führen Sie die komplette Adresse auf, inklusive http://. Verwenden Sie möglichst keine absoluten Links, denn das Hauptverzeichnis auf dem lokalen Rechner ist ein anderes als auf dem Webserver. Manche Webeditoren bieten Hilfen bei der Verlinkung an, um Tippfehler bei verzeichnisübergreifenden Verweisen zu vermeiden. Trennen Sie Verzeichnis- und Dateinamen auf jeden Fall mit einem Schrägstrich (/), nicht dem Backslash (\). T I P P T I P P
7 Links formatieren Legen Sie einen CSS-Block im Kopf der Seite an, um Stilinformationen für Links auf der Seite anzugeben. Geben Sie mit dem CSS-Stil a:link Stilanweisungen für den Link an. Der CSS-Stil a:visited legt den Stil für einen Link fest, den Sie bereits besucht haben. Aus historischen Gründen unterscheiden Browser zwischen normalen, bereits besuchten und gerade aktiven Links und zeichnen diese optisch unterschiedlich aus. Viele Designkonzepte wünschen sich hier eine identische optische Auszeichnung. W I S S E N
Seiten und Inhalte verlinken 7 Mit dem CSS-Stil a:active geben Sie den Stil für einen aktiven Link an; das ist ein Link, der gerade angeklickt wird. Klicken Sie auf einen Link; dieser erscheint dann mit dem unter a:active angegebenen Stil. Wenn Sie die verlinkende Seite neu laden, ist der gerade angeklickte Link optisch wie bei a:visited angegeben hervorgehoben. Ein Link gilt als besucht, wenn der Besuch in der Verlaufsliste des Browsers verzeichnet ist. Wenn Sie die Verlaufsliste des Browsers leeren, wird auch ein mit a:visited ausgezeichneter Link nicht mehr besonders hervorgehoben.
7 E-Mail-Links Beginnt ein Linkziel mit mailto:, kann der Benutzer eine E-Mail an einen Empfänger schreiben. Ein Klick auf den Link öffnet das Mailprogramm des Benutzers und trägt die angegebene E-Mail-Adresse ein. Sie können im Link mit?cc= und &bcc= auch Kopie- und Blindkopieempfänger mit angeben. E-Mail-Links interagieren mit dem Mailprogramm des Benutzers. Deswegen funktioniert dieses Vorgehen nur, wenn das Mailprogramm korrekt konfiguriert ist. Darauf haben Sie leider von der HTML-Seite her keinen Einfluss. W I S S E N
Seiten und Inhalte verlinken 77 Ein Klick auf den Link öffnet erneut das Mailprogramm; die Empfänger werden automatisch eingetragen. Über die Linkoptionen &subject= und &body= können Sie den Mailbetreff und den Mailtext angeben. Die Daten aus dem Link werden in das Mailfenster mit übernommen. Vor dem ersten Parameter muss immer ein Fragezeichen (?) stehen, vor allen anderen ein Et-Zeichen (&). Wenn Sie E-Mail-Adressen auf Ihrer Website angeben, müssen Sie damit rechnen, dass Spammer Sie mit Werbung belästigen. Geben Sie keine E-Mail- Adresse auf Ihrer Website an, wird es schwieriger, Sie zu kontaktieren. Sie müssen also abwägen.
78 Daten zum Download anbieten Legen Sie die herunterzuladenden Dateien auf dem Webserver bereit. Verlinken Sie auf die Dateien genau so, wie Sie auf HTML-Seiten verlinken würden. Je nach Browserkonfiguration werden manche Dateien direkt im Browser angezeigt. ZIP-Dateien, PDFs, Office-Dokumente und weitere Dateitypen können in HTML zum Download angeboten werden. Achten Sie aber darauf, nur solche Daten bereitzustellen, die Sie auch weitergeben dürfen. W I S S E N
Seiten und Inhalte verlinken 79 Bei den meisten Dateien fragt der Browser, was zu tun ist: speichern, abbrechen oder öffnen. Je nach Browser und Systemkonfiguration sieht der Dialog etwas anders aus. Beim direkten Ausführen von heruntergeladenen Dateien fragt das Betriebssystem unter Umständen noch einmal nach. Die Dateigröße ist ein wichtiger Faktor: Prüfen Sie, ob die Datei als ZIP deutlich kleiner ist. Wie immer gilt: Achten Sie auf Groß- und Kleinschreibung und vermeiden Sie Sonder- und Leerzeichen in den Dateinamen. Die Funktion, Dateien direkt auszuführen, steht nicht in allen Browsern zur Verfügung. Speichern klappt aber immer. T I P P
80 Textmarken Legen Sie eine HTML-Seite mit viel Text an. Platzieren Sie <a>-tags auf die Seite, um eine Textmarke anzulegen. Verwenden Sie kein Linkziel und keinen Text, nur name. Legen Sie am Anfang der Seite eine Textmarke mit dem Namen oben an. Eine Textmarke, auch Anker genannt, identifiziert eine bestimmte Stelle innerhalb einer Seite. Per HTML können Sie via Link zu den Textmarken springen. W I S S E N
Seiten und Inhalte verlinken 8 Legen Sie Links an, um auf die Textmarken zu verweisen. Das Linkziel beginnt mit einem Doppelkreuz (#) und endet mit dem Namen der Textmarke. Ein Klick auf den Link springt zu der Textmarke; achten Sie auf die URL! Sie können auch gleichzeitig auf eine andere Datei und auf eine Textmarke dort verlinken. Auch bei Textmarken gilt: Zwischen Groß- und Kleinschreibung wird strikt unterschieden. Per Verweis auf die Sprungmarke oben springen Sie zum Anfang der Seite. URL steht für Uniform Resource Locator. Wir bezeichnen damit die Adresse einer Webseite. F A C H W O R T
8 Linkeffekte Mit der CSS-Anweisung text-decoration: none sorgen Sie dafür, dass Text nicht unterstrichen ist. Das gilt auch für Links. Der Link ist dann in der Tat nicht mehr unterstrichen (aber farblich hervorgehoben). Die CSS-Klasse a:hover gibt den CSS-Stil an, der aktiv wird, wenn der Mauszeiger über den Link fährt. HTML und CSS unterstützen einige Spezialeffekte für Links, beispielsweise beim Überfahren mit der Maus oder bei Erlangung des Fokus. Damit können Sie spannende optische Ergebnisse erzielen. W I S S E N
Seiten und Inhalte verlinken 8 Fahren Sie mit dem Mauszeiger über einen Link. Die bei a:hover verwendeten Stile sind dann sichtbar. Mittels a:focus legen Sie den Stil fest, der aktiv wird, wenn ein Link den Fokus erhält. Geben Sie einem Link durch mehrfaches Betätigen der Å-Taste den Fokus. Der angegebene Stil wird angewandt. Wenn Sie Links nicht unterstreichen, müssen Sie sie auf jeden Fall anderweitig deutlich optisch hervorheben. Der mit a:hover angegebene Effekt kann eine zusätzliche optische Hilfe sein, wenn Sie Links wie angezeigt nicht unterstrichen darstellen möchten. T I P P T I P P
8 Ein neues Fenster öffnen Setzen Sie die Eigenschaft target eines Links auf den Wert "_blank". Klicken Sie auf den Link. In manchen Browsern wie dem Internet Explorer öffnet sich ein neues Fenster mit der verlinkten Seite. Manchmal ist es praktisch, das Ziel eines Links in einem neuen Fenster zu öffnen, damit das alte Fenster weiterhin vorhanden bleibt. Öffnen Sie vor allem bei Links auf externe Websites ein neues Fenster. W I S S E N
Seiten und Inhalte verlinken 8 In manchen Browsern wie dem Firefox öffnet sich ein neuer Tab mit der verlinkten Seite. Setzen Sie jetzt den Wert von target auf einen beliebigen Text, beispielsweise "meinfenster". Immer wenn Sie jetzt auf den Link klicken, öffnet sich die Zielseite in dem angegebenen Fenster, egal wie oft Sie das machen. Ob sich ein neues Fenster oder ein neuer Tab öffnet, hängt vom Browser und auch von seiner Konfiguration ab. Sie können die Größe und Position des neuen Fensters nicht mit HTML beeinflussen.