HTML & CSS: Meer opmaak en blokken

Domein A2: HTML & CSS
Meer opmaak en blokken
1 / 25
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

In deze les zitten 25 slides, met interactieve quizzen, tekstslides en 4 videos.

time-iconLesduur is: 45 min

Onderdelen in deze les

Domein A2: HTML & CSS
Meer opmaak en blokken

Slide 1 - Tekstslide

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.

Slide 2 - Tekstslide

Slide 3 - Video

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>


Slide 4 - Tekstslide

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!

Slide 5 - Tekstslide

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

Slide 6 - Tekstslide

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

Slide 7 - Tekstslide

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.

Slide 8 - Tekstslide

Sleep elke term naar de meest passende hotspot
timer
0:45
block element
<span>
inline element
<a>
<div>
<p>
<h1>
<strong>

Slide 9 - Sleepvraag

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.

Slide 10 - Tekstslide

Slide 11 - Video

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.

Slide 12 - Tekstslide

Slide 13 - Video

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.

Slide 14 - Tekstslide

Welke van de onderstaande stijldeclaraties heeft betrekking
op een class selector?
timer
0:30
A
p { color: red; }
B
.spacious { margin: 2em; }
C
#demo { border: red 2px solid; }
D
a[title] { color: purple; }

Slide 15 - Quizvraag

Bekijk de code
hiernaast.

Wat zie je?
timer
1:00
A
Een witte koptekst op een gele achtergrond.
B
Een blauwe koptekst op een witte achtergrond.
C
Een gele koptekst op een witte achtergrond.
D
Een rode koptekst op een witte achtergrond.

Slide 16 - Quizvraag

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

Oefenen met selectors? Speel CSS-diner!
  • https://flukeout.github.io/

Slide 17 - Tekstslide

Slide 18 - Video

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


Slide 19 - Tekstslide

Weet je nog? padding
bepaalt de afstand die vrijgehouden wordt tussen de inhoud en de verschillende randen (border) van een element

Slide 20 - Tekstslide

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

Slide 21 - Tekstslide

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

Slide 22 - Tekstslide

Sleep elke CSS-eigenschap naar de juiste hotspot
timer
0:45
margin
padding
border
content

Slide 23 - Sleepvraag

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.

Slide 24 - Tekstslide

Kun je de structuur en indeling van je website nu beter bepalen?
๐Ÿ˜’๐Ÿ™๐Ÿ˜๐Ÿ™‚๐Ÿ˜ƒ

Slide 25 - Poll