Lijsten ()

HTML / CSS / JavaScript
Lijsten
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Vorige les
● Linkjes
● Plaatjes
● Iframes
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Deze les
● Lijsten
● Meer tabellen
● Symbolen/karakters
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Lijsten
Er zijn twee soorten lijsten:
● Ongeordende
● Lijsten
1. Geordende
2. Lijsten
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Lijsten
● Om deze lijsten in HTML te maken, gebruik je de
volgende drie tags:
○
○
○
<ul>...</ul> - Voor een ongeordende lijst (unorderd list)
<ol>...</ol> - Voor een geordende lijst (ordered list)
<li>...</li> - Voor een lijst item (list item)
● Zoals bij de <table> tag, omsluiten de <ul> en <ol>
de gehele lijst aan <li> elementen.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Lijsten (ongeordend)
● Voorbeeld:
<ul>
<li>Een item</li>
<li>Nog een item</li>
<li>Laatste item</li>
</ul>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Lijsten (geordend)
● Voorbeeld:
<ol>
<li>Een item</li>
<li>Nog een item</li>
<li>Laatste item</li>
</ol>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Meer tabellen
● <table>, <tr> en <td> hebben we besproken.
● <th> is ook een mogelijkheid en werkt hetzelfde als
<td>.
● Is bedoeld als header van een tabelkolom.
● Automatisch zal er een opmaak overheen komen.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Meer tabellen
● Voorbeeld:
<table border="1">
<tr><th>Kolom1</th><th>Kolom2</th></tr>
<tr><td>Waarde1</td><td>Waarde2</td></tr>
<tr><td>Waarde3</td><td>Waarde4</td></tr>
</table>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Symbolen/karakters
● Om netjes in HTML te werken, moet je vreemde
tekens/karakters juist invoeren.
● Voorbeeld:
<p>Één voorbeeld</p>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Symbolen/karakters
● De juiste manier om de é in HTML te toveren is door
gebruik te maken van &eacute;
● Dit staat voor een e met een accent aigu
(Engels: acute)
● Voorbeeld:
<p>&Eacute;&eacute;n voorbeeld</p>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Symbolen/karakters
● Je kunt een aantal van deze karakters vinden op:
http://www.ascii.cl/htmlcodes.
htm
St. Michaël College |
Programmeren kun je leren! | 2014-2015