HTML: paden

Een pad gebruik je om te verwijzen naar een extern bestand. In praktijk gebruik je dit om een link te leggen naar:

• een andere pagina
• een afbeelding
• een stylesheet
• een javascript bestand

Bvb:

<!-- Een link -->
<a href="page.html">Link naar een andere HTML pagina</a>

<!--  Een afbeelding -->
<img src="image.jpg">

<!--  Een stylesheet -->
<link href="main.css">

<!--  Een javascript bestand -->
<script src="script.js"></script>

Er zijn 3 manieren waarop je een pad kan definiëren:

• een absoluut pad: dit vertrekt vanuit een url of het laagste niveau (root) van je folder
• een relatief pad: dit vertrekt vanuit je huidige locatie
• een expliciet relatief pad: gelijkaardig aan een relatief pad met kenmerken van een absoluut pad

Absolute paden

Een absoluut pad in HTML is een volledig webadres dat begint met het protocol (zoals http:// of https://) en de volledige URL naar een bestand of pagina bevat.

• Een absoluut pad bevat een volledig webadres.
• Begint altijd met een protocol (https://, http://, file://)
• Werkt altijd, onafhankelijk van waar het HTML-bestand vanwaar je linkt zich bevindt.

<!-- Absoluut pad naar een andere pagina -->
<a href="https://www.arteveldehogeschool.be/nl">Artevelde</a>

<!-- Absoluut pad naar een afbeelding -->
<img src="https://ahscdn.be/themes/custom/calibr8_easytheme/logo.svg">

Voordelen:

• Betrouwbaar - werken altijd hetzelfde, ongeacht locatie van het HTML-bestand
• Nuttig voor externe bronnen (zoals Google fonts)

Nadelen

• Minder flexibel bij het verplaatsen van websites
• Afhankelijk van internetverbinding

Relatieve paden

Relatieve paden in HTML verwijzen naar bestanden ten opzichte van de locatie van het huidige HTML-bestand. Ze gebruiken de mapstructuur als referentiepunt.

• Geen protocol of domeinnaam
• Gebaseerd op de huidige locatie van het HTML-bestand
• Gebruiken speciale tekens om door de mapstructuur te navigeren

Belangrijkste symbolen:

Om door je mappenstructuur te navigeren gebruik je een aantal symbolen voor de bestandsnaam waarnaar je wil linken.

• ./ = huidige map (optioneel, kan weggelaten worden)
• ../ = één map omhoog (parent directory)
• ../../ = twee mappen omhoog
• Geen voorzetsel = huidige map

Voorbeelden

Voorbeeld mappenstructuur:

website/
├── index.html
├── contact.html
├── images/
│   ├── logo.png
│   └── foto.jpg
├── css/
│   └── style.css
└── blog/
    ├── artikel.html
    └── images/
        └── banner.jpg

Vanuit index.html:

<a href="contact.html">Contact</a>
<a href="blog/artikel.html">Artikel</a>

<img src="images/logo.png" alt="Logo">
<link rel="stylesheet" href="css/style.css">

Vanuit blog/artikel.html:

<a href="../index.html">Terug naar home</a>
<a href="../contact.html">Contact</a>

<img src="../images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">
<link rel="stylesheet" href="../css/style.css">

Voordelen

• Kort en overzichtelijk
• Flexibel bij het verplaatsen van hele website
• Werken offline zonder internetverbinding

Nadelen:

• Kunnen breken bij het verplaatsen van individuele bestanden
• Complexer bij diepe mapstructuren

Tips

• Gebruik ../ om omhoog te gaan in de mapstructuur
• Test altijd je paden na het verplaatsen van bestanden
• Gebruik consistente mapstructuren om verwarring te voorkomen

Root-relatieve paden of expliciete relatieve paden

Dit wordt ook wel een absoluut pad vanaf de root genoemd.

• Een / aan het begin van je pad- verwijst naar de root (hoofdmap) van de website
• Het pad begint vanaf de hoogste map van de webserver
• Het is onafhankelijk van waar het huidige HTML-bestand zich bevindt

Voorbeeld:

<a href="/link.html">Ga naar link pagina</a>

Dit soort paden werkt meestal prima in een server omgeving maar kan op je eigen computer leiden tot onverwachte fouten:

• Complex: Zoekt naar de hoofdmap binnen je project, dit is dus niet altijd de map waarbinnen je project zich bevindt
• Onbetrouwbaar: afhankelijk van hoe het project geopend wordt zorgt dit voor andere resultaten

Gebruik indien mogelijk altijd relatieve paden

• Voor lokale bestanden binnen dezelfde website gebruik je altijd relatieve paden
• Deze zijn robuust en blijven werken indien het laagste niveau van je folder zou wijzigen (bvb op een server)