‹Revenir à la recherche

HTML & CSS 07 - 5.8 tmt 5.12 - wrapper float

                      HTML & CSS
1 / 24
suivant
Slide 1: Diapositive
InformaticaWOStudiejaar 4,5

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

                      HTML & CSS

Slide 1 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

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 - Question ouverte

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

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

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

Cet élément n'a pas d'instructions

Opdracht #3
Neem deze code over en voer het uit:

Wat zie je?
timer
3:00

Slide 16 - Diapositive

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

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'instructions

Met welke internal CSS
code maak je de tekst
"abc" roodkleurig?
timer
3:00

Slide 19 - Question ouverte

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

Cet élément n'a pas d'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 - Diapositive

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

Cet élément n'a pas d'instructions

Plus de leçons comme celle-ci

04 - CSS - selectoren

- Leçon avec 15 diapositives
ICTMBOStudiejaar 1,2

HTML & CSS: Blokkendoos

- Leçon avec 34 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

BBL Week 4

- Leçon avec 12 diapositives
Applicatie- en mediaontwikkelaarMBOStudiejaar 2

CSS

- Leçon avec 15 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

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

- Leçon avec 34 diapositives
InformaticaWOStudiejaar 4,5

Workshop 4 id's en classes

- Leçon avec 13 diapositives
Software DeveloperMBOStudiejaar 1

HTML & CSS: Meer opmaak en blokken

- Leçon avec 25 diapositives
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

html/css - document flow

- Leçon avec 22 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4,5