Codestarter | Miniwebsite Miniwebsite
Miniwebsite
Een website is gemaakt van allerlei blokjes code. Leer hoe dat werkt en bouw je eigen webpage!
Html beeld

Een website is gemaakt van allerlei blokjes code. Als lego zet je de hele site in elkaar. Dat kun je zelf thuis ook. Maak een miniwebsite op je eigen computer!

Nodig:

•    Computer met Notes (op een PC) of TextEdit (op een Mac).

Stap 1: Je eerste HTML

De taal waarin websites worden gebouwd heet HTML. HTML code is tekst die je browser (Chrome, Explorer, Safari, Firefox) kan begrijpen. Je kunt HTML schrijven in een tekstverwerker. We gaan je uitleggen hoe je een HTML pagina kunt maken. 

 

Je hebt een eenvoudig programma nodig om in te werken. Op de PC gebruik je Notes, op je Mac kies je voor TextEdit.

 

Let op: als je op een Apple computer werkt, moet je iets aan de instellingen van TextEdit veranderen. Ga naar Preferences of Voorkeuren en kies Plain text. 

Stap 2: Typen en kijken in je browser

Kopieer deze tekst en plak hem in een nieuw document:

 

<html>

 

<head>
<title>Mijn dag </title>
</head>

 

<body>
<p>Heb je een leuke dag?</p>
</body>

 

</html>

 

Bewaar je document. Let op: in de naam van je document moet .html aan het eind staan; bijvoorbeeld mijnpagina.html

 

Voor Apple gebruikers: als je jouw testdocument nu opslaat maakt je computer er een txt file van. Bijvoorbeeld mijnpagina.txt. Verander dat in mijnpagina.html. 

 

Nu kun je jouw pagina openen in je browser. 
Je typt geen webadres in, maar kiest bestand > open. 
Als het goed is zie je nu dit:

Als je jouw code erbij houdt zie je wat er is gebeurd:

In je code zie je verschillende blokjes. Dit zijn je bouwstenen.
Alle woorden tussen pijltjes heten tags, bijvoorbeeld <html>. Deze woorden of codes staan vast. Iedere website gebruikt ze. Alleen als je deze afgesproken tags gebruikt gaat je webpagina werken.

  • <html> zegt dat vanaf hier jouw code HTML is en met de browser kan praten. Alles dat tussen deze tag en de afsluiter staat is een webpagina. De afsluiter is </html>. Een afsluiter heeft altijd / in de code.  
  • <head> en </head> geven allerlei informatie over je pagina aan de browser. Bijvoorbeeld de titel.
  • <title> en </title> geeft jouw pagina een titel. Dat is handig voor bijvoorbeeld Google als die jouw pagina wil vinden.
  • <body> en </body> bevat alles dat je in je pagina ziet. ‘Heb je een leuke dag?’ in dit geval. 

Stap 3: Aanpassingen maken

Het is heel makkelijk je code nu te gaan aanpassen. 
Natuurlijk kun je alle teksten tussen de haakjes veranderen. 
Let op: de tags mag je niet veranderen, want dan snapt je browser het niet meer.

 

<body>
<p>Het regent echt keihard!</p>
</body>

 

Het is ook leuk je tekst een kleur te geven. 

 

Hiervoor moet je een blokje toevoegen in de <head>: het stylesheet. Dat is het stukje code waar in de stijl of de vorm wordt omschreven.

 

<head>

 

 <STYLE type="text/css">
       P {font color:red; }
 </STYLE>

 

<title>Mijn dag</title>

 

</head>

 

Zie je dat er bij P de kleur staat? Daarmee zeg je dat alles waar P voor staat in jouw tekst rood moet worden.

 

<p>Het regent echt keihard!</p>

 

Je gebruikt altijd de Engelse naam voor de kleur. (Red, blue, green, yellow, black, white, pink)

 

Nu kun je ook de maat van je letters nog aanpassen:

 

<STYLE type="text/css"> 
P { color : red; 
font-size:xx-large; 
}  
</STYLE>

 

Je gebruikt weer Engelse woorden: xx-small, x-small, small, large, x-large, xx-large.

 

Je kunt ook de achtergrondkleur van je pagina veranderen:

 

<STYLE type="text/css"> 
P { color : red; 
font-size:xx-large; 
}  
body {  background-color:black; 
}  
</STYLE>

 

Nu heb je dit:

Stap 4: Plaatjes erin

Met plaatjes wordt je pagina natuurlijk veel mooier. 
Een plaatje voeg je toe binnen de <body> tags. Het moet immers in de browser getoond worden. 

 

Het is belangrijk dat je plaatje in dezelfde map staat als je HTML bestand. 

 

Stel je plaatje heet otters.jpg, dan ziet de code er zo uit:

 

<img src="otters.jpg">

 

Wil je dan ook nog een achtergrondplaatje, dan doe je dat in de <body> tag:

 

<body background="regen.jpg">

 

En dan heb je dit!

Stap 5: Meer tags!

Heb je de smaak te pakken?

 

Probeer dan ook eens meer plaatjes tegelijk (je weet al hoe een plaatje moet) of meerdere tekststijlen.

 

In je stylesheet voeg je dan bijvoorbeeld dit toe:


H1 {font color:yellow; }

 

En in je body dit:


<h1>Hier een tekst</H1>

 

Zo kun je ook H2, H3 en H4 toevoegen. 

Wat heb je nu geleerd?

Je hebt nu een gezien hoe de code (aan achterkant) de voorkant van een website beschrijft. In grote websites is de code wat ingewikkelder, er is nog veel te leren!

 

Heb je zin om een echte website te bouwen? Kijk hieronder voor een club of cursus bij jou in de buurt!


Beelden:
•    Otters 
•    Regen
 



Waar kun je dit leren?

Dsc 0087%281%29

RobotWise lesprogramma - vakoverstijgend met robotica

Waar:

Heel Nederland

Noord-Holland

16265214 1904164873153227 7334432915351227157 n

RobotWise naschoolse activiteiten

Waar:

Heel Nederland

Noord-Holland

Img 9757

Robot Partijtje

Waar:

Heel Nederland

Dsc 0079

Robot Playground in de ZOMERvakantie - RobotWise

Waar: Amstelveen

Noord-Holland

Pw8 codestarter cym woerden programmeren voor kinderen

Programmeren voor kinderen in Woerden

Waar: Woerden

Utrecht

Zuid-Holland

Fabschool header

FabSchool 2017 - 3

Waar: Amsterdam-centrum

Noord-Holland

94d8b414cd54ae623931ad2541fe368b schermafbeelding 2016 10 05 om 15.12.22 1156 577 c 1

Programmeerclub

Waar: Rotterdam

Zuid-Holland

Image

De Bonte Mindstormers

Waar: Delft

Zuid-Holland

Image

Ouder en Kind workshop Mindstorms

Waar: Delft of op locatie

Zuid-Holland

Image

Workshop LEGO Mindstorms

Waar: Delft of op locatie

Zuid-Holland

Image

Workshop LEGO WeDo

Waar: Delft, of op locatie

Zuid-Holland

Image

Kinderfeestje Programmeren met LEGO Mindstorms EV3

Waar: Delft, of op locatie

Zuid-Holland

Image

Kinderfeestje Programmeren met LEGO WeDo

Waar: Delft, of op locatie

Zuid-Holland

Onder embargo

Onder Embargo

Waar: Op locatie

Heel Nederland

Knuffeldrones

Knuffeldrones

Waar: Heel Nederland

Heel Nederland

Mooc

MOOC MEE Ontluikend programmeren

Waar: Online

Heel Nederland

Collage algemeen

Cubiss Makersbuzz

Waar: Heel Nederland

Heel Nederland

Noord-Brabant

Fotocodestarteractiviteit

Programmeren mOway-robots

Waar: Op uw school

Noord-Holland

Cursus scratch woerden 320x240

Programmeren voor kinderen van 11 tot 13 jaar

Waar: Woerden

Utrecht

Cursus scratch woerden 320x240

Programmeren met Scratch voor kinderen vanaf 8 jaar

Waar: Woerden

Utrecht

Bomberbot game

Leer spelenderwijs programmeren met Bomberbot (groep 5 t/m 8)!

Waar: Op school of thuis

Heel Nederland

Logo

Programmeren voor kinderen

Waar:

Heel Nederland

Obaflyerfoto

Programmeerclub

Waar: Amsterdam/IJburg

Noord-Holland

Coderdojo15 2

CoderDojo

Waar: Bij jou in de buurt

Heel Nederland

Logo mindstorms ev3

Basiscursus Programmeren met Legomindstorms

Waar: Weesp

Noord-Holland

3d printen startupkid

Startupkid

Waar: Groningen, Schuitendiep 3

Groningen

Friesland

Drenthe

20150917 192034

Codestarter Codeclub!

Waar: Groningen, Dirk Huizingastraat 13

Groningen

Friesland

Drenthe

Groen bg

Cursus programmeren in Computercraft

Waar: Amersfoort

Utrecht

Groen bg

Cursus Website

Waar: Amersfoort

Utrecht

Groen bg

Cursus Gamemaker

Waar: Amersfoort

Utrecht

Groen bg

Cursus programmeren in Scratch

Waar: Amersfoort

Utrecht


Deel dit artikel: