HTML & CSS 06 - 6.1 - (Standaard)blokken, nesten elementen, margin padding afmetingen blok

• Informatica
• WO
• Studiejaar 4,5

                      HTML & CSS

Fundament

Kerndomein A

HTML & CSS

InformaticaBaas 6.1

https://informaticabaas.nl/mod/page/view.php?id=1986

Leerdoelen:

Na deze les kun je:

1. tags van de 4 benoemde blokelementen opnoemen
2. beschrijven hoe je een genest element kiest als selector
3. aangeven hoe je een divider gebruikt
4. uitleggen hoe je de afmetingen ROND een blok bepaalt
   
5. berekenen hoe je de exacte blok afmetingen bepaalt
6. aangeven hoe je CSS voor alle elementen aangeeft

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Opdracht #1

1. https://informatica.stmichaelcollege.nl/HTML-CSS/
2. Pas pagina aan zodat hij er als onderstaand uitziet:

Je mag zoeken in w3schools.com

Kijk goed en bedenk welke eigenschap(pen) het zijn!

CSS: tabellen (onthouden)

De voornaamste eigenschappen bij tabellen zijn:

• border                border: 1px solid black;
• border-collapse   border-collapse: collapse;
• height                 height: 100px;
• width                  width: 100px;
• color                   color: #000000;

Blokelementen

Structuurelementen (ook wel blokelementen genoemd) zijn elementen waarmee de structuur van een website overzichtelijk wordt geprobeerd te maken

Deze worden vaak met een ID in een paired divider tag <div> gemaakt

Bijvoorbeeld:

Blokelementen 1/2

Een aantal blokelementen wordt zo vaak gebruikt, dat ze een eigen tag hebben gekregen in HTML (versie 5):

• header (niet te verwarren met head!)
• nav
• article
• footer

Blokelementen 2/2

Blok elementen zijn als het ware containers of blokken waarbinnen andere elementen/tags worden genest

Via CSS kan dan door het hele blok te veranderen dan ook gelijk alle elementen daarbinnen worden veranderd

Meestal hebben we het dan over verplaatsen, maar bijvoorbeeld een achtergrond veranderen kan ook

Selectoren

Eerder hadden we het over hoe je selectoren combineert (dat doe je door ze te scheiden met een , )

Je kunt ook elementen kiezen die genest zijn in een ander bepaald element (de combinatie is dan de selector)

Dat doe je door een spatie tussen de elementen te zetten:

Welke van onderstaande is GEEN blokelement die een eigen naam heeft gekregen?

1. head
2. nav
3. footer
4. article

Welke tag hoort bij een divider?

1. d
2. div
3. divider
4. divide

Met welk teken kun je
meerdere elementen
aanpassen met een selector?

Met welk teken kun je
geneste elementen
aanpassen met een selector?

Margin, padding, border 1/3

Elk blok-element heeft

de volgende 3 eigenschappen:

1. margin
2. padding
3. border

Margin, padding, border 2/3

Margin is de ruimte 

buiten de rand

Padding is de ruimte

binnen de rand

Border is de rand tussen margin en padding

Margin, padding, border 3/3

"Margin buiten, padding binnen" blijft ook gelden als je elementen gaat nesten:

• de blauwe border is van
  het buitenste blok
• de oranje border is van
  het binnenste blok

Exacte afmetingen zijn tricky...

ezelsbruggetje: de padding van een jas zit aan de binnenkant

Margin, padding, border 4/4

Margin, padding en border kun je ook per zijde instellen

In dat geval is de berekening natuurlijk anders:

Je gebruikt dan bijvoorbeeld

padding-left: 1px;

margin-top: 2px;

etc

ezelsbruggetje: de padding van een jas zit aan de binnenkant

Wat is de exacte breedte
van het element article?

1. 300px
2. 370px
3. 335px
4. 

Standaardmarge

HTML kent bepaalde elementen ook een standaardmarge toe! Dit is van belang als je je indeling exact wil berekenen...

Deze standaardmarge is alleen met internal en external CSS aan te passen!

Gebruik hiervoor selector *

Welk teken is voor
de ID selector?

Welk teken is voor
alle tags?

Geef de EXACTE CSS code
waarmee je voor ALLE
elementen de MARGIN op nul zet

Wat is de exacte HOOGTE
van het element article als
het midden 20px hoog is?

1. 90px
2. 80px
3. 55px
4. 

Opdracht #1

Zoek uit met welke CSS

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Leerdoelen

Je kunt:

• tags van de 4 benoemde blokelementen opnoemen
  
• beschrijven hoe je een genest element kiest als selector
  
• aangeven hoe je een divider gebruikt
  
• uitleggen hoe je de afmetingen ROND een blok bepaalt
  
• berekenen hoe je de exacte blok afmetingen bepaalt
  
• aangeven hoe je CSS voor alle elementen aangeeft

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6