‹Revenir à la recherche

HTML & CSS 90 - herhaling

                      HTML & CSS
1 / 33
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

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

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

Éléments de cette leçon

                      HTML & CSS

Slide 1 - Diapositive

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

Fundament
Kerndomein A: Vaardigheden

HTML & CSS
** Herhaling **
https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10485


Slide 2 - Diapositive

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

Leerdoelen 1/2
Na deze les kun je:
  • uitleggen waar HTML en CSS voor staan
  • het verschil tussen een paired en unpaired tag uitleggen
  • kun je beschrijven hoe een hyperlink in elkaar zit
  • van een pad aangeven of het absoluut of relatief is
  • uitleggen hoe je een cel in een tabel samenvoegt
  • ...






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.
Leerdoelen 2/2
Na deze les kun je:
  • de 3 verschillende methoden van CSS beschrijven
  • uitleggen welke selector voor ID wordt gebruikt
  • uitleggen welke selector voor Class wordt gebruikt
  • fouten in HTML en CSS herkennen als een pro






Slide 4 - 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.
Herhaling

Deze slides is een gedeelte van de stof 
die we eerder hebben behandeld

Het is geen volledig overzicht van de belangrijke punten,
het is alleen bedoeld als herinnering!

Slide 5 - Diapositive

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

HTML 1/4
  • HyperText Markup Language
  • tekstbestand met
    .htm of .html extensie
  • paired tag
       open: <h1>
       sluiten: </h1>
  • unpaired tag: <br>, <img>

Slide 6 - Diapositive

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

HTML 2/4
  • <!doctype html> voor versie HTML (anders quirks mode)
  • metatags geven informatie over een website maar zijn niet direct op de website zichtbaar
  • hyperlink : <a href="http://abc.nl">link</a>
  • "relatief" pad t.o.v. de huidige pagina: "sub/a.html"
  • "absoluut" pad is directe link: "http://abc.nl"
  • HTML bepaalt de inhoud van de website

Slide 7 - Diapositive

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

HTML 3/4
  • a : <a href="abc.nl">link</a>
  • p : <p>tekst</p>
  • h1 : <h1> tekst </h1>
  • ol : <ol><li>item 1</li><li>item 2</li></ol>
  • ul : <ul><li>item *</li><li>item *</li></ul>
  • img : <img src="abc.gif">
  • table : <table><tr><td></td></tr></table>

Slide 8 - Diapositive

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

HTML 4/4
Door het "nesten" van elementen kun je in HTML effecten combineren, zoals bijvoorbeeld een plaatje een link maken:
  • <a href="http://abc.nl"><img src="plaatje.gif"></a>

Of een tekst onderstrepen, schuin en vet maken:
  • <u><b><i>hallo</i></b></u>

Slide 9 - Diapositive

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

HTML: IMG
  • img is een unpaired tag <img>
  • img heeft een src (een bron) want het is de bron (source) van de afbeelding, en geen verwijzing (href)!
    <img src="https://smcinformatica.nl/huisje.jpg">
  • let op de verhouding tussen hoogte en breedte
     (aspect ratio),
                       anders krijg je zoiets:

Slide 10 - Diapositive

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

HTML: Table
  • Een table maak je in HTML met <table>
  • rij <tr> </tr>
  • kolom <td> </td>
  • samenvoegen van cellen doe je in <td> 
     met de eigenschappen:
      colspan (meerdere kolommen)
      rowspan (meerdere rijen)

Slide 11 - Diapositive

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

(Meerkeuze) vragen
De volgende slides hebben (meerkeuze) vragen
Voor elke meerkeuze vraag heb je 20 seconden
Voor een open vraag is een timer zichtbaar

Achtergrond:
  • Oranje/blauw == zacht overleggen mag
  • Rood == stil!

Slide 12 - Diapositive

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


Waar staat de afkorting HTML voor?
A
HyperText Markup Language
B
HyperText Management Language
C
Heavenly Taco Maker's Legacy
D
Hyperloop Terabyte Management Language

Slide 13 - Quiz

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



Wat is de huidige versie van HTML?
A
4
B
3
C
5
D
over 9000

Slide 14 - Quiz

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


Met welke eigenschap wordt bepaald in HTML wat de afbeelding in een <img> tag is?
A
href
B
src
C
link
D
(☉.☉)

Slide 15 - Quiz

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


Met welke eigenschap wordt bepaald in HTML wat de link in een <a> tag is?
A
href
B
src
C
link
D
(⊙.☉)

Slide 16 - Quiz

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

Wat is de regel die overeen
komt met de afbeelding
qua cel-samenvoeging?
A
<tr><td rowspan="2"> R1C1 + R1C2</td></tr>
B
<tr rowspan="2"><td> R1C1 + R1C2</td></tr>
C
<tr><td colspan="2"> R1C1 + R1C2</td></tr>
D
<tr colspan="2"> <td> R1C1 + R1C2</td></tr>

Slide 17 - Quiz

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

CSS 1/3
  • CSS staat voor Cascading Style Sheet
  • CSS bepaalt de vormgeving van de website
  • er zijn 3 manieren:
  1. external: link in <head>: <link href="index.css">
  2. internal: CSS code in <head> in paired <style> tag
  3. inline: CSS in HTML tag: <a style="color:red;">

Slide 18 - Diapositive

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

CSS 2/3
internal en external CSS gebruiken selectoren, zoals:
  • tag-selector: op basis van bv. <p>, <img>, <body>, etc
  • #: id-selector: op basis van het id-element (uniek!)
  • . : class-selector: op basis van de hele class (niet uniek!)
  • * : selector die geldt voor alle HTML elementen
inline CSS gebruikt geen selector maar staat direct in het element (en dus is er geen selector nodig)

Slide 19 - Diapositive

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

CSS 3/3
  1. external

  2. internal

  3. inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 20 - Diapositive

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

(Meerkeuze) vragen
De volgende slides hebben (meerkeuze) vragen
Voor elke meerkeuze vraag heb je 20 seconden
Voor een open vraag is een timer zichtbaar

Achtergrond:
  • Oranje/blauw == zacht overleggen mag
  • Rood == stil!

Slide 21 - Diapositive

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

Als je in
internal CSS dezelfde eigenschap
van 1 element 3 keer aanpast...
welke gebruikt CSS dan?
A
eerste CSS regel
B
tweede CSS regel
C
derde CSS regel
D
ᕙ(⇀‸↼ ‶)ᕗ

Slide 22 - Quiz

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


Hoeveel methodes om
CSS te gebruiken zijn er in HTML?
A
1
B
2
C
3
D
4

Slide 23 - Quiz

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

Noem de methodes om
CSS te gebruiken zijn er in HTML
die jij kent
timer
0:30

Slide 24 - Question ouverte

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

Geef een inline CSS
waarbij een p element rode tekst krijgt
timer
0:30

Slide 25 - Question ouverte

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

Geef een internal CSS
waarbij element met ID "voorbeeld"
een blauwe achtergrond krijgt
timer
1:00

Slide 26 - Question ouverte

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


Geef een voorbeeld van Internal CSS
met de selector Class "voorbeeld"
timer
2:00

Slide 27 - Question ouverte

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


Wat is de vuistregel voor voorrang van de verschillende methodes van CSS?
A
inline > internal > external
B
internal > inline > external
C
external > internal > inline
D

Slide 28 - Quiz

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

Vind de fouten
In de code rechts staan fouten 
  1. schrijf die regels op en
  2. geef per foute regel
    de verbeterde code


timer
3:00

Slide 29 - Diapositive

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

Leerdoelen 1/2
Je kunt:
  • uitleggen waar HTML en CSS voor staan
  • het verschil tussen een paired en unpaired tag uitleggen
  • kun je beschrijven hoe een hyperlink in elkaar zit
  • van een pad aangeven of het absoluut of relatief is
  • uitleggen hoe je een cel in een tabel samenvoegt
  • ...

Slide 30 - 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.
Leerdoelen 2/2
Je kunt:
  • de 3 verschillende methoden van CSS beschrijven
  • uitleggen welke selector voor ID wordt gebruikt
  • uitleggen welke selector voor Class wordt gebruikt
  • fouten in HTML en CSS herkennen als een pro

Slide 31 - 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.
PTA h4

Slide 32 - Diapositive

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

Exit ticket
https://forms.gle/7J97NiRs9nqWjk5V6

Slide 33 - Diapositive

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

Plus de leçons comme celle-ci

Webdesign - Les 2 (22/23)

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

HTML Basics

- Leçon avec 38 diapositives
Communication & multimedia designHBOStudiejaar 2

html/css1

- Leçon avec 16 diapositives
InformaticaMiddelbare schoolhavoLeerjaar 4

HTML & CSS 02 - 2.4 tmt 3.2 - Hyperlinks en multimedia

- Leçon avec 31 diapositives
InformaticaWOStudiejaar 4,5

HTML& CSS review

- Leçon avec 11 diapositives
Communication & multimedia designHBOStudiejaar 2

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

- Leçon avec 26 diapositives
InformaticaWOStudiejaar 4,5

HTML + CSS les 3: introductie CSS

- Leçon avec 28 diapositives
InformaticaMiddelbare schoolvwoLeerjaar 4

CSS review - HWUD04 20:21

- Leçon avec 26 diapositives
Communication & multimedia designHBOStudiejaar 2