WEEK 5 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

week 5 les 1

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

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

1. Inline elementen hebben een vaste breedte, block elementen passen zich aan de beschikbare ruimte aan.
2. Inline elementen stromen naast elkaar, block elementen beginnen op een nieuwe regel.
3. Block elementen hebben een vaste breedte, inline elementen passen zich aan de beschikbare ruimte aan.
4. Inline elementen beginnen op een nieuwe regel, block elementen stromen naast elkaar.

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

1. Lettertype
2. Achtergrondkleur
3. Positionering
4. Tekstuitlijning

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

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

Mappenstructuur website voorbeeld

Heeft iedereen inmiddels dit?

Mijn website

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

Zoek HTML tags voor jouw schermontwerp

Je kan w3schools hiervoor gebruiken

wat is het doel van CSS voor HTML?

Zoek CSS code die jouw html elementen gaat beinvloeden

Je kan w3schools hiervoor gebruiken

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

Welke is geen css element selector

1. h1{ color:red}
2. .color-red{ color:red}
3. body{background-color:black}
4. .bg-black{background-color:black}

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

Ja

Deels

Nee

Ik weet waar ik een wrapper moet gebruiken

Ja

Deels

Nee

Samenvatting

klassikaal bespreken

week 5 les 2

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Deze periode

Werken aan het project

- Scrum

- HTML & CSS

- Programmeren

- Version Control System

Voorkennis activeren

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

1. Inline elementen hebben een vaste breedte, block elementen passen zich aan de beschikbare ruimte aan.
2. Inline elementen stromen naast elkaar, block elementen beginnen op een nieuwe regel.
3. Block elementen hebben een vaste breedte, inline elementen passen zich aan de beschikbare ruimte aan.
4. Inline elementen beginnen op een nieuwe regel, block elementen stromen naast elkaar.

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

1. Lettertype
2. Achtergrondkleur
3. Positionering
4. Tekstuitlijning

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

1. Het bepaalt de volgorde van de scripts in een HTML-document.
2. Het bepaalt hoe elementen zich ten opzichte van elkaar positioneren.
3. Het bepaalt de grootte van de lettertypen op de webpagina.
4. Het bepaalt de kleuren van de achtergrond van de webpagina.

HTML document-flow?

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

plaatje 2

plaatje 1

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.)

Werken aan opdracht

De opdracht staat klaar in teams 

Ik ben in staat om een HTML element uit het document-flow te halen door gebruik van CSS position attribuut

Ja

deels

Nee

samenvatting

klassikaal