WEEK 3 - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

week 3 les 1

Deze periode

Werken aan het project

- Scrum

- HTML & CSS

- Programmeren

- Version Control System

Voorkennis activeren

Plaats in de goede volgorde

<img

alt="Girl with a jacket"

>

src="img_girl.jpg"

     width="500" 

height="600"

Welk PowerShell-commando gebruik je om een repository te clonen vanuit bijvoorbeeld GitLab?

1. git clone
2. git init
3. git pull
4. git push

Welke van de volgende code is geen HTML?

1. body { color: red; }
2. <label for='name'>Naam:</label><input type='text' id='name'>
3. <audio src='music.mp3' controls>
4. <textarea rows='4' cols='50'>Dit is een tekstvak</textarea>

Wat is het verschil tussen declaratieve en imperatieve taal?

1. Declaratieve taal beschrijft wat er moet gebeuren, terwijl imperatieve taal aangeeft hoe iets moet gebeuren.
2. Declaratieve taal is alleen voor front-end ontwikkeling, terwijl imperatieve taal ook voor back-end ontwikkeling wordt gebruikt.
3. Declaratieve taal is eenvoudiger te leren dan imperatieve taal.
4. Declaratieve taal is gebaseerd op objecten, terwijl imperatieve taal gebaseerd is op functies.

LEERDOELEN

Les 1

• De leerling kan uitleggen wat het verschil is tussen block en een inline element in HTML
  
• De leerling is in staat een block element te manupileren naar een inline element door gebruik te maken van html tag attribuut
• De leerling maakt een eerste kennis met CSS

Les 2

• De leerling heeft kennis genomen van float en kan dit toepassen in HTML en CSS
• De leerling heeft kennis genomen van position in CSS en kan dit toepassen in zijn HTML en CSS

BLOCK & INLINE

Concept Block & Inline HTML

Block

Inline

HTML tags Block & Inline

Block

Inline

Block manipuleren tot inline

Met een html tag attribuut kan je een block omzetten naar inline

Mini opdracht

- maak een nieuwe HTML pagina in de map mijn eerste website

- noem deze html pagina block-inline.html

- voeg de basisstructuur van html toe aan de pagina

- plaats 2 block elementen toe, bijvoorbeeld :

- sla het op en open block-inline.html in de webbrowser

- voeg nu in beide html tag het volgende attribuut toe met de volgende waarde in block-inline.html: style="display:inline"

- refresh de pagina in de webbrowser

Kennis maken met CSS

HTML zonder CSS

 

Dit is alleen HTML code

Dit is HTML met CSS

Hoe zit css code eruit

Voor dat je een declaratie doet in CSS code geef je aan welke deel van HTML jouw CSS declaratie toegepast moet worden. Dit noemen wij de selector.

Wat zegt de css code hier op de 

afbeelding? Alle ..... wordt de 

font-size 1.2em toegepast

Samenvatting

Klasikaal invullen met leerlingen

week 3 les 2

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Plaats in de goede volgorde

h1

}

{

color:"red" 

;

LEERDOELEN

• De leerling heeft kennis genomen op welke plekken css code geschreven kan worden
• De leerling heeft kennis genomen van de css selectors en kan simpele css code schrijven a.d.h.v. 2 selectoren
• De leerling heeft kennis genomen van de standaard document-flow van html
• De leerling heeft kennis genomen van een aantal basis css attributen en kan het attribuut toepassen

CSS

• Je kan css op 3 verschillende plekken gebruiken
• in HTML tag zelf, in HTML pagina zelf of als een aparte bestand

• in HTML tag doe je het volgende bijvoorbeeld <p style="color:red"> paragraaf </p>
• in HTML gebruik je de HTML tag <style>  p { color:"red" } </style>
• In een aparte bestand gebruik je css code
• Het aparte bestand noem je bijvoorbeeld style.css
• Let op dat je bij dit bestand aan het einde de juiste extentie geeft namelijk .css

Hoe werkt CSS?

(zie ook w3schools.com/css)

Hoe is CSS opgebouwd?

bestaat uit 3 delen

- Selector

- haakjes (open {  en dicht }

- CSS code tussen haakjes

CSS selectors?

Er bestaan 5 types selectors maar we behandelen nu alleen 2 ervan

• Element selector
• Class selector

(zie ook w3schools.com/css)

CSS Element selector?

Dit zijn alle HTML tags. 

(zie ook w3schools.com/css)

Bijvoorbeeld in HTML <p> paragraaf </p> wordt in css

CSS Class selector?

Dit zijn zelf verzonnen namen. 

(zie ook w3schools.com/css)

Bijvoorbeeld in HTML <p class="style"> paragraaf </p> wordt in css

CSS Attributen?

Dit zijn eigenschappen die de style van het HTML elemen beinvloeden

(zie ook w3schools.com/css)

color

font-size

background-color

transition

enz.

HTML document-flow?

HTML elementen worden standaard op elkaar geplaatst en naast elkaar gelegd.

HTML document-flow?

HTML elementen worden standaard op elkaar geplaatst en naast elkaar gelegd.

1 html element is hier uit flow gehaald

alle html elementen zitten in de flow

CSS Attributen?

Zoek uit wat position is in css en hoe jij deze attribuut kan toepassen in jouw wie-ben-ik.html pagina

(zie ook w3schools.com/css)

Werken aan opdracht

De opdracht staat klaar in teams 

Samenvatting

klasikaal bespreken