Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Bezoek de website
‹Terug naar zoeken

09 - CSS - width en height

De Kracht van Width en Height
1 / 11
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1,2

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

De Kracht van Width en Height

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoel
Aan het einde van de les kun je de properties width en height in CSS gebruiken om de afmetingen van elementen op een webpagina aan te passen.

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over de properties width en height in CSS?

Slide 3 - Woordweb

Deze slide heeft geen instructies

Introductie
CSS-properties width en height worden gebruikt om de breedte en hoogte van elementen op een webpagina aan te passen.

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Width
De width property wordt gebruikt om de breedte van een element aan te passen. Het kan worden ingesteld als een absolute waarde, zoals pixels, of als een relatieve waarde, zoals percentages.
div {
    width: 25%;
}
div {
    width: 100px;
}

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Height
De height property wordt gebruikt om de hoogte van een element aan te passen. Het kan ook worden ingesteld als een absolute waarde of als een relatieve waarde.
div {
    height: 100px;
}
div {
    height: 25%;
}

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Extra Eigenschappen
Naast width en height zijn er nog andere eigenschappen die invloed hebben op de grootte van elementen, zoals padding en margin.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Oefening
Maak een webpagina met een afbeelding en stel de width en height properties in om de grootte van de afbeelding aan te passen.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Praktische Tips
Bij het instellen van width en height is het belangrijk om rekening te houden met responsief ontwerp en het behoud van de verhoudingen van elementen.

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
De properties width en height zijn krachtige tools om de grootte van elementen op een webpagina aan te passen. Door ze effectief te gebruiken, kun je de vormgeving van je website optimaliseren.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open vraag

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.