Naast reguliere tekst bestaan de meeste websites ook uit links. Deze links zijn handig om naar andere websites te linken, maar ook naar andere pagina's op je eigen website. Om een link in te voegen gebruik je de <a> tag, waarbij de a voor anchor (anker) staat.
Basis van het anchor element
Zoals eerder gezegd gebruik je de anchor tag voor het plaatsen van een link. Het anchor element bestaat uit een openingstag <a> en sluitingstag </a>.
Een voorbeeld van een link naar Google is:
<a href="http://www.google.com">Google.com</a>
Zoals je ziet beginnen we met de anchor tag. Daarna plaatsen we een href attribuut met het adres waar we naartoe willen linken als value.
Tussen de openings- en sluitingstags plaatsen we de tekst die als link weergegeven moet worden.
We sluiten het anchor element af met de sluitingstag </a>.
De link hierboven komt op er op de website als volgt uit te zien:
Link naar een html bestand
Met het anchor element kun je ook linken naar een html bestand dat zich in dezelfde map bevindt als het html bestand waar je de link in plaatst. Bijvoorbeeld vanuit het bestand mijneersteblog.html wil je linken naar het bestand overmij.html. Je plaatst dan de volgende code in het body element van mijneersteblog.html:
<a href="overmij.html">Over mij</a>
Overigens hoeft een link niet altijd naar een .html bestand te linken, maar kan het naar elke bestandsextensie linken zoals bijvoorbeeld een pdf bestand.
Link naar een gedeelte op dezelfde pagina
Indien je een pagina hebt met erg veel tekst en deze hebt opgedeeld in paragrafen, kun je het de lezer een stuk makkelijker door bovenaan de pagina een opsomming te maken van de paragrafen. In deze opsomming kun je dan links plaatsen die de bezoeker naar die specifieke paragraaf stuurt.
Stel je hebt een receptenblog en op die blog plaats je een recept voor pannenkoeken. In het recept staan eigenlijk twee aparte sub-recepten: 1 voor zoete pannenkoeken en 1 voor hartige pannenkoeken.
Voor elk sub-recept heb je een aparte paragraaf gemaakt:
<p>Zoete pannenkoeken</p>
<p>Hartige pannenkoeken</p>
Om naar deze paragrafen te kunnen linken voeg je een id attribuut toe aan de openings <p> tag:
<p id="zoet">Zoete pannenkoeken</p>
<p id="hartig">Hartige pannenkoeken</p>
Terug bovenaan de pagina plaats je dan de volgende anchor tags:
<a href="#zoet">Zoete pannenkoeken</a>
<a href="#hartig">Hartige pannenkoeken</a>
De waardes tussen "# en " moeten overeenkomen met de tekst van het id attribuut wat je in de openingstag van de paragraaf hebt geplaatst.
Wanneer een bezoeker zin heeft in een pannenkoek met spek en kaas kan hij/zij op de link voor Hartige pannenkoeken klikken zodat hij/zij gelijk het juiste recept in beeld heeft.
Geen opmerkingen:
Een reactie posten