WEEK 4 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

week 4 les 1

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 1

• De leerling is in staat uitleg te geven over de document-flow
• De leerling is in staat het attribuut position en haar waardes toepassen op een html element
• De leerling is in staat de attributen right, top, left en bottom van het attribuut position toepassen

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 

week 4 les 2

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

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.

LEERDOELEN

• De leerling is in staat om de mappenstructuur van zijn website te maken
• De leerling is in staat om een css bestand aan te maken en deze in de juiste map te plaatsen
• 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

Mappenstructuur website

• Wij gaan nu een eigen mappenstructuur aanmaken
• Later gaan wij in het framework laravel werken
• Jouw gemaakte werk ga je dan overzetten op laravel (komt goed maak je maar nu geen zorgen hoe en wat)

root = de naam van jouw website

pages = jouw webpagina

images = alle afbeeldingen

css = jouw css bestanden

script = jouw script bestanden

Mappenstructuur website voorbeeld

een css bestand maken

• extentie is .css
• standaardnaam is meestal style.css
• hier komt alleen css code die toegepast wordt op html elementen

een html bestand aanmaken voor jouw schermontwerp

• extentie is .html
• eerste pagina is meestal index.html
• hier komt alleen html code en er wordt een link gemaakt naar style.css
• style.css bevindt zich in map css , dus de link wordt css/style.css

Zoek uit welke html tag je nodig hebt

Ik loop zometeen langs om te kijken of leerlingen hulp nodig hebben. Als het even niet lukt, wees dan niet ongerust, het komt goed :)!

• Je mag de opdracht samen maken om elkaar te versterken
• Neem jouw schermontwerp en bekijk welke html tags je nodig hebt , bijvoorbeeld als jouw schermontwerp een knop heeft dan heb je waarschijnlijk de html tag button nodig 
• Gebruik de html tags in het html bestand index.html en zet ze in volgorde aan de hand van jouw schermontwerp, het zal in de eerste instantie er heel lelijk uitzien, dat geeft niet we gaan het later stylen met css
• als je nog niet  style.css in het mapje css hebt gemaakt, dan dien je dit aan te maken
• als je nog geen link hebt geplaatst naar jouw css dan dien je dat te doen
• schrijf de volgende code in css (in deze code wordt gebruik gemaakt van de css element selector namelijk body)

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}

Bewaren van jouw werk in oneDrive

Ik weet hoe ik een Mappenstructuur voor website kan maken

Ja

Deels

Nee

Ik weet hoe ik css selectors kan maken in css

Ja

Deels

Nee

Ja

Deels

Nee

Samenvatting

klassikaal bespreken