HTML & CSS Les 3 – Vlakken en afmetingen

CSS – Div

Om een vlakverdeling van je pagina te kunnen maken heb je een html element nodig voor elk vlak. Wij gaan hier het <div> element voor gebruiken. Elke rechthoek op een site bestaat vaak uit één of meerdere divs. Bekijk eens de bron van een willekeurige website: een beetje ingewikkelde pagina bestaat al gauw uit honderden divs. In de visualisatie hierboven (bron) is elk vlak met een lichtblauw randje een <div> element.

Open een HTML van een pagina die je eerder hebt gemaakt. Voeg hier drie <div> elementen toe. Hoe doe je dat? Door letterlijk <div> en </div> om bestaande paragrafen, afbeeldingen of andere inhoud op je pagina te zetten.
Bijvoorbeeld:
```
<div>
    <p>
        Dit is een bestaande paragraaf op je website
    </p>
</div>
```
of
```
<div>
    <img src="kitten.jpg">
</div>
```
of
```
<div>
    <h1>Mijn Kat</h1>
    <p>
        Deze website gaat over mijn kat. Ze heet Snuggles.
    </p>
    <img src="kitten.jpg">
</div>
```
Let op dat alle html-elementen die begonnen worden ná de <div> tag, worden afgesloten vóór de </div> tag. Ze moeten dus volledig binnen het div element zitten. Controleer of dat zo is in jouw code.

Geef elk div element dezelfde class en een verschillend id.

<div class="mijnDivs" id="mijnDiv1">
    ...
</div>
<div class="mijnDivs" id="mijnDiv2">
    ...
</div>
<div class="mijnDivs" id="mijnDiv3">
    ...
</div>

Gebruik de class in CSS op elke div dezelfde achtergrondkleur te geven.
Gebruik een id om één div een background-image te geven.
Experimenteer met de background-size. Bekijk wat het verschil is tussen background-size: cover; en background-size: contain;
Andere relevante CSS-eigenschappen waar je mee kunt experimenteren zijn:
```
background-position
background-repeat
```
Gebruik een id om één div onzichtbaar te maken door het de volgende CSS eigenschap te geven:
```
display: none;
```
Een div onzichtbaar maken lijkt nu nog wat onzinnig, maar op het moment dat we onze site Responsive gaan maken, komen we dit regelmatig tegen.
Als dat gelukt is haal je display: none; weer weg. Die gaan we later pas weer gebruiken.

CSS – Margin, padding en border

Dit hoofdstukje gaat over drie CSS-eigenschappen die gaan over de ruimte om je elementen heen:
• de margin: de ruimte tussen het element (bijvoorbeeld een div) en andere elementen.
• de padding: de ruimte tussen de rand van het element en de inhoud.
• de border: waarmee je de rand van het element een dikte, kleur en lijnstijl kunt geven.

Open deze webpagina. Hier lees je hoe je een rand om een element maakt. Gebruik een id om één div een oranje rand van 3px breed te geven.
Zoek op internet wat de margin en padding properties doen, en experimenteer met deze eigenschappen in combinatie met een div. Ga pas verder als je goed begrijpt wat het verschil is tussen margin en padding.

CSS – Afmetingen

In CSS zijn er verschillende eenheden om maten en lengtes aan te geven, zoals px en%. De keuze van de eenheid is belangrijk, vooral voor een responsive website, omdat we willen dat delen van elementen responsief en flexibel zijn voor de verandering van de apparaten.

Absolute lengte

Absolute eenheden met een vaste lengte zijn letterlijk absolute waarden en zorgen ervoor dat een maat in een bepaalde waarde wordt vastgelegd. Bijvoorbeeld:

cm (centimeters) Niet gebruiken!
mm (millimeters) Niet gebruiken!
px (pixels)

Je ziet dat we uit dit lijstje de meeste eenheden niet mogen gebruiken, alleen px (pixels) gebruiken we af en toe, bijvoorbeeld voor de afmetingen van afbeeldingen. Vaak is het beter om een relatieve eenheid te gebruiken.

Relatieve lengte

Relatieve lengte-eenheden zijn relatief ten opzichte van een andere lengte-eigenschap. Bijvoorbeeld:
vw is relatief tot de breedte van het scherm. 1vw is 1% van de breedte van het scherm.
vh is relatief tot de hoogte van het scherm. 1vh is 1% van de hoogte van het scherm.
% is relatief aan het ‘parent’-element (het element waar dit element in staat)
em is relatief aan de letter-grootte van het ‘parent’-element. 2em is 2 keer de grootte van het huidige lettertype.
rem is relatief aan de letter-grootte van de pagina.

Een lange lijst aan keuzes dus. Maar wat raden we aan? Hieronder zie je ons advies. Handig om even voor jezelf op te slaan zodat je er makkelijk bij kunt.

Algemeen advies

Breedte van elementen:
Zo veel mogelijk vw, en anders px

Hoogte van elementen:
Liefst de hoogte niet instellen maar de inhoud de hoogte laten bepalen,
maar als je een element precies even hoog als (een deel van) de pagina wilt maken, dan vh
en anders px

Lettertypes:
Stel geen font-size in voor de body, omdat bijvoorbeeld slechtzienden of dyslecten zelf willen bepalen hoe groot de standaard tekst in hun browser is.
Voor tekst die groter of kleiner moet zijn dan de standaard tekst gebruiken we rem.

Margins, padding en border
Voor margin en padding en voor de dikte van borders gebruiken we meestal px.

Afbeeldingen
Stel nooit de width én de height van een <img> in, omdat dit ertoe kan leiden dat je afbeelding uitgerekt wordt.
Gebruik vw, % of px voor de width, afhankelijk van de toepassing.

Gebruik een id om één div een zo hoog als een kwart van het scherm te maken.
Als je al font-size, margin of padding gebruikt in je CSS, pas deze dan aan zodat je hier rem als eenheid gebruikt.

Chrome – Device Emulator

Uiteraard kun je je website ook ontwerpen voor smartphones. Omdat het natuurlijk niet handig webdesignen is op je telefoon, blijven we – ook voor mobile design – werken op onze pc. Gelukkig kunnen we de browser laten doen alsof het een mobile device is (emuleren).

🡆 Rechts-klik op een webpagina in de browser, en kies voor Inspect. In het scherm dat nu opent klik je op dit icoontje:
🡆 Bovenin het scherm kun je nu kiezen voor een aantal devices (en in Chrome inzoomen naar 100%). In sommige gevallen is het nodig om eerst de pagina te refreshen voordat de site goed geëmuleerd wordt.

Opdracht

Maak een heel eenvoudige mobiele website met de elementen die we hebben geleerd. Zie dit als een korte herhalingsopdracht en probeer er niet meer dan een half uur aan te besteden.

Maak een nieuwe projectmap voor deze oefening.
Maak 5 divs in je html-bestand. Zie de gele vlakken in bovenstaande screenshot.
Vul de divs zoals bovenstaand voorbeeld (of iets wat daar op lijkt)
Geef alle divs dezelfde class (bijvoorbeeld ‘section’). Voeg marge en / of padding toe aan die class toe in het css-bestand. Voel je vrij om er ook randen aan toe te voegen.
Geef met id’s verschillende achtergrondkleuren aan iedere div.
Wijzig de lettertypekleur van de link met een hover-actie in het css-bestand.

hint:
```
a {
  /* letterkleur */
}

a:hover {
  /* letterkleur */
}
```