‹Revenir à la recherche

WEEK 4 - INFORMATIE TECHNOLOGIE

week 4 les 1
1 / 39
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 39 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 4 les 1

Slide 1 - Diapositive

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

STARTKLAAR!
Tellie in zakkie

Slide 2 - Diapositive

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


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

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

Slide 6 - Quiz

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

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

Slide 7 - Quiz

Cet élément n'a pas d'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

Cet élément n'a pas d'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

Cet élément n'a pas d'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

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

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



Slide 11 - Diapositive

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

Wat doet de HTML tag

Slide 12 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

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

input{
css code  input velden
}



Slide 15 - Diapositive

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

Samenvatting
Klasikaal invullen met leerlingen

Slide 16 - Diapositive

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

Ik weet waarom wij HTML gebruiken
Ja
Deels
Nee

Slide 17 - Sondage

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

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

Slide 18 - Sondage

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

week 4 les 2

Slide 19 - Diapositive

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

STARTKLAAR!
Tellie in zakkie

Slide 20 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 21 - 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 22 - 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 23 - 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 24 - Diapositive

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

Basisstructuur HTML

Slide 25 - 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 26 - Diapositive

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

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

Slide 27 - Sondage

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

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

Slide 28 - Question ouverte

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

CSS
Om de website mooier te maken

Slide 29 - Diapositive

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

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

Slide 30 - Diapositive

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

Hoe werkt CSS
Om de website mooier te maken

Slide 31 - Diapositive

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

Hoe werkt CSS

Slide 32 - Diapositive

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

Hoe werkt CSS
Om de website mooier te maken
Demo

Slide 33 - Diapositive

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

Slide 34 - 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 35 - 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 36 - 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 37 - 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 38 - 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 39 - Diapositive

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

Plus de leçons comme celle-ci

WEEK 5 - INFORMATIE TECHNOLOGIE

- Leçon avec 34 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATIE TECHNOLOGIE

- Leçon avec 30 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 4 - INFORMATICA

- Leçon avec 30 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

Html en Css - les 2

- Leçon avec 23 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

WEEK 3 - INFORMATICA

- Leçon avec 35 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATICA

- Leçon avec 29 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATICA

- Leçon avec 33 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML + CSS les 3: introductie CSS

- Leçon avec 28 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4