HTML & CSS 03 - 3.3 tmt 3.6 - Lijsten, tabellen, embedden

                      HTML & CSS
1 / 27
next
Slide 1: Slide
InformaticaWOStudiejaar 4,5

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

time-iconLesson 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 3.3 tmt 3.6
https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114659


Slide 2 - Slide

This item has no instructions

Ik heb de paragrafen 3.3 t/m 3.6
doorgenomen.
A
ja, natuurlijk
B
nee, geen zin
C
beetje
D
nee, geen tijd

Slide 3 - Quiz

This item has no instructions

Leerdoelen:
Na deze les kun je:
  1. verschillende lijsten benoemen en gebruiken in HTML
  2. verschillende lijsten combineren/nesten in HTML
  3. een tabel (op)maken in HTML
  4. cellen samenvoegen in een HTML tabel
  5. uitleggen wat embedden is bij HTML
  6. embedden toepassen in HTML






Slide 4 - 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.
Lijsten 1/3
Een lijst in HTML is een opsomming
Qua HTML zijn er 2 varianten: 
  • geordend: ordered list
    <ol>  </ol> 
  • ongeordend: unordered list
    <ul>  </ul>

Slide 5 - Slide

This item has no instructions

Lijsten 2/3
Beide varianten zijn paired tags
Elk item in de lijst heeft een eigen (paired) tag:

<li>...</li>

Slide 6 - Slide

This item has no instructions

Lijsten 3/3
Lijsten kun je ook in elkaar nesten:

Slide 7 - Slide

This item has no instructions


Welke uitspraak klopt NIET?
A
er zijn twee soorten lijsten in HTML
B
<ol> is een ongeordende lijst
C
<li> </li> is een item in een HTML lijst
D
┻┻︵ヽ(`Д´)ノ︵ ┻┻

Slide 8 - Quiz

This item has no instructions


Welke uitspraak klopt WEL?
A
er zijn drie soorten lijsten in HTML
B
<il> </il> is een item in een HTML lijst
C
<ol> is een geordende lijst
D
┬─┬ノ( º _ ºノ)

Slide 9 - Quiz

This item has no instructions

Opdracht #1
Zoek op w3schools.com:
  1. hoe je een opsomming a, b, c kunt maken
  2. hoe je een opsomming i, ii, iii kunt maken
  3. maak een HTML bestand voor deze website:
timer
4:00

Slide 10 - 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.
Maak een lijst met een lijst
zoals rechts aangegeven:
Zoek op w3schools.com
timer
5:00
timer
5:00

Slide 11 - Open question

This item has no instructions

Uitwerking

Slide 12 - Slide

This item has no instructions

Tabellen 1/5
HTML heeft ook tabellen

Een tabel bestaat uit drie paired tags:
  • de tabel zelf: <table> </table>
  • de rij: <tr> </tr>
  • de cel/kolom: <td> </td>

Slide 13 - Slide

This item has no instructions

Tabellen 2/5
                      Dat ziet er dan b.v. zo uit:
Let op:
  • <td> zit genest in <tr>
  • <table> heeft standaard geen rand
  • die rand kun je toevoegen met
     <table border=1
    ("1" kan ook, HTML is flexibel)



Slide 14 - Slide

This item has no instructions

Tabellen 3/5
Je kunt cellen samenvoegen in de <td> met:
  • colspan
  • rowspan

rowspan is voor 
rows (rijen dus)

Slide 15 - Slide

This item has no instructions

Tabellen 4/5
colspan is voor columns (kolommen dus):

Slide 16 - Slide

This item has no instructions

Tabellen 5/5
Let op: 
het samenvoegen van cellen blijkt voor veel mensen lastig onder de knie te krijgen

Om het "door" te krijgen moet je het oefenen

Slide 17 - Slide

This item has no instructions


Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?
A
<tr> <td rowspan="2"> R1C1 + R1C2</td></tr>
B
<tr> <td colspan="2"> R1C1 + R1C2</td></tr>
C
<tr rowspan="2"> <td> R1C1 + R1C2</td></tr>
D
<tr colspan="2"> <td> R1C1 + R1C2</td></tr>

Slide 18 - Quiz

This item has no instructions


Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?
A
<tr rowspan="2"><td>R1C1</td><td>R1C2 + R2C2</td></tr>
B
<tr ><td>R1C1</td> <td colspan="2">R1C2 + R2C2</td></tr>
C
<tr><td>R1C1</td> <td rowspan="2">R1C2 + R2C2</td></tr>
D
<tr><td rowspan="2">R1C1</td> <td>R1C2 + R2C2</td></tr>

Slide 19 - Quiz

This item has no instructions


Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?
A
<tr colspan="2"> <td> R1C1 + R1C2</td></tr>
B
<tr rowspan="2"> <td> R1C1 + R1C2</td></tr>
C
<tr> <td colspan="2"> R1C1 + R1C2</td></tr>
D
<tr> <td rowspan="2"> R1C1 + R1C2</td></tr>

Slide 20 - Quiz

This item has no instructions

Geef de code voor :
(het gaat alleen om de
cel-samenvoeging in <td>)
timer
5:00
timer
5:00

Slide 21 - Open question

This item has no instructions

Opdracht #2
                             Maak de volgende tabellen:

Het niet om de kleuren,
het gaat alleen om de samenvoeging van
de cellen
timer
5:00

Slide 22 - 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.
Embed / iframe 1/2
Met een <iframe> kun je (elementen van) een andere pagina/website in je eigen pagina embedden

Zoals: YouTube filmpjes, GoogleSheets, en GoogleForms

Dat ziet er zo uit:

Slide 23 - Slide

This item has no instructions

Embed / iframe 2/2
Wat wel apart is, is dat de iframe tag een paired tag is, terwijl wellicht een unpaired tag beter had gepast... 

Dit komt (ondermeer) doordat toen iframe werd geïntroduceerd, niet alle webbrowsers het ondersteunden
Tussen de tags komt het bericht te staan voor gebruikers als de browser de iframe tag niet ondersteunt

Slide 24 - Slide

This item has no instructions

Leerdoelen
Je kunt:
  • verschillende lijsten benoemen en gebruiken in HTML
  • verschillende lijsten combineren/nesten in HTML
  • een tabel (op)maken in HTML
  • cellen samenvoegen in een HTML tabel
  • uitleggen wat embedden is bij HTML
  • embedden toepassen in HTML

Slide 25 - 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.
Schrijf de HTML
voor deze tabel:
timer
4:00

Slide 26 - Open question

<table border=1>
  <tr>
    <td colspan=2>
        <ol>
            <li>abc</li>
            <li>
                <ul>
                    <li>a</li>
                    <li>b</li>
                    <li>c</li>
                </ul>
            </li>
    </td>
  </tr>
  <tr>
    <td>def</td>
    <td>ghi</td>
  </tr>
</table>

Slide 27 - Slide

This item has no instructions