Het gebruik van HTML ankers

1. Wat zijn ankers?
2. Hoe anker plaatsen?
3. Hoe linken?
         a) Intern
         b) Extern
4. Hyperlinks
5. Ankers plaatsen in WordPress

1. Wat zijn HTML ankers?

Ankers zijn plekken op een pagina waarnaar u kunt linken. Bv.: klik hier om naar het anker “hoe” te gaan.
Het anker “hoe” is geplaatst op de plek “Hoe anker plaatsen ” hieronder. Als u dus klikt op de ankertekst met URL (bladwijzerlink) wordt u naar de plaats van het anker gebracht, zonder dat de pagina vernieuwt of zo.
Een anker werkt zo als interne link op een pagina. Lees hier het Woordenboekitem over ankers en ankertekst.

Het plaatsen van ankers gaat in twee stappen
1. Plaats het anker op de plek waar u naartoe wilt springen
2. Op een andere plek maakt u de ankertekst met verwijzende link naar dat anker

Let op: ankers zijn hoofdlettergevoelig!

2. Hoe anker plaatsen?

Om een anker te plaatsen gebruikt u de volgende code op de plek waarnaar je wilt springen:
(vervang evt de ANKERNAAM naar een woord naar keuze)

<a name=”ANKERNAAM”></a>

3. Hoe linken?

a) Linken op de zelfde pagina

Als het anker zich op dezelfde pagina bevindt, kunt u linken naar een anker op de volgende manier:

<a href=”#ANKERNAAM”>Ga naar het anker</a>

VERGEET DE ‘#’ niet!
Ook hier kunt u de ankernaam en de tekst aanpassen

b) Linken binnen of buiten de website

Als het anker zich bevindt op een andere pagina, bijvoorbeeld “pagina.html”, linkt u op de volgende manier:

Binnen de website (een relatieve verwijzing)
<a href=”pagina.html#ANKERNAAM”>Ga naar anker</a> Buiten de website (een absolute verwijzing)
<a href=”https://domeinnaam.nl/pagina.html#ANKERNAAM”>Ga naar anker</a>

Opmerking: als u linkt naar een website, vermeld dan de https:// erbij!

<!– fout–> <a href=”www.domeinnaam.nl”>domeinnaam</a>  
<!– juist –> <a href=”https://www.domeinnaam.nl”>domeinnaam</a>

4. Hyperlinks

De links naar de ankers worden ‘hyperlinks’ genoemd. De structuur van een hyperlink is als volgt:

<a href=”pagina.ext” target=”_target” title=”Hier meer info”>Link</a>

Technische uitleg:

AttribuutUitleg
hrefDit is de locatie voor de hyperlink.
vb. ‘https://www.domeinnaam.nl’, ‘index.php’,… of de bladwijzer, bv. #top
targetHet doelwit van de link. De standaard mogelijkheden zijn:
_blank: op en in een nieuw venster
_parent: in het hogere frame dan het frame waarin de hyperlink staat. Als er geen zo’n frame is heeft dit hetzelfde effect als _self
_top: op dezelfde pagina, maar zonder frames.
_self: open in hetzelfde venster/frame als de huidige pagina
framenaam: als je een frame maakt, en je geeft het als naam “blabla”, dan kun je de bron van het frame veranderen door in het target de framenaam te vermelden.
titleHiermee kun je een kleine tip laten verschijnen (mouseover), zoals dit
LinkDit is het enige wat de gebruiker op het eerste zicht ziet. Omschrijf hier waar de link heen gaat. Dit moet tussen de <a> </a> tags.

Ankers en linken maken in WordPress

U hebt dus twee dingen nodig: een ankerplaats (linkdoel) en de ankertekst met bladwijzerlink erheen.

Stap 1: ankerplaats (linkdoel)

Selecteer met de muis het blok dat de ankerplaats/linkdoel moet zijn. Nu krijgt u de details te zien in de rechter kolom.

Maak je tekst op, geef de stijl aan; bijvoorbeeld ‘H2’ (= Koptekst 2).

Wanneer het blok is aangeklikt ziet u in de rechterkolom helemaal onderaan de optie Advanced.
Klik dit open en u ziet het veld HTML anchor.
Hier geeft u de naam van het anker op. Bijvoorbeeld “link”. Dus zonder de #.

Dit werkt ook met afbeeldingen.

Stap 2: de bladwijzerlink naar het anker

De link naar de ankerplaats of het linkdoel.
Selecteer de tekst (een afbeelding kan ook) die link moet worden en klik op het kettingsymbool.
Geef de unieke naam van de zojuist gemaakte ankerplaats op, met een # ervoor, bijvoorbeeld:
#link

Sla de pagina of bericht op.