Qu'est-ce que LessonUp
Rechercher
Canaux
Connectez-vous
S'inscrire
‹
Revenir à la recherche
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
4V Informatica 19 september
1 / 41
suivant
Slide 1:
Diapositive
Informatica
WO
Studiejaar 4
Cette leçon contient
41 diapositives
, avec
quiz interactifs
et
diapositives de texte
.
La durée de la leçon est:
120 min
Commencer la leçon
Partager
Imprimer la leçon
Éléments de cette leçon
4V Informatica 19 september
Slide 1 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Quiz
Welke kleur heeft tekst in de p in de div?
Slide 7 - Diapositive
Welke tekstkleur heeft de p in de div?
A
blauw
B
oranje
C
groen
D
rood
Slide 8 - Quiz
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 - Quiz
Verbinding html + CSS
Slide 10 - Diapositive
selector { property: value; }
Slide 11 - Diapositive
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 - Diapositive
CSS: 1x opmaak voor meerdere elementen!!!
Slide 13 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
Oplossing: Classnames
Slide 18 - Diapositive
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 - Diapositive
CSS: width, height, border, margin, padding
Slide 20 - Diapositive
CSS: width, height, border, margin, padding
Slide 21 - Diapositive
CSS: o.a. border, margin, padding
Slide 22 - Diapositive
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 - Diapositive
Opdracht: Margin, padding, border
Slide 24 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
Stap 1.2
Dit ziet er in de praktijk zo uit
Slide 30 - Diapositive
Stap 1.3
Lelijke witte randjes weghalen
Slide 31 - Diapositive
Stap 2
Header stylen. In dit geval: wat hoogte geven
Slide 32 - Diapositive
Stap 3.1
Content en navigatie. Als eerste zorgen we ervoor dat deze blokken naast elkaar komen in plaats van onder elkaar.
Slide 33 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
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 - Diapositive
Hoe vond je deze les?
😒
🙁
😐
🙂
😃
Slide 41 - Sondage
Plus de leçons comme celle-ci
HTML + CSS les 5: ontwerp website + Trello + devtools + PO
Août 2023
- Leçon avec
22 diapositives
Informatica
WO
Studiejaar 4
HTML + CSS les 3: introductie CSS
Avril 2023
- Leçon avec
28 diapositives
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS 06 - 5.1 tmt 5.7 - (Standaard)blokken, nesten elementen, margin padding afmetingen blok
Septembre 2023
- Leçon avec
24 diapositives
Informatica
WO
Studiejaar 4,5
HTML & CSS: Blokkendoos
Octobre 2024
- Leçon avec
34 diapositives
Informatica
Middelbare school
havo, vwo
Leerjaar 4
HTML en CSS - gebruik maken van classes
Août 2022
- Leçon avec
17 diapositives
Informatica
Middelbare school
vwo
Leerjaar 4
CSS - gebruik maken van classes
Septembre 2017
- Leçon avec
19 diapositives
Informatica
Middelbare school
vwo
Leerjaar 4
HTML & CSS: Opmaak met CSS
Septembre 2024
- Leçon avec
21 diapositives
Informatica
Middelbare school
havo, vwo
Leerjaar 4
08b - CSS - margin en padding
Novembre 2023
- Leçon avec
10 diapositives
ICT
MBO
Studiejaar 1,2