HTML Links

in deze tutorial leert u hoe u links naar andere pagina’ s in HTML maakt.

koppelingen maken in HTML

een koppeling of hyperlink is een verbinding van de ene webbron naar de andere. Met Links kunnen gebruikers naadloos van de ene pagina naar de andere gaan, op elke server waar ook ter wereld.

een link heeft twee uiteinden, ankers genaamd. De link begint bij het bron-anker en wijst naar het doel-anker, dat elke webbron kan zijn, bijvoorbeeld een afbeelding, een audio-of videoclip, een PDF-bestand, een HTML-document of een element in het document zelf, enzovoort.

standaard verschijnen koppelingen als volgt in de meeste browsers:

• een niet-bezochte link is onderstreept en blauw.
• een bezochte link is onderstreept en paars.
• een actieve link is onderstreept en rood.

u kunt dit echter overschrijven met behulp van CSS. Meer informatie over styling links.

HTML Link syntaxis

Links worden gespecificeerd in HTML met behulp van de tag <a>.

een link of hyperlink kan een woord, een groep woorden of een afbeelding zijn.

alles tussen de tag openen <a> en de tag sluiten </a> wordt het deel van de link dat de gebruiker ziet en aanklikt in een browser. Hier zijn enkele voorbeelden van de links:

<a href="https://www.google.com/">Google Search</a><a href="https://www.tutorialrepublic.com/">Tutorial Republic</a><a href="images/kites.jpg"> <img src="kites-thumb.jpg" alt="kites"></a>

het kenmerk href specificeert het doel van de link. De waarde kan een absolute of relatieve URL zijn.

een absolute URL is de URL die elk deel van het URL-formaat bevat, zoals protocol, hostnaam en pad van het document, bijvoorbeeld https://www.google.com/, https://www.example.com/form.php, enz. Hoewel relatieve URL ‘ s paginarelatieve paden zijn, bijvoorbeeld contact.html, images/smiley.png, enzovoort. Een relatieve URL bevat nooit het voorvoegsel http:// of https://.

doelen instellen voor Links

het kenmerk target vertelt de browser waar het gekoppelde document moet worden geopend. Er zijn vier gedefinieerde doelen, en elke doelnaam begint met een underscore (_) teken:

• _blank — opent het gekoppelde document in een nieuw venster of tabblad.
• _parent — opent het gekoppelde document in het bovenliggende venster.
• _self — opent het gekoppelde document in hetzelfde venster of op hetzelfde tabblad als het brondocument. Dit is de standaardwaarde, daarom is het niet nodig om deze waarde expliciet op te geven.
• _top — opent het gekoppelde document in het volledige browservenster.

probeer het volgende voorbeeld uit om te begrijpen hoe het doel van de link in principe werkt:

<a href="/about-us.php" target="_top">About Us</a><a href="https://www.google.com/" target="_blank">Google</a><a href="images/sky.jpg" target="_parent"> <img src="sky-thumb.jpg" alt="Cloudy Sky"></a>

Bladwijzerankers

u kunt ook bladwijzerankers maken zodat gebruikers naar een specifieke sectie van een webpagina kunnen springen. Bladwijzers zijn vooral handig als je een zeer lange webpagina hebt.

bladwijzers maken is een proces in twee stappen: voeg eerst het id attribuut toe aan het element waar u wilt springen, gebruik dan de waarde id attribuut voorafgegaan door het hash teken (#) als de waarde van het href attribuut van het <a> tag, zoals getoond in het volgende voorbeeld:

<a href="#sectionA">Jump to Section A</a><h2>Section A</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>

downloadlinks

aanmaken u kunt de bestandsdownloadlink ook maken op precies dezelfde manier als het plaatsen van tekstlinks. Wijs gewoon de bestemming URL naar het bestand dat u beschikbaar wilt zijn om te downloaden.

in het volgende voorbeeld hebben we de downloadlinks gemaakt voor ZIP -, PDF-en JPG-bestanden.

<a href="downloads/test.zip">Download Zip file</a><a href="downloads/masters.pdf">Download PDF file</a><a href="downloads/sample.jpg">Download Image file</a>