Stap 13 – links maken

Wat natuurlijk het leukst is aan het Internet, is dat je delen tekst aanklikbaar kunt maken.

Link toevoegen

In mijn index.html document wil ik een aantal regels tekst onderaan omzetten naar links. De ene link wil ik laten verwijzen naar mijn homepage, de ander naar mijn e-mailadres:

<HTML>
<HEAD>
<TITLE>mijn eigen website</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<IMG SRC="images/logo.gif" WIDTH=400 HEIGHT=161 ALT="logo">
<H2>Een korte introductie</H2>
</CENTER>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten,
zoals

<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL></P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media. Dit zijn een
aantal van de aangeboden diensten:

<UL>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</UL></P>
<P><FONT SIZE=4>Kijk snel op haar <A HREF="http://www.elnorado.nl">website</A> voor meer informatie.
</FONT>
<BR />
E-mailen kan natuurlijk ook</P>
<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML> 

Zoals je ziet, heb ik bij het woord website de volgende code toegevoegd:

<A HREF="http://www.elnorado.nl">website</A>

De A-tag staat voor Anker en wordt gebruikt om verschillende documenten of onderdelen van documenten met elkaar te verbinden. 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 dat bij HREF aangegeven wordt. Hierboven is dat een lokatie elders op Internet. Maar je kunt daar ook andere lokaties instellen. Stel, dat je met de link wilt refereren naar een document in dezelfde directory, dan wordt de code:

<A HREF="volgende.html">Volgend onderdeel</A>

E-mailadres linken

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

<HTML>
<HEAD>
<TITLE>mijn eigen homepage</TITLE>
</HEAD>
<BODY BACKGROUND="images/background.gif" BGCOLOR="#FFFFE1" TEXT="#808080" LINK="#FF9B6A"
ALINK="#FF9B6A" VLINK="#FF0000">
<FONT FACE="Verdana" SIZE=2>
<CENTER>
<IMG SRC="images/logo.gif" WIDTH=400 HEIGHT=161 ALT="logo">
<H2>Een korte introductie</H2>
</CENTER>
<P><B><FONT COLOR="#FF9B6A">Nora Tol Virtual Publishing</FONT></B> werd midden jaren '90 gestart,
toen <FONT COLOR="#FF9B6A">Nora Tol</FONT> begon met het aanbieden van allerlei internetdiensten,
zoals

<OL>
<LI> Webdesign</LI>
<LI> Webhosting</LI>
<LI> Domeinregistratie</LI>
</OL></P>
<P>Inmiddels heeft ze een <U>nieuw bedrijf</U>, <FONT COLOR="#FF9B6A">ElNorado Productions</FONT>,
dat zich richt op het maken en beheren van de inhoud van websites en social media. Dit zijn een
aantal van de aangeboden diensten:

<UL>
<LI> Schrijven van blogs en artikelen</LI>
<LI> Optimaliseren van bestaande content</LI>
<LI> Voorprogrammeren van social media berichten</LI>
</UL></P>
<P><FONT SIZE=4>Kijk snel op haar <A HREF="http://www.elnorado.nl">website</A> voor meer informatie.
</FONT>
<BR />
<A HREF="mailto:info@noratol.nl">E-mailen</A> kan natuurlijk ook</P>
<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML>

Om een link te maken naar een e-mailadres voeg je de term “mailto:” toe aan <A HREF>. Door de “mailto:” code toe te voegen, 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">

Zo kun je ook zelfs een body meegeven (standaard bericht):
<A HREF="mailto:info@noratol.nl?subject=reactie op website&body=goede site joh">

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, bijv.:

<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, maar bij

<A HREF="programma.exe">Programma</A>
of
<A HREF="bestand.zip">Zip file</A>

zal er aan de bezoeker gevraagd worden of ze de file willen downloaden.

Stap 13c – interne links maken

Soms is het handig om niet naar een ander document te kunnen linken, maar naar een onderdeel van de pagina, waar de bezoeker zich al bevind. Dit kun je doen met een zogenaamde targetlink.

Je hebt hier twee codes voor nodig. De eerste, die hier behandeld wordt, 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. Wanneer hier op geklikt zou worden, dan herlaad de browser de huidige pagina en gaat op zoek naar “deel 2”. 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 een andere HTML file doen. 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 namen (<A NAME=”artikel1″> enz).
Op home.html kun je dus alle artikelen linken met gebruik van:

<A HREF="artikelen.html#artikel1">kop1</a>
<A HREF="artikelen.html#artikel2">kop2</a>

Stap 13c – telefoonnummers linken voor Skype

Om een telefoonnummer aanklikbaar te maken voor Skype gebruikers, gebruik je de “callto:” specificatie. Bijvoorbeeld op basis van je telefoonnummer. Vervang in onderstaande code het nummer met je eigen telefoonnummer:
<A HREF="callto:01231234567">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.

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.

MSN (Windows Messenger)

Het is mogelijk om op je website een link aan te maken, waarmee men jou kan toevoegen 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).

AIM (AOL Intstant Messenger en iChat (op de MAC))

Ook een link, waarmee men je op AIM kan toevoegen, is mogelijk. Dit doe je als volgt (vervang AIMgebruikersnaam met je eigen gebruikersnaam voor AIM):
<A HREF="aim:addbuddy?screenname=AIMgebruikersnaam">Voeg me toe op AIM</a>

Om een chatvenster te openen:
<A HREF="aim:goim">Chatten via AIM</a>

Echter heeft men dan nog geen rechtstreeks contact met jou. Om dit mogelijk te maken, gebruik je volgende code. Hierbij vervang je het woord AIMgebruikersnaam met je eigen gebruikersnaam voor AIM.
<A HREF="aim:goim?screenname=AIMgebruikersnaam">Chat met mij via AIM</a>

Je kunt zelfs nog een stap verder gaan en een standaard bericht instellen, bijvoorbeeld “Hallo!” (vervangen met eigen tekst, vervang ookAIMgebruikersnaam met je eigen gebruikersnaam voor AIM)
<A HREF="aim:goim?screenname=AIMgebruikersnaam&message=hallo!">Zeg Hallo via AIM</a>

Wil je meer regels tekst of linkjes toevoegen in je standaard bericht? Ook dat kan. Je kunt HTML gebruiken in je bericht. Echter, vermijd dan wel het gebruik van aanhalingstekens in je tags! Een witregel maak je bijvoorbeeld als volgt:
<A HREF="aim:goim?screenname=AIMgebruikersnaam&message=hallo!<br>Hoe gaat het?">Zeg Hallo via
AIM
</a>

en een link:
<A HREF="aim:goim?screenname=AIMgebruikersnaam&message=hallo!<br>Hoe gaat het?<br>bekijk mijn
<a href=http://www.noratol.nl>website</a>
">Zeg Hallo via AIM</a>

Let wel op, dat linkjes met leestekens (met name & en =) niet goed zullen werken!

Het is ook mogelijk om je gedeelde bestanden op AIM ter beschikking te stellen en een chat room te openen. Kijk voor informatie hierover bij Tech Recipes

Online status weergeven

Je kunt op jouw website zichtbaar maken of je wel of niet online bent op AIM. Hiervoor maak je eerst twee plaatjes aan. Het eerste plaatje moet aangeven dat je online bent en de ander geeft aan dat je offline bent. In dit voorbeeld zullen we er vanuit gaan dat deze plaatjes online.gif en offline.gif heten. We gaan er ook vanuit dat ze op de server van noratol.nl staan.
<img src="http://big.oscar.aol.com/AIMgebruikersnaam?on_url=http://www.noratol.nl/online.gif&off_url=http://www.noratol.nl/offline.gif" alt="AIM Status">
AIMgebruikersnaam vervang je door je eigen AIM gebruikersnaam
http://www.noratol.nl/online.gif vervang je door het complete URL naar het plaatje waarin je vermeldt dat je online bent
http://www.noratol.nl/offline.gif vervang je door het complete URL naar het plaatje waarin je vermeldt dat je offline bent

Als je wilt zorgen dat mensen meteen een bericht in kunnen sturen, dan koppel je de link voor het chatten aan het plaatje, bijvoorbeeld:
<A HREF="aim:goim?screenname=AIMgebruikersnaam">
<img src="http://big.oscar.aol.com/AIMgebruikersnaam?on_url=http://www.noratol.nl/online.gif&off_url=http://www.noratol.nl/offline.gif" alt="AIM Status"></a>

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>

Naar de volgende stap

Bookmark the permalink.

Comments are closed