Wat is LessonUp
Zoeken
Kanalen
Inloggen
Registreren
‹
Terug naar zoeken
Webdesign - Les 3 (23/24): CSS
Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 24
volgende
Slide 1:
Tekstslide
Informatica
Middelbare school
havo, vwo
Leerjaar 4
In deze les zitten
24 slides
, met
tekstslides
.
Lesduur is:
30 min
Start les
Bewaar
Deel
Printen
Onderdelen in deze les
Introductie HTML
Antje Roestenburg
a.roestenburg@minkema.nl
Slide 1 - Tekstslide
Vorige les:
Fundament: HTML & CSS (A2)
* t/m hoofdstuk 4 (Multimedia)
* vraag 1 t/m 3 van hoofdstuk 4.9
YouTube:
* Kijk t/m video 4 (zie Google Classroom)
Slide 2 - Tekstslide
Herhaling:
Structuur van een webpagina
Slide 3 - Tekstslide
Herhaling:
Structuur van een HTML element
Slide 4 - Tekstslide
Hoe werkt CSS?
Een stylesheet maak je in een
eigen bestand
.
Je slaat het bestand op met de naam
style.css
.
Je
verwijst in al je HTML-pagina's
naar de stylesheet.
(zie ook
w3schools.com/css
)
Slide 5 - Tekstslide
H
yper
T
ext
M
arkup
L
anguage
INHOUD & STRUCTUUR
(paragraph, kopje, links, etc)
C
ascading
S
tyle
S
heets
OPMAAK
(kleur, lettertype, plaatsing, etc.)
Slide 6 - Tekstslide
Waarom CSS?
Alle opmaak van de website in
één
bestand.
Een kleine verandering wordt
gelijk
doorgevoerd op alle
pagina's van je
website.
Maakt de HTML-code een stuk
overzichtelijker.
Slide 7 - Tekstslide
Hoe werkt CSS?
Maak een
nieuw bestand
in je editor.
Sla het nieuwe bestand op als
CSS formaat
(b.v.
opmaak.css
).
Verwijs in al je HTML-pagina's
naar het stylesheet.
Slide 8 - Tekstslide
Hoe werkt CSS?
(zie ook w3schools.com/css)
Slide 9 - Tekstslide
Hoe werkt CSS?
<html>
<head>
<title>Dit is de titel van pagina 1</title>
<link rel="stylesheet" type="text/css" href="opmaak.css">
</head>
<body>
<p>Dit is de eerste alinea van pagina 1</p>
</body>
</html>
Slide 10 - Tekstslide
(zonder CSS)
h1 {color: yellow;}
p {color: #e88300;}
Voorbeeld 1
Slide 11 - Tekstslide
Voorbeeld 2
body {
background-color: lightblue;
}
h1 {
color: #88cc00;
}
p {
font-family: verdana;
font-size: 18px;
}
Slide 12 - Tekstslide
Opmaak definiëren met selectors
Tag selector (HTML tag)
h2
{
color: blue;
font-style: italic;
}
ID selector (een per pagina)
#footer {
color: red;
}
Class
selector (meerdere)
.article {
background-color: #cccccc;
}
Slide 13 - Tekstslide
Van ontwerp naar HTML & CSS
Slide 14 - Tekstslide
Ontwerp
Bij het ontwerpen van een website moet
je vaak denken in de vorm van tabellen.
Als je een ruwe schets maakt van een website dan
bestaat een website vaak uit verschillende blokken.
Slide 15 - Tekstslide
Ontwerp
Slide 16 - 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>
<header>
...
</header>
<div>...
</div>
<footer>...
</footer>
1. Grove blokken:
Slide 17 - Tekstslide
Layout
Tips:
Wat is belangrijk? Staat dat duidelijk in beeld?
Gebruik je
herkenbare patronen
?
Ontwerp alleen voor wat je nodig hebt!
<aside>
<article>
<nav>
<div>
<header>
<footer>
<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
2. Waar nodig
opbreken in
kleinere blokken:
Slide 18 - Tekstslide
CSS grid
layout in HTML & CSS
Slide 19 - Tekstslide
Voorbeeld: Layout
Slide 20 - Tekstslide
HTML
CSS
<div id="grid-container">
<div
id="kop"
>
De kop
</div>
<div
id="midden"
>
Het midden
</div>
<div
id="voet"
>
De voet
</div>
</div>
#kop
{
grid-area: kop;
}
#midden
{
grid-area: midden;
}
#voet
{
grid-area: voet;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop
'
'
midden
'
'voet';
}
Slide 21 - Tekstslide
Grid areas
Grid container
#kop {
grid-area:
kop
;
}
#kopafbeelding {
grid-area:
kopafbeelding
;
}
#midden {
grid-area:
midden
;
}
#middenlinks {
grid-area:
links
;
}
#middenrechts {
grid-area:
rechts
;
}
#voet {
grid-area:
voet
;
}
#grid-container {
display: grid;
grid-template-areas:
'
kop kop
kopafbeelding
'
'
links
midden
rechts
'
'
voet voet voet
';
}
kop
kop
kopafbeelding
links
midden
rechts
voet
voet
voet
Slide 22 - Tekstslide
Afstand tussen grid-items
Drie mogelijkheden:
grid-column-gap
grid-row-gap
grid-gap
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Slide 23 - Tekstslide
Aan de slag:
Fundament: HTML & CSS (A2)
* t/m hoofdstuk 5 (Werken met blokken)
* vraag 1 van hoofdstuk 5.12
W3Schools
* CSS Grid Layout Module (
w3schools.com/css/css_grid.asp
)
Slide 24 - Tekstslide
Meer lessen zoals deze
Webdesign (6: CSS Grid)
Januari 2023
- Les met
15 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
6 HTML: Lay-outs
Januari 2024
- Les met
18 slides
04 - CSS - selectoren
Oktober 2023
- Les met
15 slides
ICT
MBO
Studiejaar 1,2
2 HTML: CSS
Januari 2024
- Les met
17 slides
02 - CSS - selectoren
April 2024
- Les met
15 slides
ICT
MBO
Studiejaar 1-4
HTML + CSS les 4: selectors + margins + ontwerp + flexbox
Augustus 2023
- Les met
41 slides
Informatica
WO
Studiejaar 4
Les4 - CSS Selectoren: HTML Elementen Aanspreken
Augustus 2024
- Les met
22 slides
Applicatie- en mediaontwikkelaar
MBO
Studiejaar 1
HTML & CSS: Blokkendoos
Oktober 2024
- Les met
34 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4