Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)

HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)

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.

Bilder



 
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.

Bilder



 
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>

Bilder



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.

Bilder



Ü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.

Bilder



 

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.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:09

Herzlichen Dank für das Video.

Portrait von Monti7
  • 01.03.2015 - 10:52

Besten Dank für den 12. Teil der Serie

Portrait von pallasathena
Portrait von BOPsWelt
  • 08.12.2014 - 20:37

Vielen Dank für den 12. Teil.

Portrait von Caesarion2004
  • 08.12.2014 - 19:42

Vielen Dank für den weiteren guten und interessanten Teil der Reihe in Textform.

Portrait von Kundentest
  • 08.12.2014 - 18:21

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 13.11.2014 - 17:38

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von renate_C
  • 13.11.2014 - 10:55

Ich bedanke mich für das interessante Video samt Datei!

Portrait von MARIA52
  • 13.11.2014 - 09:29

Vielen Dank für das Video.

Portrait von Kundentest
  • 13.11.2014 - 09:00

Herzlichen Dank für das weitere Video.

Portrait von rocking_sid
  • 13.11.2014 - 07:55

Vielen Dank für das sehr informative Video-Training!

x
×
×