Je kunt hyperlinks naar e-mailadressen instellen. Voordat ik laat zien hoe dat werkt, hier nog wat opmerkingen hierover. Persoonlijk ben ik geen fan van deze e-mail links. Veel geschikter zijn formulieren. Als er namelijk geen e-mailclient is geïnstalleerd of niet is geconfigureerd voor de huidige gebruiker, werken de e-mail links niet correct. Uiteindelijk moet je natuurlijk zelf beslissen of je e-mail links of formulieren wilt gebruiken. Uitgebreide informatie over de formulieren volgt uiteraard later in deze serie.
Wanneer er op een e-mail link wordt geklikt, opent er doorgaans een e-mailvenster voor de bezoeker.
Dit is echter niet gegarandeerd. De gebruiker zal daadwerkelijk de juiste instellingen moeten hebben gemaakt. Nogmaals: de e-mail link oplossing is niet ideaal. Toch kan zo'n link natuurlijk af en toe handig zijn. Hier is de syntax:
<a href="mailto:contact@psd-tutorials.nl">contact@psd-tutorials.nl</a>
Zoals je ziet, gaat het in eerste instantie om een klassieke hyperlink.
Belangrijk hierbij is echter wat als waarde wordt toegewezen aan het href-attribuut. Het doel begint altijd met mailto, gevolgd door een dubbele punt. Daarachter komt het gewenste e-mailadres.
Bij e-mailverwijzingen moet je overigens opletten wat je als linktekst invoert. Het is het beste om daar ook nog eens het e-mailadres in te voeren. Zo kunnen gebruikers bij wie er na het klikken op de hyperlink niets gebeurt of waarbij geen e-mailclient wordt geopend, het adres kopiëren en je alsnog een e-mail sturen.
Wanneer je e-mail links definieert, heb je overigens nog andere opties dan alleen het kunnen opgeven van het ontvangeradres. Let er wel op dat de hier beschreven zaken geen HTML-standaard zijn, maar grotendeels worden ondersteund door browsers.
Je kunt bijvoorbeeld direct een Cc-ontvanger opgeven.
<a href="mailto:contact@psd-tutorials.nl?cc=info@psd-tutorials.nl">contact@psd-tutorials.nl</a>
Noteer achter het eigenlijke ontvangeradres een vraagteken. Daarachter volgen cc en een is-teken, gevolgd door het adres waar een zichtbare e-mailkopie naartoe moet worden gestuurd. Als alternatief voor cc kun je overigens ook bcc noteren. In dat geval wordt het opgegeven adres overgenomen in het Bcc-veld en wordt de e-mail als onzichtbare kopie naar dat adres verzonden.
Als je een vooraf gedefinieerd onderwerp wilt opgeven, is dat ook mogelijk.
<a href="mailto:contact@psd-tutorials.nl?subject=Bericht%20aan%20PSD-Tutorials.nl">contact@psd-tutorials.nl</a>
Je noteert het gewenste onderwerp achter subject. Om ervoor te zorgen dat dit daadwerkelijk werkt, moet je geen spaties in het onderwerp gebruiken en deze specifiek maskeren met de tekenreeks %20.
Als je wilt, kun je overigens ook meteen de e-mailtekst of een deel ervan opgeven. Hiervoor wordt de parameter body gebruikt.
<a href="mailto:contact@psd-tutorials.nl?body=Hallo%20PSD-Tutorials.nl">contact@psd-tutorials.nl</a>
Hier gelden dan dezelfde zaken die al zijn beschreven in verband met subject.
Bestanden aanbieden voor download
Als je bestanden wilt aanbieden voor download op je website, dan kan dat natuurlijk. (Ik laat de juridische aspecten even buiten beschouwing). Dit kan op een heel eenvoudige manier worden gerealiseerd. Je definieert een hyperlink en geeft het desbetreffende bestand op als doel van de verwijzing.
<a href="book.zip">De downloads van het boek</a>
In dit geval is het doel van de verwijzing een Zip-bestand. Als je op de hyperlink klikt, zal de browser doorgaans een download dialoogvenster aanbieden of het bestand direct downloaden.
Via dit venster kan het bestand dan worden gedownload. Uiteindelijk beslissen echter de browsers hoe ze omgaan met opgegeven bestanden.
PDF-bestanden worden normaal gesproken direct weergegeven door browsers wanneer er op de desbetreffende link wordt geklikt. In de meeste gevallen is dit natuurlijk prima. Het kan echter gebeuren dat je ook PDF-bestanden wilt aanbieden om te downloaden. (Natuurlijk kunnen gebruikers met de rechtermuisknop op de link klikken en het bestand downloaden. Het is echter niet verstandig om ervan uit te gaan dat alle websitebezoekers van deze mogelijkheid op de hoogte zijn).
In HTML5 kunnen hyperlinks daadwerkelijk worden gemarkeerd als download links. Hiervoor wordt het attribuut download gebruikt.
<a href="ebook.pdf" download>Downloaden</a>
Een link die is voorzien van dit attribuut zal - mits de browser het attribuut ondersteunt - het bestand downloaden.
Standaard wordt het bestand opgeslagen onder de naam die het in de oorspronkelijke versie had. Ook dat is meestal prima. Het kan echter voorkomen dat je een andere naam aan het gedownloade bestand wilt geven. Ook dat is probleemloos mogelijk. Opnieuw wordt het download-attribuut hiervoor gebruikt. Aan dit attribuut wijs je als waarde de gewenste naam toe.
<a href="ebook.pdf" download="dk.pdf">Download</a>
Als de browser deze mogelijkheid ondersteunt, gebruikt hij bij het downloaden de naam die is toegewezen aan het download-attribuut.
Logische relaties aangeven
Een attribuut dat in verband met het definiëren van hyperlinks zeker interessant kan zijn, is rel. Want met behulp van dit attribuut kan worden aangegeven in welke logische relatie de hyperlink tot het bestemmingsadres staat. Browsers zouden deze informatie bijvoorbeeld kunnen gebruiken om bij het bewegen van de muis over de links bijbehorende pictogrammen weer te geven. Op dit moment doen ze dat echter nog niet. Het rel-attribuut heeft dus geen zichtbare gevolgen.
<a href="zwei.htm" rel="next">volgende</a>
Voor het rel-attribuut zijn de volgende waarden beschikbaar:
• alternate – Link naar een alternatieve versie van het document.
• author – Link naar de auteur van het document.
• bookmark – Permanente link van het document die als bladwijzer kan worden gebruikt.
• help – Link naar een helpbestand.
• license – Link naar de auteursrechteninformatie.
• next – Link naar het volgende document.
• nofollow – Hiermee kan worden aangegeven dat zoekmachines de link niet moeten volgen.
• noreferrer – De browser stuurt geen HTTP-Referrer-header.
• prefetch – Het document moet in de cache worden geladen.
• prev – Link naar het vorige document.
• search – Link naar een zoeksysteem voor het document.
• tag – Een trefwoord dat het document beschrijft.
Op deze manier kan de relatie tussen het bestemmingsadres en de hyperlinks dus nauwkeuriger worden beschreven.
