Lingid

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.

Advertisements

Kirjuta kommentaar

Täida nõutavad väljad või kliki ikoonile, et sisse logida:

WordPress.com Logo

Sa kommenteerid kasutades oma WordPress.com kontot. Logi välja / Muuda )

Twitter picture

Sa kommenteerid kasutades oma Twitter kontot. Logi välja / Muuda )

Facebook photo

Sa kommenteerid kasutades oma Facebook kontot. Logi välja / Muuda )

Google+ photo

Sa kommenteerid kasutades oma Google+ kontot. Logi välja / Muuda )

Connecting to %s