Anker
<a> … </a>
Het bestaansrecht van het internet, het belangrijkste element voor een website, gemaakt zodat je kunt koppelen naar andere sites, naar andere pagina’s binnen je eigen site en om specifieke plekken binnen een en dezelfde pagina te markeren. We hebben het natuurlijk over de anker-tag. We gaan in dit artikel eens kijken hoe verwijzingen, koppelingen en links ook al weer in elkaar zitten. Voor de een gesneden koek, voor de ander weer een eye-opener.
Het anker-element zorgt ervoor dat een stukje tekst, of een plaatje, wordt veranderd in een link naar een andere bron op het web. In de meeste browsers wordt de link onderstreept en in een afwijkende kleur weergegeven. Met behulp van stijlbladen kun je er iedere gewenste verandering aan geven, maar zaak is wel dat het voor de gebruiker als een link herkenbaar blijft. Onderscheid je hyperlinks dus op een of andere manier, blijf anders van de opmaak af.
Hoe ziet die link er nu uit? Hier zie je hoe een hyperlink er uit ziet in normale ongeopende toestand, dus blauw en onderstreept, vervolgens als je er overgaat me de muis en die muis indrukt, rood en onderstreept en tenslotte als de pagina is bezocht, paars en onderstreept. Wanneer je dit dus wilt aanpassen gebruik je css.
De code van deze normale hyperlink is als volgt:
<a href=”http://localhost:8888″ target=”_blank”>HTML-site.nl</a>
Eerst de naam van het element daarna de verwijzing. Dit is eigenlijk de meest eenvoudige vorm van
een hyperlink. Er wordt verwezen naar een volledige URL. In plaats van die volledige URL kun je ook
verwijzen naar een andere pagina van de eigen website. Daarover zodadelijk meer.
Aan het ankerelement kun je ook het attribuut ’target’ toevoegen. De meesten zullen dit gebruiken
in het geval van een verwijzing waarbij ze willen dat deze in een nieuwe pagina opent. Dit doe je met
’target=”_blank”. Dat liggende streepje geeft aan dat het om een vastgelegde naam gaat en geen naam die
zelf bedacht is. Zo zijn er ook nog ‘_self’, ‘_parent’ en ‘_top’. Deze zijn bedacht voor gebruikers van frames.
Zo kun je door ‘_self’ een pagina in hetzelfde frame laten verschijnen.
Overigens is het gebruik van het ’target’-attribuut in de strict versies van html niet toegestaan. Dit met het idee
in het achterhoofd dat de gebruiker van een webpagina zelf moet kunnen bepalen hoe een nieuwe
pagina moet worden geopend.
Een verwijzing binnen een pagina heeft een markering nodig. Stel dat je onderaan de pagina een gebruiker
wilt kunnen laten terugkeren naar de bovenzijde van de pagina. Dan maak je bovenin de pagina een
markering. In deze pagina hebben we dat ook gedaan, en wel met behulp van de anker-tag, maar nu met
het ‘name’-attribuut.
<a name=”top”></a>
Hierbij is tussen de begintag en de eindtag geen tekst nodig zoals je ziet, deze zou anders de opmaak mee
krijgen voor een link en dat is niet nodig. Nu de verwijzing naar die markering
<a href=”#top”>naar boven</a>
Let er op dat er een ‘#’ (hekje) staat, dat geeft aan dat de browser moet zoeken naar een markering en
niet naar een bestand. Probeer het maar: naar boven.
Hoe zit het nu met die verwijzingen, links binnen je website, maar niet op dezelfde pagina?
Je kunt natuurlijk steeds de volledige URL ingeven, maar dan wordt er steeds via een omweg de juiste
pagina gezocht. Je kunt ook gebruik maken van relatieve links. Dat gaat als volgt.
Je kunt gewoon gebruik maken van ‘<a href=”help.htm”>’. Deze pagina staat dan in dezelfde map
als de huidige pagina. Maar wat als je nu verschillende mappen en directories hebt? Geen probleem!
Een paar voorbeeldjes maken het snel duidelijk.
- ../../../help.htm
De browser gaat drie niveaus omhoog ten opzichte van het verwijzende document. Daar wordt ‘help.htm’
vervolgens opgezocht. - /docs/main/help.htm
De browser gaat naar het hoogste niveau. De eerste map van je website zeg maar, en zoekt dan de map ‘docs’,
vervolgens de map ‘main’ en daarin bestand ‘help.htm’. - main/help.htm
In de huidige map, waarin het verwijzende document staat wordt de map ‘main’
opgezocht en dan het bestand.
Unieke attributen
| 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. |
Alle elementen XHTML1.0 Strict
