WEEK 5 - INFORMATICA

week 5 les 1

1 / 29

Slide 1: Tekstslide

InformaticaMiddelbare schoolhavoLeerjaar 4

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

Lesduur is: 90 min

Onderdelen in deze les

week 5 les 1

Slide 1 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!

Tellie in zakkie

Slide 2 - Tekstslide

Startklaar zitten.

Voorkennis activeren

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Wat is het verschil tussen een inline en block element in HTML?

Inline elementen hebben een vaste breedte, block elementen passen zich aan de beschikbare ruimte aan.

Inline elementen stromen naast elkaar, block elementen beginnen op een nieuwe regel.

Block elementen hebben een vaste breedte, inline elementen passen zich aan de beschikbare ruimte aan.

Inline elementen beginnen op een nieuwe regel, block elementen stromen naast elkaar.

Slide 4 - Quizvraag

Deze slide heeft geen instructies

Welke CSS-eigenschap kan de document-flow beïnvloeden?

Lettertype

Achtergrondkleur

Positionering

Tekstuitlijning

Slide 5 - Quizvraag

Deze slide heeft geen instructies

Geef aan hoe de mappenstructuur van jouw website eruit moet zien?

Slide 6 - Open vraag

Deze slide heeft geen instructies

LEERDOELEN

De leerling is in staat aan de hand van zijn schermontwerp te achterhalen welke html tags hij/zij allemaal nodig heeft
De leerling is in staat om enkele css selectors te gebruiken voor zijn schermontwerp
De leerling is in staat om aan de hand van de gekozen html tags en css selectors code te schrijven voor zijn schermontwerp

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Mappenstructuur website voorbeeld

Heeft iedereen inmiddels dit?

Mijn website

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Maak eerst een wrapper aan in jouw body

CSS code in jouw style.css

in jouw body de volgende code

In de wrapper komt jouw html code van jouw schermontwerp

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Zoek HTML tags voor jouw schermontwerp

Je kan w3schools hiervoor gebruiken

timer

10:00

Slide 10 - Tekstslide

Deze slide heeft geen instructies

wat is het doel van CSS voor HTML?

Slide 11 - Open vraag

Deze slide heeft geen instructies

Zoek CSS code die jouw html elementen gaat beinvloeden

Je kan w3schools hiervoor gebruiken

timer

10:00

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Aan de slag met html & css

Ga aan de slag met de door jou gekozen HTML en CSS code.

Codeer hoe jij denkt dat het moet, fouten maken is perfect!

De docent loopt rond om te helpen

Het zal vandaag niet afkomen maar wij gaan verder in de volgende les.

Bewaar alle HTML tags en css code die jij wilt gebruiken!!! oneDrive

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Welke is geen css element selector

h1{ color:red}

.color-red{ color:red}

body{background-color:black}

.bg-black{background-color:black}

Slide 14 - Quizvraag

Deze slide heeft geen instructies

Ik weet welke HTML tags ik moet gebruiken voor mijn schermontwerp?

Deels

Nee

Slide 15 - Poll

Deze slide heeft geen instructies

Ik weet waar ik een wrapper moet gebruiken

Deels

Nee

Slide 16 - Poll

Deze slide heeft geen instructies

Samenvatting

klassikaal bespreken

Slide 17 - Tekstslide

Deze slide heeft geen instructies

week 5 les 2

Slide 18 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!

Tellie in zakkie

Slide 19 - Tekstslide

Startklaar zitten.

Deze periode

Werken aan het project

- Scrum

- HTML & CSS

- Programmeren

- Version Control System

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Voorkennis activeren

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Wat is het verschil tussen een inline en block element in HTML?

Inline elementen hebben een vaste breedte, block elementen passen zich aan de beschikbare ruimte aan.

Inline elementen stromen naast elkaar, block elementen beginnen op een nieuwe regel.

Block elementen hebben een vaste breedte, inline elementen passen zich aan de beschikbare ruimte aan.

Inline elementen beginnen op een nieuwe regel, block elementen stromen naast elkaar.

Slide 22 - Quizvraag

Deze slide heeft geen instructies

Welke CSS-eigenschap kan de document-flow beïnvloeden?

Lettertype

Achtergrondkleur

Positionering

Tekstuitlijning

Slide 23 - Quizvraag

Deze slide heeft geen instructies

Hoe beïnvloedt document-flow de lay-out van een webpagina?

Het bepaalt de volgorde van de scripts in een HTML-document.

Het bepaalt hoe elementen zich ten opzichte van elkaar positioneren.

Het bepaalt de grootte van de lettertypen op de webpagina.

Het bepaalt de kleuren van de achtergrond van de webpagina.

Slide 24 - Quizvraag

Deze slide heeft geen instructies

HTML document-flow?

welke plaatje is duidelijk te zien dat een html element uit het document-flow is gehaald?

plaatje 2

plaatje 1

Slide 25 - Tekstslide

Deze slide heeft geen instructies

LEERDOELEN

Les 2

De leerling is in staat uitleg te geven over het concept Box-Model
De leerling is in staat om het Box-model toe te passen in zijn HTML
De leerling is in staat uitleg te geven over een eenheden die gebruikt worden in CSS (px, em, % enz.)