Hoe kan ik ankers toevoegen in mijn tekst?
Advanced
Met ankers kan je linken naar een bepaalde plaats op dezelfde pagina, ofwel "springen binnen dezelfde pagina". Dat kan handig zijn om een pagina beter te structureren. Je kan zo bijvoorbeeld bovenaan een overzicht maken van de onderwerpen waarover verder op die pagina te lezen valt. Met ankers kan je ervoor zorgen dat die onderwerpen aanklikbaar worden zodat mensen direct naar de betreffende tekst lager op die pagina kunnen springen.
Het maken van ankers is niet moeilijk, maar zit niet tussen de mogelijkheden in de toolbar van onze editor. Je moet dus wijzigingen doen in de html-code, via het plus-icoontje "Meer opties" > Codeweergave.
De codeweergave van een pagina kan soms overweldigend zijn. Geen paniek, als je tekst selecteert zal deze ook nog steeds geselecteerd te zien zijn in de codeweergave. Zo kan je gemakkelijk de juist tekst zoeken en aanpassen. De zoekfunctie van je browser kan je hierbij ook steeds helpen: cmd+f op Mac of ctrl+f op Windows.
Stap 1: maak een link van de gewenste tekst met tag:
Dit doe je door de tekst te selecteren en op 'link invoegen' (= icoon ketting) te klikken. Vul bij URL het #-teken in en benaming van je anker, bv. #inleiding. Klik dan op de blauwe tekst 'Bewerken'.
Het #-teken zorgt ervoor dat binnen de pagina zal gesprongen worden naar een element met de door jou gekozen naam, in dit geval "vrij_te_kiezen_naam".
Stap 2: geef aan naar waar moet gesprongen worden met "id":
Inleiding
Dit doe je door bij codeweergave in de tag van de tekst id="vrij_te_kiezen_naam" toe te voegen. In ons voorbeeld ga je naar <h2>inleiding</h2>, wat indiceert dat dit de titel Inleiding is, en plaats je na h2 id="inleiding".
Door de id toe te voegen geef je aan dat dit stukje tekst het element is naar waar er versprongen mag worden.
Stap 3: klik op opslaan en test je pagina.
Je browser weet nu dat wanneer men klikt op "aanklikbare tekst", gesprongen moet worden naar de koptekst "Inleiding".
Een voorbeeldje maakt duidelijk wat we hierboven beschreven:
