Zonder hyperlinks zou het website niet bestaan. het adres (url) kan een volledige url (= externe link) zijn die begint met http://mijnhomepagina.be maar ook een adres binnen de website (= interne link).

De simpele tag <a> ... </a> is zonder twijfel de meest magische van het web. Een hyperlink brengt ons van de ene pagina naar de andere, van de ene website naar de andere. Het attribuut href bevat de naam van het bestemmingsdocument in de vorm van een relatief of absoluut pad.

Een interne hyperlink, ook wel relatieve adressen genoemd, stuurt de bezoeker door naar een pagina binnen dezelfde website.

Een externe hyperlink, ofwel absolute adressen genoemd, stuurt de bezoeker door naar een andere website.

https://www.w3schools.com/tags
https://www.w3schools.com/tags/link_image

6.1.1 Relatieve adressen

  • Een relatief adres is een adres dat zich verhoudt tot de pagina waarin dit adres wordt opgeroepen, voorbeeld:
  • Ligt het bestand dieper, bijvoorbeeld in de map 'inhoud', dan krijgt de url een ander adres:
  • Iets moeilijker wordt het als vanuit deze pagina moet worden terug gestuurd naar bijvoorbeeld de index.html-pagina. dat gaat als volgt: Deze vermelding stuurt naar een map omhoog in de mappenstructuur. Je kan dit systeem verder doortrekken: ../../ zijn 2 mappen omhoog. Het werkt, maar is niet ideaal. het laatste voorbeeld kan ook een absoluut adres krijgen wanneer de website online komt.

6.1.2 Absolute adressen

Een website kan als adres http://pti-ninove.be hebben. de server waarop de site draait weet dat het adres eigenlijk http://pti-ninove.be/index.html is. Daarom benoem je de eerste webpagina altijd index.html, zodat de browser weet dat dit de eerste webpagina wordt!

De adressen zijn als volgt opgebouwd:

  • http:// Een type-indicatie van het internet adres (= voorvoegsel of protocol), andere typen zijn ftp, file en news. Er bestaat ook het protocol https://, dit betreft een pagina die versleutelde informatie verwerkt.
  • www Een niet altijd noodzakelijke toevoeging in een url.
  • pti-ninove.be domeinnaam + taalcode = server-adres Elk adres is gekoppeld aan een numerieke waarde. dit noemen we het ip-adres vb. 87.223.180.85. Dit is het echte unieke adres van de website.

Een hyperlink hoeft niet per se uit tekst te bestaan. Ook een afbeelding kan als hyperlink fungeren. Om van een afbeelding een link te maken moeten we een img-element opnemen binnen een a-element. Vaak wordt op het logo van de website een terug link geplaatst naar de homepagina.

6.1.3 E-mailadres als koppeling

Een bijzondere vorm van een hyperlink is een e-mailadres dat een koppeling legt naar het e-mail programma op de computer van de webbezoeker. Bij deze speciale link begint het href-attribuut met het e-mailprotocol mailto: waarna een e-mailadres staat, bijvoorbeeld:

Bij een mailto-koppeling is het mogelijk alvast het onderwerp van het e-mailbericht in te vullen. Schrijf dan na het e-mailadres een vraagteken, de tekst subject= en daarna de onderwerptekst.

6.1.4 Hyperlink naar andere soorten documenten

De meeste hyperlinks verwijzen naar een html-document, maar dat is geen verplichting. Zo kunt u bijvoorbeeld rechtstreeks linken naar een afbeelding, geluidsbestand, pdf-bestand, enz... Levert u informatie als pdf, verwijs de bezoeker dan naar de plaats waar hij de benodigde gratis Reader kan downloaden.

Levert u informatie als pdf, verwijs de bezoeker dan naar de plaats waar hij de benodigde gratis Reader kan downloaden.

Standaard verdwijnt de vorige pagina uit beeld in de browser en met de backspacetoets belandt u terug in de browser. We gaan de webpagina's laten openen in een nieuw venster via het attribuut target. Dit doen we altijd voor absolute linken gaat anders stuur je de bezoeker weg van je webpagina.

Het attribuut target kent vier standaardwaarden:

  • _blank: opent de gevraagde url in een nieuw venster (of tabblad);
  • _self: opent de gevraagde url in hetzelfde venster.
  • _parent: opent de gevraagde url in het parent frame van de webpagina.
  • _top: opent de gevraagde url in het basisframe van de webpagina.
  • _framenaam: opent de gevraagde url in het opgegeven frame.

Zonder een doel of target mee te geven wordt de gevraagde url automatisch in _self geopend. De laatste drie attributen gaan van pas komen bij iframes (inline frame) dat verderop in deze cursus besproken wordt. Gewone frames - oude manier van websites ontwikkelen - zijn volledig afgeschaft, dit was namelijk zeer onhandig voor zoekmachines. Omdat elke frame een aparte webpagina is, kon elke frame ook als aparte webpagina in de zoekresultaten belanden.

https://www.w3schools.com/tags

6.2.3 anker

Soms wil je niet zomaar verwijzen naar een ander document, maar naar een specifieke plaats in de huidige webpagina. Dat kan als je eerst de plaats, waarnaar je wilt verwijzen, markeert met een a element waaraan het name attribuut is toegevoegd. Zo'n markering (of anker) noemen we in dit voorbeeld top.

Als je binnen de webpagina een link naar een gemarkeerde plaats wilt maken, gebruik je als URL een hekje (#) gevolgd door de naam van de markering.

Dit soort linken werken overigens niet alleen binnen de webpagina. Het is ook mogelijk te verwijzen naar een gemarkeerde plaats in een ander webpagina:

Open onze vorige oefening 'oefAfbeeldingen.html'. Maak relatieve links voor onze menu, start met de tag en sluit af met binnen het li element: Sla deze webpagina nu op als index.html.

De hyperlink is te herkennen aan een blauwe kleur en de onderlijning. Dit soort standaard opmaakkenmerken gaan we later in het stijlblad veranderen via pseudoklassen. Wanneer je klikt op een link zal de kleur wijzigen naar paars (= bezochte link). Na het klikken op een hyperlink verschijnt en nieuwe webpagina in beeld. Voorlopig bestaan de webpagina's link en contact nog niet en verschijnt er de tekst 'deze webpagina is niet gevonden'.

Voeg bovenaan de index-pagina een markering toe genaamd top. Onderaan de webpagina voeg je de inhoud 'Ga naar boven' met verwijzing naar de naam top. Als je een pijltje wilt gebruiken kan je dit doen door:

  • ofwel een ascii-code, bijvoorbeeld ^ (circumflex) plaatsen, zie voor de volledige tabel op http://www.ascii.cl/htmlcodes.htm.
  • ofwel een icoon via het lettertype Fontaweasome, bijvoorbeeld zie voor meer iconen op http://fontawesome.io/icons.Vergeet niet de externe link toe te voegen in het head-element:

Start met een nieuw html document en sla het op als links.html . De inhoud van heth1 element wordt Links. Plaats eigen gekozen absolute links naar leuke kooklinks. Vergeet niet het doel (=target) te plaatsen naar een nieuw venster! Test straks in de browser of de webpagina's openen in een nieuw venster. Test ook of je kan springen van de homepagina naar de links-pagina en omgekeerd!