WEEK 3 - INFORMATICA

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

This lesson contains 35 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 90 min

Items in this lesson

STARTKLAAR!
Tellie in zakkie

Slide 1 - Slide

Startklaar zitten.
week 3 les 1

Slide 2 - Slide

This item has no instructions

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

Slide 3 - Slide

This item has no instructions

Voorkennis activeren

Slide 4 - Slide

This item has no instructions

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

Slide 5 - Drag question

This item has no 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

This item has no 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

This item has no 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

This item has no 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 - Slide

This item has no instructions

BLOCK & INLINE

Slide 10 - Slide

This item has no instructions

Concept Block & Inline HTML
Block
Inline

Slide 11 - Slide

This item has no instructions

HTML tags Block & Inline
Block
Inline

Slide 12 - Slide

This item has no instructions

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

Slide 13 - Slide

This item has no 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 - Slide

This item has no instructions

Kennis maken met CSS

Slide 15 - Slide

This item has no instructions

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

Slide 16 - Slide

This item has no 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 - Slide

This item has no instructions

Samenvatting
Klasikaal invullen met leerlingen

Slide 18 - Slide

This item has no instructions

week 3 les 2

Slide 19 - Slide

This item has no instructions

STARTKLAAR!
Tellie in zakkie

Slide 20 - Slide

Startklaar zitten.
Voorkennis activeren

Slide 21 - Slide

This item has no instructions

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

Slide 22 - Drag question

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

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

Slide 25 - Slide

This item has no instructions

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

Slide 26 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

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

Slide 31 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

Werken aan opdracht
De opdracht staat klaar in teams 

Slide 34 - Slide

This item has no instructions

Samenvatting
klasikaal bespreken

Slide 35 - Slide

This item has no instructions