Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
4V Informatica 19 september
1 / 41
volgende
Slide 1:
Tekstslide
Informatica
WO
Studiejaar 4
In deze les zitten
41 slides
, met
interactieve quizzen
en
tekstslides
.
Lesduur is:
120 min
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
4V Informatica 19 september
Slide 1 - Tekstslide
Lid worden van Lessonup-klas
Ga naar www.lessonup.app
Gebruik code:
kbdzq
Na de les zijn de presentaties daar terug te kijken
Slide 2 - Tekstslide
Na de les kun je...
Classes (en id's) gebruiken voor de opmaak van specifieke elementen;
werken met margin en padding voor de positie van je elementen ten opzichte van elkaar;
een basis-ontwerp voor een website opstellen in blokken en dat uitvoeren m.b.v. flexbox.
Slide 3 - Tekstslide
Herhaling aanpak 4V Informatica
Programmeren leer je door het te doen;
Veel moet je daarbij zelf ontdekken door de uitleg in Fundament of elders te lezen en uit te proberen;
Loop je vast, vraag om hulp bij je buurmens of bij mij.
Je hebt relatief veel vrijheid, maar
wacht niet totdat ik zeg dat je iets moet doen;
Uiteindelijk moet je een eigen website opleveren: verdiep je nu alvast goed in de basis.
Slide 4 - Tekstslide
Terugblik vorige les
Basis van een website is html-bestand (of meerdere...): i
nhoud van website moet in HTML-elementen;
HTML-elementen hebben opening- en closing-tags
Styling website door apart css-bestand en link hiernaar op te nemen in de head van je html-document
In CSS-bestand per selector/ element styling aangeven:
selector { property: value; }
color
voor kleur lettertype
background-color/ background-image
voor achtergrondkleur of afbeelding
font-weight/ font-style/ font-family
text-decoration: none/ underline/ overline / line-through;
text-align: left/ right/ center;
Slide 5 - Tekstslide
Je wilt alle items in een ongeordende lijst tekstkleur groen geven. Hoe doe je dat?
A
li { color: green;}
B
ul { color: green;}
C
ol { background-color: green;}
D
table { color: green;}
Slide 6 - Quizvraag
Welke kleur heeft tekst in de p in de div?
Slide 7 - Tekstslide
Welke tekstkleur heeft de p in de div?
A
blauw
B
oranje
C
groen
D
rood
Slide 8 - Quizvraag
Hoe maak je de tekstkleur van alle p en h1-elementen aqua?
A
p {color: aqua;} h1 {color: aqua;}
B
p, h1 {color: aqua;}
C
p + h1 {color: aqua;}
D
color (p, h1) = aqua;
Slide 9 - Quizvraag
Verbinding html + CSS
Slide 10 - Tekstslide
selector { property: value; }
Slide 11 - Tekstslide
CSS: o.a. kleur, lettertype, achtergrond
p {
font-size: 32px;
color: white;
background-color: #009;
font-family: Verdana;
font-weight: bold;
font-style: italic;
text-align: center;
}
Slide 12 - Tekstslide
CSS: 1x opmaak voor meerdere elementen!!!
Slide 13 - Tekstslide
Deze groen
Deze rood
Classnames
Bekijk de html
Hoe kan je ervoor zorgen dat de ene li groen wordt onderstreept maar de andere rood?
Slide 14 - Tekstslide
Deze groen
Deze rood
Classnames
Oplossing?
De li kunnen we groen maken door deze css te gebruiken:
Maar dan worden alle <li> elementen groen..
Oplossing!
gebruik een classname! Of twee!
Slide 15 - Tekstslide
Deze groen
Deze rood
Classnames: in html: class = "naam" / in css: .naam
Classnames kun je eindeloos hergebruiken!
Het is nu heel makkelijk om alle
belangrijke tekst groen te maken. Je
voegt in de html simpelweg de classname toe en de rest gebeurt vanzelf!
Slide 16 - Tekstslide
Probeer met de basiscode in
Replit
de hiernaast afgebeelde styling van de linkjes en bullets na te maken.
Werk daarvoor met classnames...
Inleveren via Replit over ongeveer 10 minuten
Opdracht
Slide 17 - Tekstslide
Oplossing: Classnames
Slide 18 - Tekstslide
Dan nog even dit
In Fundament en de tutorials van htmldog leer je dat je classes en id's kan gebruiken.
Het gebruik van id's gaan wij niet doen. Een id gebruik je voor andere dingen..
Slide 19 - Tekstslide
CSS: width, height, border, margin, padding
Slide 20 - Tekstslide
CSS: width, height, border, margin, padding
Slide 21 - Tekstslide
CSS: o.a. border, margin, padding
Slide 22 - Tekstslide
Opdracht: Margin, padding, border
Lees
Fundament
paragraaf 5.5, 5.6 en 5.7;
Zorg voor styling van het template in
Replit
; (Margins en padding)
Geef het article-element een breedte van 400px en een margin rondom van 20px en een padding links en rechts van 10px en onder en boven van 20px;
Geef het h3-element een padding en margin rondom van 5px;
Geef de p-elementen aan de bovenkant een margin van 0px, aan de onderkant een margin van 5px en links en rechts 10px en rondom een padding van 10px;
Geef het article-element een zwarte, dotted border van 3px;
Geef het h3-element een rode, solide border van 2px;
Geef de p-elementen een blueviolet, solide border van 1px;
Slide 23 - Tekstslide
Opdracht: Margin, padding, border
Slide 24 - Tekstslide
Van ontwerp naar html
Je kan een
semantisch
correcte
html
structuur bouwen met een
header
,
footer
en
content
elementen
Je kan deze elementen
visueel positioneren
zodat het overeen komt met het
ontwerp
dat je op papier hebt gemaakt
Slide 25 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
Gebruik echte teksten!
Zo kan een schets eruit zien
Slide 26 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
Stel, je hebt een layout, maar hoe begin je nou?
In (ongeveer) 4 stappen:
Juiste html schrijven
Header styling
Content en navigatie styling
Footer styling
Slide 27 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<div>
<footer>
Stap 1.1
Opbreken grove blokken
Slide 28 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<header>
<article>
<footer>
<nav>
<aside>
<div>
Stap 1.2
Waar nodig de blokken opbreken in blokken
Slide 29 - Tekstslide
Stap 1.2
Dit ziet er in de praktijk zo uit
Slide 30 - Tekstslide
Stap 1.3
Lelijke witte randjes weghalen
Slide 31 - Tekstslide
Stap 2
Header stylen. In dit geval: wat hoogte geven
Slide 32 - Tekstslide
Stap 3.1
Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar.
Slide 33 - Tekstslide
Flexbox
Plaats je elementen in een 'container' of 'wrapper'
Maak van je container een flexbox via
display: flex;
Geef de juiste richting aan met
flex-direction: row/ column
Gebruik eventueel
justify-content
en
align-items
om de elementen in je container te uit te lijnen;
Oefenen met flexbox via
flexbox froggy
Slide 34 - Tekstslide
Stap 3.2
We geven het nav en article element een width. vw staat voor ViewWidth = breedte van het scherm betekent. 20vw is dus 20% van breedte van scherm.
Slide 35 - Tekstslide
Stap 4
Footer positioneren door deze fixed te positioneren. De footer mag ook wat meer hoogte gebruiken. En wat doet position:fixed eigenlijk?
Slide 36 - Tekstslide
Opdracht: flexbox
Maak het voorbeeld van Fundament 5.12 na via het template in
Replit
;
Kijk goed hoe de containers zijn geplaatst;
Voeg in CSS op de juiste plekken
display: flex;
en
flex-direction: row;
of
flex-direction: column
; toe...
Pas zonodig ook
margin
en
padding
aan;
Klaar? Oefen met
flexbox-froggy
;
timer
10:00
Slide 37 - Tekstslide
Layout maken
Verdeel je layout in drie "blokken". Gebruik daarvoor eventueel deze les
Header:
het menu? Een mooi plaatje?
Article
: het verhaal: tekst, plaatjes, filmpjes etc..
Footer
: titel, plaatje etc..
Slide 38 - Tekstslide
Vandaag: opmaak toevoegen aan je website
Bestudeer de uitleg over CSS in paragraaf A.4 Opmaak met
Maak de code na/ Kopieer de code in je eigen
bestand
;
Doe dit in onze team-omgeving in
Replit
(zie instructies in
Classroom
);
Ga verder met de opdracht in Fundament bij paragraaf 4.9 (gebruik daarvoor de
template
op Replit)
Klaar? Lever het in via Replit;
Ga verder met
htmldog
(Beginner Tutorial);
Slide 39 - Tekstslide
Huiswerk 26/9
Bestudeer Fundament A.2: 5.1 t/m 5.8
Maak opdr. 5.12 in Fundament m.b.v. Flexbox en template in Replit
Slide 40 - Tekstslide
Hoe vond je deze les?
😒
🙁
😐
🙂
😃
Slide 41 - Poll
Meer lessen zoals deze
HTML + CSS les 5: ontwerp website + Trello + devtools + PO
Augustus 2023
- Les met
22 slides
Informatica
WO
Studiejaar 4
HTML + CSS les 3: introductie CSS
April 2023
- Les met
28 slides
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS 06 - 5.1 tmt 5.7 - (Standaard)blokken, nesten elementen, margin padding afmetingen blok
September 2023
- Les met
24 slides
Informatica
WO
Studiejaar 4,5
HTML & CSS: Blokkendoos
Oktober 2024
- Les met
34 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4
HTML en CSS - gebruik maken van classes
Augustus 2022
- Les met
17 slides
Informatica
Middelbare school
vwo
Leerjaar 4
CSS - gebruik maken van classes
September 2017
- Les met
19 slides
Informatica
Middelbare school
vwo
Leerjaar 4
08b - CSS - margin en padding
November 2023
- Les met
10 slides
ICT
MBO
Studiejaar 1,2
HTML & CSS: Opmaak met CSS
September 2024
- Les met
21 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4