Universele mappenstructuur & bestandsbeheer

Wanneer je lokaal aan een website werkt, is het correct organiseren van je bestanden en mappen van cruciaal belang. Een warrige mappenstructuur zorgt voor kapotte links, ontbrekende afbeeldingen en een onoverzichtelijke werkomgeving.

Een goed georganiseerde mappenstructuur zorgt daarentegen voor een efficiënte workflow, maakt het eenvoudig om je website te beheren en zorgt voor een probleemloze publicatie naar een echte webserver!

1. Het aanmaken van een centrale projectenmap

Voordat je begint met coderen, is het belangrijk dat al je webprojecten op één vaste plek op je computer worden opgeslagen.

Maak een nieuwe hoofdmap aan op een locatie die je gemakkelijk kunt onthouden (bijvoorbeeld op je Bureaublad of in de map Documenten).
Geef deze map een relevante naam zoals Webprojecten.
Binnen deze hoofdmap maak je voor elk nieuw webproject een aparte projectmap aan (bijvoorbeeld Website1 of Portfolio).

Tip: Kies voor mappen- en bestandsnamen altijd korte, logische namen zonder spaties of speciale tekens!

2. De logische indeling van submappen

Binnen jouw specifieke projectmap werk je met een vaste indeling van submappen. Zo weet je altijd precies waar je elk type bestand kunt terugvinden:

index.html: Dit is de hoofdpagina van je website. Deze staat altijd direct in de hoofdmap (rootfolder) van je specifieke project, nooit in een submap!
pages/: Bevat de HTML-bestanden voor alle overige webpagina's van je site (zoals over-ons.html of contact.html).
styles/: Bevat alle CSS-stijlbladen voor het vormgeven van je pagina's.
images/: Bevat alle afbeeldingsbestanden (.jpg, .png, .svg, .webp). Bij grote projecten kun je deze map eventueel nog verder onderverdelen in submappen.
scripts/: Bevat al je JavaScript-bestanden voor interactiviteit.
videos/: Een optionele map voor eventuele videobestanden.

3. Visueel overzicht van de mappenstructuur

Als we de mappenstructuur van een webproject uittekenen, ziet het er als volgt uit:

Webprojecten/
└── Website1/
    ├── index.html
    ├── pages/
    │   ├── over-ons.html
    │   └── contact.html
    ├── images/
    │   ├── logo.png
    │   └── achtergrond.jpg
    ├── scripts/
    │   └── main.js
    ├── styles/
    │   └── style.css
    └── videos/
        └── sfeerimpressie.mp4

4. Verwijzen naar bestanden in de praktijk

Doordat alle bestanden overzichtelijk in submappen staan gedefinieerd, gebruik je in HTML relatieve paden om naar deze bestanden te verwijzen.

Voorbeeld: Bestanden correct linken in HTML

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mijn Webproject</title>
    
    <!-- Link naar het CSS-bestand in de map 'styles/' -->
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>

    <!-- Afbeelding inladen uit de map 'images/' -->
    <img src="images/logo.png" alt="Bedrijfslogo">

    <!-- Linken naar een pagina in de map 'pages/' -->
    <a href="pages/contact.html">Neem contact op</a>

    <!-- JavaScript-bestand inladen uit de map 'scripts/' -->
    <script src="scripts/main.js"></script>

</body>
</html>

Opgelet: Webservers zijn vaak erg gevoelig voor hoofdletters en kleine letters! Gebruik uit voorzorg altijd kleine letters voor al je bestands- en mappennamen.

Samenvatting

Bewaar al je werk overzichtelijk in een centrale overkoepelende map (bijvoorbeeld Webprojecten).
Het hoofdbestand index.html staat altijd rechtstreeks in de rootfolder van de projectmap.
Sorteer overige bestanden netjes in hun eigen submap (pages/, images/, scripts/, styles/, videos/).
Gebruik altijd kleine letters, geen spaties en duidelijke namen voor je bestanden.