‹Terug naar zoeken

WEEK 4 - INFORMATIE TECHNOLOGIE

week 4 les 1
1 / 39
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

In deze les zitten 39 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

week 4 les 1

Slide 1 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 2 - Tekstslide

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


Slide 3 - Tekstslide

Deze slide heeft geen instructies

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


Slide 4 - Tekstslide

Deze slide heeft geen instructies

Voorkennis activeren

Slide 5 - Tekstslide

Deze slide heeft geen instructies

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

Slide 6 - Quizvraag

Deze slide heeft geen instructies

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

Slide 7 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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



Slide 11 - Tekstslide

Deze slide heeft geen instructies

Wat doet de HTML tag

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

input{
css code  input velden
}



Slide 15 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
Klasikaal invullen met leerlingen

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Ik weet waarom wij HTML gebruiken
Ja
Deels
Nee

Slide 17 - Poll

Deze slide heeft geen instructies

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

Slide 18 - Poll

Deze slide heeft geen instructies

week 4 les 2

Slide 19 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 20 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 21 - Tekstslide

Deze slide heeft geen instructies

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

Slide 22 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Basisstructuur HTML

Slide 25 - Tekstslide

Deze slide heeft geen instructies

HTML element
HTML element


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

Slide 26 - Tekstslide

Deze slide heeft geen instructies

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

Slide 27 - Poll

Deze slide heeft geen instructies

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

Slide 28 - Open vraag

Deze slide heeft geen instructies

CSS
Om de website mooier te maken

Slide 29 - Tekstslide

Deze slide heeft geen instructies

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

Slide 30 - Tekstslide

Deze slide heeft geen instructies

Hoe werkt CSS
Om de website mooier te maken

Slide 31 - Tekstslide

Deze slide heeft geen instructies

Hoe werkt CSS

Slide 32 - Tekstslide

Deze slide heeft geen instructies

Hoe werkt CSS
Om de website mooier te maken
Demo

Slide 33 - Tekstslide

Deze slide heeft geen instructies

Slide 34 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 36 - Poll

Deze slide heeft geen instructies

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

Slide 37 - Poll

Deze slide heeft geen instructies

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

Slide 38 - Open vraag

Deze slide heeft geen instructies

Samenvatting
Klassikaal 

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

Slide 39 - Tekstslide

Deze slide heeft geen instructies

Meer lessen zoals deze

WEEK 5 - INFORMATIE TECHNOLOGIE

- Les met 34 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATIE TECHNOLOGIE

- Les met 30 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 4 - INFORMATICA

- Les met 30 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

Html en Css - les 2

- Les met 23 slides
InformaticaMiddelbare schoolvwoLeerjaar 4

WEEK 3 - INFORMATICA

- Les met 35 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 5 - INFORMATICA

- Les met 29 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

WEEK 3 - INFORMATICA

- Les met 33 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML + CSS les 3: introductie CSS

- Les met 28 slides
InformaticaMiddelbare schoolvwoLeerjaar 4