HTML & CSS: Meer opmaak en blokken

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

Domein A2: HTML & CSS
Meer opmaak en blokken

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.

Block element

• Neemt alle beschikbare ruimte in van zijn container-element (ook wel parent-element genoemd)
• Start op een nieuwe regel en krijgt 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.

Feest met 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 aanpassingen 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.

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

😒🙁😐🙂😃