HTML & CSS 07 - 7.1 - wrapper float

• Informatica
• WO
• Studiejaar 4,5

                      HTML & CSS

Fundament

Kerndomein A

HTML & CSS

InformaticaBaas 7.1

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

Leerdoelen:

Na deze les kun je:

1. aangeven wat de wrapper is
2. de wrapper gebruiken in een .html bestand
3. float gebruiken in een .html
4. blokken positioneren met behulp van float
5. uitleggen wat clear doet met betrekking tot float
6. class gebruiken in html en 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.

Wrapper 1/3

Vorige les bespraken we blokelementen met eigen namen

Een blokelement is niet anders dan een element waarin je andere elementen "nest" 

Vaak wordt een <div> element met een ID gebruikt:

<div id="wrapper">groot deel website hier</div>

Wrapper 2/3

De "wrapper" is specifiek bedoeld om elementen te omwikkelen en daarmee eenvoudig aanpasbaar en verplaatsbaar te maken

Het is gebruikelijk dat ook de benoemde elementen in de wrapper staan!

Wrapper 3/3

De wrapper gaat om alle HTML elementen heen

De positie van de wrapper 

is vaak direct na <body>:

Vervolgens kun je met CSS de elementen 

in 1 keer aanpassen/positioneren:

Geef de HTML van de wrapper
zodat dit de uitkomst wordt:

Float 1/5

Met de CSS eigenschap float 

kun je elementen laten "zweven"

Dat is bijvoorbeeld handig bij

• afbeeldingen, zodat de tekst er op de juiste wijze omheen "loopt", en bij
• blokelementen, omdat je ze op die manier goed kan positioneren

Float 2/5

Er zijn twee opties voor de CSS eigenschap float:

• left
• right

Let op: als twee elementen een float:left krijgen, gaat het eerste element het meest links!

Float 3/5

Dat betekent dat als je float niet opheft met float:clear, dan is er een grote kans dat drijvende blokken over niet-drijvende blokken drijven:

<!DOCTYPE html>

<html lang="nl">

<head>

<meta charset="UTF-8">

<title>Float zonder Clear</title>

<style>

.container {

  width: 400px;

  border: 1px solid #000;

  padding: 10px;

}

.float-box {

  float: left;

  width: 150px;

  height: 100px;

  background-color: lightblue;

  margin: 10px;

}

.normal-box {

  width: 100%;

  height: 50px;

  background-color: lightgreen;

}

</style>

</head>

<body>

<h2>Voorbeeld zonder clear</h2>

<div class="container">

  <div class="float-box">Float Box 1</div>

  <div class="float-box">Float Box 2</div>

  <div class="normal-box">Normal Box</div>

</div>

</body>

Float 4/5

Je kunt het "drijven" uitschakelen via de eigenschap clear

De opties voor clear zijn: 

left, right, both

<!DOCTYPE html>

<html lang="nl">

<head>

<meta charset="UTF-8">

<title>Float met Clear</title>

<style>

.container {

  width: 400px;

  border: 1px solid #000;

  padding: 10px;

}

.float-box {

  float: left;

  width: 150px;

  height: 100px;

  background-color: lightblue;

  margin: 10px;

}

.normal-box {

  width: 100%;

  height: 50px;

  background-color: lightgreen;

  clear: both; /* Zorgt dat dit element onder alle floats komt */

}

</style>

</head>

<body>

<h2>Voorbeeld met clear</h2>

<div class="container">

  <div class="float-box">Float Box 1</div>

  <div class="float-box">Float Box 2</div>

  <div class="normal-box">Normal Box</div>

</div>

</body>

</html>

Float 5/5

Met clear geef je aan de browser aan dat vanaf dit element je niet naast de floats wil die al gegeven zijn

Je gaat dan als het ware naar de volgende regel:

Met welke CSS zorg je dat
alle afbeeldingen links floaten?

1. <img style="float:left" src="yolo.jpg" />
2. <img style="float:left" href="yolo.jpg" />
3. img { float:left; }
4. img { float:left }

Met welke CSS zorg je dat alleen
de afbeelding yolo.jpg links float?

1. <img style="float:left" src="yolo.jpg" />
2. <img style="float:left" href="yolo.jpg" />
3. img { float:left; }
4. img { float:left }

Opdracht

1. Open: https://informatica.stmichaelcollege.nl/HTML-CSS/index.php?docentles=css71
2. Pas de internal CSS aan zodat de pagina
   er zoals rechts komt uit te zien:
   
   
3. Klaar? Probeer nu de code zo aan te
   passen dat de blokken van positie wisselen

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.

Wat zou er gebeuren als je deze
HTML uitvoert?

1. Je krijgt een lege pagina
2. Je ziet een witte pagina met "abc"
3. Je krijgt een foutmelding
4. (ノಠ益ಠ)ノ彡┻━┻ wat anders!

Opdracht

Neem deze code over en voer het uit:

Wat zie je?

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.

Eigen tags?

De (nieuwere versies van) HTML zijn dus aardig vergevingsgezind: je kunt ook eigen tags maken...

maar wat is de CSS selector daarvan?

Eigen tags?

De (nieuwere versies van) HTML zijn dus aardig vergevingsgezind: je kunt ook eigen tags maken...

maar wat is de CSS selector daarvan?

>> net als een "gewoon" tag element!

Met welke internal CSS
code maak je de tekst
"abc" roodkleurig?

Class 1/3

Eerder hebben we het ID eigenschap gezien van een tag, maar een andere eigenschap die aan een element kan worden toegekend is class

ID is uniek

Class is niet uniek

Class 2/3

Het teken voor de CSS selector van een class is de .

Belangrijk is om te onthouden 

dat id wel uniek is,

maar class niet uniek

Class 3/3

En doe je toch meerdere dezelfde ID-tags in 1 HTML bestand? 

Dan gaat het qua CSS wel goed, maar straks met JavaScript niet... dus onthoudt dat de ID-tag uniek moet zijn (per pagina), en je anders class-tag hoort te gebruiken

!important

Met !important geef je in CSS aan dat een bepaalde eigenschap erg belangrijk is...

Zo belangrijk zelfs, dat de rangorde erdoor wordt aangepast! (dat heeft alleen nut 

bij external en internal css)

Je zet het achter de regel voor de ;

Vind de fouten

Dit is een voorbeeldvraag dat je

tijdens de toets kan krijgen

De opdracht is dan ongeveer zo:

Geef de regels met de fouten op

en geef de goede code voor elke regel

Let op: goede code aanpassen is puntaftrek

Leerdoelen

Je kunt:

• aangeven wat de wrapper is
  
• de wrapper gebruiken in een .html bestand
  
• float gebruiken in een .html bestand
• blokken positioneren met behulp van float
  
• uitleggen wat clear doet met betrekking tot float
• class gebruiken in html en 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.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6