Advertisement
  1. Web Design
  2. Kids
Webdesign

Web Design voor Kinderen: Een website maken

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Welcome to Tuts+ Town!
Web Design for Kids: HTML Structure

Dutch (Nederlands) translation by Sibrand Hoekstra (you can also view the original English article)

Welkom in de tweede les in onze serie Web Design voor Kinderen!

In deze les leren we van alles over de stappen die we moeten zetten vóórdat we kunnen beginnen met het schrijven van de code van onze Tuts+ Town website.  Onthoud: als je vragen hebt, kun je die stellen in het reactie-gedeelte onderaan deze pagina.

Aan de slag: eerst eens even kijken wat we gaan maken!

Schetsen

Net als met bijvoorbeeld huizen en gebouwen, is het een goed idee om eerst op papier te tekenen wat we in ons hoofd hebben voordat we beginnen met bouwen. Als je zomaar begint te metselen heb je straks een schuur in plaats van een mooie slaapkamer!  Het tekenen voorkomt dat we veel tijd verliezen tijdens het bouwen. 

Misschien heb je iets in gedachten wat er op papier toch niet zo fantastisch uit ziet. Misschien verschijnen er tijdens het tekenen ineens nieuwe problemen of vragen waar je nog niet aan gedacht had. Misschien is ons ontwerp wel veel te druk voor iemand anders om 'm te begrijpen. Dit soort problemen zul je snel tegenkomen als je begint met het schetsen.

Het is helemaal niet erg als onze schets niet zo mooi is in het begin. Dat is precies wat we willen! Dan kunnen we dat snel zien op papier voordat we veel tijd besteed hebben aan het programmeren.

Het schetsen van onze Tuts+ Town website

We hebben een website nodig voor de toeristen die naar Tuts+ Town komen. Op de website willen we ze laten zien wat voor leuks er in ons dorp te doen is: leuke winkels, een zwembad of misschien is er wel een pretpark in de buurt? We zetten al deze plekken op een logische manier bij elkaar, bijvoorbeeld: "hotels" in de ene groep, "restaurants" in een andere en het zwembad, de tennisbaan en de voetbalvelden in de categorie "sport". Voor al deze plekken maken we links naar hun website zodat de bezoekers erop kunnen klikken om er meer informatie over te bekijken.

We zetten er ook een paar plaatjes bij zodat het er nog leuker uit ziet.

Hier hebben we een schets die later gebruikt is om het echte ontwerp van de website te maken:

Dit is de website die we helemaal zelf gaan maken! Superleuk!

Tekst editors

Om HTML code (weet je nog? die supergeheime taal waar we het in de vorige les over hadden) te schrijven, hebben we een tekst editor nodig.

Je hebt misschien wel eens een brief op de computer geschreven of een verslag gemaakt. Die schrijf je vaak in een tekst verwerker zoals Microsoft Word, wat precies daarvoor gemaakt is. HTML kun je veel beter in een code editor schrijven. Een code editor helpt ons en maakt het schrijven van HTML veel makkelijker. Een code editor begrijpt wat we met deze code bedoelen, en geeft ook nog eens de verschillende onderdelen een kleurtje.

Er zijn een aantal goede (en gratis!) code editors die je kunt downloaden van het Internet. Als je niet goed weet hoe je iets moet downloaden, kun je het beste even een volwassene vragen om je daarbij te helpen.

Bluefish is een prima editor voor als je computer Windows heeft. Als je op een Mac van Apple werkt, is Atom een goede keuze. 

In de volgende les gaan we deze code verder bestuderen, maar hier kun je alvast een beetje zien hoe zulke code er uit ziet.

Allemaal bestanden

Zoals we al gezien hebben, is een website eigenlijk een verzameling bestanden. Deze bestanden moeten bij elkaar in één en dezelfde map zitten, zodat de browser er bij kan. 

De Tuts+ Town website heeft een HTML bestand (opeslagen met de .html extensie aan het eind), een CSS bestand (opgeslagen met .css extensie aan het eind), en vier afbeeldingen die we bij elkaar zetten in de map images. (Images is Engels voor plaatjes. Het is een goede gewoonte om je bestanden, de code, en de mapnamen in het Engels te zetten). De images -map zit in dezelfde hoofd map als waar de HTML en CSS bestanden staan.

Een bestandsextensie zijn de letters die na de punt in een bestandsnaam komen, zodat we kunnen zien wat voor bestand het is.

Zoals gezegd, de afbeeldingen (images in het Engels) slaan we op in de map "images" in onze website map, zoals hier:

In de afbeelding hierboven hebben we een plaatje met de naam town.svg (de .svg extensie betekend een bepaald soort afbeelding) die we in een map genaamd "images" hebben gezet. Je bestanden organiseren houdt de boel overzichtelijk:

Hoe je organiseert maakt voor de website zelf niet uit; beide manieren zijn goed maar wij doen het hier zoals het plaatje rechts.

Browsers

We bekijken ons werk in de browser, net zoals je nu deze Tuts+ pagina bekijkt

Er zijn verschillende browsers beschikbaar, die je allemaal gratis kunt downloaden als je er nog geen hebt, bijvoorbeeld Chrome (gemaakt door Google) of Firefox (gemaakt door Mozilla) Als je op een Mac computer (van Apple) werkt heb je de browser 'Safari' al geinstalleerd. Als je Windows gebruikt heb je vast Internet Explorer al. Da's makkelijk beginnen!

Nog niet op Internet

We bouwen de website eerst op onze eigen computer, en niet meteen op internet. Dat komt later. Als je les 1 nog kunt herinneren, weet je dat we besproken hebben dat een website niet bekeken kan worden als die niet op een server staat.

De afbeelding hier onder laat zien hoe een voltooide website er uit zou kunnen zien als je 'm 'lokaal' (op je eigen computer) bekijkt in een browser. In plaats van een web adres zoals www.tutsplus.com, zien we het lokale adres van de website, wat er een beetje anders uit ziet.

Goed werk!

In deze les hebben we gekeken naar een paar belangrijke dingen die we moeten weten zodat we klaar zijn voor het echte werk: het schrijven van de website code. We hebben gekeken naar het klaarmaken van de bestanden die we nodig hebben en de twee belangrijkste tools die we gebruiken: een editor (om de website code in te schrijven) en een browser (om de website mee te bekijken).

Nu begint het echt. In de volgende les gaan we de eerste stukken code schrijven voor onze website! We gaan weer wat spullen organiseen (alwéér organiseren!) en we gaan een stuk code in ons HTML bestand zetten. Nu kan het leuke werk écht beginnen!

We spreken elkaar snel bij de volgende les!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.