Websites lijken misschien ingewikkeld, maar eigenlijk bestaan ze uit simpele codes. Met een paar regels tekst kun je al een eigen webpagina maken. Ze maken in een gratis online omgeving hun eigen mini-webpagina over hun BSO, hun hobby’s of iets wat zij leuk vinden.
In deze activiteit ontdekken kinderen hoe media op internet wordt gemaakt. Websites bestaan uit verschillende soorten code die samen bepalen wat je ziet op een pagina.
De kinderen maken een eenvoudige webpagina in een gratis online programmeeromgeving JSFiddle. Ze leren hoe drie onderdelen samenwerken: HTML, CSS en JavaScript.
Zorg dat er computers of tablets beschikbaar zijn met internet. Open vooraf JSFiddle (https://jsfiddle.net) zodat kinderen meteen kunnen beginnen. Zorg ook dat er pen en papier is, dat kinderen kunnen meeschrijven om dingen te onthouden.
Begin met de kinderen in een kring. Vraag hoeveel websites ze op een dag bekijken. Denk aan filmpjes, spelletjes of informatie op internet. Leg uit dat websites eigenlijk bestaan uit code. Met code vertel je de computer hoe een pagina eruit moet zien en wat er moet gebeuren. Vandaag gaan de kinderen zelf een kleine website maken.
Stap 1: Kennismaken met HTML
Vertel dat HTML de basis van een website is. Met HTML zet je dingen op de pagina, zoals titels, tekst of knoppen. Je kunt het vergelijken met bouwstenen van een huis. HTML bepaalt wat er op de pagina staat.
Laat een eenvoudig voorbeeld zien:
<h1>Welkom op mijn pagina</h1>
<p>Dit is mijn eerste website.</p>
<button>Klik hier</button>
Leg uit dat:
Je begint en sluit iedere tekst af met een gedeelte code; anders zal het niet werken. Laat de kinderen deze code in JSFiddle plakken of zelf typen. Klik bovenin op “Run” in het oranje veld, zodat ze zien hoe er meteen een pagina verschijnt.
Stap 2: Kennismaken met CSS
CSS bepaalt hoe de website eruit ziet. Met CSS kun je kleuren veranderen, letters groter maken of een knop een kleur geven. CSS is dus een beetje de stylist van de website.
Laat onderstaand voorbeeld zien:
h1 {
color: blue;
}
button {
background-color: yellow;
font-size: 20px;
}
Leg uit dat de titel nu blauw wordt en dat de knop een andere kleur krijgt. Laat kinderen experimenteren met kleuren of lettergroottes. Om de lettergrootte aan te passen, moet je de ‘font-size: …..px;’ aanpassen. Klik weer op het oranje vlak “Run” om te zien dat de website verandert.
Stap 3: Kennismaken met JavaScript
Vertel dat JavaScript ervoor zorgt dat er iets gebeurt op de website. JavaScript maakt een website interactief. Laat als voorbeeld de volgende code zien:
document.querySelector(“button”).onclick = function() {
alert(“Hoi!”);
};
Klik weer op het oranje vlak “Run” om te zien wat dit nu op de website doet. Leg uit dat als iemand op de button klikt, er een nieuw bericht verschijnt!
Stap 4: Zelf proberen
Nu kunnen kinderen hun eigen webpagina maken. Ze kunnen bijvoorbeeld een stukje tekst schrijven, ontdekken met kleuren, tekstgroottes, knoppen maken, etc. Bewaak in deze fase dat kinderen passende teksten schrijven!
Stap 5: Elkaars webpagina bekijken
Laat de kinderen kort aan elkaar zien wat ze hebben gemaakt. Neem een prinsscreen van het scherm, zodat je dit in ouderportaal kan plaatsen of fysiek aan het kind kan meegeven. Het is niet elke dag dat je leert programmeren!
Makkelijker
Laat kinderen alleen een titel en een korte tekst maken.
Moeilijker
Laat kinderen meerdere knoppen of extra teksten toevoegen.
Variatie of extra uitdaging
Laat kinderen samen één webpagina maken over hun BSO-groep.
Kom samen terug in een kring. Vraag hoe de kinderen het vonden om een website te maken. Bespreek dat veel media die we dagelijks gebruiken, zoals websites, apps en online nieuws, met code worden gemaakt. Zo zie je hoe veel werk er in zit! Vertel dat zelfs een simpele website al kan ontstaan met een paar regels code.
Binnen aan tafels waar computers of tablets staan, waar ongestoord gewerkt kan worden.
Cognitieve ontwikkeling
Kinderen ontdekken hoe websites zijn opgebouwd en hoe code werkt. Ze leren logisch nadenken over structuur en volgorde.
Sociaal-emotionele ontwikkeling
Kinderen delen hun werk met elkaar en helpen elkaar bij het oplossen van kleine problemen.
Taalontwikkeling
Kinderen oefenen met het schrijven van korte teksten voor hun webpagina.
Digitale ontwikkeling
Kinderen maken kennis met programmeren en ontdekken hoe media op internet wordt gemaakt en gedeeld.
