5. Creëren van hyperlinks
De letters HT in de afkorting HTML staan voor Hypertext. En met het woord hypertext worden klikbare woorden (links) bedoelt in een stuk tekst. Deze hyperlinks zorgen ervoor dat het World Wide Web vanaf verschillende locaties aan elkaar gekoppeld is. Laten we ook een hyperlink toevoegen aan onze website.
5.1 Het anker
Het plaatsen van de code voor een hyperlink is relatief eenvoudig wanneer je de code weet. Maar voordat we de code gaan plaatsen is het verstandig eerst vast te stellen wat het klikbare gedeelte wordt (het zichtbare gedeelte van de link). Ik stel voor dat we binnen onze eerder geplaatste paragraaf container een extra stukje tekst opnemen. Achter de laatste zin van de paragraaf die eindigt met de woorden we will end up with the structure called the Flower of Life. kunt u de tekst Learn More toevoegen. Van deze laatste twee woorden is het de bedoeling dat ze een hyperlink worden. Om dat te doen plaats u een a-container om de twee woorden heen, zie onderstaande afbeelding.
Als laatste is het nog nodig om deze hyperlink (de a-tag staat voor een anker) ook daadwerkelijk ergens naar verwijst. Dat kunt u doen door een extra zogenaamd attribuut te plaatsen binnen de open-tag van het anker. Net na de a maar nog binnen het groter dan teken > voegt u een spatie toe en typt u deze code href="https://www.learnit.nl". U kunt het toegevoegde attribuut href aan de open-tag van het anker lezen als "het anker refereert naar". Houdt er tevens rekening mee dat het volledige webadres moet worden opgegeven incl. de tekst http://
Uiteindelijk ziet de code er als volgt uit.
5.2 Een extra target attribuut
Wanneer u de website bekijkt in de browser en u klikt op de link dan zult u de huidige website verlaten om op de website van Learnit te belanden. Soms is het niet prettig dat u op een dergelijke manier bezoekers kwijt raakt. Het is soms dus wenselijk dat de nieuwe website wordt geopend in een nieuw tabblad of venster. Om dit voor elkaar te krijgen kunt u nog een attribuut toevoegen aan de open-tag van het anker. Wanneer u achter het laatste aanhalingsteken van het href-attribuut wederom een spatie plaatst gevolgd door deze code target="_blank" rel="noopener" dan zal, waneer u de webpagina opnieuw laadt in uw browser, de link openen in een nieuw tabblad. Deze code ziet er dan als volgt uit.
Test het resultaat in uw browser:
