HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

HTML & CSS

1 / 24

Slide 1: Tekstslide

InformaticaWOStudiejaar 4,5

In deze les zitten 24 slides, met interactieve quizzen en tekstslides.

Lesduur is: 45 min

Onderdelen in deze les

HTML & CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 5.8 tmt 5.12

https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114679

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen:

Na deze les kun je:

aangeven wat de wrapper is
de wrapper gebruiken in een .html bestand
float gebruiken in een .html
blokken positioneren met behulp van float
uitleggen wat clear doet met betrekking tot float
class gebruiken in html en css

Slide 3 - Tekstslide

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

Zoals eerder gezegd waren de standaardelementen eerder "gewone" div elementen, die later een eigen naam ( tag ) hebben gekregen

Je kunt door middel van een <div> element in combinatie met een ID ook extra blokelementen maken, bijvoorbeeld:

<div id="wrapper">inhoud hier</div>

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Wrapper 2/3

Maar ook zo:

<div id="ditookalshetidmaaruniekis">inhoud hier</div>

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

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

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Wrapper 3/3

De wrapper gaat om alle HTML elementen heen

De positie van de wrapper

is direct na <body>:

Vervolgens kun je met CSS de elementen

in 1 keer aanpassen/positioneren:

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Opdracht #1

open https://informatica.stmichaelcollege.nl/A2/A25.html
rechts klikken op de pagina en "Paginabron weergeven" (CTRL-U)
Alles selecteren via CTRL-A
Alles kopiëren met CTRL-C
Editor openen en CTRL-V
Opslaan als .html
Volgende Instructie op volgende pagina

timer

2:00

Slide 7 - Tekstslide

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.

Pas de internal CSS aan
zodat de site
er zoveel mogelijk zo uit
komt te zien:

timer

4:00

Slide 8 - Open vraag

Deze slide heeft geen instructies

Uitleg Opdracht #1

Er zijn verschillende manieren om de CSS aan te passen (external, internal en inline)

maar ook binnen die manieren leiden er meer wegen naar Rome; zo kun je de afstand tussen elementen zowel met padding als met margin bepalen...

maar die doen niet helemaal hetzelfde

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Float 1/4

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

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Float 2/4

Er zijn twee opties voor de eigenschap float:

left
right

De verwerking is first-come-first-serve, dus als twee elementen een left-float krijgen, gaat de eerste het meest links

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Float 3/4

Bijzonder is dat als je float niet opheft dat er je een grote kans dat andere blokken over niet-drijvende blokken drijven

Je kunt het drijven uitschakelen via de eigenschap clear

De opties voor clear zijn:

left, right, both

Tip: doe de clear

in het volgende element!

Slide 12 - Tekstslide

Deze slide heeft geen instructies

Float 4/4

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:

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Opdracht #2

Open: https://informatica.stmichaelcollege.nl/A2/A26.html
Rechts-klikken en "Paginabron weergeven" (of CTRL-U)
Alles selecteren via CTRL-A
Alles kopiëren met CTRL-C
Editor openen en CTRL-V
Opslaan als .html
Pas de internal CSS aan zodat de pagina
er zoals rechts komt uit te zien:

timer

3:00

Slide 14 - Tekstslide

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?

Je krijgt een lege pagina

Je ziet een witte pagina met "abc"

Je krijgt een foutmelding

(ノಠ益ಠ)ノ彡┻━┻

Slide 15 - Quizvraag

Deze slide heeft geen instructies

Opdracht #3

Neem deze code over en voer het uit:

Wat zie je?

timer

3:00

Slide 16 - Tekstslide

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?

Slide 17 - Tekstslide

Deze slide heeft geen instructies

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!

Slide 18 - Tekstslide

Deze slide heeft geen instructies

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

timer

3:00

Slide 19 - Open vraag

Deze slide heeft geen instructies

Class 1/2

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

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Class 2/2

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

Belangrijk is om te onthouden

dat id uniek is,

maar class dus niet

Slide 21 - Tekstslide

Deze slide heeft geen instructies

Vind de fouten

Dit is een voorbeeldvraag dat je

tijdens de toets of SE kan krijgen

De opdracht is dan ongeveer zo:

Omcirkel de fouten rechts

en schrijf de goede code op

Goede code omcirkelen is puntaftrek

Slide 22 - Tekstslide

Deze slide heeft geen instructies

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

Slide 23 - Tekstslide

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

Slide 24 - Tekstslide

Deze slide heeft geen instructies

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

September 2023 - Les met 24 slides

InformaticaWOStudiejaar 4,5

HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Open vraag

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Tekstslide

Slide 12 - Tekstslide

Slide 13 - Tekstslide

Slide 14 - Tekstslide

Slide 15 - Quizvraag

Slide 16 - Tekstslide

Slide 17 - Tekstslide

Slide 18 - Tekstslide

Slide 19 - Open vraag

Slide 20 - Tekstslide

Slide 21 - Tekstslide

Slide 22 - Tekstslide

Slide 23 - Tekstslide

Slide 24 - Tekstslide

Meer lessen zoals deze

HTML & CSS: Blokkendoos

Workshop 4 id's en classes

HTML & CSS: Meer opmaak en blokken

4. Divisions en Classes

html/css - document flow

HTML & CSS 90 - herhaling

CSS review - HWUD04 20:21

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