WEEK 3 - INFORMATICA

STARTKLAAR!
Tellie in zakkie
1 / 35
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 35 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

STARTKLAAR!
Tellie in zakkie

Slide 1 - Diapositive

Startklaar zitten.
week 3 les 1

Slide 2 - Diapositive

Cet élément n'a pas d'instructions

Deze periode
Werken aan het project
- Scrum
- HTML & CSS
- Programmeren
- Version Control System

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Voorkennis activeren

Slide 4 - Diapositive

Cet élément n'a pas d'instructions

Plaats in de goede volgorde
<img
alt="Girl with a jacket"
>
src="img_girl.jpg"
     width="500" 
height="600"

Slide 5 - Question de remorquage

Cet élément n'a pas d'instructions

Welk PowerShell-commando gebruik je om een repository te clonen vanuit bijvoorbeeld GitLab?
A
git clone
B
git init
C
git pull
D
git push

Slide 6 - Quiz

Cet élément n'a pas d'instructions

Welke van de volgende code is geen HTML?
A
body { color: red; }
B
<label for='name'>Naam:</label><input type='text' id='name'>
C
<audio src='music.mp3' controls>
D
<textarea rows='4' cols='50'>Dit is een tekstvak</textarea>

Slide 7 - Quiz

Cet élément n'a pas d'instructions

Wat is het verschil tussen declaratieve en imperatieve taal?
A
Declaratieve taal beschrijft wat er moet gebeuren, terwijl imperatieve taal aangeeft hoe iets moet gebeuren.
B
Declaratieve taal is alleen voor front-end ontwikkeling, terwijl imperatieve taal ook voor back-end ontwikkeling wordt gebruikt.
C
Declaratieve taal is eenvoudiger te leren dan imperatieve taal.
D
Declaratieve taal is gebaseerd op objecten, terwijl imperatieve taal gebaseerd is op functies.

Slide 8 - Quiz

Cet élément n'a pas d'instructions

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




Slide 9 - Diapositive

Cet élément n'a pas d'instructions

BLOCK & INLINE

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Concept Block & Inline HTML
Block
Inline

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

HTML tags Block & Inline
Block
Inline

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Block manipuleren tot inline
Met een html tag attribuut kan je een block omzetten naar inline

Slide 13 - Diapositive

Cet élément n'a pas d'instructions

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
timer
10:00

Slide 14 - Diapositive

Cet élément n'a pas d'instructions

Kennis maken met CSS

Slide 15 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 16 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 17 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting
Klasikaal invullen met leerlingen

Slide 18 - Diapositive

Cet élément n'a pas d'instructions

week 3 les 2

Slide 19 - Diapositive

Cet élément n'a pas d'instructions

STARTKLAAR!
Tellie in zakkie

Slide 20 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 21 - Diapositive

Cet élément n'a pas d'instructions

Plaats in de goede volgorde
h1
}
{
color:"red" 
;

Slide 22 - Question de remorquage

Cet élément n'a pas d'instructions

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



Slide 23 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 24 - Diapositive

Cet élément n'a pas d'instructions

Hoe werkt CSS?
(zie ook w3schools.com/css)

Slide 25 - Diapositive

Cet élément n'a pas d'instructions

Hoe is CSS opgebouwd?
bestaat uit 3 delen
- Selector
- haakjes (open {  en dicht }
- CSS code tussen haakjes

Slide 26 - Diapositive

Cet élément n'a pas d'instructions

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

  • Element selector
  • Class selector

(zie ook w3schools.com/css)

Slide 27 - Diapositive

Cet élément n'a pas d'instructions

CSS Element selector?
Dit zijn alle HTML tags. 

(zie ook w3schools.com/css)
Bijvoorbeeld in HTML <p> paragraaf </p> wordt in css

Slide 28 - Diapositive

Cet élément n'a pas d'instructions

CSS Class selector?
Dit zijn zelf verzonnen namen. 

(zie ook w3schools.com/css)
Bijvoorbeeld in HTML <p class="style"> paragraaf </p> wordt in css

Slide 29 - Diapositive

Cet élément n'a pas d'instructions

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.

Slide 30 - Diapositive

Cet élément n'a pas d'instructions

HTML document-flow?
HTML elementen worden standaard op elkaar geplaatst en naast elkaar gelegd.

Slide 31 - Diapositive

Cet élément n'a pas d'instructions

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

Slide 32 - Diapositive

Cet élément n'a pas d'instructions

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)

Slide 33 - Diapositive

Cet élément n'a pas d'instructions

Werken aan opdracht
De opdracht staat klaar in teams 

Slide 34 - Diapositive

Cet élément n'a pas d'instructions

Samenvatting
klasikaal bespreken

Slide 35 - Diapositive

Cet élément n'a pas d'instructions