Stap 13 – links maken

Laatste update: 2 maart 2019

Niets is zo belangrijk op een website als linkjes aanmaken. En wat je ook gaat doen met onderstaande kennis, vermijd tekstlinkjes als “klik hier”. Dank je wel!

Link toevoegen naar website in HTML

In het index.html bestand, ga ik link toevoegen naar mijn website:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>Een korte introductie</h2></center>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Dit is een korte lijst van diensten:
<ol>
<li> Webdesign</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Adverteniecampagnes</li>
</ol>
</p>
<center><p>Bekijk <a href="http://www.noratol.com/">haar website voor meer informatie</a>.
<br />
<b><font size="4">Of neem contact op</font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center></body>
</html>

Zoals je ziet, heb ik de volgende code toegevoegd:

<a href="http://www.noratol.com/">

De A-tag staat voor Anker. Het wordt gebruikt dingen te linken, van pagina’s, documenten, telefoonnummers en e-mailadressen. Een A-tag hoort altijd afgesloten te worden.

HREF staat voor “hyper reference”. Alles wat volgt tussen aanhalingstekens, wordt door de browser gezien als een lokatie.

De tekst die tussen <A> en </A> staat, zal weergegeven worden als link. Wanneer hierop geklikt wordt, zal de browser op zoek gaan naar de lokatie die je bij HREF ingesteld hebt. Hierboven is dat een website.

Wil je linken naar een andere HTML pagina op dezelfde site, dan kan dat met bijvoorbeeld:

<a href="volgend.html">Volgend onderdeel</a>

De nieuwe locatie zal altijd standaard het huidige vervangen, maar je kunt ook een nieuwe venster/tab openen. Daarvoor maak je gebruik van de TARGET-attribute met waarden _parent, _blank, _top, _self, new of een naam van een venster als je frames gebruikt.

<a href="http://www.noratol.com" target="new">Opent een website in een nieuw venster</a>

Link aanmaken naar een E-mailadres

Het linken van een e-mailadres gaat op dezelfde manier. Dit doe ik zo:

<html>
<head>
<title>mijn eigen website</title>
</head>
<body background="images/background.gif"
bgcolor="#ffffe1" text="#808080" link="#ff9b6A"  vlink="#ff0000">
<font face="Arial">
<center>
<img src="images/logo.gif" width="400" height="161" alt="logo" />
<h2>Een korte introductie</h2></center>
<p>Nora Tol begon met het aanbieden van webdesigndiensten sinds <u>midden jaren '90</u> met
haar eerste bedrijf <i><font color="#ff9b6A">Nora Tol Virtual Publishing</font></i>. En nu
weer, met haar tweede bedrijf, <i><font color="#ff9b6A">ElNorado Productions</font></i></p>
<p>Al snel groeide de vraag naar <u>andere diensten</u> als het ontwerpen van logo's,
webhosting, online marketing en het maken van online content. Diensten die toegevoegd
werden.</p>
<p>Dit is een korte lijst van diensten:
<ol>
<li> Webdesign</li>
<li> Logo design</li>
<li> Website hosting</li>
<li> Domeinregistraties</li>
<li> Trefwoordenonderzoek</li>
<li> SEO</li>
<li> Adverteniecampagnes</li>
</ol>
</p>
<center><p>Bekijk <a href="http://www.noratol.com/">haar website voor meer informatie</a>.
<br />
<b><font size="4"><a href="mailto:info@noratol.nl">Of neem contact op</a></font></b>.</p>
</font>
<hr width="50%" color="#000000" noshade size="2">
</center></body>
</html>

Simpel toch:

<a href="mailto:info@noratol.nl">

Om een link te maken naar een e-mailadres voeg je de term “mailto:” toe aan <A HREF>. Door de “mailto:” code zal de browser bij het aanklikken van deze link het standaard mailprogramma van de gebruiker openen. Het nieuwe bericht wordt automatisch voorzien het e-mailadres dat je hebt ingevuld na de term “mailto:”

Je kunt in de link voor e-mail ook een subject meegeven. Dit doe je als volgt:

<a href="mailto:info@noratol.nl?subject=reactie op website">

En zelfs een standaard bericht:
<a href="mailto:info@noratol.nl?subject=reactie op website&body=goede site joh">

HTML kan geen mail verzenden overigens, maar dat wordt in de stap over formulieren nog uitgelegd.

Stap 13b – files linken voor download

Het is niet verplicht om bij HREF van de A-tag HTML files te linken, maar je kunt ook andere type bestanden hier neerzetten.

Link naar een foto:

<a href="image.jpg">foto</a>

Wat de browser herkend, zal in de browser zichtbaar worden. Stel, dat iemand zou klikken op de bovenstaande link naar image.jpg, dan wordt deze image gewoon in de browser zichtbaar.

Link naar een programma:

<a href="program.exe">Programma</a>

zal een scherm oproepen waarin gevraagd wordt of de bezoeker de file wilt downloaden.

Link naar een zip file:

<a href="bestand.zip">Zip file</A>

zal een scherm oproepen waarin gevraagd wordt of de bezoeker de file wilt downloaden.

Stap 13c – interne links maken

Soms is het handig als je naar een bepaald onderdeel van de pagina kunt linken. Dit kan met een zogenaamde targetlink.

Je hebt hier twee codes voor nodig. De eerste is de link op zich:

<a href="#deel2">Lees verder</a>

Zoals je ziet, staat hier niet echt een URL, maar het is wel een referentie (een tag). Wanneer hier op geklikt zou worden, dan herlaad de browser de huidige pagina en gaat op zoek naar “deel2”. Om te zorgen dat de browser ook daadwerkelijk dat deel zal vinden, zet je bij desbetreffende tekst, elders in het document, de volgende code:

<a name="deel2">hier is de rest van de tekst</a>

De browser zal nu bij het klikken op bovenstaande link de pagina verschuiven zodat de zin “hier is de rest van de tekst” bovenaan de browser staat. Je leidt de bezoeker dus meteen naar het stuk tekst naar keuze.

Deze manier van linken kun je ook naar andere HTML files doen. Dan gaat de browser niet alleen naar die nieuwe pagina, maar ook nog naar een bepaald deel binnen die pagina. Stel, dat je een online magazine hebt. Op de eerste pagina (home.html) zet je wat korte stukjes van alle artikelen. De artikelen staan allemaal in het document artikelen.html. De koppen zijn allemaal voorzien van tags (<A NAME=”artikel1″> enz).
Op home.html kun je dus alle artikelen linken met gebruik van:

<a href="artikelen.html#artikel1">kop 1</a>
<a href="artikelen.html#artikel2">kop 2</a>

Overigens hoef je bij het NAME-attribute geen tekst te plaatsen. Als je een locatie onzichtbaar wilt taggen, kan dat ook. Dit werkt namelijk net zo goed:

<a name="deel2"></a>

Stap 13c – Telefoonnummers linken

Namen en nummers die hier vermeld zijn, zijn willekeurig.

Voor Skype

Om een telefoonnummer aanklikbaar te maken voor Skype gebruikers, gebruik je de “callto:” specificatie. Vervang in onderstaande code het nummer met je eigen telefoonnummer:
<a href="callto:01231234567">Bel 01231234567</a>
of op deze wijze, waarbij je gebruik maakt van de Skype naam. Vervang in onderstaande code het woord “skype.naam” met je eigen skype naam:
<a href="callto:skype.naam">Bel me met Skype</a>

Let op, dat de namen en nummers die hier gebruikt worden, verzonnen zijn. Test het met je eigen account of die van bekenden!

Deze linkjes zullen alleen werken, als de bezoeker ook Skype op zijn computer heeft staan. Indien Skype niet open staat, dan wordt deze geopend.

Voor mobiele sites en VOIP software

Andere VOIP software en mobiele telefoons gebruiken liever een andere methode. De tel specificatie:

<a href="tel:01231234567">Bel 01231234567</a>

Stap 13d – Linken naar je Instant Messenger (MSN, AOL, Yahoo)

Het is mogelijk om links te maken naar verschillende chat / messenger programma’s. De linkjes zullen alleen werken, als de bezoeker ook desbetreffende chatprogramma geïnstalleerd, ofwel open heeft staan, tijdens het surfen.

Hieronder zal ik in kort uitleggen welke mogelijkheden er zijn.

In de voorbeelden worden willekeurige namen gebruikt. Dit zijn niet mijn Messenger namen! Let dus op! Vervang deze met jouw eigen gegevens of die van bekenden.

WhatsApp

Je kunt WhatsApp voor iemand openen, zodat ze je een bericht kunnen sturen. Vervang het nummer met je eigen nummer om dit te testen:

<a href="https://wa.me/01231234567">Stuur me een WhatsApp bericht</a>

Er wordt op deze wijze nog wel netjes aan de gebruiker gevraagd om de webversie van WhatsApp te activeren, als deze nog niet actief was. Daarna wordt direct een chatscherm geopend.

Je kunt ook berichten voorprogrammeren. Vervang het nummer met je eigen nummer om dit te testen:

<a href="https://wa.me/01231234567?text=Hoi%20hoe%20gaat%20het">Zeg'Hallo' tegen mij in een
WhatsApp bericht
</a>

Facebook Messenger

Dit is hoe je Facebook Messenger voor iemand openen om met jou te chatten (vervang Facebookuser met je eigen gebruikersnaam of Facebook pagina naam):

<a href="https://m.me/Facebookuser">Chat met mij op Facebook Messenger</a>

MSN (Windows Messenger)

Je kunt jezelf laten toevoegen op het contactenlijst van mensen op MSN. De link hiervoor is:

<a href="msnim:add?contact=msnadres">Voeg me toe op MSN</a>

Vervang msnadres met je eigen emailadres (je inlognaam bij MSN of Hotmail). Deze link werkt alleen als MSN open staat!

Microsoft biedt overigens standaard buttons hiervoor, inclusief HTML code.

Om een MSN chatvenster te openen, gebruik je de volgende code:
<a href="msnim:chat?contact=msnadres">Stuur me een bericht via MSN</a>

Vervang msnadres met je eigen emailadres (je inlognaam bij MSN of Hotmail).

Yahoo! Messenger

Om een bericht te laten sturen naar je Yahoo Messenger, gebruik je de volgende code op je website (vervang gebruikersnaam met je eigen login naam voor Yahoo):
<a href="ymsgr:sendim?gebruikersnaam">Stuur een bericht via Yahoo Messenger</a>
Om een standaard bericht in te stellen, gebruik je de volgende code:
<a href="ymsgr:sendim?gebruikersnaam&m=hallo">Zeg hallo via Yahoo Messenger</a>
Wil je meer tekst kwijt, dan moeten alle spaties vervangen worden door een plus-teken:
<a href="ymsgr:sendim?gebruikersnaam&m=hallo+daar">Zeg hallo via Yahoo Messenger</a>

Ook kun je op je site zichtbaar maken of je online bent of niet. Dit doe je als volgt:
<a href="ymsgr:sendim?gebruikersnaam">
<img src="http://opi.yahoo.com/online?u=gebruikersnaam&m=g&t=1" border=0> </a>

De specificatie die je geeft, na de T staat voor je StyleID. Dit is altijd het nummer 1, 2 of 3. Het bepaalt de style van de standaard plaatjes die Yahoo biedt. Test dit uit, om te zien welke je het leukste vindt.

Stap 13e – Linkjes toegankelijk maken voor voorlees-tools

Om een link of een grafische button toegankelijk te maken voor software als voorlees-programma’s of braille vertaling, moeten de links voldoen aan een title-specificatie en de foto’s moeten voldoen aan een alternatieve tekst.

Bijvoorbeeld in het geval van een tekst link:
<a href="http://www.noratol.nltitle="De website van Nora Tol">www.noratol.nl</a>

Bijkomend gevolg van de TITLE-specificatie is dat je de tekst ziet, wanneer je met je muis even blijft hangen op de link.

En in het geval van een grafische link:
<a href="http://www.noratol.nl" title="De website van Nora Tol"><img src="button.jpg"
alt="De website van Nora Tol" border="0"></a>

Het gerucht gaat dat het toevoegen van de TITLE-attribute je helpt bi j zoekmachines.

Naar de volgende stap

Bookmark the permalink.

Comments are closed.