Vahel on vajadus lisada veebilehtedele nimekirju ja loetuelusid ja nende lisamise parimaks viisiks on kasutada loetelude märgendeid. Ei tasu alahinnata loetelusid, nad võivad küll tunduda igavate ja mõttetutena, kuid veebilehe loomisel saate te aru, kui kasulikud nad siiski on.
XHTML
Nummerdamata loetelu
Nummerdamata nimekirja puhul on nimekirja liikme ees täpp, nool, sidekriips või midagi muud. Liikme märgistamiseks võib kasutada kõike, väljaarvatud numbreid. Selleks, et luua nummerdamata nimekirja, tuleb esiteks luua loetelu luustik. Luustiku põhitoeks on märgendid <ul> ja </ul> (unordered list). Nende vahele jäävad nimekirja liikmed, iga liige tuleb lisada <li> (list object) märgendite vahele.
Nummerdatud loetelu
Nummerdatud loetelu puhul, nagu nimigi ütleb, lisatakse iga nimekirja liikme ette selle järjekorra number. Nummerdatud loetelu luustikuks on märgendid <ol> (ordered list). Nende vahele jäävad nummerdatud liikmed, mille iga liige on <li> märgendite vahel.
Loetelude kombineerimine
Nummerdatud ja nummerdamata loetelusid saab ja peabki kombineerima. Selle jaoks on vaja lisada ühe loetelu liikmeks teise loetelu märgendid ja nende vahele lisada siis nimekirja liikmed.
CSS
Märkide muutmine
Selleks, et muuta loeteludes ilmuvate elementide vormistust, tuleb stiililehte lisada loetelu märgend ning seejärel looksulud. Looksulgude vahele tuleb lisada omadus “list-style-type” ning seejärel valida kõige sobivam element. Valik ei ole eriti suur, nummerdamata loetelude puhul nendeks on:
- list-style-type: circle; iga loetelu elemendi ees on ring.
- list-style-type: square: Täpi asemel on elemendi ees ruut.
Ning nummerdatud nimekirjade puhul on märkide valikus:
- list-style-type: upper-roman; Araabia numbrite asemel on rooma numbrid.
- list-style-type: lower-alpha; Numbrite asemel on ladina tähed.
Juhul, kui tahate veebilehe loetelu veidi huvitavamaks muuta, saab tavaliste täppide ja numbrite asemel kasutada pilte. Selle jaoks on vaja loetelu omadusele “list-style-type” määrata väärtuseks “url (pildinimetus.nimelaiend)”.
NB! Lisatav pilt peab olema samas kaustas, mis veebileht.
tehnikarott 