Verweise
Verweisschema
Ein Verweisschema besteht aus zwei Elementen, die immer vorkommen und folgendermaßen lauten:
a = Anchor
href = Hyperreference
Werden diese Elemente zusammengesetzt, entsteht eine vollständige Verweisstruktur:
<a href="zielname">Verweistext<
mögliche Verweisziele
Theoretisch ist es möglich auf jedes beliebige Dokument zu verweisen, sofern es der Öffentlichkeit zugänglich ist. Die häufigsten Verweisziele sind jedoch:
- Stelle innerhalb der gleichen HTML-Datei
- Andere HTML-Datei innerhalb der Website
- WWW-Adresse
- FTP-, Gopher-, Telnet-, Newsgroup-Adresse
- Email-Adresse
- Datei im Internet (auch zum Download)
- Lokal abgelegte Datei
Verweisziele innerhalb einer Datei
Um auf eine Stelle innerhalb einer Datei zu verweisen brauchen wir zwei Definitionen: zum einen den Verweisnamen an der Zielposition und zum anderen den Zielnamen an jener Position, von der aus der Verweis erfolgen soll. Es empfiehlt sich auf markante Stellen, z.B. Überschriften zu verweisen, da vor allem blinde Userinnen, die Screen Reader benutzen, leicht den Überblick verlieren. Die modernen Screen Reader positionieren zwar im Allgemeinen sehr präzise, jedoch kann es zu Problemen kommen, wenn Verweisziele mitten in einem Text stehen.
Definitionen
- Definition des Verweisziels = Anker
<a name="zielname">Zieltext</a> - Definition des Verweises
<a href="#zielname">Verweistext</a>
Anmerkungen zum Zielnamen
Zielnamen dürfen weder Leertasten noch deutsche Umlaute oder andere Sonderzeichen enthalten. Als Ersatz für das Leerzeichen kann der Grundstrich (groß geschriebener Bindestrich) verwendet werden. Auf Anker kann auch von anderen Dateien aus verwiesen werden, jedoch kommt es zu Browserproblemen, falls sich der Anker innerhalb einer Tabelle befindet.
Beispiel zu Verweisen innerhalb einer Datei
Dateien in anderen Verzeichnissen
Bei Verweisen zu Dateien in andere Verzeichnisse ist die Angabe des richtigen Pfades von fundamentaler Bedeutung, - ansonsten funktioniert der Verweis nicht. Dabei ist zu beachten, dass die Zeichenkette ".." eine Ebene höher verweist und der Schrägstrich "/" eine Verzeichnisebene tiefer. Die Zeichenkette ".." kennen wir von der gewohnten Ordnerstruktur unserer Rechner her; sie bedeutet dort ebenfalls einen Wechsel zum übergeordneten Verzeichnis. Der Schrägstrich "/" hat bei Pfaden zu Verweisen dieselbe Funktion wie der Schrägstrich rückwärts "\" (Backslach) in einer gewohnten Verzeichnisstruktur.
Unterverzeichnisse
- <a href="../datei.htm">Verweistext</a>
Verweis eine Ebene oberhalb, d.h. ein Verzeichnis oberhalb - <a href="../../datei.htm">Verweistext</a>
Verweis zwei Ebenen oberhalb, d.h. zwei Verzeichnisse oberhalb - <a href="../verzeichnis/datei.htm">Verweistext</a>
Verweis in das Unterverzeichnis des nächsthöheren Verzeichnisses, d.h. Verweis in ein Parallelverzeichnis
Verweise auf Anker in anderen Dateien
Verweise auf Anker in anderen Dateien funktionieren genauso wie Verweise auf Anker innerhalb einer Datei. Allerdings muss unbedingt der richtige Pfad angegeben werden. Hier einige Beispiele:
- <a href="datei.htm#zielname">Verweistext</a>
Verweis auf einen Anker innerhalb einer anderen Datei, die im selben Verzeichnis liegt - <a href="verzeichnis/datei.htm#zielname">Verweistext</a>
Verweis auf einen Anker innerhalb einer anderen Datei, die eine Ebene tiefer liegt - <a href="../datei.htm#zielname">Verweistext</a>
Verweis auf einen Anker innerhalb einer anderen Datei, die eine Ebene oberhalb liegt
Beispiel zu Verweisen auf Anker in anderen Dateien
Verweise auf Adressen im WWW
Mit Verweisen ins "www" (World Wide Web) sind all jene Verweise gemeint, die auf seiten führen, die mit "http://" beginnen.
Beispiele:
<a href="http://www.orf.at/">Hauptseite des ORF</a>
<a href="http://wetter.orf.at/oes">Wetterseiten des ORF</a>
Verweise auf FTP-Adressen
FTP bedeutet File Transmitting Protocol und dient zum Transfer von Dateien und Verzeichnissen.
Beispiel:
<a href="ftp://ftp.uni-augsburg.de/">FTP-Server Augsburg</a>
<a href="ftp://ftp.uni-augsburg.de/README/">Augsburger Readme</a>
<a href="ftp://ftp.uni-augsburg.de/pub/doc/www/selfhtml/selfhtml.zip">Download Self-HTML</a>
Gopher, Telnet und Newsgroups
Das Gopher-Protokoll ist ein Vorläufer des HTTP-Protokolls. Mit Gopher war es bereits möglich, durch das Internet zu surfen und es gab bereits grafische Oberflächen.
Telnet erlaubt es, sofern man die nötigen Rechte hat, Zugriffe auf bestimmte entfernte Rechner zu tätigen (sog. Hosts). Der Unterschied zu den anderen Protokollen ist, dass man nicht nur Dateien herunterladen kann (zum Beispiel per HTTP oder FTP) sondern auch auf dem Host eingeloggt ist. Man kann sogar verschiedene Applikationen (Programme) laufen lassen und Befehle ausführen.
Newsgroups sind öffentliche Diskussionsforen, die mit Hilfe einer Software, z.B. Outlook Express oder Internet Explorer ausgelesen werden können.
Alle drei Methoden funktionieren nur, falls sie vom Browser unterstützt werden, bzw. ein eigenes Programm automatisch gestartet wird. Hier jeweils ein Beispiel:
<a href="gopher://adam.greenpeace.org:70/"> Gopher von Greenpeace</a>
<a href="telnet://locis.loc.gov">Library of Congress</a>
<a href="news:de.comm.infosystems.www.authoring">HTML und Co</a>
Email-Verweise
Aktivieren Sie einen Email-Link, so öffnet sich Ihr Standard-Email-Programm. Wenn Sie mit Netscape oder Lynx surfen, wird die Email-Funktion des Browsers aktiviert. In jedem Fall ist im An-Feld die Email-Adresse eingetragen, an die die Email versendet werden soll.
Beispiel:
<a href="mailto:rocky@gmx.at">Rocky</a>
Email-Verweis mit cc, bcc, Subjekt und Text im Body
Diese Funktionen sind für Microsoftprogramme optimiert, d.h. im Zusammenspiel von Internet Explorer, Outlook Express und Outlook. Wenn Sie jedoch einen anderen EmailClient, z.B. Eudora verwenden, können Sie diese Funktionen nicht nützen.
Beispiele:
- <a href="mailto:rocky@gmx.at?cc=hansi@gmx.net"> rocky</a>
- <a href="mailto:rocky@gmx.at?cc=kurti@gmx.net; franzi@utanet.at">rocky</a>
- <a href="mailto:rocky@gmx.at?bcc=andi@gmx.net"> Rocky</a>
- <a href="mailto:rocky@gmx.at">?su bject=Feedback zum HTML-Kurs">Mail me</a>
- <a href="mailto:rocky@gmx.at?body=Das ist meine Meinung:%0D%0ABitte hier eingeben">Mail me</a>
- <a href="mailto:rocky@gmx.at?cc=hansi@gmx.net&bcc=franzi@utanet.at&subject=Holladrioh&body=Werma schön schaun">Noch eine Mail</a>
Download-Verweise
Für Download-Verweise gibt es keine speziellen Tags. Die Browser nehmen einfach an, dass gewisse Dateien "downgeloadet" werden sollen, z.B. Zip-Dateien. Treffen Browser auf für sie unbekannte Dateitypen, werden diese automatisch zum Download angeboten.
Beispiel:
<a href="htmlvallite.zip"> Download</a>
<a href="http://ourworld.compuserve.com/ homepages/muenz/selfhtml.zip"> Dokument downloaden</a>
Verweise auf beliebige Dateien
Ein Link kann zu jedem beliebigen Datei-Typen gesetzt werden. Ob die Datei auch auf Ihrem Rechner ausgelesen werden kann, ist jedoch systemabhängig.
Beispiel:
<a href="rechnung.xls">Rechnung</a>
Mime-typ des Verweiszieles
Durch die Angabe der Art der Datei (Mime-Typ) wird die Arbeit des Browsers erleichtert, d.h. Dateien können leichter identifiziert werden
Beispiel:
<a href="rechnung.xls" type="application/msexcel"> Rechnung</a>
Zum Nachschlagen der verschiedenen Mime-Typen konsultieren Sie bitte die
Liste der Mime-Typen.
Beispiel für einen Verweis auf eine beliebige Datei
Dateien im eigenen Rechner(Netz)
Natürlich kann auch auf Dateien auf dem lokalen Rechner oder Netzwerk verlinkt werden. In diesem Fall sind jedoch absolute Pfadangaben notwendig. Absolut heißt, dass der gesamte Pfad angegeben werden muss.
Beispiele:
<a href="file://localhost/c:/daten/ projekt/homepage.htm"">Lokale Homepage</a>
Localhost kann entfallen:
<a href="file:///c:/daten/projekt/ homepage.htm">Lokale Homepage</a>
Verweisziel: Sprache und Zeichensatz
Es kann sowohl der Zeichensatz der Datei als auch die Landessprache angegeben werden. Durch die Angabe der Landessprache erkennen die UserInnen, ob diese Seite für sie überhaupt lesbar ist, z.B. Seiten auf arabisch, hebräisch oder japanisch. Durch die Angabe des Zeichensatzes wird der Browser auf eventuelle Probleme vorbereitet, d.h. es könnte eine Meldung auf dem Bildschirm erscheinen, die auf einen besonderen Zeichensatz aufmerksam macht; dieser könnte dann eventuell nachinstalliert werden.
Siehe dazu:
Liste der Zeichensätze
Endungensuche
Beispiele:
<a href="http://www.tau.ac.il/" hreflang="il" charset="iso-8859-8">Verweistext</a>
hreflang: hyper reference language; Angabe wie die Landesendung bei Domains
charset: Angabe des Zeichensatzes
Tabulatorreihenfolge
Mit der Tabulatortaste bewegen Sie sich von Steuerelement zu Steuerelement; das können Links sein, aber auch Schalter oder Formularelemente. Die Reihenfolge ergibt sich aus der Definition in der Quelldatei. Mit "tabindex=Zahl" (Zahl zwischen 0 und 32767) kann eine Änderung der Tabulatorreihenfolge erzwungen werden. Damit könnte z.B. ein Eingabefeld, dass sich sehr weit unten auf der Seite befindet, mit einem einzigen Druck auf die Tabulatortaste erreicht werden.
Achtung! Beim Setzen eines Tabindex müssen alle Elemente mitgezählt werden, die auf einer Seite vorhanden sind.
Beispiel:
<a href="datei1.htm" tabindex=4> Verweistext</a>
<a href="datei2.htm" tabindex=2> Verweistext</a>
Tastenkürzel für Verweise
Mit den so genannten "Accesskeys" (Tastaturkürzel) können Verweise direkt angesprungen werden; aktiviert werden sie mit der Eingabetaste. Allerdings werden Accesskeys von den Browsern kaum unterstützt, sodass jeder Hinweis durch den Browser auf sie fehlt. Somit werden Accesskeys von den UserInnen meist gar nicht entdeckt, selbst wenn sie vorhanden sind.
Beispiel:
<a href="index.htm" accesskey="h"> Homepage
Image-Maps
Image.Maps sind verweissensitive Grafiken. Stellen Sie sich ein Bild oder eine Grafik vor, über die ein unsichtbarer Plan gelegt wird. Dieser Plan beinhaltet Bereiche, die anklickbar sind und hinter denen sich Links verbergen. Diese Bereiche sind mit Formen zum Keksebacken vergleichbar. Sie müssen bei weitem nicht die gesamte Grafik ausfüllen; es ist sogar günstiger, wenn Flächen der Grafik oder des Bildes ausgespart werden, da die verschiedenen Bereiche sonst nur schwer voneinander unterschieden werden können. Moderne Screen Reader können Image-Maps auslesen. Und wenn die verschiedenen anklickbaren Bereiche mit sprechenden Beschriftungen versehen sind, werden Image-Maps für blinde und sehbehinderte UserInnen auch verständlich und benutzbar.
Aufbau einer Image-Map
Um eine Image-Map über eine Grafik oder ein Bild zu legen, wird eine so genannte Map-Anweisung geschriben. Diese kann an einer beliebigen Stelle des Body stehen und trägt einen Namen, der jedoch nichts mit der Grafik oder dem Bild zu tun haben muss. Es ist der Ankername, der beim Einfügen der Image-map verwendet wird.
Die verweissensitiven Flächen, also jene anklickbaren Bereiche, hinter denen sich die Links verbergen, werden als <area> definiert. Mit <area shape=> wird die Form der verweissensitiven Grafik festgelegt. Sie kann entweder viereckig (rect), kreisförmig (circle) oder vieleckig (Polygon) sein. Mit coords werden die Koordinaten des Area festgelegt, wobei zuerst die x-Koordinate (Abstand von links) und dann die y-Koordinate (Abstand von oben) angeschrieben wird. Die Koordinaten werden absolut, also in Pixel angegeben. Sollen Teile einer Image-Map nicht anklickbar sein, kann das Attribut nohref= verwendet werden. Jedoch wird genau dasselbe Ziel erreicht, wenn Teile einer Image-Map einfach nicht durch Koordinaten festgelegt werden.
Beispiel
<area shape=rect coords="w,x,y,z" ...>
Schließlich kommt noch das Attribut href= dazu, mit dessen Hilfe das Verweisziel angegeben wird.
Beispiel für Coords
- shape=rect - 4 Werte
linke obere Ecke - Pixel von links
linke obere Ecke - Pixel von rechts
rechte untere Ecke - Pixel von Links
rechte untere Ecke - Pixel von oben - area=CIRCLE
Mittelpunkt - Pixel von links
Mittelpunkt - Pixel von oben
Radius in Pixel - area=polygon - sehr viele Werte
Einfaches Beispiel einer Image-Map
Grafik = 140x165 Pixel
Der linke und der rechte Teil der Grafik verweisen jeweils zu verschiedenen Dateien:
<map name="Karli">
<area shape=rect coords="0,0,70,165" href="schmarrn.htm">
<area shape=rect coords="70,0,140,165" href="index.htm">
</map>
<img src="candy.jpg" usemap="#Karli" border=0>
Anzeige des Sprungzieles
Diese Funktion wird lediglich vom Internet Explorer unterstützt.
<map name="Karli"> <area shape=rect coords="0,0,70,165" title="Zum Schmarrn" href="schmarrn.htm"> <area shape=rect coords="70,0,140,165" title="Home" href="index.htm"> </map> <img src="candy.jpg" usemap="#Karli" border=0>
Verweisziel
Diese Funktion wird erst im Kapitel "Frames" besprochen. Es geht darum, ob das Sprungziel im selben oder in einem neuen Fenster geöffnet werden soll
target="_self" - Sprungziel im selben Fenster
target"_blank" - Sprungziel in einem neuen Fenster
Zusammenfassung
- Das Verweisschema besteht aus einem Anker, einer Hyperreferenz, einem Zielnamen und einer Beschriftung des Verweises.
Für blinde und sehbehinderte UserInnen ist es von essentieller Wichtigkeit, dass Verweise mit "sprechenden Namen" beschriftet sind. Auch grafische Verweise, z.B. Image-Maps können auf diese Weise dieser Personengruppe zugänglich gemacht werden. - die häufigsten Verweisziele sind:
Verweis innerhalb einer Datei durch das Setzen eines Ankers <a name=>
Verweise auf Anker in anderen Dateien
Verweise auf andere Dateien (bitte unbedingt den richtigen Pfad beachten),
Verweise auf WWW- und FTP-Seiten sowie auf Gopher, Telnet und Newsgroups Verweise auf Email-Adressen,
Verweise auf beliebige Dateien, welche die UserInnen entweder downloaden oder öffnen können. - Vor allem bei Verweisen auf beliebige Dateien ist es von Vorteil, den Mime-Typ mitzugeben
- Bei Email-Verweisen gibt es einige Zusatzfunktionen (das Vorgeben von cc, bcc, Subject und Text im Mailbody), die allerdings auf Microsoftprodukte optimiert sind und mit anderen Produkten, z.B. eudora nicht funktionieren.
Weiter / Textanfang / Inhalt