Miniwebsite

Een website is gemaakt van allerlei blokjes code. Leer hoe dat werkt en bouw je eigen webpage!

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>

<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>

</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:

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

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