Voor internetadressen wordt, in tegenstelling tot Windows, gebruikt gemaakt van zogenaamde forward slashes (/). Zo ook bij het maken van relatieve hyperlinks. Wanneer je dus van Windows gebruikt maakt, moet je bij het maken van relatieve adressen dus opletten dat je de slashes net andersom dan in de adresbalk van Windows Verkenner opschrijft. Websites maken net zoals het computersysteem gebruik van een mappensysteem. Voor een bestand wat dan een map dieper ligt is het maken van een verwijzing dus niet erg moeilijk:

<a href="mapnaam/bestandsnaam.html">Link</a>

Je kan zoveel mappen in elkaar maken als je wilt:

<a href="adres/met/heel/veel/mappen.html">Link</a>

Maar op de pagina's die met deze hyperlinks worden gelinkt is het handig als je ook weer terug kan linken. Deze links komen er dan zo uit te zien:

<a href="../index.html">Link</a>
<a href="../../../../index.html">Link</a>

Zoals je in deze voorbeelden kan zien betekenen twee puntjes gevolgd door een slash forward (../) dus dat je een map omhoog gaat. Mensen die wel eens met een commandoregel hebben gewerkt zal dit vertrouwd overkomen. Je kan ook alles combineren. Als je bijvoorbeeld van het eerste voorbeeld naar het tweede voorbeeld wil, krijg je dit:

<a href="../adres/met/heel/veel/mappen.html">Link</a>

Je moet dus eerst omhoog naar de eerste gemeenschappelijke map, en vanaf daar weer de mappenstructuur vervolgen. In dit voorbeeld is dat toevallig ook de map waar de homepage in staat, maar het kan ook anders zijn. Er is ook nog een trucje om veel gedoe met deze lange adressen te vermijden. Daarover zal binnenkort meer verschijnen op Webbish.

Bestandsnamen

Het maakt niet zo heel erg veel uit hoe je je bestanden noemt, maar er zijn wel een aantal tips:

• Wees consequent met de bestandsextensies bij een type bestand. Gebruik bijvoorbeeld altijd .html bij HTML-bestanden, en niet .htm en .html door elkaar heen.
• Gebruik geen spaties in mapnamen of bestandsnamen. In de adresbalk van je browser komt dit eruit te zien als %20, nog los van het feit dat sommige computers geen spaties in bestandsnamen kunnen verwerken. Een alternatief voor bestandsnamen is een underscore (_) of een koppelteken (-). In recente jaren heeft de laatste de voorkeur gekregen bij webontwikkelaars.
• Gebruik geen hoofdletters in mapnamen en bestandsnamen. Op computers met Windows, wat de meeste computergebruikers hebben, maakt het niet zo veel uit. Maar op Linux en Unix, de meest gebruikte besturingssystemen voor servers, maakt dit wel uit. Het zou vervelend zijn als bezoekers een foutmelding krijgen op de website terwijl het op je eigen computer perfect werkt.
• Gebruik geen vreemde tekens in bestandsnamen. Andere tekens dan cijfers, letters en streepjes gebruik je liever niet. Geen letters met accenten dus.

Soorten bestanden

Een website bestaat uit verschillende soorten bestanden. Niet al deze soorten bestanden hoeven aanwezig te zijn, maar voor de volledigheid zijn ze hier wel vermeld. We hebben het hier over de volgende soorten bestanden

• Webpagina’s. Wanneer deze in normale HTML zijn geschreven zijn de meest voorkomende bestandsextensies .htm en .html. Wees consequent met de extensie die je gebruikt, dit om veel ergernis te voorkomen. Mocht je voor (een deel) van de website een programmeertaal gebruiken, bijvoorbeeld PHP, overweeg dan toch om alle bestanden dezelfde bestandsextensie mee te geven. De pure HTML-pagina’s worden hierdoor wel iets trager geopend, maar je kan eenvoudiger uitbreiden en je voorkomt verwarring bij jezelf.
• Opmaakbestanden. Dit zijn bijna altijd bestanden met CSS-opmaakregels, en de bestandsextensie hiervan is .css
• (Java)scriptbestanden. Dit zijn bestanden met programmeercode die op de computer van de bezoeker wordt uitgevoerd, bijvoorbeeld voor grafische effecten. Bijna altijd is dit geschreven in Javascript, en de bestandsextensie hiervan is .js
• Afbeeldingen, zoals pictogrammen en foto’s. Er zijn voor afbeeldingen op websites drie afbeeldingen gangbaar: GIF, JP(E)G en PNG. De technologie van GIF-bestanden is verouderd, het advies is om alleen JPG en PNG-bestanden te gebruiken. JPG is ideaal voor foto’s, alle andere afbeeldingen zijn dus het beste een PNG-afbeelding. De bestandsextesies zijn .gif, .jpg en .png. Er zijn ook diverse andere formaten om afbeeldingen weer te geven, maar deze worden niet door alle browsers ondersteund of zijn gewoon niet praktisch. Het bekende Windows-afbeeldingstype BMP levert bijvoorbeeld gigantisch grote bestanden op zonder bijkomend voordeel. Niet gebruiken dus!
• Overige media, zoals video of flash. Voor Flashbestanden wordt meestal .swf als extensie gebruikt, voor video zijn verschillende soorten videobestanden in gebruik. De meest voorkomende zijn .wmv, .mov en .rm (Windows Media, Quicktime en Realplayer). De laatste jaren wordt het steeds gebruikelijker om video’s als Flash Video af te spelen, omdat hiervoor gebruik kan worden gemaakt van de algemene Flashplugin. Binnenkort verschijnt een artikel voor de beste mogelijkheden hiervoor.
• Downloads en bijlages. Soms kan je wat te downloaden aanbieden. Hiervoor worden meestal gecomprimeerde bestanden voor gebruikt (.zip). Voor documenten wordt het gebruik van PDF-bestanden aanbevolen, deze zijn beter geschikt voor weergave dan Office-bestanden zoals Word of Excel.

Indelen

Zoals gezegd staat het kiezen van bestandsnamen redelijk vrij, hier is maar een uitzondering op. Voor de hoofdpagina in een map (mochten er webpagina’s in een map staan) is het vrij gebruikelijk dat dit bestand index heet, dus bijvoorbeeld index.html of index.php. Bij Windows-servers wil het nog wel eens voorkomen dat het default is, dus default.aspx. Vraag hiernaar bij de persoon of bedrijf waar je de website online zet.

Over het algemeen hou je een mappenstructuur bij waar verschillende typen bestanden van elkaar gescheiden zijn. De mappen met daarin de opmaakbestanden, scripts en afbeeldingen kunnen allemaal een aparte map zijn in de hoofdmap van je website, of een submap in een andere map. Van beiden een voorbeeld:

/images/ -> afbeeldingen
/style/ -> opmaakbestanden
/scripts/ -> scripts
/media/ -> overige mediabestanden, wellicht nog verdeelt in submappen
/files/ -> downloads
/index.html

Een mogelijkheid is om submappen te gebruiken:

/files/images/
      /style/
      /script/
      /media/
      /downloads/
imdex.html

Als je wil voorkomen dat bezoekers een bestandenlijst zien als ze een adres van een map intypen, kan je een leeg HTML-bestand in de map zetten. Er zijn ook andere mogelijkheden, die later op deze site worden besproken.

De bovenstaande mappen opzet is een voorbeeld, je kan hier gerust van afwijken. Je zou bijvoorbeeld alle mediabestanden (afbeeldingen, video en flash) in een map te kunnen plaatsen, of om een map anders te noemen. Ik kies er bijvoorbeeld voor om downloads in een map files te plaatsen, zodat de naam downloads beschikbaar blijft voor een map met webpagina’s over de downloads.

Het nadeel van mappen is dat het maken van links naar andere bestanden iets ingewikkelder is dan alleen een bestandsnaam vermelden. Daarom komen we hier binnenkort in een speciaal artikel op terug.

Een laatste tip is: Schrijf je (beoogde) mappenstructuur eens uit op een papiertje, gewoon met een pen. Vaak zie je dan al direct of je iets vergeet of dat je juist te ver gaat met het gebruik van mappen.