MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Hyperlinks maken

Aan deze vertaling wordt gewerkt.

Hyperlinks zijn heel belangrijk — ze maken van het Web een web. Dit artikel toont je de syntax die je nodig hebt om een link te maken en bespreekt de beste werkwijzen om met links te werken.

Vereisten: Basiskennis HTML, aangeboden in Beginnen met HTML. Kennis over HTML tekstopmaak aangeboden in HTML Tekst: basisprincipes.
Doel: Je leert hoe je een hyperlink op een doeltreffende manier aan je inhoud kan toevoegen en meerdere bestanden met elkaar kan verbinden.

Hyperlinks zijn één van de meest opwindende vernieuwingen die het Web ons biedt. Eigenlijk horen ze er al sinds het allereerste begin bij, maar zij zijn wat van het Web een Web maakt. Ze staan ons toe onze documenten met andere documenten (of met een andere informatiebron) te verbinden. We kunnen specifieke onderdelen van documenten  met elkaar verbinden en we kunnen apps op een simpel webadres beschikbaar maken (in tegenstelling tot native apps, die op voorhand moeten worden geïnstalleerd). Bijna elke webinhoud kan in een link worden veranderd. Als je erop klikt (of hem op een andere manier activeert), zal de webbrowser je naar een ander webaddres brengen (URL.)

Opmerking: Een URL wijst ook naar HTML-bestanden, tekstbestanden, afbeeldingen, tekstdocumenten, video en  audiobestanden en al wat er op het Web kan leven. Als de browser niet weet hoe hij het bestand moet weergeven of behandelen, zal hij je vragen of je het bestand wil openen of downloaden (in dat geval kan je er later je ding mee doen). Als je wordt gevraagd het bestand te openen, wordt de verantwoordelijkheid voor die taak doorgegeven naar een geschikte native app op het apparaat.

De startpagina van de BBC bijvoorbeeld, bevat een groot aantal links die je niet enkel met verscheidene nieuwsberichten verbinden maar ook met verschillende gebieden van de site (navigatie), login/paginaregistratie (webinstrumenten voor de gebruikers) en meer.

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

Een eenvoudige link wordt gecreëerd door de tekst (of andere inhoud, zie Block level links) die je in een link wil veranderen, met een <a>-element te omhullen. Aan dat element wordt dan een href-attribuut toegevoegd dat het webadres zal bevatten waarmee je de link wil verbinden. (Het href-attribuut is ook gekend als het doel of target in het Engels)

<p>Ik ben een link naar
<a href="https://www.mozilla.org/en-US/">the Mozilla homepage</a> aan het creëren.
</p>

Dit produceert het volgende resultaat:

Ik ben een link naar de Mozilla startpagina aan het creëren.

Ondersteunende informatie toevoegen met het title attribuut

Er bestaat nog een attribuut dat je kan toevoegen. Het heet title. Het bevat extra nuttige informatie over de link zoals het type informatie dat in de pagina staat of zaken waarvan je je bewust moet zijn. Bijvoorbeeld:

<p>Ik ben een link naar
<a href="https://www.mozilla.org/nl/#"
   title="De beste plaats om meer informatie over Mozilla's
          missie te ontdekken en hoe je eraan kan bijdragen">de Mozilla startpagina</a> 
aan het creëren.</p>

De code hierboven zorgt ervoor dat de title als een tooltip verschijnt als je met je muis over de link heen glijdt, :

Ik ben een link naar de Mozilla startpagina aan het creëren.

Opmerking: Een hyperlink title zal enkel verschijnen als je er met je muis overheen glijdt. Dit betekent dat mensen die een toetsenbord gebruiken om in een webpagina te navigeren, het moeilijk zullen hebben om de informatie in de tooltip te lezen. Als de informatie van een title echt nodig is om de pagina te kunnen gebruiken, dan zou je die moeten presenteren op een manier die toegankelijk is voor alle gebruikers. Je kan de informatie bijvoorbeeld in de gewone tekst van de webpagina te zetten.

Opmerking: Je merkt dat ik het Engelse woord title gebruik in plaats van het Nederlandse titel. Vergeet niet dat het attribuut title heet, je mag het niet in het Nederlands vertalen. De inhoud ervan kan je natuurlijk wel in het Nederlands schrijven.

Tijd om actief te leren: we zouden graag hebben dat je een HTML-document maakt met je lokale broncode-bewerker. (Ons getting started sjabloon is zeer goed voor geschikt voor dat doel.)

  • In de HTML-body, voeg je één of meer paragrafen (of andere inhoudstypes waarover je hebt geleerd) toe.
  • Verander een deel van de inhoud in hyperlinks.
  • Steek er ook een paar title-attributen in.

We hebben al vermeld, dat je ongeveer elke inhoud in een hyperlink kan veranderen, zelfs elementen op blokniveau. Als je een afbeelding in een link zou willen veranderen, kon je die afbeelding gewoon tussen <a></a>-labels zeten.

<a href="https://developer.mozilla.org/nl/">
  <img src="mozilla-image.png" alt="mozilla logo dat ons verbindt met de mozilla startpagina">
</a>

Opmerking: In een later artikel zal je nog veel meer over het gebruik van afbeeldingen op het Web ontdekken.

Een sneller primeur over URLs en paden

Om het doel van een hyperlink volledig te begrijpen, moet je URLs en bestandspaden begrijpen. Deze sectie verschaft je de informatie die je daarvoor nodig hebt.

Een URL, of Uniform Resource Locator (eenvormige of uniforme zoeker van hulpmiddelen of bronnen), is gewoon een string (tekst dus) die bepaalt waar iets gevonden kan worden in het web. Mozilla's Nederlandstalige startpagina bijvoorbeeld kan je op https://www.mozilla.org/nl/terugvinden.

URLs gebruiken paden om bestanden te vinden. Paden tonen ons waar een bestand zich bevindt in een bestandssysteem. We gaan een eenvoudig voorbeeld van een mappenstructuur bekijken (zie de creating-hyperlinks-map.)

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

De hoofdmap van deze mappenstructuur heet creating-hyperlinks. Als je op je lokale computer aan een website werkt, zal je een map hebben waar de volledige site in steekt. In de hoopfmap zit een index.html-bestand en een contacts.html. In een echte website, zou index.html onze startpagina of landingspagina zijn. (In het Engels gebruikt men het woord root om de hoofdmap aan te duiden. De letterlijke vertaling is : wortel)

In onze hoofdmap zitten ook twee andere mappen — pdfs en projects. In elk van hen steekt één enkel bestand — respectievelijk een PDF-bestand (project-brief.pdf) en een index.html-bestand. Twee index.html-bestanden kunnnen dus heel gelukkig in één project samenleven, zolang ze op verschillende locaties in het bestandsysteem zijn opgeslagen. Deze situaties bestaat in vele websites. De tweede index.html is misschien de landingspagina voor project-gerelateerde informatie. (Tussen haakjes: een landingspagina is een pagina op je website die specifiek ingericht is voor bezoekers die binnenkomen (landen) op die pagina. De bezoeker kan op je pagina landen via een zoekopdracht of bijvoorbeeld een online of offline campagne die hem naar die specfieke pagina stuurt.)

  • Dezelfde map: Stel dat je een hyperlink aan het index.html-bestand op het hoogste niveau wil toevoegen. De hyperlink in deze index.html wijst naar contacts.html. Je hoeft dus gewoon de bestandsnaam van contacts.html te gebruiken omdat contacts.html zich in dezelfde map bevindt als je index.html-bestand. Je URL is dus gewoon contacts.html:

    <p>Wil je een personeelslid contacteren?
    Alle details vind je op onze <a href="contacts.html">contacts page</a>.</p>
  • Afdalen naar een map onder je map: (naar een subdirectory) Stel dat  je opnieuw een hyperlink aan het index.html-bestand in de hoofdmap wil toevoegen, maar deze keer wijst de hyperlink naar  projects/index.html. In dat geval moet je afdalen in de projects-map, i.e. het bestand waar de hyperlink naar moet wijzen. Dit doe je door eerst de naam van de map te noteren, dan een schuine streep die naar voren leunt te schrijven en dan de naam van het bestand. De URL zal er dus zo uitzien: projects/index.html:

    <p>Bezoek mijn <a href="projects/index.html">project startpagina</a>.</p>
  • Omhoog gaan naar een map boven je map: (naar een parent directory) Als je een hyperlink in projects/index.html wil plaatsen en je wil dat die link naar pdfs/project-brief.pdf wijst, moet je een niveau omhoog gaan en dan opnieuw naar beneden in de pdf-map. "Naar een map boven je map gaan" druk je met twee puntjes uit — .. — de URL zal er dus zo uitzien ../pdfs/project-brief.pdf:

    <p>Een hyperlink naar mijn <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

Opmerking: Indien nodig kan je meerdere instanties van deze eigenschappen in complexe URLs combineren, bijvoorbeeld ../../../complex/path/to/my/file.html.

Documentfragmenten

Het is mogelijk om een specifiek deel van een HTML-document te linken. Dit specifieke deel noemen we een documentfragment. Om dit te doen heb je een id-attribuut nodig. Je moet het toekennen aan het element waarnaar je je hyperlink wil doen wijzen. Het is meestal zinvol om er een geschikte kop voor te gebruiken. Die kop zal er ongeveer zo uitzien:

<h2 id="Mailadres">Mailadres</h2>

Om dan naar dat specifieke id te linken, voeg je de inhoud van het id aan het einde van de URL toe, voorafgegaan door een hekje (#). Bijvoorbeeld:

<p>Wil je ons een brief schrijven? Gebruik dan ons <a href="contacts.html#Mailingadres">mailadres</a>.</p>

Je kan het documentfragment zelfs aan een ander deel van hetzelfde document linken:

<p>Het<a href="#Mailadres">mailadres van ons bedrijf</a> vind je onderaan de pagina.</p>

Absolute versus relatieve URLs

Je zult op het web vroeg of laat twee termen tegenkomen: absolute en relatieve URL:

Een absolute URL wijst naar de absolute locatie op het web. Die locatie houdt ook het protocol en de domain name in. Dus, stel bijvoorbeeld dat een index.html pagina  wordt geüpload naar een map die projects heet. Als die in de hoofdmap (root in het Engels) van een webserver zit en het domain van de website is http://www.example.com, dan zou je de pagina op http://www.example.com/projects/index.html kunnen vinden . (Of ook gewoon http://www.example.com/projects/ want de meeste webservers zoeken naar een landingspagina zoals index.html die ze kunnen inladen als die niet wordt vermeld in de URL.)

Een absolute URL zal altijd naar dezelfde locatie wijzen, waar ze ook wordt gebruikt.

Een relatieve URL wijst naar een locatie die een relatieve band heeft met het bestand vanwaar je linkt. De link ziet er uit zoals de URLs die we in de vorige sectie hebben bekeken. Als je bijvoorbeeld een link van ons voorbeeld http://www.example.com/projects/index.html naar een PDF-bestand in dezelfde map wil maken, zou de URL enkel uit de bestandsnaam bestaan — bijvoorbeeld project-brief.pdf. Extra informatie is niet nodig. Als de PDF in de pdfs-map stak, een lager gelegen map van de projects-map, zou de relatieve link pdfs/project-brief.pdf zijn (de equivalente absolute URL zou er dan zo uitzien:  http://www.example.com/projects/pdfs/project-brief.pdf.)

Een relatieve URL kan naar verschillende plaatsen wijzen want de URL is afhankelijk van de locatie van het bestand waar de link in steekt. Als we bijvoorbeeld ons index.html-bestand uit de projects-map zouden halen en in de hoofdmap van onze website zouden steken (in het hoogste niveau dus), dan zou pdfs/project-brief.pdf nu naar http://www.example.com/pdfs/project-brief.pdf wijzen en niet naar http://www.example.com/projects/pdfs/project-brief.pdf.

Er bestaan een aantal "beste werkwijzen" die je kan volgen als je een hyperlink maakt. Die werkwijzen gaan we hieronder bekijken.

Het is gemakkelijk om een paar links op je pagina te gooien, maar dat is niet genoeg. We moeten onze hyperlinks toegankelijk voor alle lezers maken, wat ook hun eigen context is of de instrumenten en software die ze verkiezen. Bijvoorbeeld:

  • Mensen die een schermlezer gebruiken springen graag van link naar link en lezen die zonder op de context in te gaan.
  • Zoekmachines gebruiken hyperlinktekst om doelbestanden te indexeren. Het is dus een goed idee om sleutelwoorden in je linktekst te gebruiken. Deze sleutelwoorden beschrijven de plek waar de link je naartoe brengt.
  • Visuele lezers scannen de tekst in plaats van elk woord te lezen en hun blik zal op paginaeigenschappen worden gericht die er echt uitspringen, zoals links. Ze zullen de beschrijvende tekst in een link nuttig vinden.

We bekijken een specifiek voorbeeld:

Goede link tekst: Download Firefox

<p><a href="https://firefox.com/">
  Download Firefox
</a></p>

Slechte link text: Klik hier om Firefox te downloaden

<p><a href="https://firefox.com/">
  Klik hier
</a>
om Firefox te downloaden</p>

Nog een paar tips:

  • Herhaal de URL niet door hem als hyperlink-tekst te gebruiken — URLs zijn lelijk en ze klinken nog lelijker als ze door een schermlezer letter per letter worden voorgelezen.
  • Zeg niet "link" of "linkt naar" in de link tekst — het is enkel lawaai. Schermlezers vertellen gebruikers dat er een link is. Visuele gebruikers zullen weten dat er een link staat, omdat een link standaard wordt onderlijnd en hij zal ook in een andere kleur zal staan.  (deze conventie zou dus best niet worden doorbroken want gebruikers zijn eraan gewend.)
  • Houd je linktekst zo kort mogelijk — lange links irriteren schermlezer-gebruikers nog het meest, omdat die naar het hele ding moeten luisteren.
  • Minimaliseer het gebruik van meerder kopieën van dezelfde tekst die naar verschillende plaatsen wordt gelinkt. Dit kan problemen bij schermlezer-gebruikers veroorzaken, want zij zullen een link vaker buiten zijn context lezen — verscheidene links met het label "klik hier", "klik hier", "klik hier" zouden verwarrend worden.

Als je de beschrijving hierboven leest, denk je misschien dat het een goed idee is om altijd absolute links te gebruiken. Ze kunnen niet breken als een pagina van plaats verandert en relatieve links zullen dat wel doen. Niettemin is het beter een relatieve link te gebruiken waar dat mogelijk is als je naar locaties in dezelfde webbsite linkt (Als je naar een andere website linkt, zal je een absolute link nodig hebben):

  • Ten eerste is het veel makkelijker om je code te scannen — relatieve URLs zijn in het algemeen veel korter dan absolute URLs en dat maakt het coderen veel gemakkelijker.
  • Ten tweede is het gebruik van relatieve URLs veel efficiënter. Als je een absolute URL gebruikt, zoekt de browser eerst de echte locatie van de server op door de domeinnaam op   DNS-server op te zoeken, dan pas gaat de browser naar de server waar het bestand zich op bevindt en pas dan vindt hij het gevraagde bestand. Een relatieve URL, laat  de browser naar het gevraagde bestand op dezelfde server zoeken. Als je dus absolute URLs gebruikt waar relatieve URLs voldoende zijn, laat je je browser constant extra werk doen en dat betekent dat hij minder efficiënt zal zijn.

Als je hyperlinks schrijft naar een bron die men downloadt (zoals een PDF of Word-document), streamt (zoals video of audio) of die een ander potentieel onverwacht effect heeft (opent een popup-venster of laadt een Flash-film), voeg dan duidelijke bewoording toe om elke verwarring te vermijden. Anders kan het zeer vervelend worden. Bijvoorbeeld:

  • Je zit op een lage bandbreedte, je klikt op een link en dan begint er onverwachts een download van een volle megabyte.
  • Flash player is niet op je pc geïnstalleerd, je klikt op een link en dan wordt je plotseling naar een pagina gebracht waar je Flash voor nodig hebt.

Laat ons een paar voorbeelden bekijken en wat voor tekst we in dit soort gevallen kunnen gebruiken:

<p><a href="http://www.example.com/large-report.pdf">
  Download het verkoopsverslag (PDF, 10MB)
</a></p>

<p><a href="http://www.example.com/video-stream/">
  Bekijk de video (stream opens in separate tab, HD quality)
</a></p>

<p><a href="http://www.example.com/car-game">
  Speel het autospel (vereist Flash software)
</a></p>

Gebruik het download-attribuut als je naar een download linkt

Als je een link naar een bron schrijft, die je moet downloaden in plaats van die in de browser te openen, kan je het download-attribuut gebruikten en de link een standaard bestandsnaam geven om de download mee op te slaan. Hier is een voorbeeld met een download link naar de Windows versie van Firefox 39:

<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
   download="firefox-39-installer.exe">
  Download Firefox 39 voor Windows
</a>

Actief leren: creër een navigatiemenu

Voor deze oefening willen we dat je een paar pagina's naar elkaar linkt met een navigatiemenu. Zo kan je een website maken die uit meerdere pagina's bestaat. Dit is een gebruikelijke manier — dezelfde paginastructuur wordt op elke pagina herhaald, inclusief het navigatiemenu. Als je dus op de links klikt, heb je de indruk dat je op dezelfde plek blijft en dat er verschillende inhoud wordt getoond.

Je hebt lokale kopieën van de volgende vier pagina's nodig en die moeten alle vier in dezelfde map terechtkomen. (ga naar de navigation-menu-start map voor de volledige lijst):

Wat je moet doen:

  1. In elk van de pagina's zal je dit commentaar zien staan: <!-- put navigation menu just below here -->. Je kiest een van die pagina's en vervangt het commentaar door een ongeordende lijst. Deze lijst bevat de namen van de pagina's waarnaar je hyperlinks wil maken. Een navigatiemenu is gewoonlijk niet meer dan een lijst met links, semantisch gezien is dit dus oké.
  2. Verander elke paginanaam in een hyperlink naar die pagina.
  3. Kopiëer het navigatiemenu in de drie andere pagina's.
  4. Op elke pagina, verwijder je de link naar zichzelf — dat is enkel verwarrend en zinloos en het ontbreken van een link is een goede visuele herinnering aan de pagina waarop je je nu bevindt.

Het voltooide voorbeeld zou er ongeveer zo moeten uitzien:

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

Opmerking: Als je vastraakt, of je bent er niet zeker van dat je het allemaal juist hebt, kan je dat met de navigation-menu-marked-up map nakijken en het correct antwoord zien.

Het is mogelijk om links of knoppen te creëren die een nieuwe emailboodschap openen, als erop wordt geklikt. Dit is mogelijk door het gebruik van het <a>-element en het mailto: URL schema.

De eenvoudigste en gebruikelijkste vorm van 'mailto: link' duidt gewoon het mailadres van de bestemmeling aan. Bijvoorbeeld:

<a href="mailto:nowhere@mozilla.org">Stuur deze email nergens naartoe</a>

Het resultaat is een link die er zo uitziet: Stuur deze mail nergens naartoe.

In feite is het mailadres zelfs optioneel. Als je het weglaat (dat wil zeggen, je href is gewoon "mailto:"), zal een nieuwe mailtje worden geopend door het mailprogramma van de gebruiker waarin nog geen verzendadres is ingevuld. Dit is vaak nuttig als je "Delen" links schrijft waar gebruikers op kunnen klikken om een mail naar een zelfgekozen mailadres te sturen.

Details toevoegen

Behalve het mailadres kan je nog andere informatie toevoegen. In feite kunnen alle kopregels van een standaardmail worden toegeveogd aan de mailto URL die je verschaft. De meest gebruikelijke zijn "subject" (onderwerp dus), "cc", en "body" (body is de inhoud, body is geen echte kopregel maar het laat je toe een korte inhoud van de nieuwe email te vermelden). Elke kopregel en zijn waarde wordt vermeld als zoekterm.

Hier is een voorbeeld met cc, bcc, subject and body:

<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Verzend mail met cc, bcc, subject and body
</a>

Opmerking: De waarden van elk veld moeten URL-gecodeerd zijn (d.w.z., met  niet-afdrukbare characters en spaties percent-escaped). Let ook op het gebruik van de ampersand (&) om de velden in de mailto: URL van elkaar te scheiden. Dit is standaar URL zoeknotatie.

Hier zijn een paar voorbeelden van mailto URLs:

Samenvatting

Dat is het wat links betreft, toch voorlopig! Je zal er later in deze cursus naar terugkeren als je begint te leren hoe je ze kan stijlen. We gaan verder met tekst semantiek en bekijken een aantal gevorderde en ongewone eigenschappen die je nuttig zal vinden — Gevorderde tekstopmaak is je volgende halte.

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje
 Laatst bijgewerkt door: mientje,