Ihr könnt auf E-Mail-Adressen Hyperlinks setzen. Bevor ich zeige, wie das funktioniert, noch einige Hinweise dazu. Persönlich bin ich kein Freund dieser E-Mail-Links. Besser geeignet sind vielmehr Formulare. Ist nämlich kein E-Mail-Client installiert oder nicht für den aktuellen Anwender konfiguriert, funktionieren die E-Mail-Links nicht richtig. Letztendlich müsst ihr aber natürlich selbst entscheiden, ob ihr E-Mail-Links oder Formulare verwenden wollt. Ausführliche Informationen zu den Formularen folgen natürlich noch im weiteren Verlauf dieser Reihe.
Wird ein E-Mail-Link angeklickt, öffnet sich beim Besucher üblicherweise ein E-Mail-Fenster.
Garantiert ist das allerdings nicht. Hier müssen vom Anwender tatsächlich die entsprechenden Einstellungen vorgenommen worden sein. Noch einmal: Ideal ist die E-Mail-Link-Lösung also nicht. Dennoch kann man einen solchen Link natürlich durchaus hin und wieder mal brauchen. Hier also die Syntax:
<a href="mailto:kontakt@psd-tutorials.de">kontakt@psd-tutorials.de</a>
Wie ihr seht, handelt es sich zunächst einmal um einen klassischen Hyperlink.
Entscheidend ist hier allerdings das, was dem href-Attribut als Wert zugewiesen wird. Das Verweisziel beginnt immer mit mailto, gefolgt von einem Doppelpunkt. Daran schließt sich die gewünschte E-Mail-Adresse an.
Bei den E-Mail-Verweisen solltet ihr übrigens aufpassen, was ihr als Verweistext eintragt. Am besten gebt ihr dort immer auch noch einmal die E-Mail-Adresse an. So können auch Anwender, bei denen sich nach dem Anklicken des Hyperlinks nichts tut bzw. sich kein E-Mail-Client öffnet, die Adresse kopieren und euch trotzdem eine E-Mail senden.
Wenn ihr E-Mail-Links definiert, stehen euch übrigens noch weitere Möglichkeiten zur Verfügung, als nur die Empfängeradresse angeben zu können. Beachtet dabei, dass die hier beschriebenen Dinge kein HTML-Standard sind, von den Browsern aber größtenteils unterstützt werden.
Zunächst einmal könnt ihr direkt einen Cc-Empfänger angeben.
<a href="mailto:kontakt@psd-tutorials.de?cc=info@psd-tutorials.de">kontakt@psd-tutorials.de</a>
Notiert dazu hinter der eigentlichen Empfängeradresse ein Fragezeichen. Daran schließen sich cc und ein Gleichheitszeichen, gefolgt von der Adresse, zu der eine sichtbare E-Mail-Kopie gesendet werden soll, an. Alternativ zu cc könnt ihr übrigens auch bcc notieren. In diesem Fall wird die angegebene Adresse ins Bcc-Feld übernommen, die E-Mail als unsichtbare Kopie an diese Adresse verschickt.
Wollt ihr einen vordefinierten Betreff angeben, ist das ebenfalls möglich.
<a href="mailto:kontakt@psd-tutorials.de?subject=Post%20an%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
Den gewünschten Betreff notiert ihr hinter subject. Damit das Ganze tatsächlich funktioniert, solltet ihr im Betreff keine Leerzeichen verwenden bzw. diese speziell über die Zeichenfolge %20 maskieren.
Wenn ihr wollt, könnt ihr übrigens auch gleich noch den E-Mail-Text oder einen Teil davon angeben. Verwendet wird dafür der Parameter body.
<a href="mailto:kontakt@psd-tutorials.de?body=Hallo%20PSD-Tutorials.de">kontakt@psd-tutorials.de</a>
Hier gelten dann dieselben Dinge, die bereits im Zusammenhang mit subject beschrieben wurden.
Dateien zum Download anbieten
Wenn ihr auf euren Webseite Dateien zum Download anbieten wollt, könnt ihr das natürlich machen. (Die rechtlichen Aspekte lasse ich dabei an dieser Stelle außen vor). Realisieren lässt sich das denkbar einfach. Man definiert einen Hyperlink und gibt die entsprechende Datei als Verweisziel an.
<a href="buch.zip">Die Downloads zum Buch</a>
In diesem Fall handelt es sich beim Verweisziel um eine Zip-Datei. Klickt man den Hyperlink an, wird der Browser im Normalfall einen Download-Dialog anbieten oder die Datei direkt herunterladen.
Über den kann man die Datei dann herunterladen. Letztendlich entscheiden allerdings die Browser, wie mit angegebenen Dateien verfahren wird.
PDF-Dateien zeigen die Browser normalerweise direkt an, wenn auf den entsprechenden Link geklickt wird. Das ist in den meisten Fällen natürlich völlig in Ordnung. Es kann aber durchaus sein, dass man auch PDF-Dateien zum Download anbieten will. (Selbstverständlich könnten die Anwender den Link mit der rechten Maustaste anklicken und die Datei herunterladen. Allerdings sollte man nicht unbedingt davon ausgehen, dass alle Webseitenbesucher von dieser Möglichkeit wissen).
In HTML5 kann man tatsächlich Hyperlinks als Download-Links kennzeichnen. Verwendet wird dafür das Attribut download.
<a href="ebook.pdf" download>Download</a>
Ein durch dieses Attribut ausgestatteter Link wird – immer vorausgesetzt, der Browser unterstützt das Attribut – die Datei herunterladen.
Standardmäßig wird die Datei unter dem Namen gespeichert, den sie im Original hat. Auch das ist sicherlich meistens in Ordnung. Es kann allerdings durchaus sein, dass ihr der heruntergeladenen Datei einen anderen Namen zuweisen wollt. Auch das ist problemlos möglich. Zum Einsatz kommt dabei wieder das download-Attribut. Diesem Attribut weist man als Wert den gewünschten Namen zu.
<a href="ebook.pdf" download="dk.pdf">Download</a>
Wenn der Browser diese Möglichkeit unterstützt, verwendet er beim Download den dem download-Attribut zugewiesenen Namen.
Logische Beziehungen angeben
Ein Attribut, das im Zusammenhang mit der Definition von Hyperlinks durchaus interessant sein kann, ist rel. Denn über dieses Attribut lässt sich angeben, in welcher logischen Beziehung der Hyperlink zum Verweisziel steht. Die Browser könnten diese Information beispielsweise dazu verwenden, beim Überfahren der Links mit der Maus entsprechende Icons anzuzeigen. Momentan machen sie das allerdings noch nicht. Das rel-Attribut hat also keine sichtbaren Auswirkungen.
<a href="zwei.htm" rel="next">weiter</a>
Für das rel-Attribut stehen die folgenden Werte zur Verfügung:
• alternate – Link zu einer alternativen Version des Dokuments.
• author – Link zum Autor des Dokuments.
• bookmark – Permanenter Link des Dokuments, der als Bookmark genutzt werden kann.
• help – Link zu einer Hilfedatei.
• license – Link zu den Copyright-Informationen.
• next – Link zum nächsten Dokument.
• nofollow – Hierüber kann man angeben, dass Suchmaschinen dem Link nicht folgen sollen.
• noreferrer – Der Browser sendet keinen HTTP-Referrer-Header.
• prefetch – Das Dokument soll in den Cache geladen werden.
• prev – Link zum vorherigen Dokument.
• search – Link zu einem Suchwerkzeug für das Dokument.
• tag – Ein Schlüsselwort, welches das Dokument beschreibt.
Auf diese Weise lässt sich die Beziehung zwischen Verweisziel und Hyperlinks also näher beschreiben.
