Websites met stijl

Naslag: Mappenstructuur, pad, URL

Op dit naslagblad

Inleiding
Mappenstructuur
- Mappen
- Niveau's
Pad
Relatief pad en absoluut pad
URL
Voorbeelden
Let op

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 (of alleen hoofdletters, maar wees consequent).

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.

Terschelling is de hoofdmap.
Deze map bevat zelf twee submappen: css en img
Css heeft geen submappen
Img heeft twee submappen, sub1 en sub2

figuur 1

In de verkenner en browser wordt de mappenstructuur meestal aangegeven zoals rechts in figuur 1.
(De driehoekjes dienen om de submappen te verbergen of te tonen)
De voorbeelden in dit naslagblad gaan tenzij anders vermeld uit van de structuur van figuur 1.
Zoals je wel ziet is het de structuur van de website van Terschelling op je computer. Alleen de mappen sub1 en sub2 heb ik erbij verzonnen.
In het Engels heet de hoofdmap de 'root' (wortel). De mappenstructuur wordt een boomstructuur genoemd. Die boom staat altijd ondersteboven afgebeeld.
Ik spreek niet van wortel maar van hoofdmap en submappen - van boven naar beneden.

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:

Het pad van terschelling naar css is: css
Het pad van terschelling naar img is: img
Het pad van terschelling naar sub1 is: img/sub1
Het pad van img naar sub1 is: sub1

Hogere map ..

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

De hogere map van sub1 is img
De hogere map van sub2 is img
De hogere map van img is terschelling
De hogere map van css is terschelling

Opmerking:

Een map heeft nooit meer dan één hogere map. Een map kan zich immers maar in één map bevinden.

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:

Het pad van sub1 naar img is: ..
(1 niveau omhoog)
Het pad van css naar terschelling is ..
(1 niveau omhoog)
Het pad van sub1 naar terschelling is ../..
(2 niveaus omhoog).

Pad omlaag/omhoog

Een pad kan ook afwisselend omhoog en omlaag gaan:

Het pad van css naar sub1 is: ../img/sub1
Het pad van sub1 naar css is: ../../css

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: mijnafbeelding.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 absoluut pad is het volledig adres, inclusief domein (de naam van de website), bijvoorbeeld www.terschelling.nl/img/polder1.jpg
Je gebruikt een absoluut pad als het bestand dat je zoekt op een andere website staat dan het bestand met de link of het img element.

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

Gebruik een relatief pad als het bestand waarnaar je linkt op dezelfde website staat.
Gebruik een absoluut pad als je verwijst naar een bestand op een andere website.

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.

http:
http is het hypertext transfer protocol, het protocol dat gebruikt wordt voor hyperlinks naar bestanden op internet.
Enkele andere protocollen:
https: - http over een beveiligde verbinding;
file: - voor bestanden op de lokale harde schijf
ftp: - file transfer protocol, voor het uitwisselen van bestanden tussen computers ('uploaden' en 'downloaden');
mailto: - een protocol voor het versturen van een e-mail. (zie verder op deze pagina bij mailto
domeinnaam
De naam van de website, bv. websitesmetstijl.nl
Vaak staat er www. (van World Wide Web) voor de domeinnaam: www.websitesmetstijl.nl.
Het is mij niet duidelijk wanneer www. kan (of zelfs moet) worden toegevoegd of weggelaten.
Gewoonlijk werkt het met en zonder www..
Voorbeeld: http://www.websitesmetstijl.nl (URL naar www.websitesmetstijl.nl)
pad
Bij een absoluut adres: het pad vanaf de hoofdmap van de de website.
Bij een relatief pad: het pad vanaf de map met het bestand van waaruit wordt gelinkt.
Voorbeeld 1: http://www.websitesmetstijl.nl/naslag/pad.html
(URL naar de pagina pad.html in de map naslag van www.websitesmetstijl.nl, het absolute adres van deze webpagina).

In voorbeeld 2 een (relatieve) link naar de pagina pad.html van voorbeeld 1. De link staat in de map naslag.
Voorbeeld 2: pad.html
(Relatieve URL naar de pagina pad.html; dus zonder protocol en domeinnaam, pad vanuit de map naslag. Dan blijft alleen de bestandsnaam..
bladwijzer
De bladwijzer geeft de plaats aan waarheen binnen het bestand wordt gesprongen.
Zonder bladwijzer wordt naar het begin van het document gesprongen.
De bladwijzer wordt voorafgegaan door het teken #.
Voorbeeld: http://www.websitesmetstijl.nl/cursus10.html#tekst
(URL naar de bladwijzer tekst op de pagina cursus10.html van www.websitesmetstijl.nl)

Opmerkingen

Geef bij een relatief pad nooit een protocol op. De webbrowser zet het relatieve adres automatisch om in een absoluut adres en voegt ook het protocol toe.
Let op: Laat een relatief pad nooit beginnen met /. Dan beschouwt de browser het als een absoluut adres waarvan de domeinnaam is weggelaten.Dan werkt de link meestal niet.
Heb je een URL van een bepaalde website nodig in een hyperlink (een absoluut pad)? Zoek dan de betreffende website op internet op en kopieer de URL uit de adresbalk.
In een absoluut adres mag je de naam index.html weglaten: http://wwww.websitesmetstijl.nl/ is hetzelfde als http://wwww.websitesmetstijl.nl/index.html.
Als geen bestandsnaam in het adres is opgenomen, neemt de browser aan dat die naam index.html is.
Meer voorbeelden vind je aan het eind van dit naslagblad.

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

Bij aanklikken wordt het e-mailprogramma geopend, en verschijnt een nieuw mailbericht aan karel1@plx.nl met als onderwerp: aanmelding nieuwsbrief.

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 de webpagina 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)

Naschrift: Het https protocol

Het https protocol is een beveiligde versie van het http protocol. Alle dataverkeer van en naar de website is dan versleuteld. Dat werkt alleen bij websites die daarvoor zijn ingericht.

Voorbeeld 11
Als voorbeeld 7, maar nu met het https protocol voor versleuteld dataverkeer:

Code: <a href="https://www.vogelgids.com/arend.html">Meer over arenden...</a>

Oorspronkelijk werd het https protocol alleen gebruikt op websites met gevoelige informatie, denk aan webshops en internetbankieren. Maar tegenwoordig wordt aanbevolen om zoveel mogelijk het https protocol te gebruiken om te voorkomen dat hackers gegevens stelen. Steeds meer webproviders bieden dit protocol gratis of tegen geringe kosten aan.
(Zie ook de paragraaf Hosting providers van hoofstuk 33 - speciaal de laatste regels, bij naschrift.)