Een link maken met

Een link maken met

Met het element <a> kun je een htmldocument voorzien van een link. Het kan hier gaan om een interne link of een externe link. Een interne link is een link die verwijst naar een andere plek in hetzelfde document. Een externe link verwijst naar een ander document binnen dezelfde website of naar een andere website. Links vormen in feite de basis van het internet zoals we dat nu kennen. Wanneer een website geen links gebruikt of niet gelinkt wordt door andere documenten is de betreffende pagina niet te vinden.

Overigens bestaat er ook een element <link>, waarmee je dit element dus niet moet verwarren.

Voorbeelden

Even een paar voorbeelden.
Voorbeeld 1
Een gewone link naar een andere website:

<a href="http://www.volkskrant.nl">volkskrant</a>

Voorbeeld 2
Een gewone link naar een andere pagina van dezelfde website:

<a href="andere_pagina.htm">andere pagina</a>

Linken binnen een document

Met behulp van dit element kun je ook een linken in een en hetzelfde document. Dit wordt bijvoorbeeld gebruikt met lange pagina’s waar een linkje staat naar de bovenzijde van de pagina. Meestal door ‘top’ te gebruiken. Dit maak je als volgt. Bovenin het document komt de volgende code te staan:

<a title="top" name="top"></a>

Wanneer je nu de volgende code ergens onderin je document plaatst dan verwijst dit naar de top:

<a href="#top">top</a>

Deze toepassing kun je ook gebruiken door een specifieke locatie in een document te laten zien vanuit een ander document. Dus weer als voorbeeld:

<a href="http://www.volkskrant.nl/index.htm#top">volkskrant bovenaan</a>

Dit verwijst naar de top van index.htm, terwijl je op een andere site bent.

Alle attributen van het anker element

Hieronder volgt een overzicht van alle attributen die je kunt koppelen aan het anker element. Twee hebben we er al gehad, name en href, er zijn er nog meer.
href=”url
Dit attribuut verwijst naar een URL, meestal een andere webpagina. Als je wil verwijzen naar een plek in hetzelfde document, gebruik je een # (hekje). Daarmee weet de browser dat het moet zoeken naar een plaats en niet naar een bestand.
name=”naam
Hiermee kun je een plek markeren, met een unieke naam. Er hoeft geen tekst te komen tussen <a> en </a>. Want je geeft geen link weer, alleen maar een locatie.
rel=”linktype
Hiermee bepaal je het linktype. Een aantal voorbeelden uit HTML4.0 zijn:

“contents”=inhoudsopgave, “copyright”=auteursrechtinformatie, “appendix”=bijlage en “help”=helpinformatie.
rev=”linktype
De attributten “rel” en “rev” beschrijven de relatie tussen het gekoppelde en verwijzende document, “rev” doet alleen precies het omgekeerde van “rel”.
shape=”linktype” of “circle” of “poly” of “default“.
Door een anker te combineren met een objectelement krijg je een clientside-imagemap.
coords=”getal, getal
Bij een imagemap die je coordinaten in te stellen, om de juiste plek van een link te bepalen.
onfocus=”script
Hiermee verwijs je naar het script als een hyperlink de focus van een browser krijgt.
onblur=”script
Als een hyperlink een focus van de browser verliest verwijs je hiermee naar het script.
acceskey=”teken
Hiermee stel je een teken in als sneltoets voor het anker.
tabindex=”getal
Door een getal te kiezen tussen 1 en 32.767, geef je het anker een plaatsje in de tabvolgorde. Iedere keer als de gebruiker de TAB toets indrukt gaat de browser naar de volgende link in het document. Geef je deze een nummer dan gaat die niet van boven naar beneden, maar volgens de nummers door het document.
charset=”codeersysteem
Hiermee specificeer je het tekencodeersysteem dat de gekoppelde webbron gebruikt.
type=”mediatype
Het soort bestand waarnaar wordt verwezen wordt hiermee aangeduid. Je kunt bijvoorbeeld naar geluidsbestanden, afbeeldingen en andere zaken, anders dan een webpagina, verwijzen.
hreflang=”taal
De taal waarin de koppeling is geschreven.
target=”naam_doelframe
Hiermee kun je ervoor zorgen dat de koppeling ergens opent.

_blank Opent een nieuw en naamloos venster.

_self Laadt het gelinkte document in hetzelfde frame of venster.

_parent Laadt gelinkte document in het parent-frame.

_top Zorgt dat het document wordt geladen in het venster van het hoogste
niveau dat de link bevat. Frames worden allemaal vervangen.
Standaardattributen
Deze omvat de kern-, taal- en gebeurtenisattributen.
id=”naam
Met dit attribuut geef je een element een in het document unieke naam.
class=”tekst
Hiermee wijs je een klassenaam aan een element toe. In een klasse kunnen meerdere elementen zitten.
style=”tekst
Hiermee wijs je weergaveinformatie aan een element toe. Bijvoorbeeld tekstkleur, tekstgrootte en lettertype.
title=”tekst
Je verbindt aanvullende informatie aan een element. Deze informatie verschijnt als de gebruiker met de muis over het element gaat.
dir=”ltr” of “rtl
Hiermee stel je de leesrichting in, van links naar rechts (ltr) of van rechts naar links (rtl). Deze laatste geldt voor bijvoorbeeld Hebreeuws.
lang=”naam
Hiermee geef je aan in welke taal je document is geschreven.
onclick
De gebruiker klikt op het element
click
De gebruiker klikt.
onmousedown
De gebruiker drukt op de muisknop.
onmouseup
De gebruiker laat de muisknop los.
onmouseover
De gebruiker plaats de muis op een element.
onmousemove
De gebruiker beweegt de muis.
onmouseoutDe gebruiker haalt de muis weg van een element.
onkeypress
De gebruiker houdt een toets ingedrukt.
onkeydown
De gebruiker drukt op een toets.
onkeyup
De gebruiker laat een toets los.

          Leuk als je dit artikel deelt:
Share

7 gedachten over “Een link maken met

  1. helaas, hij werd doorgelinkt..
    /|a href=’ pagina.html ‘ style=’color:KLEUR_LINK;font-size:GROOTTE_LINK;text-decoration:UNDERLINE/NONE;’ | linknaam [/a]

    Je moet de /| vervangen door .. verder de hoofdletters ook.
    Hopen dat hij het nu wel doet 😛

    En zo zijn er nog veel meer attributen, ik hoop dat je erwat aan hebt gehad, succes!
    Voor verdere vragen,
    reinier@fox-creation.nl

  2. Hoe zou je een externe link dus een verwijzing naar een externe site op een bepaalde plek (net als een frame) in wordpress kunnen uitvoeren? Dus dat je externe aanroep onder je logo terecht komt in plaats van een hele nieuwe pagina?
    p.s. bovenstaande website is nog geen wordpress

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *