De definitie van verwijzingen gebeurt in HTML via het a-element. Voordat ik jullie laat zien hoe dit gebruikt wordt, nog wat algemene tips over hyperlinks. Bedenk absoluut goede verwijs teksten. Met een eenvoudig terug helpt meestal niemand. (Als een bezoeker namelijk van een externe pagina komt, weet hij meestal niet wat er met terug wordt bedoeld). Probeer beschrijvende verwijs teksten te kiezen.
Hyperlinks volgen in HTML altijd hetzelfde principe.
<a href="videos.html">Huidige video's</a>
Het a-element krijgt het attribuut href toegewezen. Dit href verwacht als waarde de bestemmingslink. In het vorige voorbeeld werd verwezen naar het bestand videos.html. Dit bevindt zich in dezelfde map als het HTML-bestand waarin de hyperlink is gedefinieerd.
Bij het definiëren van hyperlinks gelden verder de regels die ook gelden voor het invoegen van afbeeldingen.
Je kunt overigens niet alleen verwijzingen binnen het project definiëren. Ook hyperlinks kunnen worden ingesteld naar externe bestanden en domeinen.
<a href="http://www.psd-tutorials.de">PSD-Tutorials.de</a>
De tekst tussen de openingstag <a> en de sluitingstag </a> is uiteindelijk de anchor tekst. Standaard wordt deze tekst door browsers onderstreept weergegeven.
Doelvenster opgeven
Als je op een hyperlink klikt, wordt de bestemmingslink geopend in het huidige browser venster. Dat is normaal gesproken helemaal prima. Het kan echter zijn dat je bijvoorbeeld een verwijzing naar een extern domein hebt ingesteld. Als een bezoeker op deze link klikt, moet de bestemmingslink worden geopend in een nieuw browser venster of tabblad. Voordeel van deze methode: jouw website blijft open op de achtergrond.
Je moet echter niet elke link op je pagina in een extern venster openen, omdat bezoekers hier snel geïrriteerd van raken.
Met behulp van het target-attribuut van het a-element kun je het doelvenster bepalen waarin de respectievelijke bestemmingslink moet worden geopend. HTML biedt in eerste instantie drie standaard waarden voor target.
• _blank - De bestemmingslink wordt geopend in een nieuw browser venster.
• _self - Opent de bestemmingslink in het huidige browser venster.
• _parent - Hiermee kun je uit het frame breken. (Let op dat frames niet worden ondersteund in HTML5. Het is sowieso aan te raden deze techniek niet meer te gebruiken, aangezien er tegenwoordig betere alternatieven zijn. Voor wie meer wil weten over frames, vindt bijvoorbeeld informatie op de pagina http://de.wikipedia.org/wiki/Frame_(HTML)).
• _top - Dit wordt ook gebruikt in verband met frames. Hiermee kun je de bestemmingslink buiten het frameset openen.
Hier een voorbeeld van hoe je het target-attribuut gebruikt:
<a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a>
In dit geval zou de bestemmingslink http://www.psd-tutorials.de worden geopend in een nieuw venster/tabblad. Hetzelfde effect zou je overigens ook bereiken door in plaats van de gereserveerde naam _blank een fantasienaam zoals halligalli te gebruiken. Als je echter target gebruikt, zou ik echt adviseren om een van de gereserveerde namen te gebruiken.
Het verwijzingspad bepalen
Je kunt in het head-gedeelte van het HTML-bestand een zogenaamd verwijzingspad definiëren. Een dergelijk verwijzingspad zorgt ervoor dat alle bestemmingen worden weergegeven in een bepaald browser venster. Ook dit is natuurlijk vooral interessant in samenhang met frames.
Praktisch is dit echter ook als je bijvoorbeeld alle links wilt laten openen in een nieuw browser venster met behulp van _blank. Stel je een lijst met links voor. Als je wilt dat de doelbestemmingen altijd in een nieuw venster worden geopend, zou dat er als volgt uitzien:
<a href="http://www.facebook.com/psdtutorials" target="_blank">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt" target="_blank">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk" target="_blank">http://www.facebook.com/HowToNetzwerk</a>
Je zou dus aan elke a-definitie een target-attribuut moeten toewijzen.
Dit is zoals je ziet niet bijzonder efficiënt. Nog minder efficiënt wordt het dan wanneer je over een paar maanden besluit om de bestemmingslinks niet meer in een nieuw venster te openen. Dan zou je de target-attributen van alle links moeten aanpassen. Dit kan voorkomen worden door eerdergenoemde doelvensterbasis. Deze wordt gedefinieerd met behulp van het base-element in de head. Met het target-attribuut wijs je aan het base-element de gewenste waarde toe. Hier is een voorbeeld van hoe dat eruit zou kunnen zien:
<!DOCTYPE html> <html lang="nl"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> <base target="_blank"> </head> <body> <a href="http://www.facebook.com/psdtutorials">http://www.facebook.com/psdtutorials</a> <br /> <a href="http://www.facebook.com/psdDarkArt">http://www.facebook.com/psdDarkArt</a> <br /> <a href="http://www.facebook.com/HowToNetzwerk">http://www.facebook.com/HowToNetzwerk</a> </body> </html>
Dit bespaart je een hoop type werk.
Ankers definiëren
Zoals je al hebt gezien, kun je hyperlinks naar andere bestanden instellen. Ook binnen een HTML-bestand kunnen zogenaamde ankers worden gedefinieerd. Vervolgens kun je verwijzingen naar deze ankers maken. Dit is handig bij uitgebreide pagina's. Op deze manier kun je aan het begin van het document een inhoudsopgave definiëren, zodat bezoekers direct naar relevante secties kunnen springen zonder door het browservenster te hoeven scrollen.
Ankers worden gemaakt met het a-element. Echter, ankertags krijgen geen href-attribuut maar een name-attribuut toegewezen.
<a name="seitenanfang">Inhoud</a> <a name="kapitel1">Inhoud Hoofdstuk 1</a> <p>Hier volgt veel tekst.</p> <a name="kapitel2">Inhoud Hoofdstuk 2</a> <p>Hier volgt veel tekst.</p>
De anker namen kun je vrij kiezen. Ik raad je echter aan om deze zo kort mogelijk te houden, alleen kleine letters te gebruiken en speciale tekens te vermijden.
Om naar een anker te verwijzen, definieer je een normale hyperlink, net zoals aan het begin van deze tutorial is getoond.
<a href="#seitenanfang">Naar bovenaan de pagina</a>
Het href-attribuut wordt als waarde de anker naam toegewezen. Belangrijk is echter dat er voor de anker naam een hekje staat.
Je kunt overigens ook verwijzingen naar ankers maken die bestanden overschrijden. Ik ga in het volgende voorbeeld ervan uit dat er een bestand news.htm bestaat, dat zich in dezelfde map bevindt als het eigenlijke HTML-bestand. Binnen de news.htm is de anker seitenanfang gedefinieerd. Om hiernaar te verwijzen, wordt na de naam van het doelbestand (news.htm) een hekje genoteerd, gevolgd door de anker naam.
<a href="news.htm#seitenanfang">Naar bovenaan de pagina</a>
Zo eenvoudig kun je dus verwijzingen naar ankers in elk willekeurig bestand maken.
