In dit vijfde deel van de reeks artikelen over XHTML gaan we het hebben over lijsten. Lijsten zijn ideaal voor opsommingen of faq's (veel gestelde vragen). De reden dat ze zo fijn zijn, is dat het voor iedereen (bezoekers, browsers, zoekmachines en hulpsoftware) duidelijk is dat het hier om een opsomming gaat, zelfs zonder opmaak.
We zullen eens kijken naar een HTML-voorbeeld met twee lijsten:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>XHTML gebruiken - deel 5</title>
<style type="text/css">
body {
font-family: verdana, sans-serif;
}
</style>
</head>
<body>
<h3>Een gewone lijst</h3>
<ul>
<li>De eerste vermelding</li>
<li>De tweede vermelding</li>
<li>De derde vermelding</li>
</ul>
<h3>Een definitie lijst</h3>
<dl>
<dt>De eerste vraag</dt>
<dd>Het antwoord op de eerste vraag.</dd>
<dt>De tweede vraag</dt>
<dd>Het antwoord op de tweede vraag.</dd>
</dl>
</body>
</html>
In de eerste opsomming heeft iedere vermelding in een lijst een eigen open- en sluittag < li>< /li>. Alle lijstvermeldingen staan tussen de open- en sluittag van de opsomming < ul>< /ul>. De tweede opsomming is een definitielijst. Er wordt binnen de lijst (< dl>< /dl>) eerst een definitie-term genoemd (< dt>< /dt>) en daarna een definitie-omschrijving (< dd>< /dd>). Dit is handig voor woordverklaringen of vraag-/antwoordlijsten.
Iedere browser mag zelf bepalen hoe de lijsten worden opgemaakt. Er is geen standaard voor. Alle opmaak is via CSS te beïnvloeden. Hieronder staat een voorbeeld van code waarmee de lijsten opgemaakt kunnen worden, plak dit na de body-opmaak ('}') en de css-sluittag (< /style>').
ul
{
list-style-type: none;
padding-left: 0;
margin-left: 0;
margin-bottom: 1em;
}
li {
padding-left: 0;
margin-left: 0;
margin-bottom: 0.5em;
}
dt {
color: rgb(136,187,170);
font-weight: bold;
}
dd {
color: black;
margin: 0 1em 0.8em 1em;
}
Het zal duidelijk zijn dat de opmaak van de ul-, li-, dt- en dd-tags hier ingesteld wordt. Alleen de eerste eigenschap ('list-style-type') is nieuw. Geldige waardes zijn onder andere: disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman en upper-roman. Wat ook moet opvallen is dat ik nergens heb bepaald hoe groot het lettertype moet zijn, ik laat dat aan de browser of de gebruiker over. Door alle afstanden (margin) in 'em'-eenheden te bepalen, zal de opmaak kloppen voor browsers met een grote letter en browsers met een kleine letter. De 'em'-eenheid wordt bepaald door het font in combinatie met de gebruikte grootte, de vuistregel is dat de 'em'-eenheid net zo groot is als de breedte van de letter 'm'. In de volgende uitgave van Web Succes Magazine gaan we een menu maken met behulp van de < ul>- en < /ul>-tag.
Bob Broen |
2007-05-02 |
Programmeren en techniek
