Blok 3 - Web Front End
HTML - Phoenix
1 Introductie Phoenix Code
In deze les leer je werken met Phoenix Code: een makkelijke code-editor in de browser. Je maakt je eerste HTML-bestand aan en bekijkt het resultaat in je browser.
π― Leerdoelen
- Je weet wat Phoenix Code is en waarvoor je het gebruikt
- Je kunt een HTML-bestand maken en bewerken
- Je kunt je werk bekijken in de browser
π‘ Wat is Phoenix Code?
- Phoenix Code is een gratis code-editor die in je browser werkt
- Je kunt er HTML, CSS en JavaScript mee maken
- Het werkt zonder installatie en je kunt alles opslaan als ZIP
π° Wat gaan we doen?
- We openen Phoenix Code
- We maken een HTML-bestand aan
- We bekijken het resultaat in de browser
π οΈ Stappenplan
1. Open Phoenix Code
- Ga naar https://phoenixcode.dev
- Klik opFile - StartProjectΒ en kies HTML5 project.
Je hebt nu een standaard HTML bestand (index.htm).
2. Maak een nieuw HTML-bestand
- Klik links op de map
- Klik op
+
en kies File - Geef het bestand de naam
myfirst.html
3. Zet deze voorbeeldcode erin
<!DOCTYPE html>
<html>
<head>
<title>Hallo wereld</title>
</head>
<body>
<h1>Hallo allemaal!</h1>
<p>Dit is mijn eerste HTML-pagina in Phoenix Code.</p>
</body>
</html>
4. Bekijk het resultaat
- Klik bovenaan op Run of Live Server
- De pagina verschijnt rechts of opent in een nieuw tabblad
- Klik aan de rechterkant op de verschillende onderdelen; je ziet nu welke HTML bij dezeonderdelen horen.
- Je kunt ook op het bestand dubbelklikken
Opdracht
Waarvoor dient HTML? Zet deze vraag en het antwoord op jouw HTML pagina.
π§ Vragen
- Wat denk je dat <h1> en </h1> doet?
- En <p>....</p>, wat doent die denk je?
π€ Inleveren
- Screenshot van je browser waarin de vraag "Waarom dient HTML?" en jouw antwoord zichtbaar zijn.
Voorbeeld screenshot
2 Wat is HTML?
In deze les leer je wat HTML is, waarom het belangrijk is voor websites, en maak je je eerste eenvoudige webpagina met koppen en tekst.
π― Leerdoelen
- Je weet waar HTML voor wordt gebruikt
- Je kent de structuur van een HTML-pagina
- Je kunt zelf een eenvoudige HTML-pagina maken
π‘ Wat is HTML?
- HTML betekent HyperText Markup Language
- Het is de basis van elke webpagina
- HTML vertelt de browser wat er op een pagina moet staan: tekst, afbeeldingen, knoppen, enzovoort
π° Wat gaan we doen?
- We maken een nieuw HTML-bestand in Phoenix Code
- We schrijven een pagina over onszelf met koppen en tekst
π οΈ Stappenplan
1. Maak een nieuw project in Phoenix Code
- Ga naar https://phoenixcode.dev
- Voeg een bestand toe met de naam
opdracht2.html
2. Typ deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Over mij</title>
</head>
<body>
<h1>Hallo! Ik ben [jouw naam]</h1>
<p>Ik ben [leeftijd] jaar oud en ik zit op school bij [schoolnaam].</p>
<p>Mijn favoriete hobby is [hobby].</p>
</body>
</html>
3. Pas de tekst aan
- Vervang
[jouw naam]
,[leeftijd]
,[schoolnaam]
en[hobby]
door je eigen gegevens
4. Bekijk je werk
- Klik op Run of Live Server om je webpagina te bekijken
Uitleg
Tekst staat tussen tags. Deze tags geeft aan hoe een tekst moet worden weergegeven.
Vrijwel alle HTML tags bestaan uit een open-tag (bijvoorbeeld <p> en een sluit tag bijvoorbeeld </p>
<p>...</p> betekent dat de tekst een pragraaf is.
<h1>...</h1> betekent dat de tekst een header is.
Je hebt nog meer headers: <h2>, <h3>, .....
Opdracht
- Vervang de header die tussen <h1>...</h1> staat door een kleinere header.
- Zoek op hoe je tekst vet kan afdrukken en laat jouw naam ver afdrukken.
π€ Inleveren
- Maak een screenshot van je webpagina met aangepasgte header en jouw naam ver gedrukt.
3 Tekst en opmaak
In deze les leer je hoe je tekst opmaakt met HTML. Je leert koppen, paragrafen, vetgedrukte tekst, cursieve tekst en regels afbreken.
π― Leerdoelen
- Je kunt kopjes en paragrafen maken met HTML
- Je weet hoe je tekst vet of schuin maakt
- Je kunt regels afbreken met een <br>-tag
π‘ Wat kun je met HTML-opmaak?
- HTML laat je tekst er beter uitzien en duidelijker maken voor de lezer
- Je gebruikt kopjes om structuur aan te brengen, en
<p>
om losse alinea's te maken - Je kunt woorden vet of schuin maken om ze op te laten vallen
π° Wat gaan we doen?
- We maken een pagina met meerdere kopjes en paragrafen
- We oefenen met
<strong>
,<em>
en<br>
π Eenvoudige HTML-tags voor tekstopmaak
Tag | Betekenis | Voorbeeld | Uitleg |
---|---|---|---|
<h1> t/m <h6> |
Koppen | <h1>Grote titel</h1> |
<h1> is de grootste kop, <h6> de kleinste |
<p> |
Paragraaf / alinea | <p>Dit is een stukje tekst.</p> |
Zorgt voor witruimte vΓ³Γ³r en na |
<strong> |
Vetgedrukt (belangrijk) | <strong>Let op!</strong> |
Wordt ook door screenreaders benadrukt |
<em> |
Cursief (nadruk) | <em>Heel belangrijk</em> |
Geeft nadruk, ook voor screenreaders |
<br> |
Regellijn afbreken | Eerste regel<br>Tweede regel |
Breekt een regel zonder nieuwe paragraaf (deze tag bestaat alleen uit een openingstab) |
π οΈ Stappenplan
1. Maak een nieuw project of nieuw bestand in Phoenix Code
- Noem het bestand
tekst.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn interesses</title>
</head>
<body>
<h1>Over mij</h1>
<p>Hallo! Ik ben <strong>[jouw naam]</strong>. Ik ben <em>enthousiast</em> over programmeren.</p>
<h2>Mijn hobby's</h2>
<p>Ik hou van muziek maken<br>voetballen<br>en gamen.</p>
<h2>Toekomst</h2>
<p>Later wil ik werken als programmeur bij een groot bedrijf.</p>
</body>
</html>
3. Pas de inhoud aan
- Vervang de tekst door jouw eigen naam en interesses
- Gebruik minstens één
<strong>
, één<em>
en één<br>
4. Bekijk je werk
- Klik op Run of Live Server om het resultaat te zien
π§ Reflectie
- Wat doet
<br>
precies? - Wanneer zou je
<strong>
gebruiken en wanneer<em>
? - Hoe maak je een tekst extra duidelijk voor de lezer?
π€ Inleveren
- Maak een screenshot van jouw pagina waarin opmaak en breekregels zichtbaar zijn
4 Afbeeldingen en links
In deze les leer je hoe je een afbeelding op een webpagina toont en hoe je een klikbare link toevoegt naar een andere website.
π― Leerdoelen
- Je kunt een afbeelding invoegen met HTML
- Je kunt een link maken naar een andere website
- Je begrijpt wat attributen zoals
src
,alt
enhref
doen
π‘ Wat zijn afbeeldingen en links in HTML?
- Afbeelding: je gebruikt de tag
<img>
om een foto of plaatje te tonen - Link: je gebruikt de tag
<a>
om een klikbare link te maken - Je gebruikt attributen zoals:
src
= locatie van de afbeeldingalt
= tekst als de afbeelding niet geladen wordthref
= doel van de link
π° Wat gaan we doen?
- We voegen een afbeelding toe aan onze pagina
- We maken een link naar een favoriete website
π οΈ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
afbeelding.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Afbeelding en link</title>
</head>
<body>
<h1>Mijn favoriete dier</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/3/3a/Cat03.jpg" alt="Foto van een kat" width="300">
<p>Meer informatie over katten vind je op
<a href="https://nl.wikipedia.org/wiki/Kat_(dier)" target="_blank">Wikipedia</a>.
</p>
</body>
</html>
3. Pas de inhoud aan
- Vervang de afbeelding met een plaatje dat jij leuk vindt (gebruik Google of Wikipedia en kopieer de afbeeldingslink)
- Verander de link naar jouw favoriete website
- Verander de tekst zodat het bij jouw afbeelding past
4. Bekijk je werk
- Klik op Run of Live Server om je pagina te testen
π§ Reflectie
- Wat gebeurt er als je een verkeerde link of afbeelding gebruikt?
- Waarom is het belangrijk om de
alt
-tekst te gebruiken?
π€ Inleveren
- Maak een screenshot van je webpagina met een afbeelding Γ©n een werkende link
5 Lijsten in HTML
In deze les leer je hoe je lijsten maakt met HTML. Je leert zowel opsommingen als genummerde lijsten maken.
π― Leerdoelen
- Je weet wat het verschil is tussen een genummerde en een opsomming
- Je kunt een lijst maken met HTML
- Je kunt zelf kiezen welk type lijst het best past
π‘ Wat zijn lijsten in HTML?
- Je gebruikt een lijst om dingen op een rijtje te zetten
- Opsomming (bullets): gebruik je met
<ul>
= unordered list - Genummerde lijst: gebruik je met
<ol>
= ordered list - Elk item in een lijst staat in een
<li>
= list item
π° Wat gaan we doen?
- We maken een lijst van hobbyβs
- We maken een genummerde top 3 van favoriete dingen
π οΈ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
lijsten.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn lijsten</title>
</head>
<body>
<h1>Mijn hobby's</h1>
<ul>
<li>Gamen</li>
<li>Voetballen</li>
<li>Tekenen</li>
</ul>
<h2>Top 3 favoriete snacks</h2>
<ol>
<li>Pizza</li>
<li>Frikandel</li>
<li>Chips</li>
</ol>
</body>
</html>
Opdracht
Verander de pagina en maak:
- een numbered list van dingen die jij luek vind om te doen. Op nummer 1 staat dan wat je het leukst vnd, op 2 wat je daarna het leukts vind, etc. etc.Β Noem tenminst 5 dingen.
- een unnumbered lists van dingen die je tot nu hebt geleerd van software development.
Klik op Run of Live Server om je pagina te testen
π€ Inleveren
- Maak een screenshot van jouw webpagina met beide lijsten zichtbaar
6 Tabellen in HTML
In deze les leer je hoe je een eenvoudige tabel maakt met HTML. Je gebruikt dit om informatie netjes in kolommen en rijen te tonen.
π― Leerdoelen
- Je weet wat een HTML-tabel is en waarvoor je die gebruikt
- Je kunt een eenvoudige tabel maken met rijen en kolommen
- Je gebruikt de tags
<table>
,<tr>
,<td>
en<th>
π‘ Wat is een tabel in HTML?
- Een tabel is een manier om informatie te tonen in rijen (horizontaal) en kolommen (verticaal)
<table>
= de hele tabel<tr>
= een rij (table row)<td>
= een cel met gegevens (table data)<th>
= een kopcel (table header)
In een HTML tabel moet elke regel evenveel kolommen bevatten. Om dat voor elkaar te krijgen zou je lege kolommen kunne toevogen als een regel te weinig kolommen heeft.
In een tabell moet elke regel precies evenveel kolommen bevatten!
π° Wat gaan we doen?
- We maken een tabel met onze schoolrooster of favoriete eten
- We geven de bovenste rij een titel (kopjes)
π οΈ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
- Noem het bestand
tabel.html
2. Typ of plak deze HTML-code
<!DOCTYPE html>
<html>
<head>
<title>Mijn schoolrooster</title>
</head>
<body>
<h1>Mijn schoolrooster</h1>
<table border="1">
<tr>
<th>Dag</th>
<th>Vakken</th>
</tr>
<tr>
<td>Maandag</td>
<td>Nederlands, Wiskunde</td>
</tr>
<tr>
<td>Dinsdag</td>
<td>Engels, Gym</td>
</tr>
</table>
</body>
</html>
3. Pas de inhoud aan
- Vervang de dagen en vakken door jouw eigen rooster
4. Bekijk je werk
- Klik op Run of Live Server om je tabel te bekijken
π€ Inleveren
- Maak een screenshot van jouw tabel met minstens 6 rijen (kopregel plus maamndag t/m vrijdag)
7 Formulieren in HTML
In deze les leer je hoe je een formulier maakt in HTML. Je leert invoervelden gebruiken en een knop toevoegen om informatie te versturen.
π― Leerdoelen
- Je weet wat een formulier is en waarvoor je het gebruikt
- Je kunt invoervelden maken voor tekst, getallen en knoppen
- Je kunt een formulier laten verzenden naar een ander HTML- of PHP-bestand
π‘ Wat is een formulier?
- Een formulier gebruik je om gegevens in te voeren op een website
- Denk aan: contactformulieren, inlogvelden, zoekvelden, bestellingen
- Je gebruikt tags zoals:
<form>
β de container<input>
β invoerveld<label>
β beschrijving van een veld<button>
of<input type="submit">
β knop
π° Wat gaan we doen?
- We maken een formulier met naam, leeftijd en hobby
- We laten het formulier "doen alsof" het iets verstuurt
π οΈ Stappenplan
1. Maak een nieuw HTML-bestand in Phoenix Code
<!DOCTYPE html>
<html>
<head>
<title>Contactformulier</title>
</head>
<body>
<h1>Vertel iets over jezelf</h1>
<form action="#" method="post">
<label for="naam">Naam:</label><br>
<input type="text" id="naam" name="naam"><br><br>
<label for="leeftijd">Leeftijd:</label><br>
<input type="number" id="leeftijd" name="leeftijd"><br><br>
<label for="hobby">Hobby:</label><br>
<input type="text" id="hobby" name="hobby"><br><br>
<input type="submit" value="Verstuur">
</form>
</body>
</html>
- Noem het bestand
formulier.html
2. Typ of plak deze HTML-code
Opdracht
Gebruik het formulier als voorbeeld en maak zelf een formulier.
Vraag de gebruiker om de volgende gegvens:
- voornaam
- achternaam
- adres
- postcode
- woonplaats
- teelfoonnummer
Bekijk je werk
- Klik op Run of Live Server en vul het formulier in
- Klik op "Verstuur" β er gebeurt nog niets, dat komt later met PHP!
π§ Reflectie
- Wat zou je met dit formulier willen doen als het "echt" was?
π€ Inleveren
- Maak een screenshot van jouw formulier met ingevulde gegevens
8 Mini-project: Jouw persoonlijke homepage
In deze les ga je zelf een echte webpagina bouwen over jezelf. Je gebruikt alles wat je hebt geleerd over HTML: tekst, afbeeldingen, lijsten, tabellen en een formulier.
π― Leerdoelen
- Je kunt zelfstandig een complete HTML-pagina maken
- Je gebruikt verschillende HTML-elementen op de juiste manier
- Je denkt na over opbouw, inhoud en structuur van een webpagina
π‘ Wat gaan we doen?
- Je maakt een persoonlijke homepage met meerdere onderdelen
- Je laat zien wat je geleerd hebt in lessen 1 t/m 6
π οΈ Opdracht
Maak een bestand mijnhomepage.html
aan en zorg dat het deze onderdelen bevat:
β Verplichte onderdelen:
- Een titel en
<h1>
-kop met je naam - Minstens twee
<p>
paragrafen over jezelf - Een
<img>
met een afbeelding die bij jou past (bijv. hobby, dier of sport) - Een
<ul>
of<ol>
met je favoriete dingen (bijv. films, games, hobby's) - Een
<table>
met 2 of meer rijen, bijv. je rooster of een eetplanner - Een
<a>
-link naar een website die jij vaak bezoekt - Een klein
<form>
met 2-3 invoervelden (bijv. naam + boodschap + knop)
Basis HTML code
<!DOCTYPE html>
<html>
<head>
<title>Contactformulier</title>
</head>
<body>
</body>
</html>
π Extra uitdaging (optioneel):
- Gebruik
<strong>
,<em>
en<br>
om je pagina mooier te maken - Geef je pagina een leuke kleur of lettertype met een inline CSS-regel
π€ Inleveren
- Maak een screenshot van jouw volledige homepage
CSS - Phoenix
1 Wat is CSS?
In deze les leer je wat CSS is, waarom het belangrijk is, en hoe je het gebruikt om de opmaak van een webpagina aan te passen. Je gaat zelf aan de slag met eenvoudige kleuren en lettertypes.
π― Leerdoelen
- Je weet wat CSS doet en waarom we het gebruiken
- Je kunt een eenvoudige opmaakregel toevoegen via de HTML-tag (inline)
- Je kunt kleuren en lettertypes toepassen met CSS
π‘ Wat is CSS?
- CSS staat voor Cascading Style Sheets
- Met CSS bepaal je hoe HTML eruitziet: kleuren, lettertypes, ruimte, achtergrond, enzovoort
- Zonder CSS is een website saai: zwart-wit, standaardletters, geen stijl
π§ Hoe voeg je CSS toe?
- Je kunt CSS op drie manieren gebruiken:
- Inline β direct in het HTML-element (in deze les)
- In een <style>-blok β in de
<head>
(volgende les) - In een extern .css-bestand β voor grote projecten (komt later)
Voorbeeld: CSS inline gebruiken
<p style="color: red;">Deze tekst is rood</p>
<h1 style="font-family: Arial;">Welkom</h1>
De style="..."
zit in het HTML-element en verandert de stijl van dat element.
π οΈ Opdracht β Pas kleur en stijl toe
Let op: gebruik Phoenix Code om deze opdracht te maken.
- Maak een nieuw HTML-bestand aan, noem het
css-les1.html
- Plak onderstaande code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn eerste CSS</title>
</head>
<body>
<h1>Welkom op mijn pagina</h1>
<p>Ik ben een beginnende webdeveloper.</p>
<p>Ik leer nu hoe ik CSS kan gebruiken.</p>
</body>
</html>
- Pas de HTML aan met inline CSS, zodat:
- De
<h1>
een blauwe kleur krijgt en een ander lettertype (bijv. Arial) - De eerste
<p>
rood wordt en gecentreerd staat - De tweede
<p>
een andere kleur krijgt die jij mooi vindt
- De
- Bekijk je werk in Phoenix Code via Run
π€ Inleveren
- Maak een screenshot van jouw pagina met de aangepaste kleuren en lettertypes
2 CSS in het <style>-blok
In deze les leer je hoe je CSS los van HTML schrijft in het <style>-blok boven in het document. Je gebruikt selectoren zoals body
, h1
en p
om elementen op te maken.
π― Leerdoelen
- Je begrijpt waarom het slim is om CSS apart te schrijven
- Je kunt stijlen toevoegen in het <style>-blok
- Je kunt opmaak toepassen op meerdere elementen tegelijk met selectors
π‘ Wat is het <style>-blok?
- Het
<style>
-blok zet je bovenin de pagina, tussen de<head>
-tags - Je schrijft daar CSS die geldt voor de hele pagina
- Je gebruikt een selector om aan te geven welk element je wilt opmaken. Hieronder vind je de selectors body h1 en p
Voorbeeld:
<style>
body {
background-color: lightyellow;
}
h1 {
color: navy;
font-family: Verdana;
}
p {
color: darkgreen;
text-align: center;
}
</style>
In dit voorbeeld zijn body, h1 en p de element-selectors en die verwijzen naar de HTML-elementen.
π οΈ Opdracht β Stijl je pagina met het <style>-blok
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
css-les2.html
- Plak deze basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Stijl oefenen</title>
<style>
/* Voeg hier je CSS toe */
</style>
</head>
<body>
<h1>Over mij</h1>
<p>Ik ben een student die leert over HTML en CSS.</p>
<p>Ik vind het leuk om websites te maken.</p>
</body>
</html>
- Voeg in het
<style>
-blok CSS toe zodat:- De
body
een lichtgrijze achtergrondkleur krijgt - Alle
<h1>
-koppen blauw worden en een ander lettertype krijgen (bijv. Georgia) - De
<p>
-tekst donkergroen wordt en gecentreerd staat
- De
π§ Reflectie
- Wat is het voordeel van een
<style>
-blok boven inline stijl? - Welke stijlen gelden voor de hele pagina, ook als je later extra tekst toevoegt?
- Wat zou je veranderen om je pagina nog mooier te maken?
Opdracht
- Voer alle stappen uit zoals hierboven beschreven.
π€ Inleveren
- Maak een screenshot van jouw pagina waarin je aangepaste stijlen duidelijk zichtbaar zijn
3 Tekstopmaak en achtergronden
In deze les leer je hoe je tekst kunt opmaken met kleur, lettertype, uitlijning en hoe je een achtergrondkleur toevoegt aan je pagina.
π― Leerdoelen
- Je kunt tekst centreren of links/rechts uitlijnen
- Je kunt de kleur en het lettertype van tekst aanpassen
- Je kunt de achtergrondkleur van de hele pagina of een specifiek element aanpassen
- Je weet wat een selector is en wat het verschil is tussen een class-selector en een element-selector.
Selectors; element-selector en class selector
Zoals we eersder zagen beginnen we een CSS blok met een selector.
Tot nu toe hebben we element-selectors gebruikt. Deze verwezen naar de HTML-elementen.
We kennen ook class-selectors deze verwijzen naar classes. Classes zien er in HTML als volgt uit:
<div class="blok"> ... </div>
In dit geval is blok de naam van de selector.
In CSS verwijzen we naar een class op de volgende manier.
.blok {
/* stijlregels */
}
Een class selector in CSS begint met een . (punt)
π‘ Belangrijke CSS-eigenschappen in deze les
color
β de kleur van de tekstfont-family
β het lettertypetext-align
β de uitlijning van tekst (bijv.center
)background-color
β de achtergrondkleur van een element
Voorbeeld:
.my-header {
color: darkred;
font-family: 'Comic Sans MS';
text-align: center;
background-color: lightyellow;
}
π οΈ Opdracht β Maak een kleurrijke poster
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
poster.html
- Plak deze HTML-code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn poster</title>
<style>
/* Voeg hier jouw stijlen toe */
</style>
</head>
<body>
<h1>Mijn favoriete onderwerp</h1>
<p class="eerste">Dit is een stukje tekst over iets wat ik leuk vind.</p>
<p>Bijvoorbeeld een sport, hobby, film of spel.</p>
<p>Of een vak op College Amstelland dat je heel leuk vind :)</p>
</body>
</html>
- Geef je
body
een leukebackground-color
- Geef je
h1
een opvallende kleur, een ander lettertype entext-align: center
Gebruik hiervoor de class metΒ class-selector.header
- Geef de
p
-teksten elk een andere kleur en uitlijning en gebruik hiervoor classes met class-selectors. Geef elke <p> hiervoor een aparte class. - Experimenteer met verschillende kleuren en lettertypes zoals:
Arial
,Georgia
,Courier New
,Comic Sans MS
π€ Inleveren
- Maak een screenshot van jouw kleurrijke poster waarin de CSS code ook duidelijk te lezen is.
4 Box-model: randen, padding en margins
In deze les leer je hoe je ruimte kunt maken rondom en binnenin een element met CSS. Je leert ook hoe je randen toevoegt en de afstand tussen blokken regelt.
π― Leerdoelen
- Je begrijpt het verschil tussen margin, padding en border
- Je kunt ruimte tussen tekstblokken instellen met CSS
- Je kunt randen toevoegen aan blokken om ze beter zichtbaar te maken
π‘ Wat is het box-model?
Elk HTML-element is als een βdoosβ opgebouwd uit vier lagen:
- Content: de tekst of afbeelding binnenin
- Padding: ruimte tussen de content en de rand
- Border: de rand om het element heen
- Margin: de ruimte tussen dit element en andere elementen
Voorbeeld:
.blok {
margin: 15px;
border: 2px solid black;
padding: 20px;
background-color: lightblue;
}
π οΈ Opdracht β Drie gekleurde tekstblokken
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
boxmodel.html
- Plak onderstaande code in je bestand:
<!DOCTYPE html>
<html>
<head>
<title>Box model test</title>
<style>
.blok {
border: 2px solid black;
padding: 20px;
margin: 20px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="blok">
<h2>Blok 1</h2>
<p>Dit is het eerste tekstblok met padding en marge.</p>
</div>
<div class="blok">
<h2>Blok 2</h2>
<p>Ook dit blok heeft een rand en achtergrondkleur.</p>
</div>
<div class="blok">
<h2>Blok 3</h2>
<p>Pas de kleuren en afstanden aan zoals jij het mooi vindt.</p>
</div>
</body>
</html>
- Pas de CSS aan zodat:
- Ieder blok een andere
background-color
heeft - De
margin
tussen de blokken groter of kleiner is (proberen met10px
,30px
, enz.) - De
padding
meer of minder ruimte geeft binnen het blok
- Ieder blok een andere
- Test verschillende
border
-instellingen, zoalsdashed
,double
of4px solid red
π§ Reflectie
- Wat is het verschil tussen
margin
enpadding
? - Waarom is het handig om borders tijdelijk toe te voegen tijdens het bouwen?
- Wat gebeurt er als je
padding
op 0 zet?
π€ Inleveren
- Geef antwoord op de drie reflectievragen in eigen woorden en lever dat in, in een txt- of PDF bestand.
- Voeg een schermafdruk van jouw boxen toe aan de PDF.
5 Classes gebruiken in CSS
In deze les leer je hoe je een class
gebruikt om meerdere elementen dezelfde opmaak te geven. Zo kun je stijlen hergebruiken zonder telkens dezelfde regels te schrijven.
π― Leerdoelen
- Je weet wat een
class
is en hoe je die toepast in HTML - Je kunt CSS-stijlen koppelen aan een class
- Je kunt verschillende klassen maken en gebruiken op één pagina
π‘ Wat is een class?
- Een
class
is een naam die je aan een element geeft zodat je het in CSS kunt opmaken - Je zet in HTML:
<div class="menu">
- In CSS gebruik je een punt (.) om een class aan te roepen:
.menu { ... }
- Je kunt dezelfde class meerdere keren gebruiken.
- Een HTML element kan ook meerdere classes bevatten:
<div class="menu speciaal">
De stylen met de class-selector menu Γ©n speciaal zijn beiden van teopassing op dit element.
Voorbeeld:
<div class="menu">Pizza Margherita</div>
<div class="menu speciaal">Spaghetti Bolognese</div>
.menu {
background-color: lightyellow;
padding: 10px;
border: 1px solid gray;
margin-bottom: 10px;
}
.speciaal {
color: red;
}
π οΈ Opdracht β Bouw een gestyleerde menukaart
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
menukaart.html
- Plak onderstaande code als startpunt:
<!DOCTYPE html>
<html>
<head>
<title>Menukaart</title>
<style>
.menu {
background-color: lightyellow;
border: 2px solid #999;
padding: 15px;
margin-bottom: 15px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1>Restaurant De Codepan</h1>
<div class="menu">Pizza Margherita</div>
<div class="menu">Truffelpasta met parmezaan</div>
<div class="menu">Ravioli met spinazie en ricotta</div>
<div class="menu">Chefβs surprise</div>
</body>
</html>
- Pas zelf de kleuren, marges of lettertypes aan zoals jij het mooier vindt
- Voeg minstens twee eigen gerechten toe aan de lijst
- Geef twee menu-items de class
speciaal
en zorg ervoor dat deze speciale gerechten duidelijk opvallen door hun stijl aan te passen.
π§ Reflectie
- Waarom is het handig om stijlen te herhalen met een class?
- Wat gebeurt er als je meerdere klassen aan één element geeft?
- Kun je bedenken wanneer je liever een class gebruikt dan een tag-selector (zoals
p
)?
π€ Inleveren
- Maak een screenshot van jouw gestyleerde menukaart in de browser.
6 Layout en positionering
In deze les leer je hoe je met behulp van blokken en eenvoudige CSS een duidelijke indeling (layout) maakt. Denk aan een header bovenaan, een middenstuk (main) en een footer onderaan.
π― Leerdoelen
- Je weet hoe je de layout van een pagina opbouwt met blokken (divs)
- Je kunt tekst en blokken centreren met
text-align
enmargin
- Je kunt blokken op een vaste breedte zetten
π‘ Wat is een layout?
- Een layout is de structuur van je pagina β hoe dingen verdeeld zijn over het scherm
- Voor layout gebruiken we vaak het HTML-element
<div>
- Een
div
is een onopvallend blok dat je zelf kunt opmaken met CSS
Belangrijke CSS-eigenschappen:
text-align: center;
β centreren van tekstmargin: auto;
β centreren van blokkenwidth:
β bepaalt hoe breed een blok is (bijv.80%
of600px
)
Voorbeeld:
.blok {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
}
π οΈ Opdracht β Bouw een eenvoudige homepage-layout
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
layout.html
- Plak onderstaande basiscode in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Mijn layout</title>
<style>
.blok {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #eeeeee;
text-align: center;
}
.header {
background-color: lightblue;
}
.main {
background-color: white;
}
.footer {
background-color: lightgray;
}
</style>
</head>
<body>
<div class="blok header">
<h1>Welkom op mijn site</h1>
</div>
<div class="blok main">
<p>Hier komt de inhoud van je website.</p>
</div>
<div class="blok footer">
<p>Gemaakt door [jouw naam] - 2025</p>
</div>
</body>
</html>
- Pas de kleuren aan zodat het bij jouw stijl past
- Voeg een afbeelding toe in de main-blok en plaats jouw naam onderaan in de footer.
- Geef de blokken afgeronde hoeken (
border-radius
) van bijvoorbeeld15px
π§ Reflectie
- Wat gebeurt er als je de
width
verandert naar60%
of400px
? - Hoe werkt
margin: auto
precies? - Wat zou je toevoegen als je een echte website maakt?
π€ Inleveren
- Maak een screenshot van jouw homepage met drie blokken die door jouw zijn vormgegeven.
7 CSS-selectors: element, class en id
In deze les leer je wat een id
-selector is en wanneer je die gebruikt. Je herhaalt ook wat een element
-selector en een class
-selector doet. Daarna pas je deze drie selectors toe in één pagina.
π― Leerdoelen
- Je herkent het verschil tussen element-, class- en id-selectors
- Je weet wanneer je een id gebruikt in plaats van een class
- Je kunt deze drie selectors toepassen in één pagina
π‘ Wat zijn selectors in CSS?
Een selector in CSS bepaalt op welk HTML-element de stijlregel toegepast wordt.
Selector | Voorbeeld | Toepassing |
---|---|---|
Element | p { color: blue; } |
Geldt voor alle paragrafen |
Class | .belangrijk { color: red; } |
Geldt voor meerdere elementen met class="belangrijk" |
ID | #titel { font-size: 30px; } |
Geldt voor één uniek element met id="titel" |
Belangrijk verschil:
class
gebruik je voor meerdere elementenid
gebruik je maar één keer op een pagina β het is uniek
π οΈ Opdracht β Gebruik drie soorten selectors
- Maak een nieuw HTML-bestand in Phoenix Code, noem het
selectors.html
- Plak deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>CSS Selectors</title>
<style>
/* Element-selector */
p {
color: green;
}
/* Class-selector */
.special {
font-weight: bold;
background-color: lightyellow;
}
/* ID-selector */
#titel {
font-size: 30px;
color: navy;
}
</style>
</head>
<body>
<h1 id="titel">Welkom op mijn pagina</h1>
<p>Dit is een normale paragraaf.</p>
<p class="special">Dit is een speciale paragraaf.</p>
<p>Nog een gewone paragraaf.</p>
</body>
</html>
- Pas de stijlen aan zoals jij het mooi vindt:
- Geef de
#titel
een andere kleur en een ander lettertype - Geef de class
.special
een rand of andere achtergrond
- Geef de
- Voeg zelf nog een extra class toe voor een andere stijl (bijv.
.opvallend
)
π§ Reflectie
- Wanneer gebruik je een
class
en wanneer eenid
? - Wanneer gebuik je een element-selector, bijvoorbeeld
body
ofh1
? - Wat gebeurt er als je per ongeluk twee keer hetzelfde
id
gebruikt?
π€ Inleveren
- De refectievragen en jouw eigen antwoorden (eigen woorden) in een txt- of PDF bestand.
8 Flexbox: moderne layouttechniek
In deze les leer je werken met flexbox
. Dit is een moderne techniek waarmee je blokken makkelijk naast of onder elkaar zet, zonder ingewikkelde marges of floats.
π― Leerdoelen
- Je weet wat
display: flex
doet - Je kunt blokken naast elkaar zetten
- Je weet wat resonsive design is.
- Je kunt blokken centreren en de ruimte verdelen met
justify-content
enalign-items
π‘ Wat is flexbox?
Met flexbox kun je elementen binnen een container netjes ordenen, zowel horizontaal als verticaal.
display: flex
zet de container om in een flex-containerjustify-content
bepaalt de horizontale uitlijning (zoalscenter
,space-between
)align-items
bepaalt de verticale uitlijning (zoalscenter
,flex-start
)
Met felxboxes maak je een responsive design: dit betekent dat je web pagina op verschillende aparaten goed wordt getoond en dat de boxes worden aangepast als de breedte van het scherm wordt aangepast.
Voorbeeld CSS:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.blok {
width: 150px;
height: 150px;
background-color: lightblue;
text-align: center;
padding: 20px;
border-radius: 10px;
}
Een complete uitleg over alle mogelijkheden vind je hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
π οΈ Opdracht β Maak een blokkenrij met Flexbox
- Maak een nieuw bestand in Phoenix Code:
flex.html
- Gebruik deze HTML als basis:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox oefening</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f0f0f0;
padding: 20px;
}
.blok {
width: 150px;
height: 150px;
background-color: lightcoral;
color: white;
font-weight: bold;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<h1>Mijn Flexbox layout</h1>
<div class="container">
<div class="blok">Blok 1</div>
<div class="blok">Blok 2</div>
<div class="blok">Blok 3</div>
</div>
</body>
</html>
- Experimenteer met andere waarden voor
justify-content
zoalscenter
,space-around
offlex-end
- Voeg eventueel nog een vierde blok toe
- Pas de kleuren en tekst aan zodat het jouw stijl heeft
Opdracht
Maak het volgende ontwerp zo goed mogelijk na en gebruik daarbij Flexboxen zoals je dat net hebt geleerd.:
De drie blokken staan op het midden van de webpagina en je design is responisve.
π€ Inleveren
- Maak een screenshot van je resultaat.
- Indien je AI hebt gebruikt, stuur dan de AI-Chat log mee en zorg ervoor dat je alleen zaken gebruikt die we hebben behandeld en die je kan uitleggen.
Je kan worden gevraagd om jouw ontwerp te komen toe lichten / uitleggen.
--
Intro JS
1 Wat is JavaScript?
In deze les leer je wat JavaScript is, waarom we het gebruiken en hoe je jouw eerste stukje code uitvoert in de browser.
π― Leerdoelen
- Je weet wat JavaScript is en waarvoor het wordt gebruikt
- Je kunt een script uitvoeren in de browserconsole
- Je kunt een script toevoegen aan een HTML-pagina met <script>
π‘ Wat is JavaScript?
- HTML zorgt voor de inhoud (tekst, koppen, knoppen...)
- CSS zorgt voor de opmaak (kleuren, marges, lettertypes...)
- JavaScript zorgt voor de interactie (reageren op klikken, invullen, bewegen...)
Bijvoorbeeld, een knop
-
HTML: een kale knop zonder opmaak
-
CSS: dezelfde knop, maar nu blauw met afgeronde hoeken
-
JavaScript: als je op de knop klikt, verschijnt er een melding ("popup")
Wat kun je met JavaScript doen?
- Een knop laten reageren als je erop klikt
- Een rekenmachine bouwen
- Invoer van een formulier controleren
- Spelletjes maken in de browser
π§ Oefenen in de browserconsole
- Open je browser (bijv. Chrome of Firefox)
- Rechtermuisklik op een lege plek op een website > Kies Inspecteren > Ga naar het tabblad Console
- Typ daar:
en druk op Enterconsole.log("Hallo wereld!");
- Je ziet in de console de tekst
Hallo wereld!
π JavaScript in een HTML-bestand gebruiken
- Open Phoenix Code
- Maak een nieuw HTML-bestand aan, noem het
script.html
- Typ of plak deze code in het bestand:
<!DOCTYPE html>
<html>
<head>
<title>Eerste script</title>
</head>
<body>
<h1>Welkom op mijn site</h1>
<p>Open de console om het bericht te zien.</p>
<script>
console.log("Dit bericht komt uit de HTML!");
</script>
</body>
</html>
- Sla op en open het bestand in de browser
- Open opnieuw de console en zie het bericht verschijnen
Zie je meer berichten of fouten?
Verwijder alle bestanden uit je project zodat je alleen script.html overhoud.Β
π οΈ Opdracht β Jouw eerste script
- Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf
- Voeg onderaan het bestand een script toe met minstens `console.log()`-regels
- Laat in de console bijvoorbeeld jouw naam en je favoriete dier zien
Voorbeeld:
console.log("Ik heet Yasmin");
console.log("Mijn lievelingsdier is een rode panda");
π§ Reflectie
- Wat is het verschil tussen wat je in de browser ziet en wat je in de console ziet?
- Waarom gebruiken programmeurs de console?
π€ Inleveren
- Maak een screenshot van jouw HTML-bestand Γ©n de console-output.
2 Variabelen en de console
In deze les leer je hoe je informatie kunt opslaan in een variabele, hoe je dat zichtbaar maakt in de console, en waarom de console zo belangrijk is bij het programmeren.
π― Leerdoelen
- Je begrijpt wat een variabele is
- Je kunt een variabele maken met
let
ofconst
- Je gebruikt
console.log()
om informatie weer te geven - Je weet wat debuggen is en waarom de console daarbij helpt
π‘ Wat is een variabele?
Een variabele is een soort doosje waarin je iets bewaart, zoals tekst of een getal.
let naam = "Jasper";
const leeftijd = 17;
let
= variabele die later nog mag veranderenconst
= variabele die niet meer mag veranderen
Je gebruikt console.log()
om de inhoud van een variabele te bekijken:
console.log(naam);
π Wat is debuggen?
Debuggen betekent: je code controleren op fouten (bugs) en begrijpen wat er gebeurt.
- De console is een soort gereedschapskist voor programmeurs.
- Je kunt er controleren of variabelen kloppen, of een functie wordt uitgevoerd, of ergens een fout zit.
- Een programmeur kijkt vaak in de console tijdens het schrijven van code.
Als je in de console iets ziet wat je niet verwacht β dan kun je makkelijker de fout vinden. Daarom gebruiken we console.log()
vaak tijdens het debuggen.
π οΈ Opdracht β Variabelen gebruiken en debuggen
- Maak een nieuw HTML-bestand in Phoenix Code:
variabelen.html
- Typ de volgende basiscode in je bestand:
<!DOCTYPE html>
<html>
<head>
<title>Variabelen oefenen</title>
</head>
<body>
<h1>Bekijk de console!</h1>
<script>
let voornaam = "Ali";
const leeftijd = 18;
console.log("Naam: " + voornaam);
console.log("Leeftijd: " + leeftijd);
</script>
</body>
</html>
- Open je bestand in de browser en bekijk de console (rechtermuisklik β Inspecteren β Console)
- Verander de naam en leeftijd naar jouw eigen gegevens
- Voeg een derde variabele toe:
favorietDier
en toon die ook metconsole.log()
Voorbeeld:
let favorietDier = "koala";
console.log("Mijn favoriete dier is: " + favorietDier);
π§ Reflectie
- Wat gebeurt er als je de
const
probeert te veranderen? - Waarom is het handig om even iets te loggen in de console?
- Heb je fouten gezien? Wat hielp je om ze op te lossen?
π€ Inleveren
- Beantwoord de vragen uit de reflectie en lever die in (.txt. of .pdf bestand).
3 Functies
In deze les leer je wat een functie is, waarom functies handig zijn en hoe je zelf een functie maakt in JavaScript. Je oefent met functies die tekst tonen of berekeningen uitvoeren.
π― Leerdoelen
- Je weet wat een functie is en wat het doel ervan is
- Je kunt een functie schrijven met
function
- Je kunt een functie aanroepen (laten uitvoeren)
- Je begrijpt wat een parameter is en hoe je die meegeeft
π‘ Wat is een functie?
Een functie is een blokje code dat je een naam geeft, zodat je het later makkelijk opnieuw kunt gebruiken.
Stel, je wilt iets drie keer doen, zoals een bericht tonen. Dan is het dus handig om dat in een functie te stoppen.Β
function zegHallo() {
console.log("Hallo!");
}
Om de functie uit te voeren (aan te roepen), typ je:
zegHallo();
π¦ Functies met parameters
Je kunt een functie ook informatie meegeven. Bijvoorbeeld een naam:
function begroet(naam) {
console.log("Hoi " + naam + "!");
}
begroet("Fatima"); // toont: Hoi Fatima!
begroet("Jesse"); // toont: Hoi Jesse!
π οΈ Opdracht β Bouw je eigen functies
- Maak een nieuw HTML-bestand in Phoenix Code:
functies.html
- Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>Functies oefenen</title>
</head>
<body>
<h1>Bekijk de console</h1>
<script>
function begroet(naam) {
console.log("Hallo " + naam + "!");
}
begroet("Maya");
begroet("Koen");
</script>
</body>
</html>
- Maak nog een functie die een getal verdubbelt:
function verdubbel(getal) { console.log(getal * 2); }
- Roep die functie minstens twee keer aan met verschillende getallen
- Voeg daarna zelf een nieuwe functie toe met een eigen idee, bijvoorbeeld:
- Een functie die een leeftijd in hondenjaren berekent (Γ 7)
- Een functie die een bericht toont in jouw stijl.
π§ Reflectie
- Waarom is het handig om herhaalbare code in een functie te zetten?
- Wat gebeurt er als je een functie oproept zonder de juiste parameter?
π€ Inleveren
- Maak een screenshot van je code Γ©n de console-output
4 Voorwaardes met if
en else
In deze les leer je hoe je met JavaScript keuzes kunt maken. Je gebruikt if
en else
om bepaalde code alleen uit te voeren als aan een voorwaarde is voldaan.
π― Leerdoelen
- Je begrijpt wat een voorwaarde is
- Je kunt werken met
if
,else if
enelse
- Je kunt eenvoudige beslissingen laten uitvoeren op basis van een getal
π‘ Wat is een voorwaarde?
Met een voorwaarde bepaal je of een stukje code wΓ©l of niet uitgevoerd moet worden. Je gebruikt een if
-statement:
let leeftijd = 17;
if (leeftijd >= 18) {
console.log("Je bent volwassen");
} else {
console.log("Je bent nog geen 18");
}
Je kunt meerdere keuzes maken met else if
:
let punt = 6;
if (punt >= 8) {
console.log("Super goed!");
} else if (punt >= 5.5) {
console.log("Voldoende");
} else {
console.log("Onvoldoende");
}
π οΈ Opdracht β Leeftijdscontrole met voorwaarden
- Maak een nieuw HTML-bestand in Phoenix Code:
ifelse.html
- Gebruik deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>If-statement oefenen</title>
</head>
<body>
<h1>Bekijk de console</h1>
<script>
let leeftijd = 15;
if (leeftijd >= 18) {
console.log("Je mag stemmen.");
} else {
console.log("Je bent nog te jong om te stemmen.");
}
</script>
</body>
</html>
- Pas de variabele
leeftijd
aan naar jouw eigen leeftijd en test het resultaat - Voeg een
else if
-blok toe dat controleert of iemand precies 17 is - Maak daarna zelf een voorbeeld met een
punt
(bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed
π€ Inleveren
- Maak een screenshot van je code Γ©n de console-output bij jouw leeftijd en punt
- Lever dit screenshot in via Teams of Canvas
π§ Reflectie
- Wat gebeurt er als je geen
else
gebruikt? - Wanneer gebruik je
else if
in plaats van meerdereif
-regels?
5 Gebeurtenissen (events)
In deze les leer je hoe je iets kunt laten gebeuren als een gebruiker op een knop klikt. Je leert werken met onclick
waarmee je een functie kan aanroepen bij een gebeurtenis.
π― Leerdoelen
- Je weet wat een event is in JavaScript
- Je kunt een knop laten reageren op een klik met
onclick
- Je kunt een functie aanroepen wanneer een event plaatsvindt
π‘ Wat is een event?
Een event is een gebeurtenis, zoals:
- een klik op een knop (
click
) - iets typen in een tekstvak (
input
) - de muis bewegen over een element (
mouseover
)
Met JavaScript kun je ervoor zorgen dat er iets gebeurt als zo'n event plaatsvindt. Het meest gebruikte event is onclick
.
Voorbeeld: klik op een knop
<button onclick="groet()">Klik hier</button>
<script>
function groet() {
console.log("Hoi! Je hebt op de knop geklikt.");
}
</script>
Wordt je 'gek' van console.log? Je kunt ook alert gebruiken:
alert("Je hebt geklikt!");
π οΈ Opdracht β Laat een knop iets doen
- Maak een nieuw HTML-bestand in Phoenix Code:
knop.html
- Typ deze code als basis:
<!DOCTYPE html>
<html>
<head>
<title>Gebeurtenis oefenen</title>
</head>
<body>
<h1>Druk op de knop!</h1>
<button onclick="toonBericht()">Klik hier</button>
<script>
function toonBericht() {
console.log("Je hebt geklikt!");
}
</script>
</body>
</html>
- Verander de tekst in de functie naar je eigen boodschap
- Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld:
toonLeeftijd()
- Laat die tweede functie een leeftijd of getal tonen in de console (of via alert())
Voorbeeld:
function toonLeeftijd() {
console.log("Ik ben 16 jaar");
}
π§ Reflectie
- Wat is er nodig om een knop iets te laten doen?
- Wat gebeurt er als je een functie aanroept zonder dat die bestaat?
π€ Inleveren
- Maak een screenshot van je HTML Γ©n console na het klikken op de knoppen
6 Formulierinvoer gebruiken met JavaScript
π― Leerdoelen
- Je weet hoe je met JavaScript input uit een formulier ophaalt met
getElementById()
. - Je kunt een
if
-statement gebruiken op basis van invoer. - Je toont het resultaat op het scherm, niet in de console.
Start Code
<!DOCTYPE html>
<html>
<head>
<title>Leeftijd check</title>
<style>
body { font-family: sans-serif; }
#output { font-weight: bold; margin-top: 15px; }
</style>
</head>
<body>
<h1>Voer je leeftijd in</h1>
<input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
<button>Check mijn leeftijd</button>
<p id="output"></p>
<script>
function checkLeeftijd() {
let leeftijd = Number(document.getElementById("leeftijdInput").value);
let boodschap = "";
if (leeftijd >= 18) {
boodschap = "Je bent volwassen.";
} else {
boodschap = "Je bent een kind.";
}
document.getElementById("output").innerText = boodschap;
}
</script>
</body>
</html>
π‘ Uitleg
(lees goed door!)
Op regel 14 wordt een leeftijd gevraagd.
Op regel 15 staat een knop. Deze doet nog niets maar die moet via het onlclick
event gekoppeld worden aan de JS functie checkLeeftijd()
.
Op regel 17 staat een legel paragraaf. Deze paragraaf wordt (later) gevuld door de JS functie.
Op regel 21 wordt de waarde van het input veld met het id leeftijdInput gevraagd. De waarde wordt in de JS variabele leeftijd bewaard.
Op regel 30 wordtdocument.getElementById("id").value
gebuikt om de waarde uit een inputveld op te halen. Het HTML element dat waarvan de tekst wordt opgehaald heeft als id output
.
π οΈ Opdracht β Leeftijd analyseren en tonen
- Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd().Β
- Bereid de if-then-else structuur uit: als je ouder dat 65 bent dan ben je senior, ben je jonger dan 2 dan ben je een baby, jonger dan 6 een peuter, jonger dan 12 een jong kind, en jonger dan 18 een kind.
- Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is.
π§ Reflectie
- Wat gebeurt er als je niets invult of een negatieve waarde gebruikt?
- Waarom is
Number(...)
nodig?
π€ Inleveren
- Lever de geteste en werkende code als html bestand met daarin de JS code in.
8 Bereken een prijs met korting
In deze les gebruik je JavaScript om een prijs te berekenen na korting. Je gebruikt een formulier met invoervelden voor het bedrag en de korting in procenten. Daarna laat je in de console zien wat de nieuwe prijs is.
π― Leerdoelen
- Je kunt meerdere waarden ophalen uit een formulier
- Je gebruikt JavaScript om een berekening te maken met die waarden
- Je toont het resultaat in de console
π‘ Formule: prijs met korting
Als je een korting in procenten hebt, dan gebruik je de volgende formule:
kortingsbedrag = bedrag * (korting / 100);
nieuwePrijs = bedrag - kortingsbedrag;
Β
Code
<!DOCTYPE html>
<html>
<head>
<title>Korting berekenen</title>
</head>
<body>
<h1>Bereken de korting</h1>
<p>Vul een bedrag en een kortingspercentage in:</p>
<input type="number" id="bedragInput" placeholder="Bedrag in euro's">
<input type="number" id="kortingInput" placeholder="Korting in %">
<button onclick="berekenKorting()">Bereken</button>
<script>
function berekenKorting() {
let bedrag = Number(document.getElementById("bedragInput").value);
let korting = Number(document.getElementById("kortingInput").value);
let kortingBedrag = bedrag * (korting / 100);
let nieuwePrijs = bedrag - kortingBedrag;
console.log("Origineel bedrag: β¬" + bedrag.toFixed(2));
console.log("Korting: " + korting + "%");
console.log("Nieuwe prijs: β¬" + nieuwePrijs.toFixed(2));
}
</script>
</body>
</html>
π οΈ Opdracht
- Test het formulier met verschillende bedragen en percentages
- Controleer of het resultaat klopt in de console
- In plaats van console.log maak je net als bij de vorige opdracht een lege paragraaf aan en plaats daaarin het resultaat.
De drie regels (regel 24-26 van de code) wordt dus op de pagina getoond, net als bij de vorige pagina. - Maak CSS stijl aanpassingen naar eigen inzicht zodat de pagina er netjes uitziet.
π§ Reflectie
- Wat gebeurt er als je niks invult? Wat kun je daaraan doen?
- Wat gebeurt er als je een korting invult die hoger is dan 100%?
π€ Inleveren
- De complete geteste en werkende HTML/JS/CSS in één HTML bestand.
--
Portfolio Challenge
1 Persoonlijke website β HTML & vormgeving
π― Leerdoelen
- Je kunt een persoonlijke website opbouwen met HTML en CSS.
- Je maakt meerdere paginaβs die met elkaar verbonden zijn via een werkend menu.
- Je past opmaak toe met een externe stylesheet.
π οΈ Bouw jouw website
Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.
De opdracht:
- De website moet bestaan uit een homepage en 3 vervolgpagina's.
voorbeeld home pages:
Elke pagina bevat:
- Een header met jouw logo, naam en een menu naar alle paginaβs.
- Een footer met een copyrightregel.
- Opmaak via een externe
style.css
bestand met classes. - Elke pagina moet een header blok hebben metΒ jouw logo , jouw naam en een menu waar alle menu-items Β in staan.
Let op, het menu moet werken! - Elke pagina moet een footer hebben waar een copyright in staat.
voorbeeld footer: - Alle pagina's moeten worden vormgegeven met css classes , maak gebruik van een externe stylesheet .
- De website heeft de volgende pagina's / menu-items:
- Home (homepage) (index.html)
Je homepagina is je etalage, een homepagina moet bezoekers nieuwsgierig maken naar de rest van de website.
Zorg dat je homepage er aantrekkelijk uitziet en dat de bezoeker in een oogopslag kan zien welke informatie er op de website te vinden is.
Gebruik op de home page afbeeldingen en links naar de vervolgpagina's - Mijn profiel (1e vervolgpagina) (profiel.html)
Hierin plaats je een foto met een klein verhaaltje over jezelf.
De exacte inhoud staat in de volgende opdracht,
- Over mij (2e vervolgpagina) (overmij.html)
Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)
- Mijn visie (3e vervolgpagina) (mijnvisie.html)
Voorlopig nog leeg, deze wordt pas vele later gevuld.
- Home (homepage) (index.html)
π οΈ Opdracht
- Bouw een pagina voor de homepage (index .html ).
- Bouw een pagina voor je profiel (profiel.html).
- Bouw een pagina voor je overmij (overmij.html).
- Bouw een pagina voor je visie ( visie .html).
Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!
Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze.
Leef je uit en gebruik de technieken die je hebt geleerd!
π§ Reflectie
- Wat maakt een homepage aantrekkelijk voor een bezoeker?
- Wat is het voordeel van een apart CSS-bestand gebruiken voor styling?
- Wat vond je lastig bij het koppelen van menu's tussen meerdere paginaβs?
π€ Inleveren
- De 4 HTML-bestanden:Β
index.html
,profiel.html
,overmij.html
,visie.html
. - Een externe
style.css
bestand. - Screenshot van alle 4 pagina's in de browser (inclusief menu en footer zichtbaar).
- De reflectie; beantwoord de drie vragen i jouw eigen woorden en lever dit in (txt-bestand of pdf-bestand)
Je hebt in totaal dus 9 bestanden ingeleverd.
2 Persoonlijke website β content
Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen. Β
De vervolgpagina's vul je met onderstaande
Vervolgpagina Mijn profiel (profiel.html)
- Plaats hier een foto van jezelfΒ
Schrijf hier je naam, leeftijd, de stad waar je woont
Β Vervolgpagina Over mij (overmij.html)
- Plaats hier de 6 lesopdrachten van persoonlijk profileren
- tijdlijn
- normen &waarden
- DISC
- Kernkwadranten
- SWOT analyse
- 360 graden feedback
Vervolgpagina Mijn visie (visie.html)
- Deze laat je (nog) leeg
π€ Inleveren
- Screenshot van alle 4 pagina's in de browser. Zorg dat ale content goed leesbaar is. Evnetueel maak je extra screenshots zodat alles leesbaar is.
--