Cette leçon contient 34 diapositives, avec quiz interactifs, diapositives de texte et 6 vidéos.
La durée de la leçon est: 45 min
Éléments de cette leçon
Domein A2: HTML & CSS Blokkendoos
Slide 1 - Diapositive
Leerdoelen
Na deze les kun je uitleggen
Wat de verschillen zijn tussen de 2 belangrijkste display-types in HTML: block en inline elementen
Waar div- en span-elementen toe dienen
Wat class- en id-selectors zijn
Hoe het box-model in de basis werkt
Na deze les kun je
De structuur en indeling van je website steeds beter vormgeven.
Slide 2 - Diapositive
Blokkenontwerp
Een goed ontwerp begint met een goede structuur voor elke pagina.
Een webpagina is opgebouwd uit blokken. Deze blokken vormen de basis voor de structuur.
Slide 3 - Diapositive
Het semantische web
Standaardblokken (semantische blokken) geven via hun naam aan waarvoor ze dienen.
Slide 4 - Diapositive
Semantische elementen
Kop: <header>
Navigatiebalk: <nav>
Tekst: <article>
Voettekst: <footer>
Andere blokken: <div>
Slide 5 - Diapositive
Float
Zonder het gebruik van floating worden alle geneste elementen in het article-element onder elkaar gezet.
Slide 6 - Diapositive
Float
Door float: left; te gebruiken wordt het plaatje links uitgelijnd. De tekst loopt om het plaatje heen waarbij rekening wordt gehouden met de width en margin van het plaatje.
Door float: right; te gebruiken wordt een plaatje rechts uitgelijnd.
Slide 7 - Diapositive
Slide 8 - Vidéo
Kies een website layout
Voordat je begint je website te bouwen is het verstandig
Een inline element kan nooit eenblock element bevatten, andersom kan wel!
Slide 13 - Diapositive
Div-element
Het <div>-element wordt gebruikt als container voor andere HTML-elementen.
Slide 14 - Diapositive
Div-element
Hiermee kun je eigenschappen voor een hele container instellen, bijv.:
Een <div>-element dat niet 100% breed is kun je centreren door de CSS-margin-eigenschap in te stellen op automatisch
Slide 15 - Diapositive
Span-element
Een <span>-element is een inline container. Het is bedoeld om tekst op te maken.
Een <span>-element neemt de breedte van zijn inhoud over en start niet op een nieuwe regel. Het wordt gebruikt in block elementen.
Slide 16 - Diapositive
Sleep elke term naar de meest passende hotspot
timer
0:45
block element
<span>
inline element
<a>
<div>
<p>
<h1>
<strong>
Slide 17 - Question de remorquage
Weet je nog? Type-selectors
body, h1 en p zijn voorbeelden vantype-selectors.(ook wel tag-selectorsgenoemd).Je gebruikt ze om alle elementen op een pagina te selecteren aan de hand van hun tagnaam.
Slide 18 - Diapositive
Slide 19 - Vidéo
Class-selector (.)
Wordt gedefinieerd in CSS met een . (dot of punt)
Wordt gekoppeld aan een element met het class-attribuut
Meerdere HTML-elementen kunnen dezelfde klasse delen.
Slide 20 - Diapositive
Slide 21 - Vidéo
Id-selector (#)
Wordt gedefinieerd in CSS met een #(hashtag of hekje)
Wordt gekoppeld aan een element met het id-attribuut
Slechts 1 HTML-element per document kan een bepaald id bevatten.
Slide 22 - Diapositive
Welke van de onderstaande stijldeclaraties heeft betrekking op een class selector?
timer
0:30
A
p { color: red; }
B
.spacious { margin: 2em; }
C
#demo { border: red 2px solid; }
D
a[title] { color: purple; }
Slide 23 - Quiz
Bekijk de code hiernaast.
Wat zie je?
timer
1:00
A
Een witte koptekst op een gele achtergrond.
B
Een blauwe koptekst op een witte achtergrond.
C
Een gele koptekst op een witte achtergrond.
D
Een rode koptekst op een witte achtergrond.
Slide 24 - Quiz
Feast on CSS-selectors!
Er valt nog veel meer te leren over CSS-selectors!
Oefenen met selectors? Speel CSS-diner!
https://flukeout.github.io/
Slide 25 - Diapositive
Slide 26 - Vidéo
CSS Box model
Andere manieren dan de breedte (width) van een division om de lay-out en de positionering van HTML-elementen te beïnvloeden zijn:
Margin
Padding
Border
Slide 27 - Diapositive
Weet je nog? padding
bepaalt de afstand die vrijgehouden wordt tussen de inhoud en de verschillende randen (border) van een element
Slide 28 - Diapositive
Weet je nog? margin
bepaalt de afstand van de rand van een element tot de rand van het parent element of de rand van een aangrenzend element
Slide 29 - Diapositive
Division in een division
Alle HTML-elementen hebben margin en padding, bijv. ook <p> of <h1>
Bij elementen in een element moet je rekening houden met de margin en padding van beide elementen
Slide 30 - Diapositive
Sleep elke CSS-eigenschap naar de juiste hotspot
timer
0:45
margin
padding
border
content
Slide 31 - Question de remorquage
Slide 32 - Vidéo
Opdracht (thuis afmaken)
Maak de volgende aanpassing aan de rainbow-website:
Voeg kleur en opmaak toe met een of meer id- en class-selectors
Voeg een border en een margin rondom van 10 pixels en een padding van boven en onder 12 pixels en links en rechts 6 pixels aan je plaatje toe
Voeg een container-element toe waarin een kopje en een tekst zitten. Geef deze container een andere achtergrondkleur en een breedte van 300 pixels. Lijn hem dan in het midden uit.
Klaar? Lever je website in via Google Classroom (met SHARE en COPY LINK)
Slide 33 - Diapositive
Kun je de structuur en indeling van je website nu beter bepalen?