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

• New lesson editor
• 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

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.

A

ja, natuurlijk

B

nee, geen zin

C

beetje

D

nee, geen tijd

                      HTML & CSS

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

Er zijn 2 varianten in HTML: 

• geordend: ordered list
  <ol>  </ol> 

• ongeordend: unordered list
  <ul>  </ul>

Allebei zijn het paired tags

Lijsten 2/3

Een item in een lijst maak je met de (paired) tag: list item

<li>...</li>

Lijsten 3/3

Lijsten kun je ook in elkaar nesten:

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

┻┻︵ヽ(`Д´)ﾉ︵ ┻┻

Welke uitspraak klopt WEL?

A

er zijn drie soorten lijsten in HTML

B

<il> </il> is een item in een HTML lijst

C

<ul> is een ongeordende lijst

D

┬─┬ノ( º _ ºノ)

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:

4

minute

00

second

+30 s

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.

Lijst types 1/2

Standaard heeft een geordende lijst (ol) de nummering 1, 2, 3, ...

Types laten je de opsomming aanpassen

Dit doe je door het attribuut type toe te voegen

type="1"  Standaard nummering (standaard)

type="A" Hoofdletters alfabetisch

type="a" Kleine letters alfabetisch

type="I" Hoofdletters Romeins

type="i" Kleine letters Romeins

Lijst types 2/2

Standaard heeft een ongeordende lijst (ul) bolletjes

Voor een ongeordende lijst pas je dit aan met css

Hiervoor gebruik je het kenmerk: list-style-type

disc = Bolletje (standaard)

circle = Cirkel

square = Vierkant

none = Geen teken

Maak een ongeordende lijst

<li>

<li>

</li>

</li>

</ul>

<ul>

</ol>

<ol>

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

2

minute

00

second

+30 s

<ol>

<li>eerste</li>

<li>tweede</li>

<li>derde</li>

</ol>

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

2

minute

00

second

+30 s

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

3

minute

00

second

+30 s

Sleep de lijsten naar de juiste HTML code toe

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?

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>

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>

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>

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

5

minute

00

second

+30 s

5

minute

00

second

+30 s

Opdracht #2

                             Maak de volgende tabellen:

Het niet om de kleuren,

het gaat alleen om de samenvoeging van

de cellen

5

minute

00

second

+30 s

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:

4

minute

00

second

+30 s

<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