initial commit

1 files changed, 103 insertions, 0 deletions

diff --git a/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html b/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html
new file mode 100644
index 0000000000..66219f2149
--- /dev/null
+++ b/files/nl/learn/getting_started_with_the_web/bestanden_beheren/index.html
@@ -0,0 +1,103 @@
+---
+title: Omgaan met bestanden
+slug: Learn/Getting_started_with_the_web/Bestanden_beheren
+tags:
+  - Beginner
+  - Bestanden
+  - CodingScripting
+  - Gids
+  - HTML
+  - Theorie
+  - website
+translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+
+<div class="summary">
+<p>Een website bestaat uit vele bestanden: tekstinhoud, code, stijlbladen, media- inhoud enzovoort. Als u een website bouwt, is het nodig deze bestanden in een verstandige structuur onder te brengen op uw lokale computer. U moet ervoor zorgen dat ze met elkaar kunnen praten en uw volledige inhoud moet er goed uitzien, vooraleer u uw bestanden <a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">naar een server uploadt</a>. Omgaan met bestanden bespreekt een aantal problemen waar u zich bewust van zou moeten zijn, zodat u een verstandige mappenstructuur voor uw website kunt opzetten.</p>
+</div>
+
+<h2 id="Waar_moet_uw_website_op_uw_computer_leven">Waar moet uw website op uw computer leven?</h2>
+
+<p>Als u op uw lokale computer aan uw website werkt, moet u 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 u kunt hem het beste ergens plaatsen waar u hem gemakkelijk terugvindt; misschien op uw Bureaublad, in uw Home-map of in het hoofdpad (i.e. the root) van uw harde schijf. </p>
+
+<ol>
+ <li>Kies een plaats om uw website-projecten op te slaan. Crëeer hier een nieuwe map die u webprojecten (of iets gelijkaardigs) noemt. Hier zullen al uw webprojecten leven. </li>
+ <li>In deze eerste map, maakt u een nog een map waarin u uw eerste website opslaat. Noem hem testsite (of kies een naam die meer tot uw verbeelding spreekt).</li>
+</ol>
+
+<h2 id="Over_hoofdletters_en_spaties">Over hoofdletters en spaties </h2>
+
+<p>U zult merken dat we u in dit artikel zullen vragen om de namen van u bestanden en mappen volledig in kleine letters en zonder spaties te schrijven. Er zijn twee redenen voor:  </p>
+
+<ol>
+ <li>Vele computers, vooral webservers, zijn hoofdlettergevoelig. Stel dat u een afbeelding op uw website zet met dit pad:  <code>testsite/MijnAfbeelding.jpg.</code> In een ander bestand probeert u het beeld op te roepen met<code> testsite/mijnafbeelding.jpg</code>. Tja, dat zal misschien niet werken. </li>
+ <li>Browsers, webservers en andere programmeertalen gaan niet consistent om met spaties. Als u bijvoorbeeld spaties in uw bestandsnaam gebruikt, is het mogelijk dat sommige systemen deze bestandsnaam als twee bestandsnamen zullen behandelen. Sommige servers zullen de spaties in uw bestandsnamen door  "%20"  (de tekens die spaties in URIs voorstellen) vervangen en ze zullen al uw 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:  <code>my-file.html</code> of <code>my_file.html</code>.</li>
+</ol>
+
+<p>Daarom is het beter om er een gewoonte van te maken uw bestands- en mappennamen altijd met kleine letters en zonder spaties te schrijven, tenminste tot u weet wat u doet. Op die manier zult u minder problemen tegenkomen. </p>
+
+<h2 id="Wat_voor_een_structuur_moet_uw_website_hebben">Wat voor een structuur moet uw website hebben?</h2>
+
+<p>Nu gaan we de structuur van onze website bekijken. De meest voorkomende zaken die we op een website tegenkomen, zijn een <code>index.html</code>-bestand en mappen met afbeeldingen, stijlbladen en scriptbestanden erin.  Die gaan we nu maken:</p>
+
+<ol>
+ <li><code><strong>index.html</strong></code>: Dit betand zal standaard uw startpagina (homepage in het Engels) bevatten, d.w.z de tekst en de afbeeldingen die mensen zien als ze naar uw site surfen. Maak een nieuw bestand met uw broncodeverwerker en noem het <code>index.html</code> . Sla het op in uw <code>test-site</code>-map.</li>
+ <li><strong><code>Afbeeldingenmap</code></strong>: In deze map zullen alle afbeeldingen zitten die u op uw website gebruikt. Creëer in uw testsite-map een map die afbeeldingen heet. </li>
+ <li><font face="consolas, Liberation Mono, courier, monospace"><strong>Stijlbladenmap</strong></font>: Deze map zal de CSS-code bevatten die u gebruikt om een stijl aan uw inhoud te geven. (door bijvoorbeeld de kleur van uw tekst en die van de achtergrond te bepalen). In uw testsite-map maakt u een map die stijlen heet.</li>
+ <li><strong><code>Scriptsmap</code></strong>: Deze map zal alle JavaScriptcode bevatten die wordt gebruikt om interactieve functionaliteit aan uw site toe te voegen (bijvoorbeeld knoppen die data inladen als erop wordt geklikt). Creëer in uw testsite-map een map die scripts heet.</li>
+</ol>
+
+<div class="note">
+<p><strong>Opmerking</strong>: Op Windows computers kunt u wat problemen tegenkomen als u de betandsnamen wilt zien, omdat Windows over een hinderlijke optie beschikt die <strong>Verberg Bestandsnaamextensies</strong> heet en die standaard wordt aangezet. Meestal kunt u die uitzetten door naar Windows Verkenner te gaan, het vinkje uit het keuzevak te verwijderen en dan op <strong>OK </strong>klikken. Specifieke informatie die de correcte procedure voor uw Windowsversie behandelt, kunt u met Yahoo! opzoeken. </p>
+</div>
+
+<h2 id="Bestandspaden">Bestandspaden</h2>
+
+<p>Om bestanden met elkaar te laten praten, moet u 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 <code>index.html</code> bestand plaatsen, zodat het de afbeeldingen toont die u in het vorige artikel (<a href="/en-US/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"Hoe gaat uw website eruitzien?"</a>) hebt gekozen.</p>
+
+<ol>
+ <li>Kopiëer de afbeelding die u reeds hebt gekozen in uw afbeeldingenmap. </li>
+ <li>Open uw <code>index.html</code>-bestand en plaats de volgende code exact zoals die wordt getoond in het bestand. Maakt u zich nu nog geen zorgen over wat het allemaal betekent   — we zullen deze structuren later in deze reeks in detail bekijken.
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;meta charset="utf-8"&gt;
+    &lt;title&gt;Mijn testpagina&lt;/title&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;img src="" alt="Mijn testafbeelding"&gt;
+  &lt;/body&gt;
+&lt;/html&gt; </pre>
+ </li>
+ <li>The regel <code>&lt;img src="" alt="Mijn testafbeelding"&gt;</code> is de HTML-code waarmee een afbeelding in de webpagina wordt ingevoegd. We moeten de HTML vertellen waar de afbeelding is. Het beeld zit in de afbeeldingenmap en die zit in dezelfde map als <code>index.html</code>. Om  in de bestandsstructuur van <code>index.html</code> tot aan onze afbeelding af te dalen, hebben we het volgende bestandspad nodig:  <code>afbeeldingen/jouw-beeld-bestandsnaam</code>. Onze afbeelding heet bijvoorbeeld <code>firefox-icon.png</code>, dus het bestandspad is <code>afbeeldingen/firefox-icon.png</code>.</li>
+ <li>Schrijf het bestandspad in uw HTML-code tussen de dubbele aanhalingstekens van de <code>src=""</code> code.</li>
+ <li>Sla uw HTML-bestand op en laadt het dan in in uw webbrowser (dubbelklik op het bestand). U zou nu uw niewe webpagina moeten zien met uw afbeelding erin!</li>
+</ol>
+
+<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+
+<p>Enkele algemene regels voor bestandspaden:</p>
+
+<ul>
+ <li>Om een doelbestand te verbinden met het HTML-bestand dat alles activeert en in in dezelfde map zit, gebruikt u gewoon de bestandsnaam, bijvoorbeeld <code>mijn-afbeelding.jpg</code>.</li>
+ <li>Om een verwijzing te maken naar een bestaand bestand dat in een lagere map steekt, schrijft u de naam van de lagere map voor het pad met een schuine streep die naar voor leunt, bijvoorbeeld  submap<code>/mijn-afbeelding.jpg</code>.</li>
+ <li>Om een verbinding te maken met een doelbestand dat in een map <strong>boven</strong> het activerende HTML-bestand zit, schrijft u twee punten. Dus als index.html bijvooorbeeld in de lagere subfolder van testsite zit en mijn-afbeelding.png zit in testsite, zou u een verwijzing naar mijn-afbeelding.png kunnen maken door  <code>../mijn-afbeelding.png te schrijven</code>.</li>
+ <li>U mag zo veel combinaties maken als u wilt, bijvoorbeeld  <code>../subfolder/nog-een-subfolder/mijn-afbeelding.png</code>.</li>
+</ul>
+
+<p>Voorlopig is dat alles wat u moet weten.</p>
+
+<div class="note">
+<p><strong>Opmerking</strong>: Het Windows bestandensysteem gebruikt vaak schuine streepjes die naar achter leunen in plaats van naar voor. Bijvoorbeeld  <code>C:\windows</code>. Op zich is dat niet zo erg. Zelfs als u uw website ontwikkelt met Windows, moet u in uw code nog steeds schuine streepjes gebruiken die naar voor leunen.</p>
+</div>
+
+<h2 id="Wat_moet_er_nog_worden_gedaan">Wat moet er nog worden gedaan? </h2>
+
+<p>Voorlopig is dit ongeveer alles. Uw bestandenstructuur moet er ongeveer zo uitzien:</p>
+
+<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+
+<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>