Links

De grote kracht van het world wide web is de mogelijk rechtstreeks door te klikken naar andere documenten of e-mailadressen. In een echt boek moet je door de bladzijden bladeren om een verwijzing op te zoeken of zelfs een ander boek uit de kast halen. Op het web hoef je alleen maar op de link te klikken en je bent er.

Link naar webpagina

Het A element wordt gebruikt voor links. Een HREF attribuut geeft aan waar de link naar toe gaat. Over het algemeen verschijnt een link als blauwe, onderstreepte tekst. Middels stylesheets kun je dat veranderen. Een simpele klik op een link brengt je naar dat document:

<A HREF="http://www.weijers.net/index.php">Jan's Homepage</A>

Jan's Homepage

De tekst "Jan's Homepage" zou blauw en onderstreept verschijnen maar ik heb de kleuren aangepast door een stylesheet. De lezer kan op deze link klikken om naar mijn homepage te gaan.

Linken met een afbeelding

Net als tekst, kan ook een afbeelding een link vormen:

<A HREF="http://www.w3c.com/"><IMG SRC="parts/w3c-css.gif" STYLE="border-style:none;" ALT="W3C CSS Logo" WIDTH="88" HEIGHT="31"></A>
<A HREF="http://www.w3c.com/"><IMG SRC="parts/w3c-css.gif" STYLE="border-style:solid; border-width:5px;" ALT="W3C CSS Logo" WIDTH="88" HEIGHT="31"></A>

Beide afbeeldingen linken naar de website van het world wide web consortium. De linker heeft een BORDER attribuut met een waarde nul. Dit betekent dat er geen rand om de afbeelding wordt getekend die aangeeft dat het gaat om een link. Dat kan soms mooier zijn maar ook verwarrend voor de lezer. Links vanaf afbeeldingen zijn verder identiek aan links vanaf tekst.

Client side image maps

Een image map is een afbeelding waarbij je door op verschillende delen te klikken, verschillende links bereikt. Dat werkt zo:

<MAP NAME="arrows">
<AREA SHAPE="circle" COORDS="28,28,15" HREF="lists.php" ALT="Lijsten">
<AREA SHAPE="rect" COORDS="70,15,100,45" HREF="index.php" ALT="Inhoudsopgave" TITLE="Ga naar de inhoudsopgave">
<AREA SHAPE="poly" COORDS="141,8,161,28,141,48,121,28,141,8" HREF="tables.php" ALT="Tabellen">
<AREA SHAPE="rect" COORDS="0,0,170,57" NOHREF ALT="Niets">
</MAP>

<IMG SRC="imagemap.gif" WIDTH="170" HEIGHT="57" USEMAP="#arrows" ALT="De Imagemap">

De informatie tussen de <MAP> en </MAP> tags definieert de verschillende gebieden in de image map en waar die heen linken. Alle coördinaten worden gemeten vanaf de linkerbovenhoek van de afbeelding in de vorm X, Y. X is nul aan de linkerkant en wordt hoger naar rechts. Y is nul aan de bovenkant en loopt op naar beneden. Zoals je kunt zien wordt de image map toegevoegd op dezelfde manier als elke andere afbeelding: een IMG element met een SRC attribuut. Het USEMAP attribuut is hier wel nieuw. Dit verwijst naar het NAME attribuut van het MAP element dat de informatie voor deze image map bevat.

Er zijn drie manieren om een gebied te definiëren. De eerste is ene cirkel ("circle"). Het COORDS attribuut heeft 3 waarden. De eerste twee zijn de (X,Y) coördinaten van het middelpunt van de cirkel. De derde waarde is de straal. De tweede manier om een gebied te definiëren is een vierkant ("rect"). Het COORDS attribuut heeft 4 waarden. De eerste twee zijn de (X,Y) coördinaten van de linkerbovenhoek, de volgende twee van de rechteronderhoek. De derde manier om een gebied te definiëren is door een veelhoek ("poly"). Het COORDS attribuut kan een onbeperkt aantal waarden hebben, het minimum is vier. De eerste en de laatste coördinaat moeten hetzelfde zijn, om de veelhoek te sluiten. Vandaar dat het minimum aantal coördinaten vier is, die vormen samen een driehoek.

Zoals je kunt zien hebben de eerste drie AREA elementen een HREF attribuut om aan te geven waar dat gebied naartoe linkt. Het ALT attribuut is verplicht sinds HTML 4. Het TITLE attribuut is optioneel en heeft hetzelfde effect als in eerdere voorbeelden.

In dit voorbeeld zijn er drie gebieden gedefinieerd die de drie pijlen in de image map bedekken. Het vierde gebied dekt de hele afbeelding en heeft een NOHREF attribuut. Dat heeft tot gevolg dat een klik buiten een van de pijlen nergens heen linkt. Als een punt van de image map bedekt wordt door meer dan één gebied, wordt het gebied dat het eerst gedefinieerd is gebruikt. Je kunt dat zo gebruiken:

<MAP NAME="vierkanten">
<AREA SHAPE="rect" COORDS="37,37,53,53" NOHREF ALT="nothing" TITLE="Dit leidt nergens heen">
<AREA SHAPE="rect" COORDS="20,20,70,70" HREF="index.php" ALT="Inhoudsopgave">
<AREA SHAPE="rect" COORDS="3,3,87,87" HREF="../index.php ALT="Homepage"">
</MAP>

<IMG SRC="imagemap2.gif" USEMAP="#vierkanten" ALT="De Imagemap">

Het resultaat is dat het midden van de imagemap nergens heen leidt, de gele rand daarom heen naar de inhoudsopgave van de gids en de rode rand daar weer omheen naar mijn homepage.

Absolute and relatieve links

Voor links en images kun je absolute en relatieve links gebruiken. Bijvoorbeeld, voor een link vanaf deze pagina naar mijn homepage zijn er twee mogelijkheden:

<A HREF="http://www.weijers.net/teun/index.php">Mijn homepage</A>

<A HREF="../teun/index.php">Mijn homepage</A>

De eerste link is absoluut. De link geeft de naam van de server en de naam van het bestand. De tweede link is relatief en zegt: ga één niveau omhoog ("../"), open de map "teun" en laadt het bestand "index.php".

Het ligt voor de hand dat je relatieve links alleen kunt gebruiken voor documenten die op dezelfde server staan. Voor documenten op een andere server moet je altijd een absolute link gebruiken.

Het voordeel van relatieve links is ze blijven werken als je de betreffende bestanden naar een andere server verhuist. Daardoor is het ook makkelijker links tussen bestanden op je eigen computer te testen.

Basis voor relatieve links

Met het BASE element kun je het uitgangspunt voor relatieve links definiëren. Het BASE element moet tussen de <HEAD> en </HEAD> tags staan:

<BASE HREF="http://www.weijers.net/">

Als je dit element gebruikt worden relatieve links bepaald met http://www.weijers.net/ als basis. Als je geen BASE element gebruikt worden relatieve links altijd bepaald vanaf de pagina waar ze staan. Zie ook het kopje over relatieve links.

Toegangstoets

Met het ACCESSKEY attribuut kun je een toetscombinatie koppelen aan een link:

<A HREF="index.php" ACCESSKEY="I">Inhoudsopgave</A>
<A HREF="frames.php" ACCESSKEY="F">Frames</A>

Inhoudsopgave
Frames

Hoe je de toetscombinatie precies moet gebruiken hangt af van de browser en het systeem. In Safari en Firefox op de Mac moet je CTRL met de gekozen toets gebruiken. In Explorer voor Windows spring je naar de link met ALT-i en vervolgens gebruik je Enter om die te openen.

Links binnen documenten

Een link kan ook binnen een document worden gebruikt. Op de plek waar je heen wilt linken gebruik je een A element met een NAME attribuut. Bijvoorbeeld, alle kopjes in deze pagina hebben dit soort namen:

<A NAME="_key"></A>
<A NAME="_baseurl"></A>
etc.

Plaats hier geen tekst tussen de <A> en </A> tags aangezien dit sommige browsers in de war brengt en die dan tekst gaan onderstrepen die niet onderstreept moet zijn. De links om naar zulke namen te springen zien er als volgt uit:

<A HREF="#_key">Toegangstoets</A>
<A HREF="#_baseurl">Basis voor relatieve links</A>
etc.

Toegangstoets
Basis voor relatieve links

De twee voorbeelden hierboven linken naar de voorgaande twee kopjes in WebThings. Zoals je ziet bestaat het HREF attribuut uit een hekje (#) gevolgd door de eerder gedefinieerde naam.

Rechtstreekse link naar een onderdeel van een document

Je kunt ook rechtstreeks naar een bepaalde sectie van een document linken. Bijvoorbeeld, een link naar het kopje over paragrafen in het hoofdstuk over een eenvoudig HTML document ziet er zo uit:

<A HREF="basic.php#_para">Over paragrafen</A>

Over paragrafen

In dit voorbeeld kun je duidelijk zien hoe de twee eerder uitgelegde technieken worden gecombineerd. Het HREF attribuut bevat de naam van het document waar je heen wilt linken gevolgd door # en de naam van de sectie.

Link naar een e-mail adres

Het world wide web laat je ook rechtstreeks naar e-mail adressen linken. Klikken op zo'n link opent een formulier waarin de lezer een bericht kan typen of het start de e-mail software:

<A HREF="mailto:some.name@somecompany.com">Stuur iemand mail</A>

Stuur iemand mail

Je kunt snel de overeenkomst tussen deze link en de link naar een document zien. Het belangrijkste verschil is het protocol: "mailto:" in plaats van "http://". Een link naar meerdere e-mail adressen is makkelijk:

<A HREF="mailto:some.name@somecompany.com,some.name@someclub.org">Mail twee mensen</A>

Mail twee mensen

De twee e-mailadressen zijn gescheiden door komma's. Klikken op de link opent een nieuwe e-mail die gericht is aan beide adressen. Je kunt zelfs ook het onderwerp en de inhoud van het bericht instellen:

<A HREF="mailto:some.name@somecompany.com?subject=Uw%20product&body=Ik%20vind%20uw%20product%20geweldig.">E-mail</A>

E-mail

Hier gebruik je de codes %20 voor spaties en &amp; voor &. Als je dat niet doet zal het gebruik van spaties een browser in de war kunnen brengen. De link werkt dan misschien niet. Een goede HTML editor zal deze codering voor je kunnen doen.

Link naar andere soorten servers

Op dezelfde manier is het mogelijk naar alle andere soorten servers op het internet te linken. De HTML ziet er steeds hetzelfde uit maar het protocol is steeds anders. Kijk eens naar deze voorbeelden:

<A HREF="gopher://gopher.imf.org/">Internationaal Monetair Fonds</A>
<A HREF="ftp://ftp.demon.co.uk/pub/">Demon FTP Server</A>
<A HREF="news:btinternet.support">BTinternet support</A>

Internationaal Monetair Fonds
Demon FTP Server
BTinternet support

Alle links zien er voor de lezer hetzelfe uit (net als die naar webpagina's of e-mail) terwijl ze toegang bieden tot heel verschillende servers.

Gebruik van het TITLE attribuut

Bij het A element kun je ook een TITLE attribuut gebruiken. Het TITLE attribuut geeft extra informatie over de link als de muiscursor er boven hangt. Twee voorbeelden:

<A HREF="index.php" TITLE="De inhoudsopgave van deze gids">WebThings</A>

<A HREF="mailto:president@whitehouse.gov" TITLE="Mail rechtstreeks aan de President">Schrijf de President</A>

WebThings
Schrijf de President

De tekst van het TITLE attribuut verschijnt als je met de muis over deze links blijft hangen.

Gebruik van de status balk

De meeste browsers hebben een statusbalk onder aan het scherm. Bij sommige browsers kun je in combinatie met een link daar informatie weergeven:

<A HREF="http://www.apple.com/" ONMOUSEOVER="self.status='http://www.microsoft.com/'">Test</A>

Test

Dit werkt bijvoorbeeld in Microsoft Internet Explorer. Zoals als je aan dit voorbeeld kunt zien is dit een klein veiligheidsrisico omdat je de gebruiker kunt misleiden over het doel van de link.