Stap 13a - links maken:
In mijn index.html document wil ik de twee 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>
<FONT COLOR="#FF9B6A"><B>Nora Tol Virtual Publishing</B></FONT> werd zo'n 12 jaar geleden gestart toen eigenaresse <FONT COLOR="#FF9B6A"><I>Nora</I></FONT> begon met het aanbieden van haar webdesigndiensten..
<P>
Dit is een beknopte lijst van de diensten die Nora Tol Virtual Publishing levert:
<OL>
<LI> Webdesign
<LI> Webhosting
<LI> Domeinregistratie
</OL>
<CENTER>
<FONT SIZE=4>Kijk snel op haar <A HREF="http://www.noratol.nl/">homepage</A> voor meer informatie.
<BR>
E-mailen kan natuurlijk ook!</FONT>
<HR WIDTH=50% COLOR=#000000 NOSHADE SIZE=2>
</CENTER>
</FONT>
</BODY>
</HTML>
Zoals je ziet heb ik bij het woord homepage de volgende code toegevoegd:
<A HREF="http://www.noratol.nl">homepage</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> in staat zal weergegeven worden als link. Wanneer hierop geklikt wordt zal de browser op zoek gaan naar het document dat bij HREF aangegeven wordt. Hierboven is dat een lokatie elders op Internet. 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>
Het linken van een e-mailadres 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>
<FONT COLOR="#FF9B6A"><B>Nora Tol Virtual Publishing</B></FONT> werd zo'n 12 jaar geleden gestart toen eigenaresse <FONT COLOR="#FF9B6A"><I>Nora</I></FONT> begon met het aanbieden van haar webdesigndiensten..
<P>
Dit is een beknopte lijst van de diensten die Nora Tol Virtual Publishing levert:
<OL>
<LI> Webdesign
<LI> Webhosting
<LI> Domeinregistratie
</OL>
<CENTER>
<FONT SIZE=4>Kijk snel op haar <A HREF="http://www.noratol.nl">homepage</A> voor meer informatie.
<BR>
<A HREF="mailto:info@noratol.nl">E-mailen</A> kan natuurlijk ook!</FONT>
<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 alsvolgt:
<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 files 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 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, dat elders in het document staat, 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 tijdschrift online hebt staan. 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 je 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 geinstalleerd ofwel open heeft staan tijdens het surfen.
Hieronder zal ik in het 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, inclusief HTML code. Deze codes kun je vaak gebruiken op profielensites als MySpace of Facebook.
Om een 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 ook
AIMgebruikersnaam 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:
Het is mogelijk om op je website zichtbaar te maken of je uberhaubt wel 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 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.nl"
TITLE="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>
