HTML: Verweise und Downloads
Verweise (Links)
Was einen Text zum Hypertext macht und damit das Internet zu einem Informationsnetz, ist die Möglichkeit durch Klick auf ein Element zu einer anderen Seite oder zu einem anderen Seiteninhalt zu gelangen. Das Tag für einen Link wird auch als Anker bezeichnet, weshalb es <a> lautet (anchor). Es umschließt das Element, das anklickbar sein soll, und in seinem Attribut wird das Verweisziel angegeben:
<a href='https://www.ecosia.org/'>zur Ecosia-Suche</a><br>
<a href='https://www.decocode.de/?184&set=0080'>Unicode-Tabelle</a>
Das Attribut: href (hypertext reference) gibt an, an welchen Ort der Browser nun springen soll.
Das zweite Beispiel soll darauf hinweisen, dass es notwendig ist, das Verknüpfungszeichen & in einer Werteliste, die Teil einer URL ist, durch die HTML-Entität & zu ersetzen. Die URL lautet im Beispiel:
https://www.decocode.de/?184&set=0080
Der Code für diese URL lautet aber:
https://www.decocode.de/?184&set=0080
Das Attribut target
Mit Hilfe dieses Attributes lässt sich festlegen, in welchem Fenster bzw. Tab das Verweisziel eines Links geöffnet werden soll.
<a href='https://www.ecosia.org/' target='_blank'>zur Ecosia-Suche</a><br>
<a href='https://www.decocode.de/?184&set=0080'>Unicode-Tabelle</a>
Das Attribut target (= Ziel) gibt hier an, wo der neue Inhalt angezeigt werden soll. Der Wert '_blank' besagt, dass der Browser für den Inhalt ein neues Fenster oder Tab öffnen soll. Man kann auch einen (im Rahmen der korrekten Syntax) beliebigen Namen angeben (z. B. target='fotos'), wodurch das neue Fenster diesen Namen erhält. Werden nun von dem ursprünglichen Fenster aus weitere Links mit diesem Zielfenster aufgerufen, so wird nicht jedes Mal ein neues Fenster geöffnet, sondern der Inhalt des zweiten Fensters 'fotos' lediglich erneuert. Zu beachten ist der Unterstrich (_) vor dem Namen des Zielfensters. Dieser besagt, dass es sich hier um einen innerhalb der HTML-Syntax reservierten Namen mit definierter Bedeutung handelt (in diesem Fall eben mit der Bedeutung ›neues Fenster‹), während 'blank' ohne Unterstrich als normaler Name betrachtet wird. Bei normalen Namen wird kein Unterstrich verwendet.
Während es bei Links auf externe Websites oft sinnvoll ist, den Inhalt in einem neuen Fenster zu öffnen (target='_blank'), werden die Inhalte der eigenen Website in der Regel im selben Fenster geöffnet. In diesem Fall kann man das Attribut target weglassen.
Relative und absolute Pfadangaben
Für das Verweisziel href ist es von großer Bedeutung, ob man einen absoluten oder einen relativen Pfad angibt. Relative Pfade funktionieren auch offline in der Entwicklungsumgebung, absolute Pfade funktionieren nur online. ›Relativ‹ bedeutet relativ in Bezug auf das Verzeichnis, in dem sich die aktuelle Datei befindet. Wird kein Pfad angegeben, sondern nur der Dateiname, muss sich die Zieldatei im selben Verzeichnis befinden wie die Datei, die gerade im Browser angezeigt wird.
Das effektive Verweisziel wird im Browser in der Regel in der Statusleiste im unteren Bereich des Browserfensters angezeigt, wenn man den Link mit dem Mauszeiger überfährt. Dort kann man genau kontrollieren, ob man das Verweisziel im Anker korrekt angegeben hat, da immer der gesamte Pfad angezeigt wird, unabhängig davon, ob es sich um einen relativen oder absoluten Pfad handelt.
<!-- Relative Pfade -->
<!-- Datei im gleichen Verzeichnis: -->
<a href='kontakt.htm'>Meine Adresse</a><br>
<a href='./kontakt.htm'>Meine Adresse</a><br>
<!-- Datei im Unterverzeichnis 'html': -->
<a href='html/kontakt.htm'>Meine Adresse</a><br>
<a href='./html/kontakt.htm'>Meine Adresse</a><br>
<!-- Datei index.* im Unterverzeichnis 'kontakt': -->
<a href='kontakt/'>Meine Adresse</a><br>
<a href='./kontakt/'>Meine Adresse</a><br>
<!-- Datei eine Verzeichnis-Ebene höher: -->
<a href='../kontakt.htm'>Meine Adresse</a><br>
<!-- Datei eine Ebene höher, dann im Unterverzeichnis 'kontakt': -->
<a href='../kontakt/kontakt.htm'>Meine Adresse</a><br>
<!-- Datei zwei Ebenen höher: -->
<a href='../../kontakt.htm'>Meine Adresse</a><br>
<!-- Datei index.* im Wurzelverzeichnis (ab Domainname): -->
<a href='/'>Startseite</a><br>
<!-- Datei kontakt.htm im Wurzelverzeichnis (ab Domainname): -->
<a href='/kontakt.htm'>Startseite</a><br>
<!-- Datei kontakt.htm im Unterverzeichnis 'html' des Wurzelverzeichnisses: -->
<a href='/html/kontakt.htm'>Startseite</a><br><br>
<!-- Absolute Pfade -->
<a href='http://www.example.org/kontakt.htm'>Meine Adresse</a><br>
<a href='http://www.example.org/kontakt/'>Meine Adresse</a><br>
<a href='http://www.example.org/html/kontakt.htm'>Meine Adresse</a><br>
Verweise auf einzelne Seitenelemente
Abgesehen von Links auf eine andere Datei kann man auch auf eine bestimmte Stelle innerhalb eines Dokuments verweisen. Dieses Dokument kann die gleiche Datei sein, die gerade angezeigt wird oder eine andere, sei es von der selben Website oder von einer anderen. Dazu wird das betreffende Element über dessen Attribut id angesprochen.
<body id='oben'>
<header>Meine tolle Website</header>
<main>
<div><a href='#unten'>nach unten</a></div>
<div style='margin-top:1500px;'><a href='#oben'>nach oben</a></div>
</main>
<footer id='unten'>(C) by mir</footer>
</body>
In diesem Beispiel gibt es zwei Verweisziele, zu denen gesprungen werden soll. Einmal das <body>-Element mit dem Attribut id='oben' und dann einen <footer>-Container mit dem Attribut id='unten'.
Um eine lange Seite zu erzeugen, wurde nun mit style='margin-top:1500px;' ein Abstand von 1500 Bildpunkten nach oben definiert. Im oberen Teil der Seite gibt es nun einen Link zu dem Anker mit der ID 'unten', und am Seitenende gibt es einen Link zum Beginn des <body>-Elements. Vor dem Namen der ID als Wert von href muss immer ein Gatterzeichen # stehen, nicht aber bei dem Wert von id.
Es sind auch Verweise auf Anker in anderen Dateien, sowohl relativ als auch absolut möglich.
<a href='https://de.selfhtml.org/html/verweise/projektintern.htm#anker'>Weitere Infos bei SelfHTML</a>
Grafiken als Verweisobjekt
Um ein Bild als anklickbares Verweisobjekt (aka image map) zu definieren, wird statt eines Textes einfach das <img>-Tag des Bildes zwischen die <a>-Tags gesetzt. Manche Browser zeichnen automatisch einen fetten Rand um das Bild. Möchte man das verhindern, muss man das CSS-Attribut für die Grafik auf border-width:0px; setzen.
<!-- Grafik als Link ohne Rahmen -->
<a href='https://de.wikipedia.org/wiki/Smiley'>
<img src='http://www.decocode.de/img/happy.png' alt='Smiley' style='border-width:0px;'>
</a>
<!-- Grafik als Link mit Rahmen -->
<a href='https://de.wikipedia.org/wiki/Smiley'>
<img src='http://www.decocode.de/img/happy.png' alt='Smiley'>
</a>
Um begrenzte Bereiche einer Grafik als Verweis zu markieren, werden die Elemente <map> und <area> verwendet.
<div>
Wähle eine Form:
<img src='img/sample-usemap.png' usemap='#shapes' alt='vier Formen'>
<map name='shapes'>
<area shape='rect' coords='50,50,100,100'> <!-- das Loch im roten Rechteck -->
<area shape='rect' coords='25,25,125,125' href='red.html' alt='rotes Rechteck'>
<area shape='circle' coords='200,75,50' href='green.html' alt='grüner Kreis'>
<area shape='poly' coords='325,25,262,125,388,125' href='blue.html' alt='blaues Dreieck'>
<area shape='poly' coords='450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60' href='yellow.html' alt='gelber Stern'>
</map>
</div>
Das Ergebnis (zur Bildquelle):
Tooltip-Info
Wenn man möchte, dass beim Überfahren eines Links ein sog. ›Tooltip‹ erscheint, also ein kleiner Infotext, in den man praktischerweise eine kurze Beschreibung des Linkziels schreibt, dann wird das <a>-Tag durch das title-Attribut ergänzt. Dieses Attribut funktioniert auch bei allen anderen Elementen wie z. B. <span> oder <img>.
<a href='https://de.wikipedia.org/wiki/Smiley' title='Wikipedia-Artikel zum Smiley'>
<img src='http://www.decocode.de/img/happy.png' alt='Smiley' style='border-width:0;'>
</a>
Downloads
Verweise auf Dateitypen, die nicht vom Browser angezeigt werden können, führen dazu, dass der Browser diese Datei als Download anbietet. Einige Dateitypen können unter Umständen vom Browser dennoch angezeigt werden, indem sie innerhalb des Browsers eine Anwendung starten. Dies gilt z. B. für Office- oder PDF-Dokumente und diverse Multimediaformate. In diesen Fällen sollten die Links immer ein neues Fenster öffnen, damit der Benutzer nicht versehentlich den Browser beendet, wenn er das Dokument wieder schließt. In solchen Fällen kann man die Datei auch mit rechtem Mausklick herunterladen, worauf der Benutzer hingewiesen werden sollte.
Per HTML lässt sich dieses Verhalten nicht beeinflussen, mit PHP ist das allerdings möglich.
<a href='http://www.decocode.de/files/test.zip' title='ZIP-Datei'>Download ZIP-Datei</a><br>
<a href='http://www.decocode.de/files/test.rtf' title='RTF-Dokument'>Download RTF-Dokument</a><br>
<a href='http://www.decocode.de/files/test.pdf' title='PDF-Dokument'>Download PDF-Dokument</a>
E-Mail-Adresse als Verweis
Möchte man einem Benutzer die Möglichkeit anbieten, über einen Verweis das E-Mail-Programm zu starten, das auf dem Rechner des Benutzers verwendet wird, kann man mit href='mailto:' auch eine E-Mail-Adresse als Verweisziel angeben, an die die Mail verschickt werden soll. Die Zieladresse wird dann gleich in das entsprechende Feld des Programms eingetragen. Durch den Zusatz ?subject= kann auch ein Betrefftext angegeben werden (Leerzeichen müssen hier mit %20 maskiert werden).
<a href='mailto:paula@example.org?subject=Meine%20Anfrage'>Schreibe eine E-Mail an Paula</a>
Allerdings halte ich persönlich solche Links für keine gute Technik, da z. B. Benutzer in Internetcafés häufig kein solches Programm verwenden können. Besser sind Kontaktformulare per PHP.
Diese Technik öffnet auch automatisierten Sammlern von E-Mail-Adressen (E-Mail-Harvester) Tür und Tor, da die Adresse im Klartext im Quelltext der Seite zu lesen ist. Der Inhaber einer solchen Adresse muss sich dann nicht wundern, wenn er nach einer gewissen Zeit mit Werbemails überschüttet wird.
Um das zu vermeiden, können E-Mail-Adressen und andere sensible Informationen beispielsweise mit JavaScript verschleiert werden. Beispiele dazu findet man unter dem Stichwort E-Mail Obfuscation im Netz.