Een webserver is een computer waar webpagina’s op gehost worden en kan benaderen via het internet.
Voor we beginnen met het bouwen van een website gaan we eerst een webserver installeren.
Er zijn vele webservers. De bekendste zijn Apache en Nginx. Wij gaan deze les werken met nginx.
Stap 1
Open de Terminal door op 
te klikken.
Stap 2
Typ onderstaande code in:
| sudo apt-get install nginx |
Druk op Y of J als daar om wordt gevraagd.
We gaan nu controleren of de webserver juist geïnstalleerd is.
Stap 3
Open de browser door op 
te klikken.
Stap 4
Type in de adresbalk: localhost en druk op Enter. Als het goed is zie je “Welcome to nginx on Debian!” staan. Je hebt nu een webserver draaien op je Raspberry Pi en kunt nu je eigen website hosten.
We gaan een webpagina maken met een teksteditor en opslaan op de juiste plaats zodat de webserver hem meteen vinden kan.
Stap 1: Leafpad
Typ in de terminal het volgende commando om de teksteditor met voldoende rechten te openen.
Stap 2: Pagina opslaan
We gaan nu een bestand aanmaken dat de webserver zal tonen:
Stap 3
Klik op File
Stap 4
Klik op Save As…
Stap 5
Klik links op File System
Stap 6
Open de map var
Stap 7
Open de map www
Stap 8
Open de map html
Stap 9
Geef je pagina de naam index.html en druk op Save
Elke website is opgebouwd in zogenaamde html code. Deze code verteld de browser hoe de pagina er uitziet, bijvoorbeeld welk letter type en welke kleur. Als je in je browser rechtsboven op het tandwieltje klikt en dan op Bron weergeven kan je de bron van elke webpagina weergeven. De bron van YouTube ziet er bijvoorbeeld erg complex uit maar het is allemaal opgebouwd met de zelfde html waarmee we nu gaan beginnen.
Typ de code over in Leafpad en sla deze op (File Save) Onderstaande html code is een complete webpagina.
Stap 10: Bekijken
Ga in je browser opnieuw naar http://localhost. Als het goed is krijg je nu “Hallo wereld” te zien.
Stap 11: Lesgenoot naar je webserver
Om je lesgenoot op je webserver te krijgen moeten hij/zij je IP-adres van jouw Raspberry invoeren in de adresbalk.
Om je IP adres te achterhalen ga je naar de terminal en typ:
Achter ‘inet’ verschijnt een IP-adres en zier er ongeveer zo uit 192.168.1.63 geeft dit adres door aan een lesgenoot.
Als deze dit adres invoert in zijn browsers http://192.168.1.63 zal jouw website vanaf jouw webserver verschijnen
We gaan nu de webpagina uitbreiden. We gaan een tekst en afbeelding invoegen en een Youtube filmpje insluiten.
Tekst
Een simpel stukje tekst kan je het beste in een p-element insluiten. De p staat voor paragraaf.
Stap 1
Na de 
tags gaan we het stukje tekst plaatsen. Begin met 
, typ je stukje tekst en sluit af met 
. Zie onderstaande voorbeeld of typ je eigen stukje tekst.
Stap 2
Sla het bestand op en typ in je browser http://localhost om het resultaat te bekijken.
Stap 3: Afbeelding opslaan
Je pagina word nog mooier met een afbeelding.
Stap 4
Zoek met Google een leuk plaatje.
Stap 5
Klik met de rechtermuisknop op het plaatje wat je wilt opslaan en kies Open Link. Het plaatje komt in het groot te voorschijn. Klik weer met de rechtermuisknop op het plaatje en kies Save Image As…
Stap 6
Klik links in het venster op Desktop.
Stap 7
Geef je plaatje een naam en klik op Save.
Stap 8
Voor we het plaatje invoegen moeten we hem eerst in de juiste map plaatsen.
Open de terminal en typ in:
| sudo mv /home/pi/(naam plaatje) /var/www/html |
Druk dan op Enter.
Stap 9: Afbeelding invoegen
Typ onder je stukje tekst de volgende regel: 
Stap 10: Bekijken
Sla je bestand weer op en bekijk het resultaat in je browser. http://localhost. Als je browser nog open staat druk je op de F5 knop voor een refresh.
Link invoegen
Nu gaan we een link toevoegen aan het document. Dit doen we met het 
element.
Stap 11
Typ: 
onder
Stap 12
Sla je document op en kijk weer op http://localhost voor de verandering.
Het linkje staat nu naast de afbeelding en dat ziet er niet zo mooi uit. Om het linkje onder de afbeelding te krijgen voegen we een 
tussen en
Je code ziet er dan zo uit als hier onder.
YouTube
Stap 13
Ga naar https://www.youtube.com en zoek een leuk filmpje uit. Bijvoorbeeld over Minecraft.
Stap 14
Druk onderaan het filmpje op Delen.
Stap 15
Druk op Insluiten.
Stap 16
Kopieer de tekst uit het tekst vak en plak deze in je teksteditor.
Stap 17: Bekijken
Sla weer op en bekijk het resultaat in je browser. http://localhost. Als je browser nog open staat druk je op de F5 knop voor een refresh.
Om onze website er mooier uit te laten zien kunnen we gebruik maken van CSS. In deze les maken we gebruik van een kan en klaar CSS bestand waardoor onze pagina er gelijk mooier uitziet.
de Bootstrap code
Stap 1
Ga naar: http://getbootstrap.com
Stap 2
Klik in het menu op Getting started
Stap 3
Kopieer de code onder 
Stap 4
Plak deze onder 
Welkom in de head
Stap 5
Zet een div element op de class container om je body code:
Stap 6: Bekijken
Sla je werk weer op en bekijk het resultaat in je browser. http://localhost. Als je browser nog open staat druk je op de F5 knop voor een refresh.
CyberPi is een project van Cybersoek
in samenwerking met XS4ALL en de Universiteit van Amsterdam
