HTML eerste stappen – Les 4 – Links (hyperlinks)
We zijn aangekomen bij de basis van HTML — het doel waarvoor HTML oorspronkelijk is ontworpen — namelijk hyperlinks (of gewoon links). Links zijn de manier om verbanden te leggen tussen verschillende bestanden of pagina’s. Stel dat je 100.000 tekstbestanden hebt; als je ze allemaal wilt ordenen met rubrieken en elk rubriek 200 beschrijvingen bevat, heb je er 500 nodig. Om door al die rubrieken te bladeren kost veel tijd. Hoe maken links ons leven eenvoudiger?
Links verbinden twee HTML-documenten op willekeurige wijze. Elk HTML-document heeft een unieke naam, zodat we vanuit één document naar tien andere verwante of populaire documenten kunnen springen. Dit verhoogt de kans dat we snel de gewenste informatie vinden.
Hetzelfde principe geldt voor websites. Elke pagina heeft een unieke URL (Uniform Resource Locator — een unieke locatieaanduiding van een bron). We schrijven deze unieke naam van de pagina waarnaar we willen verwijzen in de tag <a></a>. In het algemeen ziet dat er zo uit:
<a href="uniek_pad">linktekst</a>
In deze code is href een attribuut van de a-tag. Wat attributen zijn, hebben we in de vorige les besproken. Laten we nu een tweede bestand aanmaken in dezelfde map als index.html. We noemen het file.html en voegen de volgende code toe:
<html>
<head>
<title>Mijn tweede HTML-document</title>
</head>
<body>
<h1>Mijn tweede HTML-document</h1>
</body>
</html>
En in index.html schrijven we het volgende:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<p>
<a href="file.html">Link naar het tweede document</a>
</p>
</body>
</html>
Wanneer we index.html in de browser openen, zien we een link waarmee we naar file.html kunnen gaan. Laten we nu oefenen met het schrijven van paden naar bestanden. Als beide bestanden in dezelfde map staan, hoeven we alleen de bestandsnaam in het attribuut href te schrijven. De browser begrijpt dan dat het bestand zich in dezelfde map bevindt. Maar wat als we de bestanden in verschillende mappen willen opslaan? Dan gebruiken we relatieve paden.
Relatieve paden
Relatieve paden heten zo omdat ze het pad naar een bestand aangeven ten opzichte van het huidige document. Laten we een map files aanmaken in dezelfde map als index.html. We verplaatsen file.html naar die map. Nu zal de link in index.html niet meer werken, omdat het bestand is verplaatst.
We moeten dus een pad gebruiken dat relatief is ten opzichte van index.html. Voor mappen gebruiken we de schuine streep “/”, bijvoorbeeld:
/Program Files/MSOffice/
Om aan te geven dat het pad relatief is, schrijven we ./ (punt + schuine streep). Zo ziet het pad naar de map files eruit vanuit index.html:
./files/
We voegen de bestandsnaam toe aan het einde:
./files/file.html
En passen de code in index.html aan:
<html>
<head>
<title>Mijn eerste HTML-document</title>
</head>
<body>
<h1>Mijn eerste HTML-document</h1>
<p>
<a href="./files/file.html">Link naar het tweede document</a>
</p>
</body>
</html>
Sla nu index.html op en vernieuw de pagina in de browser. De link werkt weer. Je kunt het pad ook schrijven zonder ./:
<a href="files/file.html">Link naar het tweede document</a>
De browser begrijpt dit ook. Maar als we dit schrijven:
<a href="/files/file.html">Link naar het tweede document</a>
dan werkt het niet meer, want dit is een absoluut pad, niet relatief aan index.html. Als je een relatief pad wilt gebruiken, schrijf dan ./ of laat het gewoon weg.
Laten we nu een omgekeerde link maken van file.html naar index.html. Eerst geven we aan dat het een relatief pad is:
./
Om één map omhoog te gaan, gebruiken we ../. Dat betekent “ga een map omhoog”.
./../
Als we nog een map dieper zouden zitten, bijvoorbeeld ./../../, zouden we per niveau een ../ toevoegen.
Nu voegen we de bestandsnaam toe:
./../index.html
We voegen dit pad in file.html toe:
<html>
<head>
<title>Mijn tweede HTML-document</title>
</head>
<body>
<h1>Mijn tweede HTML-document</h1>
<p>
<a href="./../index.html">Link naar het eerste document</a>
</p>
</body>
</html>
Nu kun je tussen de twee pagina’s heen en weer navigeren. Let erop hoe de URL in de browser verandert.
Absolute paden
Absolute paden worden gebruikt op websites op het internet. In Drupal bijvoorbeeld worden alle pagina’s geladen via één bestand index.php. Wanneer we “/” gebruiken, verwijzen we naar het pad vanaf dat bestand. Op je computer begint een absoluut pad bij de hoofdmap van de schijf. Op websites beginnen absolute paden meestal met “/” of met een domeinnaam, bijvoorbeeld https://drupalbook.org/ru/.
Absolute paden zien er zo uit:
/index.html
/files/file.html
/files2/file2.html
Als we vanuit index.html en file.html willen verwijzen naar file2.html, zien de links er hetzelfde uit, ongeacht de map waarin ze staan:
<a href="/files2/file2.html">link</a>
Deze code werkt zowel in index.html als in file.html. Zelfs in file2.html kun je zo’n link gebruiken die naar zichzelf verwijst.
Attribuut target
Het attribuut target is erg belangrijk, vooral als een link naar een andere website verwijst. Hiermee bepaal je hoe de link wordt geopend:
_blank — opent de link in een nieuw venster of tabblad;
_self — opent in hetzelfde venster (standaard);
_parent — opent in het bovenliggende frame (verouderd, vervangen door AJAX);
_top — verwijdert alle frames en opent in het volledige browservenster.
Meestal gebruiken we alleen _blank, omdat _self standaard is en niet hoeft te worden opgegeven.
<a href="/files2/file2.html" target="_blank">link</a>
Attribuut rel
Het attribuut rel (relation) geeft de relatie aan tussen de huidige pagina en de pagina waarnaar wordt gelinkt. Het meest gebruikte voorbeeld is rel="nofollow", waarmee je zoekmachines zoals Google of Yandex vertelt de link niet te volgen. Als je bijvoorbeeld een link plaatst naar een externe website, gebruik dan rel="nofollow" samen met target="_blank":
<a href="/files2/file2.html" target="_blank" rel="nofollow">link</a>