HTML Links En Hyperlinks
© Hans Roeyen 5 februari 2015
V 3.0
HTML
Inhoud 1. Werken met (Hyper)links...................................................................................... 3 1.1. De anchor tag ................................................................................................ 3 1.1.1. Het ID attribuut ............................................................................................... 3 1.1.2.
Oefeningen op linken ..................................................................................... 4
1.1.3.
Absoluut en relatief linken .............................................................................. 9
Hans Roeyen
HTML Links
2-10
HTML
1. Werken met (Hyper)links 1.1.
De anchor tag
Om te kunnen “linken” naar een ander document op het web maakt HTML gebruik van een Hyperlink. Om de link te maken gebruiken we dan een anchor
. Een anchor kan naar eender welke bron verwijzen in het web: een HTML pagina, een geluidsbestand, een film, enz. Specifiek kan je een onderscheidt maken tussen een HTML link om te verwijzen naar een externe bron en een HTML anchor als de link verwijst naar een adres binnen een document. De syntax is als volgt: Tekst die getoond moet worden Zo zal de onderstaande code linken naar de website van Lethas:
Website van Lethas Wanneer we aan de
tag het “target” attribuut toevoegen, kunnen we aangeven waar het document zal geopend worden. Zo zal de link in de onderstaande code het document openen in een nieuw browservenster. Lethas
1.1.1. Het ID attribuut Het “id” attribuut wordt gebruikt om een “benoemd anchor” te maken. Met “benoemde anchors” kunnen we links maken die toelaten dat gebruikers rechtsreeks naar een bepaald deel van een pagina zullen springen zonder dat ze hiervoor hoeven te scrollen. Dit is de syntax:
Tekst die getoond moet worden De onderstaande code definieert een benoemd anchor:
ga naar de vierde sectie De volgende code toont ons hoe we kunnen linken naar de eerste sectie:
ga naar de vierde sectie De volgende code laat zien hoe we dan vanuit een andere pagina rechtsreeks kunnen linken naar de eerste sectie in het (fictieve) bestand “test.html.
Ga naar de vierde sectie
Hans Roeyen
HTML Links
3-10
HTML
Opmerkingen Voeg altijd een ‘slash’ (/) toe aan het einde van supmap referenties. Wanneer we linken zoals in ‘href=”http://www.lethas.be/opl’ zullen we twee HTTP requests genereren naar de server omdat de server zelf de slash zal toevoegen op het einde van het adres. Dat wordt dan ‘href=”http://www.lethas.be/opl/’ Benoemde anchors worden heel veel gebruikt om inhoudstabellen te maken in het geval van groot documenten. Elk hoofdstuk in het document wordt dan voorzien van een benoemd anchor en de links naar elk van deze anchors worden dan in het begin van het document geplaatst. Indien een browser een gevraagd benoemd anchor niet kan vinden, wordt de cursor per standaard aan het begin van het document geplaatst. Er wordt in geen geval een fout gegenereerd. Met
Naar bovenkunnen we een link maken die ons terug naar boven op de webpagina brengt.
1.1.2. Oefeningen op linken Voorbeeld 1: openen van een link in een nieuw browservenster
Hier komt de titel van de pagina Test Pagina
Hans Roeyen
HTML Links
4-10
HTML
Voorbeeld 2: linken naar een locatie binnen eenzelfde pagina
Hier komt de titel van de pagina Ga naar Hoofdstuk 16
Hoofdstuk 1
Dit is hoofdstuk 1 van de tekst
Hoofdstuk 2
Dit is hoofdstuk 2 van de tekst
Hoofdstuk 3
Dit is hoofdstuk 3 van de tekst
Hoofdstuk 4
Dit is hoofdstuk 4 van de tekst
Hoofdstuk 5
Dit is hoofdstuk 5 van de tekst
Hoofdstuk 6
Dit is hoofdstuk 6 van de tekst
Hoofdstuk 7
Dit is hoofdstuk 7 van de tekst
Hoofdstuk 8
Dit is hoofdstuk 8 van de tekst
Hoofdstuk 9
Dit is hoofdstuk 9 van de tekst
Hoofdstuk 10
Dit is hoofdstuk 10 van de tekst
Hoofdstuk 11
Dit is hoofdstuk 11 van de tekst
Hoofdstuk 12
Dit is hoofdstuk 12 van de tekst
Hoofdstuk 13
Dit is hoofdstuk 13 van de tekst
Hoofdstuk 14
Dit is hoofdstuk 14 van de tekst
Hoofdstuk 15
Dit is hoofdstuk 15 van de tekst
Hoofdstuk 16
Dit is hoofdstuk 16
Hoofdstuk 17
Dit is hoofdstuk 17 van de tekst
Hans Roeyen
HTML Links
5-10
HTML
Opmerking: de volgende voorbeelden dienen enkel ter illustratie van de mogelijkheden met links en zullen niet allemaal volledig werken. In een aantal voorbeelden wordt verwezen naar gegevens of bronnen die niet aanwezig zijn. Toch kan je de voorbeelden uittesten! Voorbeeld 3: ontsnappen uit een frame ( zie ook sectie over frames verderop in de cursus)
Hier komt de titel van de pagina Hoe kom ik hier weg?
Klik hier! Voorbeeld 4: creëren van een ‘mailto’ link
Hier komt de titel van de pagina Dit is een mail link: Verstuur mail
Nota Spaties tussen woorden zouden vervangen moeten worden door %20 om zeker te zijn dat de browser onze tekst correct zal weergeven
Hans Roeyen
HTML Links
6-10
HTML Voorbeeld 5: creëren van een iets complexere ‘mailto’ link
Hier komt de titel van de pagina Dit is een mail link: Verstuur mail
Voorbeeld 6: de volgende code verschaft ons toegang tot een nieuwsgroep
Hier komt de titel van de pagina Dit is een link naar een nieuwsgroep: HTML Newsgroup
Hans Roeyen
HTML Links
7-10
HTML
Voorbeeld 7: met de volgende code kunnen we een bestand downloaden met FTP
Hier komt de titel van de pagina Download Gimp
Voorbeeld 8: met de volgende code kunnen we een afbeelding als link gebruiken
Hier komt de titel van de pagina
We kunnen ook een afbeelding gebruiken als link: 
Een hoofdstuk over linking zou niet volledig zijn zonder iets te zeggen over ‘absolute’ en ‘relative’ linking
Hans Roeyen
HTML Links
8-10
HTML
1.1.3. Absoluut en relatief linken Met absolute linking geven we een volledige url in om te linken naar een andere pagina. Dit gebruiken we om te linken naar documenten die zich op andere servers bevinden in het web. In voorbeeld 3 (http://www.google.be/) hebben we deze manier gebruikt. Wanneer we een link maken vanuit een pagina naar een andere pagina op dezelfde server, hoeven we geen volledige url te vermelden. Stel dat je wilt linken naar een andere pagina die in dezelfde map zit als de pagina waaruit we linken, dan volstaat een verwijzing met enkel de naam van het bestand. In voorbeeld 8 is deze manier gebruikt. Dit noemt men dan relative linkink. Zo kunnen we binnenin onze mapstructuur gemakkelijk verwijzen naar andere pagina’s. Bekijk even de onderstaande voorbeelden:
Bestel hier Terug naar startpagina Home Contact Relative linking gebruiken we dus om te linken naar pagina’s die deel uitmaken van onze eigen website.
TAG
Functie Definieert een anchor
Opdracht HTML: Oefening op relative linking
Hans Roeyen
HTML Links
9-10
HTML
TEST
Foto 2006 Vakantie 2007 Hobby
Theater
Contact
Maak deze mappenstructuur na in je verkenner. In elke map zit een HTML bestand dat de naam heeft van de map. Bijvoorbeeld: in de map Foto zit dus het bestand ‘foto.html’ In elk bestand zet je bovenaan een titel met de naam van de map waarin het bestand zit. In de map Test plaats je het bestand ‘index.html’ welke de ‘home’ pagina is. Opdracht: Zorg dat we vanuit eender welke pagina naar eender welke andere pagina kunnen door te klikken op een hyperlink. Let wel: Je mag enkel gebruik maken van relative linkink en dus NIET van absolute linking!!
Hans Roeyen
HTML Links
10-10
