Hfst 3: Les 5 opmaak

In de klas: 
Log in en zet alles klaar. Gelijk als je in de klas bent. 
1 / 10
next
Slide 1: Slide
MediawijsheidMiddelbare schoolmavo, havo, vwoLeerjaar 2

This lesson contains 10 slides, with interactive quiz and text slides.

time-iconLesson duration is: 50 min

Items in this lesson

In de klas: 
Log in en zet alles klaar. Gelijk als je in de klas bent. 

Slide 1 - Slide

Welkom terug!
Vergeet je niet je portfolio ook te maken?
= typingclub :)
1 april is level 400

Slide 2 - Slide

Scrimba probleem?
- werk steeds weg? 
nodig: nieuw account bij github of google account
Run = druk op file en dan op save
Dan zie je hier de wijzigingen.

Slide 3 - Slide

Status update
A
Ik heb hulp nodig
B
Ik ben bij met al m'n lessen en kan verder werken
C
Ik loop achter maar kan zelf verder

Slide 4 - Quiz

Opmaak: css 
Je hebt verschillende manieren om je opmaak op je website te bepalen.
Intern
extern 
Inline

Slide 5 - Slide

Begin
1. klik in je scrimba op de drie puntjes bij explorer aan de linkerkant.
2. klik op new file
3. voer een titel in die zonder spaties aan elkaar zit en eindigt op .css
bijvoorbeeld mijnstijl.css

Slide 6 - Slide

Voeg toe
Voeg de volgende zin toe in de header van je site.
Hierbij is rel=href gehele bestandsnaam zoals die ook in de zijkant staat van je document. 

Slide 7 - Slide

Orde houden: Div
Met een tabel kan je de verschillende onderdelen van een pagina redelijk positioneren. Helaas
heeft een tabel een aantal beperkingen.
De inhoud bepaalt dus de grootte, niet de tabel.
Deze, en andere, problemen zijn op te lossen door het gebruik van div’s. ‘Div’ staat voor
division. Je deelt hiermee je pagina op in verschillende delen die een vaste grootte en plaats
(kunnen) hebben, wel of geen scrollbalk, aparte lettertypen, ….
De opmaak (stijl) van een div gebeurt bijna altijd met css.
Omdat er meestal meerdere div’s op één pagina staan, krijgen ze allemaal een aparte naam. Zo kan je ze uit elkaar houden. 
(‘id’ of ‘class’).
Voorbeeld:
<div id="div1" style="position:absolute; left:100px; top:200px;
width:300px; height:300px; background-color:#ffff00; overflow:auto;">
Hier staat de inhoud van de div
</div>
Je ziet dat de volledig opmaak in het attribuut “style” staat.

Slide 8 - Slide

Nu je dit hebt gezien komt de uitdaging
https://www.w3schools.com/css/css_howto.asp 
Ga naar de bovenstaande link en probeer zaken uit van CSS.
Heb je vragen stel ze gerust. Begin bij bij de simpele dingen als achtergronden, text en nav menu.
Wanneer je vastloopt laat je dit weten. 

Slide 9 - Slide

Waar moet je je nu op voorbereiden?
Dat je met behulp van al deze lessen een site kan bouwen. 
Wanneer je de laag steeds moeilijker maakt en meer toe kan voegen zal je cijfer hoger worden. 

Slide 10 - Slide