23 september 2017
Webdesign & <? php /* CSS
Studies
 
 
 
 
 
 
Hoe maak je een website ? 2. De Layout van een website 7 juli 2009

Welkom bij deel 2 van deze cursus hoe je een website moet maken. In deel 1 hebben we de echte basisprincipes uitgelegd zoals webruimte, websiteadres, werken met een WYSIWYG-Editor, werken met FTP en je eerste pagina maken. In dit deel gaan we verder waar we gebleven waren en krijg je alle kennis aangereikt om nu ook echt je eerste volledige website te gaan maken.

Hoofdstuk 1: Keuze van de juiste Editor, Hyperlinks en je site Offline bekijken

Keuze van de juiste Editor

In deel 1 van deze cursus koos ik voor NVU als editor om het een en andere mee duidelijk te maken over hoe je een website kan maken. Bij de Aanbevolen Websites heb ik nog veel meer WYSIWYG-Editors besproken en je moet zelf kiezen welke editor je uiteindelijk gaat gebruiken. Dit hangt vooral af van welke je het prettigst vindt werken. Soms kan 1 dingetje wat je niet zint aan een Editor je doen beslissen om over te stappen op een andere. Zelf heb ik jarenlang met Frontpage Express gewerkt en misschien ken je zelf nog wel een andere gratis editor. Wel heb ik er meer getest dan er op die lijst staan en deze kwamen als beste uit de bus. 
De interface van een WYSIWYG-Editor is voor veel dingen hetzelfde zoals kleuren kiezen, tekst vet maken, het maken van een tabel enz. Wat wel verschilt per editor is hoe die opmaak vastgelegd wordt in de broncode. Dit kan zijn in HTML of in HTML en CSS en dan nog kunnen daar verschillen inzitten. In het begin hoef je je daar nog niet druk om te maken als je gewoon eerst de basisprincipes van een website maken wilt leren, maar als je je echt gaat richten op het leren van HTML en daarbijbehorend ook CSS dan wordt het verschil tussen de editors ineens wel groter.

Hyperlinks: klikken door je website

Een website bestaat uit meerdere individuele pagina's die onderling met elkaar verbonden zijn. Je kent het wel. Je bevind je op een website en als je met je muis over een bepaald (vaak onderstreept) woord of een afbeelding gaat veranderd je cursor op bepaalde plaatsen ineens in een handje en kun je klikken op die plek. Je komt dan op een andere pagina op die website terecht. Zo'n plek heet een link of hyperlink. In het Nederlands bijvoorbeeld in de NVU editor wordt zo'n link een koppeling genoemd. Het symbool wat in een WYSIWYG-Editor gebruikt wordt om een link te maken naar een andere pagina is bijna altijd aangeduid met het symbooltje van een ketting of een wereldbol met een ketting.

In deel 1 van deze cursus heb je geleerd om je eerste pagina te maken en die heb je index genoemd. Dit is de pagina waar de bezoeker binnenkomt op je website. Volg nu dezelfde stappen en maak een nieuwe pagina en sla die op als pagina2. Schrijf bovenin "Dit is Pagina 2" en geef die een bepaald lettertype en grootte.
Open nu je index pagina in de door jouw gekozen editor en tik onder Welkom op mijn website de zin "Link naar Pagina 2". Je gaat nu een hyperlink maken van je index pagina naar je tweede pagina. Dit doe je door de tekst "Link naar Pagina 2 te selecteren en vervolgens op het symbooltje van de hyperlink maken te klikken. Een aantal dingen komen in zo'n hyperlink venster (meestal) altijd terug:

  1. De naam van de pagina, in dit geval pagina2.html
  2. Doel of in het Engels Target: standaard vul je daar niks in. Als je wilt dat de link opent in een nieuw venster of tablad dan kies je daar voor Nieuw venster/New Window of _blank afhankelijk van je Editor en taal. Dit laatste doe je meestal bij links naar andere websites zodat jouw website ook in een venster geopend blijft.
  3. 3. Titel/Title: Geef daar een korte beschrijving van de link op. Deze beschrijving is zichtbaar als mensen met hun muis cursor over de link heengaan in een klein tekst wolkje.

Vaak kun je bladeren op je computer naar het bestand waar je naar wilt linken ! Als je wilt linken naar een bestand wat zich een map hoger bevindt dan ga je met ../ uit je huidige map en daarachter komt dan de naam van het bestand dus ../anderbestand.html. Of..als je linkt naar een bestand in een andere map wordt het pad ../andermap/anderbestand.html. Misschien begrijp je nu nog niet helemaal wat ik hiermee bedoel maar het zal vanzelf dan nog wel duidelijk worden.

Uiteindelijk klik je op Ok en je link naar pagina 2 is gemaakt.


Schermafbeelding van een link maken in NVU/KompoZer


Schermafbeelding van een link maken in Trellian WebPage Editor

Je ziet nu dat de tekst van de link blauw is geworden en ondersreept. Omdat je pagina nu nog geopend is in de editor kun je er nog niet op klikken. Je kunt hem geopend laten in je editor maar je moet wel even op het opslaan symbooltje klikken (Diskette symbooltje). In de meeste WYSIWYG-Editors kun je bij pagina-eigenschappen instellen welke kleur je wilt dat je links worden. Dus ipv blauw kan dit bv ook wit zijn of geel als je bv een zwarte of donkerblauwe achtergrond hebt.

Je website offline bouwen

De term offline en online komt een beetje voort uit het tijdperk dat we nog met een modempje moesten inbellen op het internet, even een paar pagina's bekeken en dan snel weer de verbinding verbraken zodat de telefoonkosten niet te hoog opliepen. De bezochte pagina's/websites bleven dan in het geheugen van de computer zitten en je kon er dan offline doorheen bladeren.
In deel 1 legde ik uit hoe je via een FTP programma je site op het internet zet zodat iedereen hem kan bekijken, maar nu komt het leuke: als je site nog in ontwikkeling is kun je hem ook gewoon bekijken op je pc zonder dat hij op het internet staat. Dit doe je simpel door naar je map te gaan waar je je webpagina's in opslaat (Mijn Websites) en op index.html te klikken. De index pagina opent dan in je favoriete browser en je kunt gewoon op je hyperlink klikken naar pagina 2:

Op deze zelfde manier maak je de andere pagina's van je website en kun je ze onderling met elkaar gaan linken.

Hoofdstuk 2: Het maken van een plan voor je website

Voordat je je website opzet kun je het beste een plan maken. Zet daarbij de volgende dingen voor jezelf op een rij. Je kunt dit het beste op papier doen en uittekenen met bijvoorbeeld een boomstructuur.

Waar moet je website precies over gaan ?

Natuurlijk moet je weten waar je website over moet gaan. Wordt het een familie site met foto's, een site voor een vereniging, een schoolproject, een hobby, een bedrijfje, een winkel of een bepaald specifiek onderwerp.

Welke informatie wil je er allemaal op hebben ?

Als je het onderwerp weet kun je gaan nadenken over sub-onderwerpen dus over hoofd en sub-categorieen en misschien nog weer onderwerpen die daaruit voortkomen. Dit bepaalt later logischerwijs de menustructuur van je website.

Wie is je doelgroep ?

Je doelgroep bepaalde een hoop dingen voor je website, niet alleen het uiterlijk, maar ook je manier van schrijven. Maak je je site voor familie, je vrienden, een specifieke doelgroep of gewoon iedereen. Je zou zeggen wat heeft dat verder voor invloed op het maken van je site. Wel, wat dacht je van het soort taalgebruik dat je gaat gebruiken !

  • Ga je bijvoorbeeld u of je zeggen.
  • Ga je wel of niet in de ik-vorm praten of praat je in z'n algemeenheid.
  • Vermeldt je je naam erbij onderaan of niet.
  • Houdt je het "zakelijk"of geef je je eigen mening.

Het is goed om dit van tevoren te weten want het creeert toch een soort bewustzijn tijdens het schrijven.

Ook is het weten van je doelgroep belangrijk als je site redelijk vorm gekregen heeft en je bekendheid aan je site wilt gaan geven. De zoekmachines komen vanzelf langs om je site in hun database op te nemen, maar je wilt je website adres misschien ook persoonlijk aan je doelgroep geven via een kaartje, een mailtje of een advertentie in een blaadje of krant en natuurlijk op andere sites die over hetzelfde onderwerp gaan. Die kun je vragen een link naar je site te plaatsen.

Wil je je website ook in het Engels of alleen in het Nederlands ?

Als je je site bijvoorbeeld ook in het Engels wilt moet je daar bij het ontwerp al rekening mee houden want er moet een onderverdeling worden gemaakt en bij binnenkomst moet er gekozen kunnen worden in welke taal men je site wilt zien.

Wil je een Forum, Gastenboek of Teller op je site ?

Er zijn diverse derde partijen beschikbaar op het internet die een gratis Forum, Gastenboek of Teller aanbieden voor op je website. Via een stukje code krijg je de teller in je site en naar het Forum of Gastenboek moet je een link plaatsen vanaf je site. Vaak kun je via een interface waarop je moet inloggen het uiterlijk aanpassen van je Forum of Gastenboek zodat het het meest lijkt op je eigen website.

Moet je website wel of niet wachtwoordbeveiligd zijn ?

Het is zelfs mogelijk een deel van je site wachtwoord te beveiligen. Zonder gebruik van PHP of JavaScript ben je toch weer afhankelijk van zo'n hierboven genoemde derde partij. Dit is, behalve als je site op een eigen domein draait, dus www.naam.nl bijvoorbeeld, omdat je bij die providers vaak kan opgeven dat je een bepaakde map/directory met een wachtwoord wilt beveiligen.

Maak je de site zelf of gebruik je een CMS ?

Wil je je site zelf maken met een WYSIWYG-Editor en door zelf HTML code te schrijen of wil je een CMS gebruiken. Een CMS = Content Management System / Website Beheer Systeem is een systeem wat je installeert op je webruimte en gebruik maakt van een database waarin de tekst wordt opgeslagen. Je logt in op een beheerdersgedeelte en je kunt gelijk aan de slag met het schrijven van tekst. Voor de layout, het uiterlijk van je site zijn meestal diverse skins of templates beschikbaar. Zo'n skin kun je wel zelf nog aanpassen qua uiterlijk, maar daar heb je dan wel kennis van HTML en CSS voor nodig. Een vereiste voor een CMS is dat je een provider nodig hebt die PHP aanbied met een MySql database.
Natuurlijk is het leuker om eerst zelf is aan de slag te gaan met een WYSIWYG-Editor zoals besproken in deel 1 van deze serie. Op die manier leer je spelenderwijs hoe je een website op moet bouwen, kleuren maakt, plaatjes invoegt enz. Ook leer je dan spelenderwijs HTML door af en toe is naar de broncode te kijken. De echte die-hards kunnen gelijk met HTML aan de slag gaan, maar dat is natuurlijk wel het moelijkst.

Hoofdstuk 3: De Layout van een website

Onder de layout van een website kun je 4 dingen verstaan:

Bestands Layout - De onderlinge pagina structuur

Een website is altijd opgebouwd uit meerdere pagina's die onderling met elkaar verbonden zijn en in verhouding tot elkaar staan. Een website groeit, niet alleen qua inhoud maar ook qua bestanden naarmate je op pad bent. Zoals eerder gezegd is de index pagina altijd de pagina waar mensen binnenkomen op je website. Je werkt niet alleen met pagina's, maar ook met mappen. Stel dat we het voorbeeld nemen van een volkstuin website en je wilt gaan schrijven over diverse soorten groente en over diverse soorten fruit dan kan je website er ongeveer zo uit gaan zien:

De mappen bepalen namelijk mede het adres van je website. Laat ik dit verduidelijken met een voorbeeld. We nemen even een fictief adres bijvoorbeeld http://mijntuin.deds.nl. Als je bovenstaande mappen en bestanden met je FTP kopieert naar je webruimte van je provider dan wordt het adres om bij je pagina over de groente te komen http://mijntuin.deds.nl/groente
In de map groente maak je weer een bestandje wat heet index.html. Vervolgens maak je op je hoofdindex bestand een link naar groente en op het internet wordt het dan automatisch http://mijntuin.deds.nl/groente en als men daar dan op klikt komt men op de hoofdpagina van de groente uit. Je hoeft dus niet te linken naar groente/index.html want je browser kijkt altijd of er een index bestandje in een map staat en laat dat altijd zien dan. Vervolgens ga op de groente indexpagina weer links maken naar apparte pagina's over diverse groente bijvoorbeeld sla.html, andijvie.html, kool.html enz. Die bestanden moet je dan natuurlijk ook echt gaan maken en opslaan in de groente map.
Je kan ook zonder mappen werken dus bijvoorbeeld index.html, contact.html, groente.html, fruit.html, sla.html, kool.html en die allemaal in het hoofddirectory opslaan. Bij een paar bestanden is dit nog wel te overzien maar geloof me als het er meer worden wordt dit een grote onoverzichtelijke brei en zie je door de bomen het bos niet meer. Dit is dus absoluut niet aan te raden ! De gouden tip is altijd: houd het overzichtelijk en duidelijk voor jezelf. Dat creeert automatisch ook een duidelijke website voor de bezoeker !

In de map images sla je standaard al je afbeeldingen op die je voor je website gaat gebruiken. Die doe je dus niet tussen je HTML bestanden want ook dan wordt het weer een rommeltje. De map mag ook een compleet andere naam hebben maar images is de meest gebruikelijke naam. Ga je later nog JavaScript op je website gebruiken maak dan een apparte map genaamd scripts en ga je CSS gebruiken dan maak je een mapje genaamd css. En ook dat mogen andere namen zijn.
Nog 1 belangrijke opmerking, gebruik nooit hoofdletters, dus niet Index.html. Hetzelfde geldt voor mappen. Doe je dit wel dan gaat dit onherroepelijk voor fouten zorgen op je website. Ook staat het gebruik van hoofdletters in een websiteadres zeer slordig. Je ziet wel is van die reclames op tv met www.NogwatNOGWAT.nl. Absoluut overbodig en toch vraag ik me af of er dan mensen zijn die dat adres echt letterlijk over gaan typen met hoofdletters en al.

Visuele Layout- De site in de browser - indeling

Een website zoals die op het scherm wordt weergegeven van de bezoeker en natuurlijk van jezelf in je browser is qua uiterlijk meestal opgebouwd uit:

  • Een kop: met een eventuele navigatiebalk en soms ook met een dropdown menu.
  • Een middengebied, vaak met een menu aan de linkerkant of rechterkant en een gebied daarnaast waar de uiteindelijke tekst wordt weergegeven.
  • De onderkant waarin bijvoorbeeld het aantal bezoekers op de site wordt weergegeven of contact informatie, copyright verklaring e.d.

Natuurlijk is dit geen verplichte indeling. Het mag ook totaal anders en je bent daar ook helemaal vrij in. Wees creatief ! Het mag simpeler, het mag ingewikkelder, maar zorg wel altijd dat het voor de bezoeker duidelijk is waar je site over gaat en waar precies geklikt kan worden op je site. Zet ook geen reclame op je site en doe zeker niet wat je op veel grotere sites ziet dat het eerste wat je ziet allerlei reclame voor van alles is want ik klik dan gelijk weer verder en laat die site voor wat het is. Zorg dat je site toegankelijk is !

Grafische Layout- De site in de browser - uiterlijk

Natuurlijk moet je er ook over na gaan denken hoe je site er qua uiterlijk uit moet gaan zien dus welk lettertype, welke lettergrootte, welke kleuren voor je tekst en voor de achtergrond van je site, welke afbeeldigen enz. 1 belangrijke tip is: laat je inspireren door het onderwerp.
Neem nu het voorbeeld weer van de volkstuinwebsite. Waar denk je aan bij een volkstuin en bij groente ? Aan de kleur groen natuurlijk ! Gebruik vervolgens verschillende kleuren groen om tot een mooi design te komen. Het werkt op dezelfde manier met andere onderwerpen. Laat je inspireren. Wat ook kan is dat je de site moet maken voor iets wat al bestaat. Dus stel dat je de site moet maken voor een bepaald bedrijf dan heeft dat bedrijf vaak al een eigen huisstijl met bijbehorende logo's en kleuren. Het is dan niet meer dan logisch dat de website er net zo uit gaat zien zodat bezoekers het bedrijf herkennen aan de website. Denk bijvoorbeeld aan de website van de NS of de website van een bakkerij.

Verder nog een aantal belangrijke tips:

  • Zorg voor interessante duidelijke kopjes boven je tekst en duidelijke tekst voor je links. Als een bezoeker je website binnenkomt zal hij in de eerste seconde beslissen of hij blijft of weer verder gaat.
  • Zorg dat niet alleen je voorpagina er goed uitziet maar al je pagina's. Veel bezoekers komen binnen op je website via een zoekmachine. Ze hoeven dus niet persee binnen te komen op je voorpagina, je index pagina, maar kunnen op iedere willekeurige pagina binnenkomen afhankelijk van hun zoekopdracht. Zorg dus dat iedere pagina er goed uitzien en niet alleen je voorpagina.
  • Zorg dat de kleuren van je tekst of van een link in het juiste contrast staan met de achtergrondkleur. Dus zorg dat alles leesbaar is.
  • Lees alles altijd na en nog een keer zodat er geen spellingsfouten in je pagina's zitten. Laat alles desnoods ook nog door iemand anders nalezen.
  • Zorg dat links naar andere websites openen in een nieuw venster zodat jouw website ook in een venster geopend blijft.
  • Plaats nooit e-mail adressen op je site. Deze kunnen misbruikt worden. Beter is het om gebruik te maken van een contact formulier.
  • Zorg voor een duidelijke metatag titel en metatag beschrijving. Dit helpt niet alleen om een bepaalde positie te krijgen in een zoekmachine maar dit is (vaak ook) de tekst die door de zoekmachine gebruikt wordt om je pagina mee weer te geven in de zoekresultaten.
  • Schrijf uit jezelf en in je eigen woorden. Kopieer geen tekst van andere websites of uit boeken. Dit is in principe nooit toegestaan tenzij de auteur het erbij vermeld heeft dat het overgenomen mag worden of tenzij je nadrukkelijk toestemming voor overname hebt gekregen. Wat wel altijd mag is citeren. Daar heb je geen toestemming voor nodig.

Technische Layout - De broncode van je pagina's

Onder de technische layout verstaan we de opmaak code waarin je webpagina's geschreven zijn. Standaard is dit de taal HTML. Hoe je echter die HTML schrijft en welke HTML je gebruikt en of je daarbij ook CSS gebruikt en hoe je die gebruikt (inline of via een extern styleblad kun je in principe de technische layout noemen van je pagina's. Het voert te ver om daar nu over door te schrijven dus dat komt in een volgend deel. In het volgende hoofdstuk zal ik wel nog meer uitleggen over HTML.

Hoofdstuk 4: Meer over HTML

Editor gebruiken of zelf leren ?

Webpagina's worden geschreven in de taal HTML vaak in samenwerking met CSS en JavaScript. Dit alles bij elkaar wordt de broncode genoemd. HTML is geen echte programmeertaal maar een opmaaktaal. Je vertelt ermee aan de browser hoe en waar je tekst op het scherm weergegeven moet worden. Een programmeertaal is veel ingewikkelder.

Je kunt een webpagina dus maken met een WYSIWYG-Editor maar je kunt ook zelf aan de slag gaan in bijvoorbeeld kladblok en rechtstreeks HTML gaan schrijven. Wat de Editor dus normaalgesproken voor je doet ga je dan zelf doen. Dit vereist wel een speciale gave want je ziet dan code voor je neus maar moet in gedachte voor je kunnen zien hoe die code vertaald eruit zal zien op het scherm in de browser. Dat is iets wat je niet van de een op de andere dag kan leren maar het is zeker wel te doen en ook aan te raden als je serieus bezig wilt gaan met webdesign. Ervaren websitebouwers kunnen moeiteloos en foutloos HTML schrijven. In de meeste WYSIWYG-Editors kun je ook schakelijk tussen de visuele layout en de broncode. Je kunt ook op die manier HTML leren door dus heen en weer te schakelen daartussen en te kijken wat er gebeurt in de broncode als je iets geschreven of opgemaakt hebt aan de visuele kant.
Een gulden middenweg is het gebruik van een HTML-Editor waarmee je op een enigzins speelse manier HTML kunt leren. Zelf heb ik hier nooit gebruik van gemaakt omdat je dan net zo goed de code zelf kunt schrijven. Daar leer je toch het meest van. Heb je hier toch belangstelling voor dan vind je bij de Aanbevolen Websites nog een lijst met gratis HTML-Editors.

Minimale HTML

Een webpagina bestaat altijd minimaal uit de volgende HTML code:

Het maakt niet uit hoeveeel ruimte of spaties je tussen de code gebruikt alhoewel een vrije ruimte wel meer kilobytes inhoud. Dus het bestand wordt er wel groter van. Toch is het wel verstandig je code voor jezelf leesbaar te houden. Een webpagina bestaat altijd uit een head gedeelte waarin je je titel en andere metatags (= informatie voor zoekmachines) plaatst. Ook kun je in je head gedeelte CSS of JavaScript invoegen die voor de rest van je pagina gebruikt wordt. Tussen de body tags komt altijd de daadwerkelijke inhoud van je pagina dus wat zichtbaar wordt op het scherm, ook weer omsloten door HTML tags voor de opmaak.

Er zijn enkelvoudige HTML tags zoals:

<br> = nieuwe regel
<hr> = horizontale lijn

En meervoudige HTML tags waar dus altijd andere HTML of tekst tussen staat zoals:

<html> </html> = openings en sluitingstags voor je gehele HTML code
<body> </body> = het body gedeelte van je site dus de zichtbare inhoud
<p>tekst</p> = nieuwe alinea
etc

In XHTML hebben ook enkelvoudige HTML tags een sluitingstag dus <br> wordt <br /> en <hr> wordt <hr />.

Opslaan als HTML pagina

Nu je je eerste opzet hebt van een webpagina in kladblok moet je het nog gaan opslaan als html pagina. Dit kan op 2 manieren. Of je slaat het gelijk op als html pagina dmv bestand > opslaan als en dan zelf .html erachter te typen of je slaat het eerst op als normaal txt bestand en veranderd dan daarna de extentie .txt in .html .
Er zijn diverse goede HTML-Handleidingen beschikbaar op het internet waar je gretig gebruik van kan maken als je verder aan de slag wilt met het leren van HTML.

Broncode van pagina's bekijken

Wat ook leuk is om te weten is dat je ook de broncode van andere webpagina's kan bekijken vanuit je browser door op een willekeurige plek op een website (behalve op een link of afbeelding) met je rechtermuisknop te klikken en in het dropdownmenu wat dan komt te kiezen voor bron weergeven/Paginabron bekijken of in het Engels View Source.

Pagina vernieuwen

Je kunt nu echt beginnen met het bouwen van je website. Of in een WYSIWYG-Editor of in HTML. Dat is geheel aan jouw en wat je het makkelijkst vindt voor dit moment. Toch nog even iets heel belangrijks. Telkens als je een wijziging maakt in een webpagina en je upload dit bestand opnieuw naar je provider met FTP kun je het oude bestand daar gewoon vervangen met het nieuwe bestand. Als je daarna naar je website gaat in je browser is de nieuwe versie van de pagina niet direct zichtbaar. Je moet eerst op Vernieuwen klikken. Dit kan ook via de rechtmuisknop (zie menuafbeelding hierboven) of ook via het menu bovenaan in je browser via een symbooltje wat lijkt op een pijltje wat in de ronte gaat. De pagina wordt dan herladen en de nieuwe pagina wordt getoond.

Tot slot

De creativiteit van de webdesigner bepaald uiteindelijk hoe mooi of hoe lelijk, hoe strak of hoe slordig die website er uiteindelijk uit gaat zien. Natuurlijk niet alleen dat want een mooie site zonder inhoud is ook niks. Soms zit de kracht in eenvoud. Soms heeft de webdesigner allerlei grapfische of webdesign programma's tot zijn beschikking waarmee het geheel "opgepimpt" wordt met mooie ronde randen en dergelijke. Tja, als je dat niet hebt zul je wat meer de nadruk moeten leggen op de verschillende kleurencombinaties die je gebruikt op een site. Nog 1 ding. Webdesing kan soms wel de nodige frustraties met zich meebrengen als iets niet lukt zoals je het wilt. Laat je niet uit het veld slaan want je kan altijd om hulp vragen.

Veel suxes met het maken van je website. Via de Aanbevolen Websites vind je nog allerlei bruikbare informatie en als je dan nog vragen hebt kun je die altijd in het Forum stellen. Nog even en je mag jezelf webmaster noemen en kun je tegen vrienden, kenissen en familie vertellen dat je ook een eigen website hebt ! Maak er wat moois van en plaats gerust je site in het Forum zodat ik en anderen even een kijken kunnen komen nemen.

Vriendelijke Groet,

A. L. / Webdesign, PHP en HTML

Deel 1 | Deel 3 | Deel 5