WEEK 5 - INFORMATIE TECHNOLOGIE

• Informatica
• Middelbare school
• havo
• Leerjaar 4

week 5 les 1

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Deze periode

- HTML & CSS

- Database & SQL Qeury

Deze periode

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

Voorkennis activeren

Wat is de juiste tag voor een inputveld?

1. <input> tag
2. <text> tag
3. <forminput> tag
4. <textbox> tag

Hoe maak je een formulier in HTML?

1. Gebruik de <table> tag in HTML
2. Gebruik de <div> tag in HTML
3. Gebruik de <form> tag in HTML
4. Gebruik de <span> tag in HTML

Wat doet de HTML tag

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

}

vul jouw css code

LEERDOELEN

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

Samenvatting

Klasikaal invullen met leerlingen

Ik weet nu hoe ik een formulier in HTML kan maken

Ja

Deels

Nee

week 5 les 2

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Wat is een voorbeeld van een HTML-tag?

1. function()
2. <--div-->
3. if-else statement
4. <p>

Wat is de functie van HTML?

1. Programmeren van apps
2. Aanmaken van databases
3. Opmaak van afbeeldingen
4. Structureren van webpagina's

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

Basisstructuur HTML

HTML element

HTML element

Een HTML tag kan attributen noemen.

dit zijn eigenschappen die de HTML tag kan beinvloeden

Ik weet nu waar een HTML element uit bestaat

Ja

Deels

Nee

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

CSS

Om de website mooier te maken

HTML zonder CSS

 

Dit is alleen HTML code

Dit is HTML met CSS

Hoe werkt CSS

Om de website mooier te maken

Hoe werkt CSS

Hoe werkt CSS

Om de website mooier te maken

Demo

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/

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

Ja

Deels

Nee

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

Ja

Deels

Nee

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

Samenvatting

Klassikaal 

Opdrachten niet vergeten in te leveren!

De PO staat ook in teams.