WEEK 3 - INFORMATICA

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

In deze les zitten 35 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

STARTKLAAR!
Tellie in zakkie

Slide 1 - Tekstslide

Startklaar zitten.
week 3 les 1

Slide 2 - Tekstslide

Deze slide heeft geen instructies

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

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Voorkennis activeren

Slide 4 - Tekstslide

Deze slide heeft geen instructies

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

Slide 5 - Sleepvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Quizvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

BLOCK & INLINE

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Concept Block & Inline HTML
Block
Inline

Slide 11 - Tekstslide

Deze slide heeft geen instructies

HTML tags Block & Inline
Block
Inline

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Slide 13 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Kennis maken met CSS

Slide 15 - Tekstslide

Deze slide heeft geen instructies

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

Slide 16 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
Klasikaal invullen met leerlingen

Slide 18 - Tekstslide

Deze slide heeft geen instructies

week 3 les 2

Slide 19 - Tekstslide

Deze slide heeft geen instructies

STARTKLAAR!
Tellie in zakkie

Slide 20 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 21 - Tekstslide

Deze slide heeft geen instructies

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

Slide 22 - Sleepvraag

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 25 - Tekstslide

Deze slide heeft geen instructies

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

Slide 26 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

CSS Element selector?
Dit zijn alle HTML tags. 

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

Slide 28 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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

Slide 31 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

Werken aan opdracht
De opdracht staat klaar in teams 

Slide 34 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
klasikaal bespreken

Slide 35 - Tekstslide

Deze slide heeft geen instructies