Les 3: HTML, lijsten

Soms maken we gebruik van korte opsommingen of lijstjes. Bijvoorbeeld de volgende lijstjes: Dingen die ik leuk vind:

• Gamen

• Programmeren

• Lego

Maar ook het volgende lijstje:

Top 3 favoriete films:

1. The Lion King

2. Toy Story

3. Bambi

Dit kunnen we ook in HTML doen! Hiernaast zie je de hele code, geen paniek als je hem nog niet helemaal begrijpt. We leggen hem hierna helemaal uit.

Dingen die ik leuk vind: <br>
<ul>
   <li>Gamen</li>
   <li>Programmeren</li>
   <li>Lego</li>
</ul>
<br>
Top 3 favoriete films: <br>
<ol>
   <li>The Lion King</li>
   <li>Toy Story</li>
   <li>Bambi</li>
</ol>

Het is belangrijk om het verschil te zien tussen de beide lijstjes. Het ene lijstje heeft puntjes, dit noemen we een ongesorteerde lijst. Om een ongesorteerde lijst te maken gebruiken we de <ul>-tag. Vervolgens moet je voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ul>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
   <li>Een punt op de lijst</li>
</ul>

Daarnaast zijn er lijsten die nummertjes vooraan hebben staan. Dit zijn gesorteerde lijsten, bijvoorbeeld om een top 3 aan te geven. Om een gesorteerde lijst te maken gebruiken we de <ol>-tag. Vervolgens moet je ook hierbij voor elk item op de lijst aangeven dat het een lijst item is. Dit doe je met de <li>-tag.

<ol>
   <li>Nummer 1</li>
   <li>Nummer 2</li>
   <li>Nummer 3</li>
</ol>

Opdrachten

[1] In de website die je net hebt gemaakt vertel je al een paar dingen over jezelf. Je gaat hier nu ook een lijstje aan toevoegen. Kies een van kopjes die je eerder hebt gemaakt en voeg hier een ongesorteerd lijstje aan toe met minimaal 3 items. Je mag zelf kiezen bij welk kopje je dit lijstje zet.

[2] Nu ga je op je site ook een top 5 van je favoriete films, games of artiesten maken. Hiervoor maakt je eerst een nieuwe kopje aan zoals je hebt geleerd bij leskaart 1. Schrijf ook een korte introductieparagraaf over je top 5. Gebruik nu een gesorteerde lijst om je top 5 op je site te zetten. Een voorbeeldje zie je hiernaast: Je mag iets anders doen, als je maar gebruik maakt van een gesorteerde lijst.

[3] Vond je dit eigenlijk wel makkelijk en wil je wat ingewikkelds proberen? Dan hebben wij een uitdaging voor je! Kun je een lijst in een lijst maken? Tip: je hebt nu tags in tags nodig. Probeer maar eens wat en als je er niet uitkomt vraag het dan aan de begeleiders.