HTML & CSS 03 - 3.1 - Lijsten, tabellen, embedden

• Informatica
• WO
• Studiejaar 4,5

Commentaar

Als je code schrijft (en ook als je een .html bestand maakt) dan is het soms handig als je commentaar toevoegt

Bijvoorbeeld als je wil vastleggen waarom je iets op een bepaalde manier hebt gedaan

Daarvoor gebruiken we commentaar (ook wel comments)

Voor .html is dat de tag <!-- --> 

<!-- dit is onzichtbaar -->

voor v4

                      HTML & CSS

Stof

Kerndomein A

HTML & CSS

InformaticaBaas 3.1

https://informaticabaas.nl/mod/page/view.php?id=1983

Ik heb de paragrafen 3.3 t/m 3.6
doorgenomen.

1. ja, natuurlijk
2. nee, geen zin
3. beetje
4. nee, geen tijd

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

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>

Lijsten 2/3

Beide varianten zijn paired tags

Elk item in de lijst heeft een eigen (paired) tag:

<li>...</li>

Lijsten 3/3

Lijsten kun je ook in elkaar nesten:

Welke uitspraak klopt NIET?

1. er zijn twee soorten lijsten in HTML
2. <ol> is een ongeordende lijst
3. <li> </li> is een item in een HTML lijst
4. ┻┻︵ヽ(`Д´)ﾉ︵ ┻┻

<ol>

<li>

</li>

</ol>

<ul>

</ul>

Welke uitspraak klopt WEL?

1. er zijn drie soorten lijsten in HTML
2. <il> </il> is een item in een HTML lijst
3. <ol> is een geordende lijst
4. ┬─┬ノ( º _ ºノ)

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:

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

<ol>

<li>eerste</li>

<li>tweede</li>

<li>derde</li>

</ol>

Maak een lijst met een lijst
zoals rechts aangegeven:
Zoek op w3schools.com

Maak een lijst met een lijst
zoals rechts aangegeven:
Zoek op w3schools.com

Uitwerking

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>
  

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)

Tabellen 3/5

Je kunt cellen samenvoegen in de <td> met:

• colspan
• rowspan

rowspan is voor 

rows (rijen dus)

Tabellen 4/5

colspan is voor columns (kolommen dus):

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

Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?

1. <tr> <td rowspan="2"> R1C1 + R1C2</td></tr>
2. <tr> <td colspan="2"> R1C1 + R1C2</td></tr>
3. <tr rowspan="2"> <td> R1C1 + R1C2</td></tr>
4. <tr colspan="2"> <td> R1C1 + R1C2</td></tr>

Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?

1. <tr rowspan="2"><td>R1C1</td><td>R1C2 + R2C2</td></tr>
2. <tr ><td>R1C1</td> <td colspan="2">R1C2 + R2C2</td></tr>
3. <tr><td>R1C1</td> <td rowspan="2">R1C2 + R2C2</td></tr>
4. <tr><td rowspan="2">R1C1</td> <td>R1C2 + R2C2</td></tr>

Welke optie komt overeen met deze afbeelding qua cel-samenvoeging?

1. <tr colspan="2"> <td> R1C1 + R1C2</td></tr>
2. <tr rowspan="2"> <td> R1C1 + R1C2</td></tr>
3. <tr> <td colspan="2"> R1C1 + R1C2</td></tr>
4. <tr> <td rowspan="2"> R1C1 + R1C2</td></tr>

Geef de code voor de tabellen rechts:
(begin met <table>)

Opdracht #2

                             Maak de volgende tabellen:

Het niet om de kleuren,

het gaat alleen om de samenvoeging van

de cellen

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/3

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:

Embed / iframe 2/3

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

Embed / iframe 3/3

Als je error 153 krijgt, dan heeft dat ermee te maken dat YouTube een server verwacht (een referrer)

Zie informaticaBaas voor een oplossing (lokale server)

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

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:

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

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6