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

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

In deze les zitten 27 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 3.3 tmt 3.6
https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114659


Slide 2 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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 - 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.
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 - Tekstslide

Deze slide heeft geen instructies

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

<li>...</li>

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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

Slide 7 - Tekstslide

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies

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

Slide 11 - Open vraag

Deze slide heeft geen instructies

Uitwerking

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

rowspan is voor 
rows (rijen dus)

Slide 15 - Tekstslide

Deze slide heeft geen instructies

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

Slide 16 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies


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

Deze slide heeft geen instructies

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

Slide 21 - Open vraag

Deze slide heeft geen instructies

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 - 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.
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 - Tekstslide

Deze slide heeft geen instructies

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

Deze slide heeft geen instructies

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

Slide 26 - Open vraag

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

Deze slide heeft geen instructies