WEEK 4 - INFORMATIE TECHNOLOGIE

week 4 les 1
1 / 39
next
Slide 1: Slide
InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 39 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 90 min

Items in this lesson

week 4 les 1

Slide 1 - Slide

This item has no instructions

STARTKLAAR!
Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.
Deze periode
- Programmeren
- HTML & CSS
- Database & SQL Qeury
- Windows en Office via DIGIT-VO


Slide 3 - Slide

This item has no instructions

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


Slide 4 - Slide

This item has no instructions

Voorkennis activeren

Slide 5 - Slide

This item has no instructions

Welke taal wordt gebruikt voor het maken van een statische website?
A
CSS
B
Python
C
JavaScript
D
HTML

Slide 6 - Quiz

This item has no instructions

Welke is geen HTML tag?
A
<tijger>
B
<h1>
C
<a>
D
<ul>

Slide 7 - Quiz

This item has no instructions

Wat is de juiste volgorde van de basiselementen in een HTML-document?
A
<!DOCTYPE><html><head><title></title></head><body></body></html>
B
<html><head><title></title></head><body></body>
C
<!DOCTYPE html><html><head><title></title></head><body></body></html>
D
<!DOCTYPE html><body><head><title></title></head></body></html>

Slide 8 - Quiz

This item has no instructions

Waar staat de afkorting HTML voor?
A
High-Tech Mobile Language
B
HyperText Markup Language
C
Hyperlink Text Markup Language
D
HyperText Modeling Language

Slide 9 - Quiz

This item has no instructions

Wat is de rol van CSS bij het ontwerpen van een website?
A
Om de website te vertalen
B
Om de beveiliging te verbeteren
C
Om de server te beheren
D
Om de visuele presentatie te verbeteren

Slide 10 - Quiz

This item has no instructions

LEERDOELEN
  • De leerling is in staat een registratie formulier te maken met HTML en CSS



Slide 11 - Slide

This item has no instructions

Wat doet de HTML tag

Slide 12 - Slide

This item has no instructions

Mappenstructuur voor jouw formulier
  • Waar terschelling staat komt jouw naam in plaats
  • in CSS komt jouw CSS bestand
  • In img komen de afbeeldingen

Slide 13 - Slide

This item has no instructions

De HTML tags die je nodig hebt voor het formulier
<form>
<input type="tekst">
<select>
<input type="checkbox" >
<input type="submit">

https://vscode.dev/
https://onlinehtmleditor.dev/
Vorige les hebben wij dit klassikaal  gedaan.

Nu mag je het zelf doen, kijken of het jouw zelfstandig lukt


timer
15:00

Slide 14 - Slide

This item has no instructions

CSS
Een aparte CSS bestand maken en deze in de map css opslaan

input{
css code  input velden
}



Slide 15 - Slide

This item has no instructions

Samenvatting
Klasikaal invullen met leerlingen

Slide 16 - Slide

This item has no instructions

Ik weet waarom wij HTML gebruiken
Ja
Deels
Nee

Slide 17 - Poll

This item has no instructions

Ik kan de Form, input en de select HTML tags toepassen om een simpele formulier te maken
Ja
Deels
Nee

Slide 18 - Poll

This item has no instructions

week 4 les 2

Slide 19 - Slide

This item has no instructions

STARTKLAAR!
Tellie in zakkie

Slide 20 - Slide

Startklaar zitten.
Voorkennis activeren

Slide 21 - Slide

This item has no instructions

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

Slide 22 - Quiz

This item has no 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 23 - Quiz

This item has no 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 24 - Slide

This item has no instructions

Basisstructuur HTML

Slide 25 - Slide

This item has no instructions

HTML element
HTML element


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

Slide 26 - Slide

This item has no instructions

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

Slide 27 - Poll

This item has no instructions

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

Slide 28 - Open question

This item has no instructions

CSS
Om de website mooier te maken

Slide 29 - Slide

This item has no instructions

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

Slide 30 - Slide

This item has no instructions

Hoe werkt CSS
Om de website mooier te maken

Slide 31 - Slide

This item has no instructions

Hoe werkt CSS

Slide 32 - Slide

This item has no instructions

Hoe werkt CSS
Om de website mooier te maken
Demo

Slide 33 - Slide

This item has no instructions

Slide 34 - Slide

This item has no 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 35 - Slide

This item has no instructions

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

Slide 36 - Poll

This item has no instructions

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

Slide 37 - Poll

This item has no instructions

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

Slide 38 - Open question

This item has no instructions

Samenvatting
Klassikaal 

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

Slide 39 - Slide

This item has no instructions