Eenvoudige HTML en CSS

Hyperlinks

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:

  1. Een andere pagina op een andere site, ergens op de wereld.
  2. Een andere pagina op dezelfde site, in dezelfde map als de verwijzende pagina.
  3. Een andere pagina op dezelfde site, in een andere map dan de verwijzende pagina.
  4. Een bepaalde plek in dezelfde pagina als waarin de link staat.
  5. Een bepaalde plek in een andere pagina, ook weer in een map (dezelfde of een andere) op een site (dezelfde of een andere).

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).

  1. Een andere pagina op een andere site, ergens op de wereld.
    <A HREF="http://www.google.com/index.html">Google</A>
    Google

    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.

  2. Een andere pagina op dezelfde site, in dezelfde map als de verwijzende pagina. <A HREF="http://rudhar.com/sfreview/html_nl/css.htm">Uitleg CSS</A>
    Uitleg CSS

    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

  3. 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 (\).

  4. Een bepaalde plek in dezelfde pagina als waarin de link staat.
    <A HREF="#VerwijsNaar">Verwijzing naar boven</A>
    Verwijzing naar boven
  5. Een bepaalde plek in een andere pagina, ook weer in een map (dezelfde of een andere) op een site (dezelfde of een andere).
    <A HREF="http://rudhar.com/sfreview/html_nl/links.htm#VerwijsNaar">Volledige verwijzing</A>
    <A HREF="../html_nl/links.htm#VerwijsNaar">Verwijzing binnen zelfde site</A>
    Volledige verwijzing
    Verwijzing binnen zelfde site

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: boom groot
Als knop is dit plaatje veel te groot, dus we maken het kleiner, door de breedte of de hoogte in pixels aan te geven. boom klein


Vorige Begin Volgende

Copyright © 2002 R. Harmsen