3. CSS Box Model

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

1 / 18

Slide 1: Diapositive

Software Developer [WEB_A]MBOStudiejaar 1

Cette leçon contient 18 diapositives, avec quiz interactifs et diapositives de texte.

La durée de la leçon est: 180 min

Éléments de cette leçon

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

Slide 1 - Diapositive

Tussentijds meetmoment.

Ga naar itslearning --> Blok A (2023-sep) --> Bronnen --> Modules --> WEB-WDV-I --> Lesmateriaal--> Week 3 --> Meetmoment week 3

Slide 2 - Diapositive

Klaar met het meetmoment?

Slide 3 - Quiz

Lever hier een screenshot in van je gemaakte inleveropdracht H2: menukaart Smartcafé

Slide 4 - Question ouverte

CSS Box Model

Alle HTML elementen kunnen worden beschouwd als box. Het CSS -box-model is in de basis een box die om ELK html-element heen zit.

Slide 5 - Diapositive

Boxen

Content: datgene wat het element zelf is: de tekst/het plaatje o.i.d.
Padding: ruimte om de content heen die je groter of kleiner kunt maken (bijv. hoe groot je een button maakt).

Border: je content eindigt aan de buitenzijde van de padding met een buitenrand. Die kun je laten zien of niet. Dit noemen we de border.

Margin: zorgt voor ruimte buiten de border. Margin is transparant.

Slide 6 - Diapositive

Properties

Aan één van deze properties kunnen we een of meerdere waarden meegeven waarbij de volgorde is. Bijvoorbeeld:

margin: 10 px 5px 15px 20px; (4 waarden: Top 10px – rechts 5px – onderkant 15px – links 20px)
margin: 10px 5px 15px; (3 waarden: top 10px– rechts en links 5px– onderkant 15px)
margin: 10px 5px; (2 waarden: top en onderkant 10px– rechts en links 5px)
margin: 10px; (alle vier de waarden zijn 10px)

Je kunt ook negatieve waarden meegegeven aan de margin.

We kunnen alle ruimte om een element heen margin/padding of border geven, maar bijvoorbeeld ook alleen de linker-en rechterzijde, met de property ‘margin-left’ of ‘border-top’.

Slide 7 - Diapositive

Slide 8 - Diapositive

Samen CSS toevoegen aan de <nav>

(zie pagina 25 in moduleboekje WDV-I)

Slide 9 - Diapositive

Browserinstellingen wissen

Slide 10 - Diapositive

Opdracht 3.2: CSS toepassen

Slide 11 - Diapositive

Hoe kan ik ervoor zorgen dat mijn tabblad de naam 'Flower Page heeft?

<title>Flower Page</title>

<tab>Flower Page </tab>

<titel>Flower Page</titel>

<naam> Flower Page </naam>

Slide 12 - Quiz

Hoe kan ik mijn gehele header een lettertype 'Verdana' geven en de kleur van de letters op groen?

(

}

)

{

header

font

text-color

Verdana

green

font-family

color

;

Slide 13 - Question de remorquage

Met welk element kan ik een externe stylesheet toevoegen?

een <a>-element

een <meta>-element

een <link>-element

een <head>-element

Slide 14 - Quiz

Opdracht 3.1: wat is het CSS-Box-Model? (bij voorkeur op papier)

- Teken van onderstaande bestaande navigatie een wireframe (tekening). Gebruik hiervoor een leeg A4 en vul de volledige pagina.

- Teken een rechthoek om het <h2>-element en zet er <h2> bij.

- Teken een rechthoek om het <p>-element en zet er <p> bij.

- Teken een rechthoek om alle <a>-elementen samen.

- Onze <a>-elementen zijn los ook elementen.

- Geef met een alternatieve kleur of schuine lijnen ///// aan waar de padding zich bevindt in de <a>-

elementen.

- Zet een pijl naar waar zich de border van de <a>-elementen bevindt.

- Geef alle plaatsen waar je margin ziet aan door het te kleuren. Let op: er is heel veel margin

Slide 15 - Diapositive

Hoe link ik een externe stylesheet aan mijn pagina (je mag cheaten door het even te googlen)

Slide 16 - Question ouverte

Hoe maak ik in HTML een ordered list?

Slide 17 - Question ouverte

Opdracht 3.3: een receptenpagina stylen

Eén van de medewerkers van Smartcafé maakt de lékkerste gerechten in de hele stad. Ze heeft het verzoek gekregen haar recept van ‘Scrambled eggs’ te delen met klanten. Ze wil hiervoor een webpagina gebruiken. De ruwe data heeft ze eerder al uitgewerkt in een pagina. Jou is gevraagd om deze pagina er mooier uit te laten zien. De uitlijning van deze balk is nog niet zo netjes, maar daar komen we tijdens de les ‘Display’ uitgebreider op terug. Als eerst passen we het CSS Box model toe.

In Itslearning --> WDV-I --> Opdrachten --> Inleveropdracht H3 vind je de opdracht voor deze week.

Lever een screenshot in van je browserscherm en je CSS-code.