HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

HTML & CSS

1 / 24

Slide 1: Slide

InformaticaWOStudiejaar 4,5

This lesson contains 24 slides, with interactive quizzes and text slides.

Lesson duration is: 45 min

Items in this lesson

HTML & CSS

Slide 1 - Slide

This item has no instructions

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 5.8 tmt 5.12

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

Slide 2 - Slide

This item has no instructions

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 - Slide

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Opdracht #1

open https://www.smcinformatica.nl/A2/A2_5.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 - Slide

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 question

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

Opdracht #2

Open deze link: https://www.smcinformatica.nl/A2/A2_6.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 - Slide

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 - Quiz

This item has no instructions

Opdracht #3

Neem deze code over en voer het uit:

Wat zie je?

timer

3:00

Slide 16 - Slide

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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

timer

3:00

Slide 19 - Open question

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

This item has no instructions

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 - Slide

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 - Slide

This item has no instructions

HTML & CSS 90 - herhaling

June 2023 - Lesson with 33 slides

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

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

September 2023 - Lesson with 24 slides

InformaticaWOStudiejaar 4,5

HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

Slide 8 - Open question

Slide 9 - Slide

Slide 10 - Slide

Slide 11 - Slide

Slide 12 - Slide

Slide 13 - Slide

Slide 14 - Slide

Slide 15 - Quiz

Slide 16 - Slide

Slide 17 - Slide

Slide 18 - Slide

Slide 19 - Open question

Slide 20 - Slide

Slide 21 - Slide

Slide 22 - Slide

Slide 23 - Slide

Slide 24 - Slide

More lessons like this

HTML & CSS 90 - herhaling

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

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

04 - CSS - selectoren

BBL Week 4

WEEK 5 - INFORMATICA

HTML + CSS les 4: selectors + margins + ontwerp + flexbox

Webdesign - Les 3 (23/24): CSS