HTML college: hyperlinks
Hyperlinks maken het mogelijk om door een website te navigeren. Een hyperlink
vormt een soort springplank van de ene pagina naar de andere of naar een
ander Internet-object. Als je ze goed gebruikt maken ze informatie sneller
toegankelijk. Waar die informatie daadwerkelijk staat is niet belangrijk
want hyperlinks brengen de gebruiker net zo makkelijk naar een webserver
aan de andere kant van de aardbol als naar een HTML-pagina binnen dezelfde
site, mits je in verbinding staat met het internet natuurlijk.
Opbouw van een hyperlink
Hyperlinks worden in HTML aangeduid met de tag <a> (van 'anchor',
oftewel een punt waarnaar je je anker uitwerpt zodat je jezelf daar naartoe
kunt trekken). Bij deze tag geef je de springplank en het ankerpunt op.
De springplank (het vertrekpunt) bestaat meestal uit een
stukje tekst dat een
afwijkende kleur krijgt, vaak blauw onderstreept, en waarop je kunt klikken
om verder te springen. Het ankerpunt is het doel van de
reis, vaak een ander HTML- document maar soms ook een plaatje, een
programmaatje of een ander object dat wordt aangegeven door een internet-URL.
Hyperlinks zijn niet altijd onderstreept. Hoe de tekst van een hyperlink eruit
ziet kun je aangeven met een style-definitie, bijvoorbeeld via een externe
style sheet. Zie hiervoor het hoofdstuk over stijldefinitie.
De <a> moet worden afgesloten door de bijbehorende sluit-tag </a>.
Alle tekst die tussen <a> en </a> staat vormt de springplank.
Binnen de <a> tag moet je dan nog opgeven waar je naartoe wilt
springen. Dat doe je met het attribuut href.
Het attribuut href krijgt als waarde een URL. Dat kun
je zien als een internet-adres met daarbij aangegeven wat voor soort adres
het is, het protocol. Een hyperlink die verwijst naar een HTML-
document op de webserver van de HKU ziet er bijvoorbeeld zo uit:
<a href="http://www.hku.nl/hkuoverzicht.html">HKU overzicht</a>
In deze tabel zijn de verschillende onderdelen in deze regel benoemd:
| item |
naam |
betekenis |
| http |
protocol |
type-indicatie van het internet-adres,
andere typen zijn
bv. ftp, file en news
|
| www.hku.nl |
server-adres |
internet-naam van de computer
waarop het document staat,
eventueel gevolgd door :poortnummer |
| hkuoverzicht.html |
target of ankerpunt |
HTML-document waar je naartoe springt |
| http://www.hku.nl/hkuoverzicht.html |
URL |
het complete adres van het target |
| Tekst: "HKU overzicht" |
springplank |
Hierop klikken brengt je naar het target |
Interne hyperlinks
Hyperlinks kunnen ook wijzen naar een plaats binnen het huidige HTML-document.
Op de plaats waar je naartoe wilt springen zet je een anchor-tag als
markering met een naam die iets zegt over wat het markeert, zoals
bijvoorbeeld: <a name="absrel">
Als URL geef je dan een naam op die begint met een #, in dit geval zo:
<a href="#absrel">.
Richtlijnen voor duidelijke hyperlinks
Voor hyperlinks die je in een stuk tekst opneemt kun je een aantal richtlijnen
bedenken die ervoor zorgen dat de tekst prettig leesbaar blijft terwijl de
hyperlinks goed opvallen. In het HTML boek van O'Reilly worden enkele
regels genoemd. Hier mijn interpretatie ervan:
- Houd je hyperlink kort. Een of enkele woorden is genoeg en bij voorkeur
niet verspreid over meerdere zinnen
- Zet twee hyperlinks niet direkt tegen elkaar aan, want dan kan de
lezer ze moeilijk onderscheiden
- Gebruik telkens dezelfde manier, bijvoorbeeld steeds losse woorden of
plaatjes waar men op kan klikken, of woorden die in de tekst passen.
- Probeer woorden of zinsdelen met inhoud te kiezen: het is heel
vervelend om op diverse plaatsen "klik hier" te schrijven want dan
moet je alsnog de omliggende tekst lezen
Emailen met mailto
De tag 'a' is ook te gebruiken om een linkje te maken dat een e-mail
verstuurt wanneer je erop klikt. Dit werkt als volgt:
<a href="mailto:test@case.nl">Stuur een mailtje</a>
Stuur een mailtje
Je kunt er ook bv. een onderwerp in zetten:
<a href="mailto:test@case.nl?subject=Hallo%20daar">Hallo daar</a>
Hallo daar
Zoals je ziet moet je dan spaties en andere leestekens vervangen door
een code. Een spatie heeft de code %20.
Plaatjes als hyperlink
Behalve hyperlinks in de vorm van tekst kun je ook andere HTML elementen
gebruiken om naar een andere site of een andere plaats binnen jouw site
te springen. De meest gebruikte niet-tekst hyperlinks zijn plaatjes en
er zijn twee manieren om deze te gebruiken.
Aanklikbaar plaatje
Je kunt een hyperlink maken zoals hierboven besproken, maar in plaats van
tekst tussen de <a> en </a> te zetten neem je daar een <img>
op, als volgt:
<a href="http://www.linux.org"><img
src="powered_by_linux.gif"></a>
Aanklikbaar plaatje met onderverdelingen (Image-maps)
Er is nog een manier om vanuit een plaatje het web op te surfen. Je kunt
een onderverdeling in een plaatje maken door een tabelletje op te nemen
in de vorm van een map-tag. In het onderstaande voorbeeld is
een plaatje in drie stukken verdeeld door drie veelhoeken (Engels: polygon)
te definieren. De coordinaten van punten staan in de area tag en elk punt
bestaat uit een X- en Y-waarde, dus in dit voorbeeld is het eerste punt
van de eerste polygon 120,20 ofwel X=120 en Y=20.
Probeer zelf eens andere vormen uit, je hebt de keuze uit circle, polygon
en rectangle en dat mag je afkorten tot circ, poly en rect.
Aan elke area knoop je een href-attribuut, net als bij de a-tag en daarmee
link je naar een andere plaats op het Web.
<center>
<img src="taart.gif" usemap="#webmap" border="none">
</center>
<map name="webmap">
<area shape="poly" coords="120,20, 120,124, 36,175, 28,92, 60,40"
href="http://www.w3c.org/MarkUp" />
<area shape="poly" coords="140,23, 140,124, 228,174, 232,98, 197,46"
href="http://www.php.net" />
<area shape="poly" coords="130,145, 47,195, 108,232, 175,226, 216,192"
href="http://developer.netscape.com/tech/javascript" />
</map>
Als je met je muiscursor over het plaatje beweegt zie je in sommige browsers
de tekst van het 'alt'-attrribuut.
Absolute en relatieve hyperlinks
Je kunt hyperlinks indelen in absolute en relatieve links. Dat verschil
is erg belangrijk en wordt uitgelegd in een apart
hoofdstuk over absolute en relatieve hyperlinks.