HTML & CSS: Blokkendoos

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4

Domein A2: HTML & CSS
Blokkendoos

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.

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.

Het semantische web

Standaardblokken
(semantische blokken)
geven via hun naam aan
waarvoor ze dienen.

Semantische elementen

 Kop: <header>

 Navigatiebalk: <nav>

 Tekst: <article>

 Voettekst: <footer>

 Andere blokken: <div>

Float

Zonder het gebruik van floating worden alle geneste elementen in het article-element onder elkaar gezet.

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.

Kies een website layout

Voordat je begint je website
te bouwen is het verstandig

eerst een standaard layout
uit te kiezen. 

Bekijk hiervoor de blogpost op:

https://www.101computing.net/
html-website-layout/

Hoe nu verder?

• Maak de eindopdracht in Fundament (https://fundament-online.nl/leeromgeving/content.php?id=54210)
• Leer meer over selectors met CSS Diner (https://flukeout.github.io/)
• Bekijk de webpage layout tutorial  (https://www.101computing.net/html-website-layout/) 
• Gebruik de HTML- en CSS-secties op sites als w3schools.com om specifieke informatie te krijgen

Block element

• Neemt alle beschikbare ruimte in van zijn container-element (ook wel parent-element genoemd)
• Start op een nieuwe regel en krijgt wat extra margin
• Voorbeelden: <p>, <div>, <table>, <h1>-<h6>, <ol>, <ul>

Inline element

• Neemt niet meer ruimte in als noodzakelijk (zijn inhoud).
• Start niet op een nieuwe regel en krijgt geen extra margin.
• Voorbeelden: <span>, <a>, <i>, <em>, <img>, <b>, <strong>

• Een inline element kan nooit een block element bevatten, andersom kan wel!

Div-element

• Het <div>-element wordt gebruikt als container voor andere HTML-elementen.

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

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.

Sleep elke term naar de meest passende hotspot

block element

<span>

inline element

<a>

<div>

<p>

<h1>

<strong>

Weet je nog? Type-selectors

body, h1 en p zijn voorbeelden van type-selectors. (ook wel tag-selectors genoemd). Je gebruikt ze om alle elementen op een pagina te selecteren aan de hand van hun tagnaam.

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.

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.

Welke van de onderstaande stijldeclaraties heeft betrekking
op een class selector?

1. p { color: red; }
2. .spacious { margin: 2em; }
3. #demo { border: red 2px solid; }
4. a[title] { color: purple; }

Bekijk de code
hiernaast.

Wat zie je?

1. Een witte koptekst op een gele achtergrond.
2. Een blauwe koptekst op een witte achtergrond.
3. Een gele koptekst op een witte achtergrond.
4. Een rode koptekst op een witte achtergrond.

Feast on CSS-selectors!

Er valt nog veel meer te leren over CSS-selectors!

Oefenen met selectors? Speel CSS-diner!

• https://flukeout.github.io/

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
  

Weet je nog? padding

bepaalt de afstand die vrijgehouden wordt tussen de inhoud en de verschillende randen (border) van een element

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

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

Sleep elke CSS-eigenschap naar de juiste hotspot

margin

padding

border

content

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)

Kun je de structuur en indeling van je website nu beter bepalen?

😒🙁😐🙂😃