Ongeordende Lyste
<ul> begin 'n ongeordende lys
<li> begin elke lysitem
</li> eindig elke lysitem
</ul> eindig die ongeordende lys
Soos enige van ons gunsteling dinge, is die <ul>-merker meer as wat dit voorgee om te wees. Soos die naam suggereer is die <ul>-merker se sterk punt om ongeordende ("bulleted") lyste te struktureer. Maar dit figureer ook sterk as 'n kantlyn-maker, soos wat jy hier onder sal sien.
Die oorspronklike doel van die <ul>-merker is maklik om te bereik: Elke ongeordende lys begin met die <ul>-merker en word geëindig met die </ul>-merker. Tussenin word elke lysitem aangedui met die <li>- en </li>-merkers, net soos met genommerde lyste (<ol>).
Een ding om te onthou: Die enigste goed wat binne 'n ongeordende lys kan kom, is die lysitems. Indien jy dus jou lys 'n titel wil gee, moet jy dit voor die <ul>-merker kom. Dit geld ook vir genommerde lyste.
Die HTML vir 'n basiese lys sal soos volg lyk:
<p>Diere wat swak kantoortroeteldiere uitmaak:</p>
<ul>
<li>Hoenders</li>
<li>Olifante</li>
<li>Varke</li>
</ul>
|
en sal soos volg vertoon:
Diere wat swak kantoortroeteldiere uitmaak:
|
Jy kan ook 'n lys binne 'n ander lys plaas. Onthou net om elke <ul> weer af te sluit met 'n </ul>:
<p>Diere wat swak kantoortroeteldiere uitmaak:</p>
<ul>
<li>Hoenders</li>
<ul>
<li>Moeilik om toiletmaniere te leer</li>
<li>Lê eiers op snaakse plekke</li>
</ul>
<li>Olifante</li>
<ul>
<li>Kan nie op jou skoot sit terwyl jy werk nie</li>
<li>Pas nie in jou kantoor nie</li>
</ul>
<li>Varke</li>
<ul>
<li>Kan jou tafel omgooi met een stamp van die kop</li>
<li>Benodig 'n kantoor modderbad (dalk 'n voordeel?)</li>
</ul>
</ul>
|
In jou webblaaier sal dit soos volg vertoon:
Diere wat swak kantoortroeteldiere uitmaak:
- Hoenders
- Moeilik om toiletmaniere te leer
- Lê eiers op snaakse plekke
- Olifante
- Kan nie op jou skoot sit terwyl jy werk nie
- Pas nie in jou kantoor nie
- Varke
- Kan jou tafel omgooi met een stamp van die kop
- Benodig 'n kantoor modderbad (dalk 'n voordeel?)
|
Soos ek aan die begin aangedui het, het die <ul>-merker ook 'n ander doel: kantlyne. Deur die <ul>-merker sonder die <li>-merkers te gebruik, kan jy die linkerkantse kantlyn verander. As jy dus in jou HTML-dokument skryf:
<ul>Sy glimlag
<p></p>
<ul>en stap weg.
<p></p>
<ul>Dink daaroor...
</ul></ul></ul>voor jy weer met haar praat.
|
sal dit soos volg vertoon:
voor jy weer met haar praat.
|
Sien jy dat verskeie <ul>-merkers gekombineer is om die teks na regs te skuif en weer terug? En ook ekstra <p>-merkers om die teks vertikaal te spasieer. Onthou net om elke <ul>-merker af te sluit met 'n </ul>-merker.
Nou vir die keuses: Jy kan die vorm van die "bullets" verander deur die tipe te spesifiseer. Die opsies is:
- <li type="disc">
- <li type="circle">
- <li type="square">
|
OM OP TE SOM:
- <ul> begin 'n ongeordende lys.
- <li> begin elke lysitem.
- </li> eindig elke lysitem.
- </ul> eindig die ongeordende lys.
- <ul> word gebruik om ongeordende ("bulleted) lyste te struktureer.
- Jy kan 'n lys binne 'n ander lys plaas.
- Deur die <ul>-merker sonder die <li> </li>-merkers te gebruik, kan jy die linkerkantse kantlyn verander.
|
Indien jy voel jy het die ongeordende lys onder die knie, gaan gerus na die volgende les oor definisie lyste.
| 