In dit artikel nemen we een kijkje hoe we lijsten en menu’s moeten maken met HTML. Aan de hand van een lijst kunnen we een mooi menutje samenstellen zoals dat hoort op een website maar kunnen we evengoed een opsomming maken van verschillende elementen. Dit is handig voor informatie die niet complex genoeg is voor in een tabel.
Lijsten in HTML: ordered & unordered
Eindresultaat lijsten en menu's
Er zijn twee type lijsten
- <ol> , Ordered list
- <ul> , Unordered list
Elementen van een lijst worden toegevoegd met de <li> tag. Een Oredered List zal je lijst teruggeven met nummers voor je elementen.
<ol>
<li>Marge</li>
<li>Albert</li>
<li>Frederico</li>
<li>Bart</li>
<li>Homer</li>
</ol>
Bovenstaande code geeft dus het volgende resultaat.
- Marge
- Albert
- Frederico
- Bart
- Homer
Een Unordered List (vervang <ol> door <ul>) zal je elementen teruggeven met bijvoorbeeld bolletjes er voor (of een ander symbool).
- Marge
- Albert
- Frederico
- Bart
- Homer
Definition lists
Met de tag <dl> kan je een definitie lijst starten. Elementen voeg je hier toe aan de hand van de <dt> tag. Bijvoorbeeld:
<dl>
<dt>Drunk</dt>
<dd>When someone had too much alcohol</dd>
</dl>
Als we dit verwerken in ons project kan je een mooi menu creëren voor je webpagina. Wanneer je links koppelt aan de elementen van je menu kan je als href waard “#” meegeven. Zo wordt de functionaliteit van een effectief link mogelijk maar je blijft steeds op dezelfde pagina. Het gebruik hiervan zie je ook in onze uiteindelijke code. Het eindresultaat kan je bewonderen aan het begin van dit artikel.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<title>
My first webpage
</title>
</head>
<body>
<table width=”500px” border=”1″>
<tr>
<td bgcolor=”FAEDA8″>
<ul>
<li>
<a href=”index.htm”>Home</a>
</li>
<li>
<a href=”#”>Who?</a>
</li>
<li>
<a href=”#”>What?</a>
</li>
<li>
<a href=”#”>Music</a>
</li>
<li>
<a href=”#”>Links</a>
</li>
</ul>
</td>
<td bgcolor=”FAEDA8″ rowspan=”2″>
<h1>Flat Eric!</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, justo non dictum viverra,
dolor tortor volutpat ipsum, vel lacinia elit risus in quam. Proin ut arcu id enim consequat suscipit
sed vel ligula. In mollis consequat tincidunt. Donec ac purus accumsan purus tristique viverra a venenatis
magna.
</p>
</td>
</tr>
<tr>
<td bgcolor=”FAEDA8″>
<img src=”images/flateric2.jpg” height=”150px” width=”150px” alt=”flateric2″/>
</td>
</tr>
</table>
</body>
</html>
Geef een reactie