NIWO - nl.internet.www.ontwerpFAQ

WDG Webontwerp FAQ deel 4: Hyperlinks

  1. Hoe maak ik een link?
  2. Hoe maak ik een link naar een plek in het midden van een HTML-document?
  3. Hoe maak ik een link waarmee een nieuw venster wordt geopend?
  4. Hoe maak ik een link waarmee een nieuw venster wordt geopend met bepaalde afmetingen?
  5. Hoe krijg ik een knop die me naar een nieuwe pagina brengt?
  6. Hoe krijg ik een terug-knop op mijn pagina?
  7. Hoe maak ik een knop die mijn site automatisch aan de bladwijzers ('Bookmarks' of Favorieten) toevoegt?
  8. Hoe maak ik een knop die mijn pagina afdrukt?
  9. Hoe maak ik een link die e-mail naar mij stuurt?
  10. Hoe geef ik een subject (onderwerp) in een "mailto:"-link op?
  11. Hoe maak ik van een afbeelding een link naar iets?
  12. Hoe kom ik van de blauwe rand om gelinkte afbeeldingen af?
  13. Hoe link ik verschillende delen van een afbeelding naar verschillende zaken?
  14. Hoe zet ik de onderstreping van mijn links uit?
  15. Hoe maak ik twee series links met verschillende kleuren?
  16. Hoe laat ik links veranderen als de cursor er boven hangt?
  17. Waarom worden mijn hyperlinks verkeerd weergegeven, of willen ze niet laden?
  18. Waarom werkt mijn link wel in Internet Explorer maar niet in Netscape?

De volgende vragen zijn verplaatst naar een ander deel van de FAQ.

4.1. Hoe maak ik een link?

Gebruik het 'anchor'-(anker)element. Het HREF-attribuut geeft de URL van het document waarnaar je wilt linken. Het volgende voorbeeld linkt naar de tekst "Webontwerp FAQ" op http://www.htmlhelp.com/nl/faq/html/:

001  <A HREF="http://www.htmlhelp.com/nl/faq/html/">WebOntwerp FAQ</A>

Zie voor meer informatie over links en het 'anchor'-element: http://www.htmlhelp.com/reference/html40/special/a.html

[Inhoudsopgave]

4.2. Hoe maak ik een link naar een plek in het midden van een HTML-document?

Eerst moet de bestemming van de link worden geïdentificeerd met een benoemd anker (een anker dat het NAME-attribuut gebruikt). Bijvoorbeeld:

001  <h2><a name="sectie2">Sectie 2: Na de introducties</a></h2>

Daarna maak je een link naar het benoemde anker. De URL van de benoemde anker is gelijk aan de URL van het document, met "#" en de naam van het anker er aan vastgeplakt. Zo kun je bijvoorbeeld elders in hetzelfde document gebruiken:

001  <a href="#sectie2">ga naar Sectie 2</a>

En net zo kun je in een ander document gebruiken:

001  <a href="thesis.html#sectie2">ga naar Sectie 2 van mijn thesis</a>

[Inhoudsopgave]

4.3. Hoe maak ik een link waarmee een nieuw venster wordt geopend?

<A TARGET="_blank" HREF=...> opent een nieuw, onbenoemd venster.

<A TARGET="foobar" HREF=...> opent een nieuw, "foobar" genaamd venster, voorzover er nog geen venster of frame met die naam bestaat.

Merk op dat links waarmee nieuwe vensters worden geopend, irritant kunnen zijn voor je lezers als er geen goede reden (vanuit de lezer bekeken) voor is.

[Inhoudsopgave]

4.4. Hoe maak ik een link waarmee een nieuw venster wordt geopend met bepaalde afmetingen?

Met HTML is er geen methode om de afmetingen (of andere venster-eigenschappen) van een nieuw venster te beheersen. Maar in JavaScript kun je zulke details opgeven als je de window.open() functie gebruikt.

Begin met een normale HTML link (mogelijk een die een nieuw venster opent zoals beschreven in het antwoord op de vorige vraag). Gebruik daarna het ONCLICK-attribuut om een venster te openen met de gewenste eigenschappen voor de lezers die JavaScript aankunnen en ingeschakeld hebben. Het volgende voorbeeld specificeert een venster genaamd "popup", dat 300 bij 150 pixels groot is.

001  <a
002   href="foo.html"
003   target="popup"
004   onclick="window.open(
005     'foo.html', 'popup', 'width=300,height=150'
006   ); return false"
007  >Zie Foo</a>

Op deze manier kan in JavaScript een nieuw venster worden opgegeven met de gewenste eigenschappen, zonder de toegang te blokkeren indien JavaScript is uitgeschakeld of niet wordt ondersteund.

Behalve de parameters height en width (die een aantal pixels als waarde kennen), kan het derde argument van window.open() de volgende booleaanse parameters bevatten (die de waarde "yes" of "no" kennen): directories, location, menubar, resizable, scrollbars, status, en toolbar. Deze booleaanse parameters beheersen de aanwezigheid van de overeenkomende vensteruitrusting in het resulterende venster.

[Inhoudsopgave]

4.5. Hoe krijg ik een knop die me naar een nieuwe pagina brengt?

Dit krijg je het makkelijkst voor elkaar met een klein formulier:

001  <form action="[URL]" method="GET">
002  <input type="submit" value="Tekst op knop" name="foo">
003  </form>

Als je knoppen naast elkaar wilt uitlijnen, moet je ze in een één-rij-tabel stoppen, met elke knop in een aparte cel.

Merk op dat zoekmachines mogelijk het doeldocument niet kunnen vinden, tenzij er ergens anders op de pagina ook een normale link is.

Een ga-naar-een-andere-pagina knop kan ook worden geprogrammeerd in JavaScript, maar het bovenstaande is standaard HTML en werkt voor meer lezers.

[Inhoudsopgave]

4.6. Hoe krijg ik een terug-knop op mijn pagina?

Dat is onmogelijk in HTML. "Terug" gaan betekent dat je naar de vorige pagina in je browse-geschiedenis gaat. Je zou een link kunnen maken naar de URL die wordt gespecificeerd in de 'HTTP Referer header' (beschikbaar in de "HTTP_REFERER" omgevingsvariabele in CGI-programma's), maar dat creëert enkel een voorwaartse link naar een nieuwe locatie in je browse-geschiedenis. En zelfs dan kan de informatie in de variabele fout zijn. Sommige browsers zenden ten onrechte deze variabele als je een bookmark gebruikt of een URL handmatig intypt, en sommigen zenden deze variabele helemaal niet (het is niet verplicht).

Je kunt "history.back()" (JavaScript) gebruiken om een terug-knop (of link) te maken. Dit werkt natuurlijk alleen als JavaScript wordt ondersteund en ingeschakeld is.

Kijk voor een meer uitgebreide uitleg naar Abigail's "Simulating the back knop" te vinden op http://www.foad.org/%7Eabigail/HTML/Misc/back_button.html.

Denk er aan dat het enige navigatie-middel dat vaker wordt gebruikt dan de "terug"-functie de hyperlink is. Je lezers weten vrijwel zeker hoe ze de terug-knop van hun browser moeten gebruiken. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.

[Inhoudsopgave]

4.7. Hoe maak ik een knop die mijn site automatisch aan de bladwijzers ('Bookmarks' of Favorieten) toevoegt?

Dit kan niet met HTML. Maar Internet Explorer 4+ ondersteunt de 'method' window.external.AddFavorite(), een zelfgemaakte uitbreiding op JavaScript die een "Toevoegen aan Favorieten"-dialoogscherm opent. Het volgende voorbeeld voldoet voor de bezoekers die met IE op je webpagina komen:

001  <script type="text/javascript">
002  
003  function addf() {
004      window.external.AddFavorite('http://www.htmlhelp.org/',
005                                  'Web Design Group'); }
006  if(document.all) {
007      document.write('<input type="button" onclick="addf()"'+
008                     ' value="Bookmark WDG Site">'); }
009  </script>

Dit zal echter in andere browsers javascript-fouten kunnen opleveren, bijvoorbeeld bij een bezoeker die met de Opera browser op je webpage komt. 'Opera als IE' zal een fout geven, omdat die document.all kent, maar external.AddFavorite niet. Het volgende voorbeeld voorkomt, dat een niet werkende knop wordt gemaakt in andere browsers of bij hen die JavaScript hebben uitgeschakeld:

001  <script type="text/javascript">
002  
003  function addf() {
004   if (window.external &&
005     typeof window.external.AddFavorite != 'undefined') {
006     document.write('<a href="#" onclick="addf();return false;">'+
007     'Bookmark WDG Site</a>');
008   }
009  
010  </script>

Denk er aan dat lezers die weten hoe ze bladwijzers kunnen openen, vrijwel zeker ook weten hoe ze bladwijzers moeten aanmaken. En de enkeling die niet weet hoe hij/zij jouw site kan toevoegen aan de bladwijzers, weet waarschijnlijk ook niet hoe hij/zij de bladwijzer, die jij voor ze maakt, kunnen gebruiken. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.

[Inhoudsopgave]

4.8. Hoe maak ik een knop die mijn pagina afdrukt?

Dit kan niet met HTML. Maar enkele browsers ondersteunen de JavaScript 'method' window.print(), die een "Afdrukken"-dialoogscherm opent. Het volgende voorbeeld voorkomt, dat een niet werkende knop wordt gemaakt in andere browsers of bij hen die JavaScript hebben uitgeschakeld:

001  <script type="text/javascript">
002  
003  if (window.print) {
004      document.write('<input type="button" onclick="window.print()"'+
005                     ' value="Deze pagina afdrukken">'); }
006  </script>

Denk er aan dat lezers die printers hebben, vrijwel zeker weten hoe de afdrukfunctie van hun browser werkt. Gebruikers die de meest basale functies van hun browser niet onder de knie hebben, raken alleen maar in de war wanneer verschillende pagina's die functies op verschillende manieren nabootsen.

[Inhoudsopgave]

4.9. Hoe maak ik een link die e-mail naar mij stuurt?

Gebruik een "mailto:"-link, bijvoorbeeld

001  Stuur me een e-mail op
002  <a href="mailto:mij@mijndomein.com">mij@mijndomein.com</a>.

Wees je ervan bewust dat ieder e-mailadres dat je op het www plaatst gebruikt kan worden voor het verzenden van ongewenste berichten.

[Inhoudsopgave]

4.10. Hoe geef ik een subject (onderwerp) in een "mailto:"-link op?

Dat kan je niet, niet op een betrouwbare manier. De methodes die regelmatig worden genoemd doen het niet op alle combinaties van browsers en e-mailprogramma's (niet eens op alle veelvoorkomende combinaties), en hebben vaak een belangrijk nadeel: als het mislukt, gaat de e-mail verloren.

Als je echt een subject nodig hebt, kan dat door een formulier op je pagina aan te bieden, dat gegevens stuurt naar een CGI-programma, dat de formuliergegevens naar je mailt met de gewenste onderwerpregel. Het formulier moet echter een input-veld hebben voor het emailadres van de bezoeker, en je moet maar hopen dat de bezoeker dit foutloos invult.

Hier zijn enkele andere manieren om onderwerp-achtige informatie over te brengen:

  • Maak e-mail-aliasen aan die alleen worden gebruikt voor bepaalde mailto-links, zodat je weet dat alles wat met een bepaalde alias wordt verzonden een reactie is op de corresponderende webpagina(s).
  • De mail-handlers voor veel webbrowsers bevatten een "X-Url" header die de URL aangeeft van de webpagina die de "mailto:"-link bevatte. Als je je mail-lezer instelt om deze header weer te geven, zul je de meeste tijd zien op welke webpagina de zender reageert.
  • Gebruik <A HREF="mailto:user@site" TITLE="Jouw Onderwerp">. De meeste browsers zullen het TITLE-attribuut negeren, maar sommige minder gebruikte browsers zullen het gebruiken als een subject voor het email-bericht. Alle browsers zullen de mail verzenden.
  • Gebruik <A HREF="mailto:user@site?subject=Jouw%20Onderwerp">, waarmee "Jouw Onderwerp" (de spatie wordt gecodeerd als "%20") in het "Subject" header veld van het e-mailbericht wordt gestopt door de meeste huidige browsers. De details van deze RFC kunnen worden gevonden op http://ftp.ics.uci.edu/pub/ietf/uri/rfc2368.txt. Merk wel op dat je mail zult kwijtraken van gebruikers van oudere browsers, dus je zult je moeten afvragen of het voor-ingevulde subject de verloren mail waard is.

[Inhoudsopgave]

4.11. Hoe maak ik van een afbeelding een link naar iets?

Gebruik gewoon de afbeelding als inhoud van de link, zoals hier:

001  <a href=...><img ...></a>

[Inhoudsopgave]

4.12. Hoe kom ik van de blauwe rand om gelinkte afbeeldingen af?

Gebruik het BORDER="0"-attribuut in hte <IMG>-element. Bijvoorbeeld:

001  <a href="doc.html"><img src="doc.gif" alt="Bekijk document." border="0"></a>

[Inhoudsopgave]

4.13. Hoe link ik verschillende delen van een afbeelding naar verschiillende zaken?

Gebruik een 'image map'. Client-side image maps hebben geen verwerking op de webserver nodig, waardoor de responssnelheid groter is. Server-side image maps verbergen de linkbestemmingen voor de browser, en kunnen dienen als backup voor client-side image maps voor de enkele hele oude browsers die wel server-side image maps ondersteunen maar geen client-side image maps.

De configuratiedetails van server-side image maps verschillen van server tot server. Zoek in de serverdocumentatie naar details.

Client-side image maps worden geïmplementeerd met HTML. Het MAP-element definieert een enkele image map en het AREA-element definieert specifieke gelinkte gebieden binnen die image map. Het USEMAP-attribuut van het IMG-element associeerd een image map met een bepaalde afbeelding. Een uitgebreide uitleg (met voorbeelden) is te vinden op <http://www.htmlhelp.com/reference/html40/special/map.html. Een handleiding is te vinden op </saved/~flavell/www/imgmaptut.html.

[Inhoudsopgave]

4.14. Hoe zet ik de onderstreping van mijn links uit?

Als je de onderstreping van links uit wilt zetten bij het bekijken van pagina's in je browser, moet je de instellingen van je browser aanpassen . Bijvoorbeeld in Netscape 3, bij Options | General Preferences | Appearance; in Netscape 4 is het Edit | Preferences | Appearance | Colors; in Internet Explorer: View | Options | General.

Wanneer je wilt voorkomen dat links op jouw pagina worden onderstreept als bezoekers ze bekijken, is er geen manier voor om dit met HTML te bereiken. Je kunt het suggereren met behulp van stylesheets door te definiëren

001  a:link, a:visited, a:active { text-decoration: none; }

[Inhoudsopgave]

4.15. Hoe maak ik twee series links met verschillende kleuren?

Je kunt zo'n weergave suggereren met behulp van stylesheets. Stel in je stylesheet zoiets in:

001  a:link        {color: blue;   background: white; }
002  a:visited     {color: purple; background: white; }
003  a:active      {color: red;    background: white; }
004  a.foo:link    {color: yellow; background: black; }
005  a.foo:visited {color: white;  background: black; }
006  a.foo:active  {color: red;    background: black; }

Gebruik dan CLASS="foo" om de links met de tweede kleur te identificeren in je HTML, zoals hier:

001  <A CLASS="foo" HREF=...>...</A>

[Inhoudsopgave]

4.16. Hoe laat ik links veranderen als de cursor er boven hangt?

Gebruik in je stylesheet de hover pseudo-class om een ander uiterlijk aan te geven voor links wanneer de cursor er boven hangt. Specificeer de hover pseudo-class na de link en visited pseudo-classes. Bijvoorbeeld:

001  A:link { color: blue ; background: white }
002  A:visited { color: purple ; background: white }
003  A:hover { color: red ; background: white }

[Inhoudsopgave]

4.17. Waarom worden mijn hyperlinks verkeerd weergegeven, of willen ze niet laden?

Het meest waarschijnlijke is dat je een paar aanhalingstekens bent vergeten te sluiten aan het einde van een HREF-attribuut. Of je hebt misschien een ">"-teken gebruikt ergens anders binnen een tag. Alhoewel dit is toegestaan zullen sommige oudere browsers denken dat de tag daar ophoudt, zodat de rest wordt weergegeven als normale tekst.

Dit gebeurt vooral als je commentaartags gebruikt om tekst met HTML-tags "weg te commenten". (Zie het antwoord op "Hoe voeg ik commentaar in HTML in?") Alhoewel de juiste syntax <!-- --> is (zonder dat "--" ergens anders in het commentaar voorkomt), zullen sommige browsers denken dat het commentaar ophoudt bij de eerste ">" die ze zien.

Validators zullen je elke syntaxfout in je markup laten zien, maar checkers zoals Weblint en HTMLchek kunnen laten zien waar je bekende browserbugs uitlokt. Zo is het bijvoorbeeld van enkele versies van Netscape Navigator bekend dat ze moeite hebben met links naar benoemde ankers ("anchors") als de ankers zich in een tabel bevinden die het ALIGN-attribuut gebruikt. Zie ook het antwoord op "Hoe controleer ik op fouten?"

Een andere mogelijkheid is, dat de webontwerpsoftware gebruikt maakt van bestands-URL's (bijv. file:C:\pad\bestand.html). Als dat het geval is kun je ze vervangen door relatieve URL's (bijv. bestand.html) of http-URL's (bijv. http://server/pad/bestand.html).

[Inhoudsopgave]

4.18. Waarom werkt mijn link wel in Internet Explorer maar niet in Netscape?

Staat er een spatie, #, ?, of een ander speciaal teken in het pad van de bestandsnaam? Spaties zijn niet toegestaan in URL's. Wanneer je de spatie codeert door hem te vervangen door %20, werkt de link wel.

Elk teken in een URL kan worden gecodeerd als % plus de tweetallige hex waarde van het teken. (A-F in hexadecimale getallen kunnen zowel kleine letters als hoofdletters zijn.) Volgens de specificatie hoeven alleen alfanumerieke tekens en de speciale tekens $-_.,+!*'() niet te worden gecodeerd.

Alle andere tekens moeten worden gecodeerd wanneer ze in een URL voorkomen, behalve wanneer ze gebruikt worden voor hun gereserveerde doeleinden. Als je bijvoorbeeld de waarde "Jan&Jans" aan een CGI-script wilt doorgeven, moet je het "&"-teken coderen als "%26", wat bijvoorbeeld de volgende URL kan opleveren: http://www.foo.com/foo.cgi?rijm=Jan%26Jans&publiek=kind.

Merk op dat de "?" en andere "&" tekens in deze URL niet zijn gecodeerd, aangezien ze worden gebruikt voor hun gereserveerde doeleinden. Maar als deze URL wordt gebruikt als een attribuut-waarde in een HTML-document, moet het "&"-teken worden gecodeerd als "&amp;", zoals hier:

001  <a href="foo.php?rijm=Jan%26Jans&amp;publiek=kind">...

Zie http://www.w3.org/Addressing/ voor de technische details.

[Inhoudsopgave]