Hyperlinks hebben het web groot gemaakt. Een hyperlink is een verwijzing vanaf een document naar een plek op het wereldwijde web. Omdat alles naar alles kan verwijzen is het web een gigantisch kluwen van samenhangende informatie geworden.
Een stukje tekst kan een hyperlink zijn, maar ook een kleine grafische afbeelding, bijvoorbeeld een knop. Een hyperlink kan verwijzen naar:
Voor de gevallen d) en e) moet de plaats waarnaar verwezen wordt
zijn aangegeven met een naam-anker:
<A NAME="EenNaam"> </A>
Voor de verwijzingen van het type a), b) en c) is dat niet nodig, die verwijzen altijd naar het begin van een pagina.
De verwijzing zelf gaat met een referentie-anker:
<A HREF="site, eventueel map, eventueel locatie">tekst of plaatje</A>
De tekst of het plaatje wordt dan "klikbaar", en krijgt van de browser
een ander uiterlijk.
(Via CSS is dit uiterlijk te beïnvloeden, als je
dat zou willen).
Klik je er inderdaad op, dan roept de browser, het bladerprogramma,
die nieuwe pagina op, je bent er naar toe gesurft.
Het kan meestal ook zonder muis: je gaat er met de tab-toets naar toe,
(terug met shift-tab), en drukt dan op enter.
We zagen boven al dat links naar
verschillende soorten plekken kunnen verwijzen. Hieronder nog
eens die gevallen, nu met de HTML erbij die voor zulke verwijzingen
nodig is. Daaronder staat steeds de link zelf, om te zien of die
inderdaad werkt.
(Hier staat uitgelegd hoe een tag in
de tekst kan staan zonder dat die ook als tag werkt).
Dit kan korter ook zo genoteerd worden:
<A HREF="http://www.google.com/">Google</A>
Google
of zelfs zo:
<A HREF="http://www.google.com">Google</A>
Google
webservers als verstekwaarde (default) vrijwel altijd al index.html en index.htm proberen.
Zo kan het, maar het is niet slim het zo te doen, omdat de
link nu niet meer klopt als de hele groep HTML-bestanden ergens
anders wordt geplaatst.
Dat is al het geval als je de pagina niet op het web, maar lokaal
op je eigen computer wilt testen. Laat daarom bij verwijzingen binnen
dezelfde site altijd het domain (in dit voorbeeld "rudhar.com") weg.
Dan geldt hetzelfde domain als waar de huidige pagina staat, en
ook dezelfde map. De verwijzing wordt dus korter, en
bovendien flexibeler bij testen of verplaatsen van de site.
<A HREF="css.htm">Uitleg CSS</A>
Uitleg CSS
Een andere pagina op dezelfde site, in een andere map dan de
verwijzende pagina.
Ook hier houden we de verwijzingen altijd relatief vanaf het punt
in de mappenboom (directory tree) waar we nu zijn. We vermelden
dus geen domain.
<A HREF="subdir/insubdir.htm">Dit verwijst naar een
pagina in een subdirectory (submap)</A>
Dit verwijst naar een pagina
in een subdirectory (submap)
Met "..", de bovenliggende directory ("hoger" bij een boom met de wortels
(root) in de lucht), kunnen we ook
hogerliggende en naastliggende mappen bereiken. Hier verwijs ik
bijvoorbeeld naar de Engelse versie, die in een eigen map html_en,
naast de huidige map html_nl ligt:
<A HREF="../html_en/index.htm">Dit verwijst naar een pagina in een hogere map,
en daarvan weer een submap</A>
Dit verwijst naar een pagina
in een hogere map, en daarvan weer een submap;
Gebruik altijd slashes (/), geen backslashes (\).
Tenslotte een voorbeeld van een knop, een plaatje, als
klikbare verwijzing:
<A HREF="../html_nl/links.htm#VerwijsNaar"><IMG SRC="../html_nl/links.htm#VerwijsNaar"></A>>
Op de plaats van de tekst kan nu dus de verwijzing naar het plaatje
te staan, in de vorm van een IMG-tag. De hyperlink ziet er zo uit:
Als knop is dit plaatje veel te groot, dus we maken het kleiner, door
de breedte of de hoogte in pixels aan te geven.