Omgaan met Bestanden

Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media inhoud enzovoort. Als je een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op je lokale computer. Je moet ervoor zorgen dat ze met elkaar kunnen praten en je volledige inhoud moet er goed uitzien, vooraleer je uiteindelijk je bestanden naar een server uploadt. Bestanden beheren bespreekt een aantal problemen waar je je bewust van zou moeten zijn zodat je een verstandige mappenstructuur voor je website kan opzetten.

Waar moet je website op je computer leven ?

Als je op je lokale computer aan je website werkt, moet je alle gerelateerde bestanden in een enkele map bewaren die de mappenstructuur van de gepuliceerde website op de server spiegelt. Deze map kan eender waar leven, maar je kan hem best ergens steken waar je hem gemakkelijk terugvindt; misschien op je Bureaublad, in je Home folder of in het hoofdpad (i.e. the root) van je harde schijf. 

  1. Kies een plaats om je website-projecten op te slaan. Crëeer hier een nieuwe map die je web-projecten (of iets gelijkaardigs) noemt. Hier zullen al je web-projecten leven. 
  2. In deze eerste map, maak je een nog een map waarin je je eerste website opslaat. Noem hem test-site (of kies een naam die meer tot je verbeelding spreekt).

Over hoofdletters en spaties 

Je zal merken dat we je doorheen dit hele artikel zullen vragen om de namen van je bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor:  

  1. Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat je een afbeelding op je website zet met dit pad:  test-site/MijnAfbeelding.jpg. In een ander bestand probeer je het beeld op te roepen met test-site/mijnafbeelding.jpg. Tja, dat zal misschien niet werken. 
  2. Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als je bijvoorbeeld spaties in je bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in je bestandsnamen door  "%20"  (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al je hyperlinks breken. Het is beter om woorden van elkaar te scheiden met underscores (i.e. zo,n streepje dat op de regel zelf ligt) of door koppeltekens:  my-file.html or my_file.html.

Daarom is het beter om er een gewoonte van te maken je bestands- en mappennamen met kleine letters en zonder spaties te schrijven, ten minste tot je weet wat je doet. Op die manier zul je minder problemen tegenkomen. 

Wat voor een structuur moet je website hebben ?

Nu gaan we de structuur van onze website bekijken.  De meest voorkomende zaken die we op een website tegenkomen, zijn een  index HTML-bestand en mappen met afbeeldingen, stijlbladen en script-bestanden erin.  Die gaan we nu maken:

  1. index.html: Dit betand zal standaar je home-pagina bevatten, d.w.z the tekst en de afbeeldingen die mensen zien als ze je naar je site surfen. Maak een nieuw bestand met je broncodeverwerker en noem het index.html . Sla het op in je  test-site map.
  2. Afbeeldingenmap: In deze map zullen alle afbeeldingen zitten die je op je website gebruikt. Creëer in je test-site map een map die afbeeldingen heet. 
  3. Stijlbladenmap: Deze map zal de CSS-code bevatten die je gebruikt om een stijl aan je inhoud te geven. (door bijvoorbeeld de kleur van je tekst en die de achtergrond te bepalen). In je test-site map maak je een map die stijlen heet.
  4. scriptsmap: Deze map zal al de JavaScript-code bevatten die wordt gebruikt om interactieve functionaliteit aan je site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in je test-site folder een map die scripts heet.

Opmerking: Op Windows computers kan je wat problemen tegenkomen als je de betandsnamen wil zien omdat Windows over een hinderlijke optie beschikt die  Verberg Bestandsnaamextensies heet en die standaard wordt aangezet. Meestal kan je die afzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op  OK klikken. Specifieke informatie die de correcte procedure voor jouw Windows versie behandelt, kan je met Yahoo! opzoeken. 

Bestandspaden

Om bestanden met elkaar te laten praten, moet je paden tussen hen maken  — een route zodat elk bestand weet waar de anderen zijn.  Om dit te demonstreren, zullen we een beetje HTML in ons index.html bestand steken zodat het de afbeeldingen toont die je in het vorige artikel ("Hoe gaat jouw website eruitzien?") hebt gekozen.

  1. Kopiëer de afbeelding die je reeds hebt gekozen in je afbeeldingenmap. 
  2. Open je index.html file, plaats de volgende code exact zoals die wordt getoond in het bestand. Maak je nu nog geen zorgen over wat het allemaal betekent   — we zullen deze structuren later in deze reeks in detail bekijken.
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>My test page</title>
      </head>
      <body>
        <img src="" alt="My test image">
      </body>
    </html> 
  3. The regel <img src="" alt="My test image"> is de HTML-code die een afbeelding in de pagina steekt. We moeten de HTML vertellen waar de afbeelding is.  He beeld zit in de afbeeldingenmap en die zit in dezelfde map als index.html. Om de bestandsstructuur af te dalen van index.html tot aan onze afbeelding. hebben we het volgende bestandspad nodig:  afbeeldingen/jouw-beeld-bestandsnaam. Onze afbeelding heet bijvoorbeeld firefox-icon.png, dus het bestandspad is afbeeldingen/firefox-icon.png.
  4. Schrijf het bestandspad in je HTML-code tussen de dubbele aanhalingstekens van de src="" code.
  5. Sla je HTML-bestand op en laad het dan in in je webbrowser (dubbelklik op het bestand). Je zou nu je niewe webpagina moeten zien met je afbeelding erin !

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

Enkele algemene regels voor bestandspaden:

  • Om een doelbestand te verbinden met het HTML-bestand dat alles activeert en in in dezelfde map zit, gebruik je gewoon de bestandsnaam, bijvoorbeeld mijn-afbeelding.jpg.
  • Om een verwijzing te maken naar een bestaand bestand dat in een lagere map steekt, schrijf je de naam van de map voor het pad met een schuine streep die naar voor leunt, bijvoorbeeld  submap/mijn-afbeelding.jpg.
  • Om een verbinding te maken met een doelbestand dat in een map boven het activerende HTML-bestand zit, schrijf je twee punten. Dus als index.html bijvooorbeeld in de lagere subfolder van test-site zit en mijn-afbeelding.png zat in test-site, zou je een verwijzing naar mijn-afbeelding.png kunnen maken op door  ../mijn-afbeelding.png te schrijven.
  • Je mag zo veel combinaties maken als je wil, bijvoorbeeld  ../subfolder/nog-een-subfolder/mijn-afbeelding.png.

Voorlopig is dat al wat je moet weten.

Opmerking: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld  C:\windows. Op zich is dat niet zo erg. Zelfs als je je website ontwikkelt met Windows, moet je in je code nog steeds schuine streepjes gebruiken die naar voor leunen.

Wat moet er nog worden gedaan? 

Voorlopig is dit ongeveer alles. Je bestandenstructuur moet er ongeveer zo uitzien:

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

Documentlabels en -medewerkers

 Aan deze pagina hebben bijgedragen: mientje
 Laatst bijgewerkt door: mientje,