*** Links und Anker ***

Links und Anker ermöglichen und erleichtern das Navigieren in Webseiten und Websites.
Mit Hilfe von Links kann man zu anderen Webseiten verzweigen, Bilder, Dateien und Ordner aufrufen, Emails erzeugen.
Durch die Definition von Ankern können Abschnitte einer Webseite markiert werden, die dann ebenfalls per Link gezielt angesprungen werden können.

Das Erscheinungsbild von Links kann mit Stylesheets verändert werden.

Links zu Webseiten (HTML-Dateien), (Bild)-Dateien und Verzeichnissen

Die Zieladresse der gewünschten Datei / des gewünschten Ordners, nennt man URL (= Uniform Resource Locator)
Als Platzhalter kann ein Text angegeben werden oder auch die URL eines Bildes angegeben sein, das angezeigt werden soll.
Auf diese Weise kann z.B. folgende Auswahlliste erstellt werden:

Textformatierung, Inline-Tags ______ <a href="Text-Format.html"> Textformatierung, Inline-Tags </a>
Überschriften und Blöcke _________ <a href="Block-Format.html"> Überschriften und Blöcke </a>
Listen erstellen _________________ <a href="Liste-Format.html"> Listen erstellen </a>
Bilder einfügen _________________ <a href="Bilder-Format.html"> Bilder einfügen </a>

__ (Bild anzeigen) _________ <a href="Bilder/Bild.gif"> <img src="Buttons/Foto.jpg" alt="Bild-anzeigen"/> </a>
__ (Ordner-Inhalt anzeigen) __ <a href="Data"> <img src="Buttons/Ordner.jpg" alt="Ordner-Inhalt anzeigen"/> </a>
__ (Text-Datei anzeigen) ____ <a href="Data/Datei.txt"> <img src="Buttons/Down.jpg" alt="Datei öffnen"/> </a>
__ (WORD-Datei öffnen) ___ <a href="Data/Datei.doc"> <img src="Buttons/Down.jpg" alt="Datei öffnen"/> </a>
__ (Excel-Datei öffnen) _____ <a href="Data/Datei.xls"> <img src="Buttons/Down.jpg" alt="Datei öffnen" border="1"/> </a>
__ (Corel-Datei öffnen) _____ <a href="Data/Datei.doc"> <img src="Buttons/Down.jpg" alt="Datei öffnen" border="0"/> </a>

Abhängig vom Typ der adressierten Datei kommt es also zu recht unterschiedlichen Reaktionen:

• htm-, html-, und txt-Dateien _____________ werden als Webseite interpretiert und entsprechend aufbereitet dargestellt.
• gif-, bmp-, jpg- und png-Dateien _________ werden als Bild dargestellt.
• Office-Dokumente wie z.B. doc-Dateien ___ werden geöffnet, man kann sie dann bearbeiten und (als Kopie) speichern.
• andere Anwenderdateien _______________ kann man herunterladen bzw. öffnen, bearbeiten und (als Kopie) speichern.

Hinweis: Es gibt sog. "verweis-sensitive Grafiken" z.B. Landkarten, deren unterschiedlichen Bereichen verschiedene Aktionen zugewiesen werden können.

Relative und absolute Adressierung (URL)

In den bisherigen Beispielen wurden als Zieladresse sog. "relative URLs" verwendet, die keine vollständige Pfad-Angabe enthalten,
sondern sich auf den Speicherort der aktuellen Webseite beziehen.

Damit ist die Adressierung innerhalb einer Website möglich, unabhängig davon, wo sich die Website befindet -
sprich, man kann die Website als Ganzes ohne Änderungsaufwand kopieren und verschieben.
Dies ist z.B. bei einem Umzug der Website in eine andere Domain oder Nutzung der Dateistruktur in einer anderen Domain von Vorteil.

Beispiele für relative URLs:

Durch die Definition von Ordnern und Unterordnern kann der Inhalt einer Website prima strukturiert werden.

Soll eine Datei einer anderen Website oder einer bestimmten Dateistruktur adressiert werden, so verwendet man dazu eine "absolute URL".
Diese beginnt immer mit der Angabe eines Laufwerks oder einer Web-Adresse, z.B.:

Anmerkung: Offensichtlich ist es egal, welchen Trennungs-Schrägstrich man verwendet.

Prinzipiell sollte man möglichst exakt "verlinken" - sog. " Deep Links " verwenden,
damit auch das angezeigt wird, worauf man verweisen möchte.

Dies ist jedoch bei der Verwendung von "Frames" in einer Webseite nicht immer möglich,
weil zur Darstellung das komplette "FrameSet" geladen wird, "Textmarken" aber meist in untergeordeten Dokumenten definiert sind.
Die Seitengestaltung mit "Frames" verschlechtert somit die Chance, von Suchmaschinen gefunden zu werden (fehlende "Backlinks").

Nicht recht "treffsicher" ist auch das Ansteuern von "Textmarken" in Webseiten mit fixiertem Banner-Bereich.

Anker (Textmarken)

Um eine längere Webseite zu untergliedern, so daß bestimmte Stellen darin adressiert werden können,
kann man sog. "Anker" - auch "Textmarken" genannt - einfügen, z.B.:

Auf diese Weise können die Abschnitte einer Webseite gezielt ausgewählt werden, sofern die entsprechenden Anker (Textmarken) definiert sind:

Links _______(Abschnitt "Links") ____________ <a href="#Link"> Links </a>
URLs _______(Abschnitt "URLs")____________ <a href="#URL"> URLs </a>
Textmarken __(Abschnitt "Anker")____________ <a href="#Anker"> Textmarken </a>
Mailto ______(Abschnitt "Mailto")____________ <a href="#Mailto"> Mailto </a>
Start _______ ("Start" der Webseite "Inhalt")____ <a href="Inhalt.html#Start"> Start </a>

______(zum Seitenanfang) ____________ <a href="#"> <img src="Buttons/Oben.jpg" alt="Seitenanfang" /> </a>
_______________________________________     (lädt die aktuelle Webseite neu - zumindest in neueren Browsern)

Mailto - Link zu einer Email-Adresse

Ein Mailto-Link veranlaßt das Standard-Email-Programm (z.B. Outlook) eine neue Email mit der übergebenen Email-Adresse im Adressfeld zu öffnen.

send mail ____(neue Mail an ... )____ <a href="mailto:name@xxxxx.de"> send mail </a>

_____ (neue Mail an ... )____ <a href="mailto:name@xxxxx.de"> <img src="Buttons/Mail.jpg" alt="send mail" /> </a>