Links, verwijzingen en koppelingen

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.

link zonder aanpassingen aan de layout 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://www.html-site.nl">Linkje</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.

voorbeeld van een mappenstructuur 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.

Hopelijk is een en ander duidelijker geworden.

cursus html


Sponsor: BlueYellow

Sitemap