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

• Informatica
• WO
• Studiejaar 4,5

                      HTML & CSS

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 3.3 tmt 3.6

https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114659

Leerdoelen:

Na deze les kun je:

1. verschillende lijsten benoemen en gebruiken in HTML
2. verschillende lijsten combineren 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: 

• ordered list
  <ol>...</ol> 
• 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 ongenummerde lijst
3. <li> </li> is een item in een HTML lijst
4. ┻┻︵ヽ(`Д´)ﾉ︵ ┻┻

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

Tabellen 1/4

HTML heeft ook tabellen

Die worden tegenwoordig minder gebruikt, maar vind ik persoonlijk nog steeds erg handig

Een tabel heeft drie onderdelen:

• de tabel zelf: <table>...</table>
• de rij: <tr>...</tr>
• de kolom: <td>...</td>

Tabellen 2/4

                      Dat ziet er dan b.v. zo uit:

Let op:

• <td> zit genest in <tr>
• <table> heeft standaard geen rand;
   via <table border="1"> kun je die
   toevoegen

Tabellen 3/4

Je kunt cellen samenvoegen over kolom en rij:

Dat doe je in de <td> met:

• colspan
• rowspan

Tabellen 4/4

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>

Geef de code voor :
(het gaat alleen
om de cel-samenvoeging)

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

Met een iframe tag kun je elementen van een andere pagina/website in je eigen pagina embedden

Voorbeelden hiervan zijn YouTube filmpjes, GoogleSheets, en GoogleForms

Dat ziet er zo uit:

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

Leerdoelen

Je kunt:

• verschillende lijsten benoemen en gebruiken in HTML
• verschillende lijsten combineren 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 pagina:

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6