Verweise

Verweis= Link, Hyperlink, Anker, dient zur Verknüpfung von HTML-Dokumenten (Hypertextsystem).

Befehl:
<a> Text </a>
 
Verweise innerhalb eines (längeren) HTML-Dokuments
 
 
 
Definition des Sprungziels (Anker):

<a id="top"></a>
Das Attribut id="Name" definiert das Ziel, also die Position innerhalb des HTML-Dokuments, an das der Browser nach Klick springen soll. Der Name des Ziels ist beliebig und darf frei definiert werden, sollte aber die üblichen ASCII-Beschränkungen berücksichtigen.

Definition des Querverweises (Link):
<a href="#top"> Seitenanfang </a>
Das Attribut href="Sprungziel" gibt das Ziel des Verweises an. Bei internen Verweisen muß vor den verwendeten Zielnamen eine Raute # gesetzt werden. Durch sie erkennt der Browser, dass es sich um einen internen Verweis handelt.

Der Link muß einen anklickbaren Text umspannen, da er sonst nicht verwendet werden kann.

Durch die Auszeichnung als klickbarer Link ändert sich das Erscheinungsbild des Textes: er wird durch Farbänderung (Standard: Blau) und Unterstreichung hervorgehoben. Verweise, die gerade geklickt werden, erhalten wiederum einen neuen Farbwert (Standard: Rot). Bereits besuchte Verweise werden vom Browser in der Standardeinstellung violett dargestellt.
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title> Verweis </title>
</head>
<body>
 
 <a id="top"></a>Eros enim consequatvel dolore velit molestie ullamcorper wisi feugait ex iusto nisl iriuredolor odio facilisis augue qui, in esse erat qui autem ut velit. At, nisl lobortis qui ex duis delenit esse sit enim delenit lobortis, nulla lobortis eum exerci lobortis et in nisl hendrerit dolore nulla ullamcorper vel nulla exerci.
Eros enim consequatvel dolore velit molestie ullamcorper wisi feugait ex iusto nisl iriuredolor odio facilisis augue qui, in esse erat qui autem ut velit. At, nisl lobortis qui ex duis delenit esse sit enim delenit lobortis, nulla lobortis eum exerci lobortis et in nisl hendrerit dolore nulla ullamcorper vel nulla exerci.
<a href="#top">Seitenanfang</a>

</body>
</html>

SO SIEHT'S AUS

Es können auch mehrer interne Verweise innerhalb eines HTML-Dokuments angewendet werden (BSP: CL: Branchen)
 
Beispiel: ankerdemo1.htm
Aufgabe: ankeraufgabe.htm    
 

 

 
Emailverweise
Durch Klick auf einen entspr. ausgezeichneten Verweis wird vom Browser automatisch das Email-Programm gestartet und die im Verweis angegeben Email-Adresse an dieses Programm übergeben und weiterverarbeitet.

Befehl:
<a href="mailto:max@mustermann.de"> Mail an Max </a>
SO SIEHT'S AUS

Weitere Parameter:
 Text für Betreffzeile
<a href="mailto:max@mustermann.de?subject=Nachricht%20an%20Max"> Mail an Max </a>
Leerzeichen innerhalb des Zusatzwertes subject müssen durch %20 ersetzt werden.

Text für Nachrichtenbereich
<a href="mailto:max@mustermann.de?body=Hallo%20Max,"> Mail an Max </a>
Leerzeichen innerhalb des Zusatzwertes body müssen durch %20 ersetzt werden.

Nachricht an einen weiteren Adressaten versenden
<a href="mailto:max@mustermann.de?cc=meister.eder@pumukel.de"> Mail an Herrn Eder</a>
CarbonCopy: der zusätzliche Empfänger sieht, wer diese Nachricht noch erhalten hat.

Nachricht an einen weiteren Adressaten versenden
<a href="mailto:max@mustermann.de?bcc=meister.eder@pumukel.de"> Mail an Herrn Eder</a>
BlindCarbonCopy: der zusätzliche Empfänger sieht nicht, wer diese Nachricht noch erhalten hat.

Verknüpfung mehrere Parameter:
<a href="mailto:eder@ndr.de?subject=Hallo%20Max&body=Servus&bcc=chef@ndr.de"> Mail an Herrn Eder</a>
Die einzelnen Parameter werden durch ein & verknüpft.
 
Beispiel & Aufgabe: emailverweisdemo.htm
 

 
Externe Verweise
Durch externe Verweise können andere, neue HTML-Dokumente aufgerufen werden. Durch diesen Ladevorgang ersetzt das neue HTML-Dokument das bisher geöffnete im Browserfenster.

Befehl:
<a href="Verweisziel"> Zur neuen Seite </a>

Verweis zu einer anderen Webadresse (absoluter Verweis)
 <a href="http://www.google.de"> Zu Google </a>
Zu Google
  
Wichtig ist hierbei die Angabe des Protokolls http://, ohne diese Angabe vor der eigentlichen URL (www.google.de) würde der Verweis nicht funktionieren.
 
Beispiel & Aufgabe: externverweisdemo.htm
 

 
Das Attribut target
Verlinkte Dokumente können in anderen Browser-Fenstern geöffnet werden.
Mögliche Angaben:

  • target="Fenstername": Dokument wird in angegebenem Browser-Fenster geöffnet bzw. neues Browser-Fenster öffnet sich und erhält den Namen (wird zumeist bei der Verwendung von Frames eingesetzt, mehr dazu später).
  • target="_blank": Dokument wird in neuem leeren Fenster geöffnet.

<a href="http://www.google.de" target="_blank"> Die Suchmaschine Google </a>

Die Suchmaschine Google
 

 
Verknüpfungen innerhalb eines Projekts
Im Normalfall bestehen Websites aus mehr als einem HTML-Dokument. Um diese HTML-Dokumente aufrufen zu können, verwendet man sog. relative Verweise.
Hierbei bildet der Wert des Attributs href die Positionierung der Dokumente auf Verzeichnisebene in Textform ab, und zwar immer ausgehend von dem gerade geöffneten/zu bearbeitenden Dokument.

Befehl:
<a href="kontakt.htm"> Zur neuen Seite </a>

D.h. im Attribut href wird als Wert der Pfad zu dem aufzurufenden HTML-Dokument angegeben (vergleichbar mit dem Pfad zur externen Grafikdatei im Attribut src des Befehls img). Die Angabe innerhalb des Attributs href wird beim Überfahren des Verweises mit dem Mauszeiger für gewöhnlich auch in der Statusleiste des Webrowsers angezeigt (für gewöhnlich am unteren Browserfensterrand).

Beispiel 01 & Aufgabe: Ordner 'szenario01'

Einfache Verknüpfung
HTML-Dokumente zu verknüpfen ist recht simpel, sofern alle Dokumente im gleichen Verzeichnis abgelegt wurden. So genügt es, in da Attribut href einfach den Namen des Zieldokuments einzutragen:
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Startseite</title>
</head>
<body bgcolor="#CC3333">
<p><a href="gruen.htm">Zur gr&uuml;nen Seite</a><br>
<a href="blau.htm">Zur blauen Seite</a><br>
<a href="gelb.htm">Zur gelben Seite</a><br>
<a href="start.htm">Zur Startseite</a> </p>
<h1 align="center">STARTSEITE </h1>
</body>
</html>


SO SIEHT'S AUS

Verknüpfungen bei umfangreicheren Webprojekten
Bei größeren Webprojekten macht es Sinn, die HTML-Dokumente inhaltlich zu sortieren und strukturieren, um für nachträgliche Änderungen die einzelnen Dokumente leichter aufzufinden. Für gewöhnlich sollte die Verzeichnisbenennung und die Dateibenennung den Inhalt des HTML-Dokuments wiedergeben.
 

Vernüpfungen in zu Dokumenten in untergeordneten Verzeichnissen:
  • Name des Verzeichnisses
  • Name der Seite
  • Struktur: <a href="ordner/datei.htm"> Hyperlinktext </a>

Beispiel Projekt X 01:
In unserem Demo-Projekt Website Projekt X wird die erhält die Datei index.htm einen Verweis auf die Datei kontaktdaten.htm im Verzeichnis kontakt:
 

<a href="kontakt/kontaktdaten.htm"> Zur Kontaktseite </a>

 
Beispiel 02 & Aufgabe: Ordner 'szenario01'

Verknüpfungen in zu Dokumenten in übergeordnetes Verzeichnis:

  • Eine Ebene darüber: zwei Punkte mit Schrägstrich eingeben (.. /)
  • Name der Seite
  • Struktur: <a href="../datei.htm"> Hyperlinktext </a>
  • Zwei Ebenen darüber: zwei Punkte mit Schrägstrich (../../)

Beispiel 03 & Aufgabe: Ordner 'szenario01'

Beispiel Projekt X 02:
In unserem Demo-Projekt Website Projekt X wird die erhält die Datei kontaktdaten.htm einen Verweis auf die Datei index.htm:


<a href="../index.htm"> Zur Startseite </a>

 


Beispiel Projekt X 03:
In unserem Demo-Projekt Website Projekt X wird die erhält die Datei ansprechparner.htm einen Verweis auf die Datei uebersicht.htm im Verzeichnis referenzen im Verzeichnis unternehmen:
 

 

<a href="../unternehmen/referenzen/uebersicht.htm"> Zu den Referenzen </a>


 
Ferner erhält die Datei uebersicht.htm einen Verweis auf die Startseite:

<a href="../../index.htm"> Zur Startseite </a>

 
 

 
Verweise auf Anker innerhalb anderer HTML-Dokumente
 

 
Nach der Definition des Verweisziels (Anker) in dokument_b.htm mit dem Namen marker (<a id="marker"></a>) wird im Link der Datei dokument_a.htm folgende Information abgelegt:
Öffne die Datei dokument_a.htm, springe dort zum Anker mit den Namen #marker:
<a href="dokument_b.htm#marker"> Hyperlink </a>

Dies funktioniert auch, wenn die beiden HTML-Dokumente nicht im gleichen Verzeichnis liegen.
Beispiele:
<a href="verzeichnisname/dokument_b.htm#marker"> Hyperlink </a> oder
<a href="../dokument_b.htm#marker"> Hyperlink </a> oder
<a href="http://www.domainname.de/dokument_b.htm#marker"> Hyperlink </a>
 
Beispiel 04 & Aufgabe: Ordner 'szenario01'
 

 
Verweisfarbe ändern
Als Standard verwenden Webrowser zur Hervorhebung von Verweisen folgende Farben (können manuell in jedem Browser in den Voreinstellungen geändert werden)
  • noch nicht besuchter Verweis: #0000FF
  • bereits besuchter Verweis: #9D11B3
  • Verweis, der gerade angeklickt wird: #FF0000

Diese Hyperlinkfarben können durch ein Attribute innerhalb des Befehls body für das gesamte HTML-Dokument geändert werden:

  • Farbe für noch nicht besuchte Verweise ändern: Attribut link="#Hexadezimalwert Farbe"
  • Farbe für bereits besuchte Verweise ändern: Attribut vlink="#Hexadezimalwert Farbe"
  • Farbe für gerade aktiven Verweis ändern: Attribut alink="#HexadezimalwertFarbe"

<body link="#FF8400" vlink="#666666" alink="#007BFF">


SO SIEHT'S AUS

 

 
Grafiken als anklickbare Verweise
Der Verweis-Befehl wird um eine eingebettete Grafik (also um den Befehl <img>) gelegt:
<a href="datei.htm"> <img src="bild.jpg" /> </a>

ZUR JAZZKANTINE

Da der Webbrowser nun verdeutlichen soll, dass diese Grafik einen anklickbaren Verweis darstellt, legt der Browser einen farbigen Rand um die Grafik. Dieser kann mit dem Attribut border mit dem Wert 0 wieder ausgeschaltet werden.

<a href="datei.htm"> <img src="bild.jpg" border="0" /> </a>

ZUR JAZZKANTINE  
 
Beispiel & Aufgabe: Ordner 'bilder_als_verweise' > computerhersteller.htm  
 

 
Verweise auf andere Dateiformate
Bei Verweis auf andere Dateiformate erkennt der Browser an der Dateiendung, welche Aktion ausgeführt werden soll. Der Verweis kann direkt auf die Datei gesetzt werden:

<a href="dateiname.suffix"> Download Datei </a>

<a href="dokumentation.pdf"> Handbuch laden (PDF, 23 kb) </a>

Abbildung Insel laden (PDF, 52 kb)

Beispiele:
Textdatei (.txt): im Browser auch als Textdatei
Grafik (.jpg, .gif): im Browser als eigenständiges Objekt
Video (.mpg, .avi): Programm zum Video abspielen wird geöffnet (z.B. Quicktime/Windows Media Player/iTunes)
Musik (.wav, .ram): Programm zum Musik hören wird geöffnet (z.B. Quicktime/Windows Media Player/Realplayer)
Archiv (.zip, .sit): Browser speichert Archiv auf Festplatte und startet Entkomprimierungstool (z.B. Stuffit, WinZip)
Andere Formate (.pdf, .doc, .xls): Browser öffnet entsprechendes Programm(z.B. für .pdf den Adobe Acrobat Reader)
 
Aufgabe: Ordner 'szenario02'