WEEK 5 - INFORMATIE TECHNOLOGIE

week 5 les 1
1 / 34
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 34 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

week 5 les 1

Slide 1 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 2 - Diapositive

Startklaar zitten.
Deze periode
- HTML & CSS
- Database & SQL Qeury


Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Deze periode
Jullie gaan een formulier met HTML & CSS maken waarbij het ingevulde formulier opgeslagen wordt in een database


Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Voorkennis activeren

Slide 5 - Diapositive

Cet élément n'a pas d'instructions

Wat is de juiste tag voor een inputveld?
A
<input> tag
B
<text> tag
C
<forminput> tag
D
<textbox> tag

Slide 6 - Quiz

Cet élément n'a pas d'instructions

Hoe maak je een formulier in HTML?
A
Gebruik de <table> tag in HTML
B
Gebruik de <div> tag in HTML
C
Gebruik de <form> tag in HTML
D
Gebruik de <span> tag in HTML

Slide 7 - Quiz

Cet élément n'a pas d'instructions

Wat doet de HTML tag

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

CSS
Ik wil dat de input velden een breedte hebben van 300px en een hoogte van 30px, ook wil ik de lettergroote van 15px. 

input{
//vul de bijbehorende attributen met hun waardes in
}



Slide 9 - Diapositive

Cet élément n'a pas d'instructions

vul jouw css code

Slide 10 - Question ouverte

Cet élément n'a pas d'instructions

LEERDOELEN
  • De leerling is in staat zijn werk van de vorige keer verder op te pakken en verder te werken



Slide 11 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting
Klasikaal invullen met leerlingen

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Ik weet nu hoe ik een formulier in HTML kan maken
Ja
Deels
Nee

Slide 13 - Sondage

Cet élément n'a pas d'instructions

week 5 les 2

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 15 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

Wat is een voorbeeld van een HTML-tag?
A
function()
B
<--div-->
C
if-else statement
D
<p>

Slide 17 - Quiz

Cet élément n'a pas d'instructions

Wat is de functie van HTML?
A
Programmeren van apps
B
Aanmaken van databases
C
Opmaak van afbeeldingen
D
Structureren van webpagina's

Slide 18 - Quiz

Cet élément n'a pas d'instructions

LEERDOELEN
  • De leerling snapt uit welke delen een HTML-element bestaat en kan dit toepassen
  • De leerling is in staat om zelfstandig een formulier te maken met HTML 
  • De leerling is in staat om het uiterlijk van zijn formulier met CSS mooier te maken



Slide 19 - Diapositive

Cet élément n'a pas d'instructions

Basisstructuur HTML

Slide 20 - Diapositive

Cet élément n'a pas d'instructions

HTML element
HTML element


Een HTML tag kan attributen noemen.
dit zijn eigenschappen die de HTML tag kan beinvloeden

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Ik weet nu waar een HTML element uit bestaat
Ja
Deels
Nee

Slide 22 - Sondage

Cet élément n'a pas d'instructions

Maak van de tag <h1> een compleet HTML element. Content is Inschrijven

Slide 23 - Question ouverte

Cet élément n'a pas d'instructions

CSS
Om de website mooier te maken

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

HTML zonder CSS
 
Dit is alleen HTML code
Dit is HTML met CSS

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Hoe werkt CSS
Om de website mooier te maken

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

Hoe werkt CSS

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

Hoe werkt CSS
Om de website mooier te maken
Demo

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

Probeer het zelf
Open het formulier wat je aan het maken bent Gebruik daarvoor de online code editor

Het formulier bestaat uit de volgende velden:
Voornaam, Achternaam, geboorte datum, straat, huisnummer, postcode, plaats
Checkbox voor voorwaarden

zorg ervoor dat je een CSS bestand maakt en dit link in jouw HTML bestand en zorg ervoor dat:

Alle input velden dezelfde lengte en hoogte hebben
Dat tussen alle inputvelden horizontaal een ruimte is van 15px
Dat de lettergrote 15px is van alle inputvulden
https://vscode.dev/

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

Ik weet nu hoe ik een css bestand kan linken aan html bestand
Ja
Deels
Nee

Slide 31 - Sondage

Cet élément n'a pas d'instructions

Ik weet nu hoe ik de inputvelden van mijn html kan aanpassen door gebruik van CSS
Ja
Deels
Nee

Slide 32 - Sondage

Cet élément n'a pas d'instructions

Ik wil de kleur van mijn letters veranderen naar rood, schrijf de css code die hierbij hoort

Slide 33 - Question ouverte

Cet élément n'a pas d'instructions

Samenvatting
Klassikaal 

Opdrachten niet vergeten in te leveren!
De PO staat ook in teams.

Slide 34 - Diapositive

Cet élément n'a pas d'instructions