Websites met stijl

Naslag: Mappenstructuur, pad, URL

Op dit naslagblad

Let op

Gebruik in URL's en bestandsnamen uitsluitend kleine letters.

Reden:
Windows computers maken geen onderscheid tussen hoofdletters en kleine letters, Unix computers wel. De meeste huiscomputers zijn Windows computers, de meeste internet servers Unix computers.
Als je een link <a href="Mijnpagina.html"> maakt naar het bestand mijnpagina.html is dat op je eigen Windows computer geen probleem. Windows maakt geen onderscheid tussen Mijnpagina.html en mijnpagina.html. Maar voor Unix computers zijn het twee verschillende bestanden. Op een Unix server zal de link niet werken.

Zulke problemen vermijd je door alleen kleine letters te gebruiken in URL's en bestandsnamen.

Inleiding

De URL (Uniform Resource Locator - uniforme hulpbron zoeker) is een gestructureerde tekenreeks waarmee een bestand kan worden gevonden. Denk aan het bestand waarnaar bij klikken op een link wordt gesprongen, of het afbeeldingsbestand dat moet worden getoond in een img-element.

De URL maakt gebruik van het pad door de mappenstructuur naar het gezochte bestand. Over die mappenstructuur gaat het eerste deel van dit naslagblad.

Mappenstructuur

Mappen

Een map is een 'plaats' op een harde schijf of internet die bestanden (documenten, afbeeldingen...) kan bevatten.
Een map kan ook andere mappen bevatten. Het geheel van mappen noemen we een mappenstructuur.

Figuur 1 is een voorbeeld van zo'n mappenstructuur.

figuur 1

Niveaus

In de figuur is terschelling de map van het hoogste niveau, daarin zitten immers alle mappen.
De mappen css en img zijn een niveau lager (niveau 2) en de mappen sub1 en sub2 zijn nog een niveau lager (niveau 3).

Het pad

Pad omlaag

Het pad geeft de route aan tussen twee mappen, via de lijnen in de figuur.
Alle tussenliggende mappen worden opgesomd, gescheiden door het teken /.
De startmap wordt niet genoemd, de eindmap wel:

Hogere map ..

Als een map een submap is van een andere map, dan wordt die andere map de hogere map genoemd.

Opmerking:

Pad omhoog

Wat hiervoor over het pad is gezegd, gaat alleen op bij een pad van hoog naar laag (van links naar rechts in de figuur).
Als je van een lagere map naar een map hoger gaat, geef je niet de naam van de hogere map, maar de aanduiding .. voor hogere map.

Enkele voorbeelden:

Pad omlaag/omhoog

Een pad kan ook afwisselend omhoog en omlaag gaan:

Pad naar een bestand

Een pad leidt gewoonlijk niet naar een map, maar naar een bestand in een map.
Zo'n pad krijg je door achter het pad naar de betreffende map een / te zetten, gevolgd door de bestandsnaam.

Voorbeeld
Het pad vanuit de map terschelling naar het bestand mijnafbeelding.jpg in de map img is img/mijnafbeelding.jpg

Staan link en het gelinkte bestand in dezelfde map, dan is het pad de naam van het gelinkte bestand: mjnafbeelding.jpg

Relatief pad en absoluut pad

Relatief pad

De bovenstaande paden waren relatieve paden: van de ene map (de map met de link) naar (een bestand in) een andere map.

Daarnaast zijn er ook absolute paden.

Absoluut pad

Een absolute link werkt vanuit elke plek (lokale harde schijf, willekeurige map in willekeurige website, aannemende dat het pad een pad naar een bestaand bestand is.

Tip

De URL

Wat is URL

Terug naar de URL.
De URL geeft de plaats aan waar een bestand kan worden gevonden en geeft tevens op welke manier het moet worden opgehaald: het zogenaamde protocol. URL is een afkorting van Uniform Resource Locator, vrij vertaald uniforme hulpbronzoeker.

Overal waar verwezen wordt naar een bestand wordt de URL gebruikt, bijvoorbeeld bij hyperlinks, bij het element img, de verwijzing naar een stijlblad.

Vorm

De URL begint altijd met de naam van het gebruikte protocol, gevolgd door een dubbele punt.
Wat er achter die dubbele punt komt is afhankelijk van het protocol.

Het protocol dat we het meest nodig hebben is http. HIervoor is de vorm:

http: // domeinnaam pad #bladwijzer De spaties zijn voor de duidelijkheid en moeten in een echte URL worden weggelaten.

Opmerking: bij een relatief adres worden protocol en domeinnaam weggelaten.

Opmerkingen

Mailto:

Het protocol mailto: dient om een e-mail te sturen.

Vorm: mailto:gebruiker@provider.nl Hiermee wordt het e-mailprogramma gestart met een leeg mailtje waarin het AAN-veld is ingevuld met: gebruiker@provider.nl

Als je ook het onderwerp automatisch wilt toevoegen voeg je achter het e-mailadres ?subject=onderwerp toe: href="mailto: gebruiker@provider.nl?subject=onderwerp"

Een URL mag geen spaties bevatten. Als het onderwerp spaties bevat, dan moet elke spatie worden vervangen door de code voor een spatie: %20.
Het onderwerp 'Walvis aangespoeld' wordt dus walvis%20aangespoeld'. Zie het voorbeeld hieronder:

Voorbeeld
<a href="mailto: karel1@plx.nl?subject=aanmelding%20nieuwsbrief">meld je aan</a> meld je aan Probeer dit door hierboven te klikken op 'meld je aan'.

Let op

Het gebruik van mailto in een webpagina is niet erg veilig. Kwaadaardige programma's kunnen in de code van de pagina het e-mailadres lezen en dit gebruiken voor bijvoorbeeld spam of erger.
Meer info hierover vind je bv op https://www.webwinkelkeur.nl/e-mail-beveiligen-tegen-spam/; of zoek op internet naar 'emailadres beschermen tegen spam'.

Meer over URL's

Uitgebreidere informatie over URL's is o.a. te vinden op Wikipedia.
De complete referentie staat op https://tools.ietf.org/html/rfc3986. Of zoek op internet naar URL of 'Wat is URL'.

Voorbeelden

De voorbeelden 1 t/m 8 gaan uit van de mappenstructuur van figuur 1.

Voorbeeld 1
In het bestand index.html in de map terschelling wordt de afbeelding plaatje1.jpg opgenomen.
Die afbeelding staat ook in de map terschelling.
code: <img src="plaatje1.jpg">

(relatief pad)

Voorbeeld 2
Als voorbeeld 1; maar nu staat de afbeelding in de map img.
code: <img src="img/plaatje1.jpg">

(relatief pad)

Voorbeeld 3
Als voorbeeld 2. Nu staat het plaatje in de map sub2.
code: <img src="img/sub2/plaatje1.jpg">

(relatief pad)

Voorbeeld 4
In een document in map sub2 staat een link naar het document stedentrip.html in map sub1.
Code: <a href="../sub1/stedentrip.html">stedentrip</a>

(relatief pad)

Voorbeeld 5
Als voorbeeld 4. Nu moet worden gesprongen naar de bladwijzer amsterdam in het document stedentrip.html.
Code: <a href="../sub1/stedentrip.html#amsterdam">Amsterdam</a>

(relatief pad)

Voorbeeld 6
Een document in sub1 moet worden gekoppeld aan het stijlblad 'stijlen.css' in de map css.
code: <link rel='stylesheet' href="../../css/stijlen.css">

(relatief pad)

Voorbeeld 7
In een document in de map terschelling staat een link naar het document arend.html op de website wwww.vogelgids.com
Code: <a href="http://www.vogelgids.com/arend.html">Meer over arenden...</a>

(absoluut pad)

Voorbeeld 8
Als voorbeeld 7. Nu staat het document met de link in de map sub2
Code: <a href="http://www.vogelgids.com/arend.html">Meer over arenden...</a>

(absoluut pad)


Toelichting: bij een absoluut pad maakt het niet uit vanuit welke map wordt gelinkt. De voorbeelden 6 en 7 zijn dus gelijk.
Voorbeeld 9
De link naar de pagina die je nu leest.
Code: <a href="http://www.websitesmetstijl.nl/naslag/pad.html">URL en pad</a>

(absoluut pad)


Controleer maar in de adresbalk van je browser. (Meestal wordt in de adresbalk het eerste stuk van de URL, http://www, niet getoond.)
Voorbeeld 10
Op de webpagina www.vogelgids.nl/roofvogels/inhoud.html moet een link komen naar de pagina www.vogelgids.nl/roofvogels/valken/torenvalk.html.
Code: <a href="valken/torenvalk.html">De torenvalk</a>

(relatief pad)