3. CSS Box Model

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

1 / 18

Slide 1: Slide

Software Developer [WEB_A]MBOStudiejaar 1

This lesson contains 18 slides, with interactive quizzes and text slides.

Lesson duration is: 180 min

Items in this lesson

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

Slide 1 - Slide

Tussentijds meetmoment.

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

Slide 2 - Slide

Klaar met het meetmoment?

Slide 3 - Quiz

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

Slide 4 - Open question

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 - Slide

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 - Slide

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 - Slide

Slide 8 - Slide

Samen CSS toevoegen aan de <nav>

(zie pagina 25 in moduleboekje WDV-I)

Slide 9 - Slide

Browserinstellingen wissen

Slide 10 - Slide

Opdracht 3.2: CSS toepassen

Slide 11 - Slide

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 - Drag question

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 - Slide

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

Slide 16 - Open question

Hoe maak ik in HTML een ordered list?

Slide 17 - Open question

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.