Loetelud

xhtmlVahel 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

ulistNummerdamata 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

olistNummerdatud 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.comblist

CSS

Märkide muutmine

listcssSelleks, 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.

stilcssJuhul, 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.

Kirjuta kommentaar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Muuda )

Twitter picture

You are commenting using your Twitter account. Log Out / Muuda )

Facebook photo

You are commenting using your Facebook account. Log Out / Muuda )

Google+ photo

You are commenting using your Google+ account. Log Out / Muuda )

Connecting to %s