‹Terug naar zoeken

HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

                      HTML & CSS
1 / 24
volgende
Slide 1: Tekstslide
InformaticaWOStudiejaar 4,5

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

time-iconLesduur 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:
  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






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
  1. open https://informatica.stmichaelcollege.nl/A2/A25.html
  2. rechts klikken op de pagina en "Paginabron weergeven" (CTRL-U)
  3. Alles selecteren via CTRL-A
  4. Alles kopiëren met CTRL-C
  5. Editor openen en CTRL-V
  6. Opslaan als .html
  7. 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
  1. Open: https://informatica.stmichaelcollege.nl/A2/A26.html
  2. Rechts-klikken en "Paginabron weergeven" (of CTRL-U)
  3. Alles selecteren via CTRL-A
  4. Alles kopiëren met CTRL-C
  5. Editor openen en CTRL-V
  6. Opslaan als .html
  7. 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?
A
Je krijgt een lege pagina
B
Je ziet een witte pagina met "abc"
C
Je krijgt een foutmelding
D
(ノಠ益ಠ)ノ彡┻━┻

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

Meer lessen zoals deze

04 - CSS - selectoren

- Les met 15 slides
ICTMBOStudiejaar 1,2

HTML & CSS: Blokkendoos

- Les met 34 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

BBL Week 4

- Les met 12 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

CSS

- Les met 15 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 05 - 4.4 tmt 4.9 - CSS kleuren, hyperlinks, lijsten, tabellen, valideren

- Les met 34 slides
InformaticaWOStudiejaar 4,5

Workshop 4 id's en classes

- Les met 13 slides
Software DeveloperMBOStudiejaar 1

HTML & CSS: Meer opmaak en blokken

- Les met 25 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

html/css - document flow

- Les met 22 slides
InformaticaMiddelbare schoolvwoLeerjaar 4,5