3. CSS Box Model

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

1 / 18

Slide 1: Tekstslide

Software Developer [WEB_A]MBOStudiejaar 1

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

Lesduur is: 180 min

Onderdelen in deze les

WEB

Webdevelopment-I (WDV-I)

Les 3 / Week 3

CSS Box Model

Slide 1 - Tekstslide

Tussentijds meetmoment.

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

Slide 2 - Tekstslide

Klaar met het meetmoment?

Slide 3 - Quizvraag

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

Slide 4 - Open vraag

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

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

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

Slide 8 - Tekstslide

Samen CSS toevoegen aan de <nav>

(zie pagina 25 in moduleboekje WDV-I)

Slide 9 - Tekstslide

Browserinstellingen wissen

Slide 10 - Tekstslide

Opdracht 3.2: CSS toepassen

Slide 11 - Tekstslide

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

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

Met welk element kan ik een externe stylesheet toevoegen?

een <a>-element

een <meta>-element

een <link>-element

een <head>-element

Slide 14 - Quizvraag

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

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

Slide 16 - Open vraag

Hoe maak ik in HTML een ordered list?

Slide 17 - Open vraag

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.