Loendid.

HTML keeles on informatsiooni esitamiseks loenditena ette nähtud spetsiaalne teekide kogum. Loendid on üheks informatsiooni levinumaks esitusviisiks, nii elektrondokumentides kui prinditavates dokumentides. Loenditega puutume kokku praktiliselt iga päev - see võib olla kauplusest ostetava kauba nimekiri, õpilaste nimekiri klassis või lihtsalt loend asjadest, mis on vaja teha. Loendite loomise võimalus on paljudes tekstitöötlusvahendites olemas, muuhulgas on ühe võimsaima tekstitöötlus vahendi Microsoft Word koosseisus vahendid mitmesuguste loendite vormindamiseks. Toome siinkohal ära näitena juhud, kus loendite kasutamine on otstarbekas:

HTML keeles on olemas järgnevate loendite põhitüüpe: tärnidega loend, nummerdatud loend ja määratluste-definitsioonide loend. Eri tüüpi loendite organiseerimiseks kasutatakse järgmisi teeke: <UL>, <OL>, <DL>, <DIR>, <MENU>. Dokumendis olevate mitmesuguste eri tüüpi loendite abil võivad olla realiseeritud mitmesugused erinevad võimalused, mida kirjeldamegi antud tunnis.

Tärnidega loend.

Üheks loendite tüübiks, mis on realiseeritud HTML keeles on tärnidega loend. Teisiti võib selliseid loendeid nimetada ka mittenummerdatud loenditeks või korrastamata loenditeks. Viimast nimetust kasutatakse sageli kui teegi <UL> formaalset tõlget, mille abil organiseeritaksegi seda tüüpi loendeid HTML dokumentides (Unordered List).

Tärnidega loendites kasutatakse selle elementide esiletõstmiseks spetsiaalseid sümboleid, mida nimetatakse loendi markeriteks - tärnideks (on nimetatud neid ka bulletiteks, mis on inglisekeelse nimetuse bullet- kuul formaalne hääldus). Markerite välise esituse määratletakse lõppkasutaja lehitseja seadetega, kusjuures mitmetasemeliste loendite puhul valivad lehitsejad automaatselt erinevaid markerite tüüpe eri tasandite loendite jaoks.

Teegid <UL> ja <LI>.

Ülesanne 1. Avame kaustast dokumendi ja salvestame selle uue nimega.

  1. Avage oma töölaual olev kaust "HTML40"
  2. Käivitage Notepad (Start-Programs-Accessories-Notepad) või intelligentsem tee Notepad käivitamiseks (Start - Run…; kirjutame lahtrisse notepad ja klõpsame korraldusnupul OK).
  3. Avage Notepad abiga kaustast "HTML40" dokument "uus.htm".
  4. Salvestage dokument samasse kausta uue nimega "loendid.htm".
  5. Avage uus dokument "loendid.htm" ka lehitseja abil.

Tärnidega loendi loomiseks on vaja kasutada konteiner teeki <UL></UL>, mille sees asuvad kõik loendi elemendid. Loendi avav ja sulgev teek kindlustavad tühja rea sisestamise loendi ette ja ka järele, eraldades seega loendi dokumendi põhisisust. Sellepärast pole siin lõigu teegi <P> või sundreavahetuse teegi <BR> kasutamine vajalik.

Iga loendi element peab algama teegiga <LI> (List Item). Teegile <LI> ei ole vajalik vastav sulgev teek </LI>, kuigi selle kirjutamine ei too esile teegi ignoreerimist lehitseja poolt. Lehitsejad reeglina alustavad iga uue loendi elemendiga uuelt realt.

Ülesanne 2. Loome tärnidega loendi.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Sisestage peale teeki <BODY> uuelt realt pealkiri: Tärnidega loend. ja vormindage see esimese taseme pealkirja teegiga.
  3. Sisestage nüüd uuelt realt loendi avav teek: <UL>.
  4. Sisestage nüüd uuelt realt alapealkiri: Sodiaagi märgid. ja vormindage see teise taseme pealkirja teegiga ja rasvase kirja teegiga.
  5. Sisestage nüüd järjest 12. sodiaagi märki:

    <LI>Kaljukits
    <LI>    Lammas
    <LI>    Kolmikud
    <LI>    Skorpion
    <LI>    Lõvi
    <LI>    Neitsi
    <LI>    Kaalud
    <LI>    Vähk
    <LI>    Snaiper
    <LI>    Antiloop
    <LI>    Torumees
    <LI>    Kalur

  6. Sisestage nüüd loendi sulgev teek: </UL>.
  7. Salvestage muudatus Notepadis (File - Save) ja värskendage lehitseja kuva (nupp tööriistaribal - Refresh)

Märkus: nagu on näha antud ülesandest võib teekide vahel peale loendi elementide olla ka teisi HTML keele elemendid. Viimases ülesandes oli loendi sees tekstirida, mis ei olnud loendi element vaid selle pealkiri.

Teegis <UL> võib olla mittekohustuslik parameeter TYPE. Parameeter võib omada ühte järgmistest väärtustest: disc, circle ja square. Seda parameetrit kasutatakse loendi tärni tüübi sunniviisiliseks etteandmiseks. Tärni konkreetne tüüp sõltub siiski kasutatavast loendist. Tüüpilisteks tärnide kujutisteks on järgmised:

TYPE=disc

Tärne kujutatakse värvitud ringikestena.

TYPE=circle

Tärne kujutatakse värvimata ringikesena.

TYPE=square

Tärne kujutatakse värvitud ruudukestena.


Ülesanne 3. Lisame parameetri TYPE.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage teegile <UL> parameeter nii: <UL TYPE=circle>
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Vaikimisi kasutatavaks tüübiks on TYPE=disc. Peale muudatuse salvestamist ja lehitseja kuva värskendamist asendas lehitseja tärni tüübi värvimata ringikesega. Kui on tegemist mitmetasemeliste loenditega, siis kasutataksegi esimese taseme elementide jaoks väärtust disc, teise taseme elementide jaoks väärtust circle ja kolmanda taseme elementide jaoks väärtust square vaikimisi.

Parameetrit TYPE võib samade väärtustega kasutada ka loendi iga üksiku elemendi jaoks eraldi. Selleks tuleb parameeter vastava väärtusega lisada teeki <LI>.

Ülesanne 4. Lisame parameetri TYPE.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage igale teisele teegile <LI> parameeter nii: <LI TYPE=square>
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Märkus: erinevad lehitsejad interpreteerivad loendi üksikule elemendile tärni tüübi määratlemist erinevalt: Netscape muudab loendi elemendi tärni tüübi ja sellele järgnevate elementide tärnide tüübid seni kuni leiab HTML koodist uue tärni tüübi määramisparameetri; Internet Explorer aga seevastu muudab tärni tüüpi ainult muudetava elemendi jaoks.

Tärnidega loendi graafilised markerid.

Tärnide asemel võib loendites kasutada ka graafilisi kujutisi, mis on laialt kasutusel meeldivate, ilusti vormistatud HTML dokumentide loomisel. Tegelikult ei ole see moodus vahetult HTML keele pakutav võimalus, see realiseeritakse isegi mõneti "kuntslikult". See ei tähenda aga, et seda ei ole soovitatav kasutada vaid ainult seda, et siine ei kasutata mingeid spetsiaalseid HTML keele konstruktsioone.

Selleks, et mõista graafiliste tärnide ideed on vaja tutvuda loendite HTML lehekülgedel realiseerimise mehhanismiga. Tegelikult osutab teek <UL> lehitsejale, et kõik, mis järgneb sellele teegile tuleb kuvada teatud taandega paremale poole. Ja teegid <LI> tagavad standardsete tärnide kuvamise.

Kui aga meile on vajalikuks saanud graafiliste tärnidega loendi loomine, siis võime me üldse loobuda teegi <LI> kasutamisest. Piisab sellest kui me iga loendi elemendi ette sisestame graafilise kujutise. Ainsaks ülesandeks, mis seejuures tuleb lahendada on: loendi elementide eraldamine üksteisest. Selleks võib kasutada kas lõigu teeki <P> või siis sundreavahetuse teeki <BR>.

Ülesanne 5. Asendame standardsed tärnid graafiliste tärnidega.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Laadige alla ja salvestage kausta "HTML40" fail: Pebble.gif.
  3. Lisage loendi iga rea lõppu sundreavahetuse teek <BR> (viimane loendi element välja arvatud).
  4. Kustutage teegid (koos parameetriga) <LI> loendi elementide eest.
  5. Sisestage iga loendi elemendi ette järgmine teek: <IMG SRC="Pebble.gif">
  6. Salvestage muudatus ja värskendage lehitseja kuva.

    Päris naljakas, mis? Selline, munakivikestega loend.

Nummerdatud loend.

Ülesanne 6. Lisame uue alapealkirja.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage tärnidega loendi teegi </UL> järele uus alapealkiri: Nummerdatud loend ja vormindage see esimese taseme pealkirja teegiga.
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Teiseks HTML keeles realiseeritud loendi tüübiks on nummerdatud loend. Teisiti nimetatakse seda tüüpi loendeid ka korrastatud loenditeks. Viimast nimetust kasutatakse kui vastava teegi <OL> inglisekeelse nimetuse (Ordered List) formaalset tõlget, mille abil organiseeritaksegi sellist tüüpi loendid HTML dokumentides.

Seda tüüpi loendid kujutavad endast reeglina korrastatud elementide nimekirjasid. Erinevuseks tärnidega loendiga on see, et iga nummerdatud loendi elemendi ette pannakse automaatselt järjekorranumber. Numeratsiooni tüüp sõltub lehitsejast aga ka loendi teekides antavate parameetrite väärtusest. Ülejäänus on nummerdatud loendite realiseerimise mehhanism paljuski sarnane tärnidega loendite realiseerimise mehhanismiga.

Teegid <OL> ja <LI>.

Nummerdatud loendite loomiseks tuleb kasutada teek konteinerit <OL> (sulgevaks teegiks on vastavalt </OL>), mille sees asuvad kõik loendi elemendid. Loendi avav ja sulgev teek kindlustavad tühja rea sisestamise loendi ette ja ka järele, eraldades seega loendi dokumendi põhisisust. Sellepärast pole siin lõigu teegi <P> või sundreavahetuse teegi <BR> kasutamine vajalik.

Nagu ka tärnidega loendis nii ka nummerdatud loendis peab iga loendi element algama teegiga <LI>.

Ülesanne 7. Loome nummerdatud loendi.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage viimase alapealkirja järele uuele reale loendi teek <OL>.
  3. Sisestage nüüd uuelt realt alapealkiri: Maalt nähtavate eredamate tähtede nimekiri. ja vormindage see teise taseme pealkirja teegiga ja rasvase kirja teegiga.
  4. Sisestage nüüd järjestikku üksteise alla eredate tähtede loendi:

    <LI>Siirius
    <LI>    Kanopius
    <LI>    Aldebaran
    <BR>     …
    <LI value=    58>Mitsar
    <BR>     …
    <LI value=    75>Põhjanael

  5. Sisestage nüüd loendi sulgev teek: </OL>.
  6. Salvestage muudatus ja värskendage lehitseja kuva.

Teegis <OL> võivad olla järgmised parameetrid: TYPE ja START.

Parameetrit TYPE kasutatakse loendi numeratsiooni tüübi etteandmiseks. Parameetril TYPE võivad olla järgmised väärtused:

TYPE= A

Määratleb markerid kui ladina tähestiku suurtähed.

TYPE= a

Määratleb markerid kui ladina tähestiku väiketähed.

TYPE= I

Määratleb markerid kui suurtähtedest rooma numbrid.

TYPE= i

Määratleb markerid kui väiketähtedest rooma numbrid.

TYPE= 1

Määratleb markerid kui araabia numbrid.

 

Vaikimisi kasutatakse väärtust TYPE=1, st numeratsiooni araabia numbritega. See puudutab ka mitmetasemelisi nummerdatud nimekirju. Erinevalt tärnidega loenditest ei kuva lehitsejad vaikimisi erinevatel tasemetel erinevat tüüpi numeratsiooni. Peale numbrit sisestatakse alati automaatselt "punkt".

Ülesanne 8. Lisame parameetri TYPE (muudame loendi numeratsiooni).

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage teegile <OL> parameeter nii: <OL TYPE=i>
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Parameetrit TYPE võib nendesamade väärtustega kasutada numeratsioonide tüübi etteandmiseks ka loendi igale elemendile eraldi. Selleks on vaja parameeter TYPE vastava väärtusega lisada teeki <LI>.

Ülesanne 9. Lisame parameetri TYPE (muudame elemendi numeratsiooni tüüpi).

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage suvalisele teegile <LI> parameeter nii: <LI TYPE=A>
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Teegi <OL> parameeter START võimaldab alustada numeratsiooni, mitte ühest alates. Parameetri START väärtusena tuleb alati anda naturaalarvu sõltumata loendi numeratsiooni tüübist.

Ülesanne 10. Lisame parameetri START (muudame loendi numeratsiooni tüüpi ja määrame algarvuks arvu 10).

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage teegile <OL> parameeter nii: <OL TYPE=i START=10> ja sisestage parameetri TYPE väärtuseks l: nii TYPE=l.
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Numeratsiooni tüüpi ja algarvu võib ette anda ka loendi üksikutele elementidele eraldi. Nummerdatud loendite puhul võib teegile <LI> lisada parameetrid TYPE ja VALUE. Parameetrile TYPE võib anda samu väärtusi, nagu ka teegi <OL> puhulgi.

Ülesanne 11. Lisame parameetri TYPE (muudame elemendi numeratsiooni tüüpi).

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage suvalisele teegile <LI> parameeter nii: <LI TYPE=i>
  3. Salvestage muudatus ja värskendage lehitseja kuva.

Teegi <LI> parameetri VALUE väärtus võimaldab antud loendi elemendile muuta järjekorranumbrit. Seejuures muutub ka kõikide järgnevate elementide numeratsioon. Tüüpiliseks kasutusalaks on suured loendid mõnede elementide vahele jätmisega.

Ülesanne 12. Loome uued "katkevad" loendid.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage teegile </OL> järgnevale reale uus alapealkiri: Katkevad nummerdatud loendid. ja vormindage see teise taseme pealkirja teegiga.
  3. Lisage nüüd esimese loendi teegid <OL> ja </OL>.
  4. Trükkige sinna teekide vahele järgmised elemendid:

    <LI><LI><LI><LI>
    <BR>     …
    <LI VALUE=    2000>
    <LI><LI><LI><LI>

  5. Salvestage muudatus ja värskendage lehitseja kuva.
  6. Lisage nüüd esimese loendi teegid <OL TYPE=I> ja </OL>.
  7. Trükkige sinna teekide vahele järgmised elemendid:

    <LI><LI><LI><LI>
    <BR>     …
    <LI VALUE=    2000>
    <LI><LI><LI><LI>

  8. Salvestage muudatus ja värskendage lehitseja kuva.
  9. Lisage nüüd esimese loendi teegid <OL TYPE=A> ja </OL>.
  10. Trükkige sinna teekide vahele järgmised elemendid:

    <LI><LI><LI><LI>
    <BR>     …
    <LI VALUE=    2000>
    <LI><LI><LI><LI>

  11. Salvestage muudatus ja värskendage lehitseja kuva.
  12. Kuna loendid kuvatakse siiski liiga vasaku serva lähedale, siis nihutame need loendid natuke paremale kasutades teeki <BLOCKQUOTE>, piirates iga teegipaari <OL></OL> teekidega <BLOCKQUOTE>ja </BLOCKQUOTE>.
  13. Salvestage muudatus ja värskendage lehitseja kuva.

    Loomulikult võib nummerdatud loendites olla selliseid "katkevusi" rohkem kui üks. ;=)

 

Määratluste ehk definitsioonide loend.

Definitsioonide loendid, mida nimetatakse ka spetsiaalsete terminite definitsioonide sõnastikuks on loendite eritüübiks. Erinevalt teistest loendite tüüpidest koosneb definitsioonide loendi element alati kahest osast. Loendi esimesesse ossa kirjutatakse defineeritav termin-mõiste ja teise ossa tekst artikli kujul, milles seletatakse lahti termin-mõiste olemus.

Teegid <DL> ja <DT> ning <DD>.

Definitsioonide loendeid kirjutatakse konteiner teegi <DL> abil. Sulgevaks teegiks on seega teek </DL> (Definition List). Konteineri sees märgitakse teegiga <DT> (Definition Term) defineeritav mõiste ja teegiga <DD> (Definition Description) - lõik tekstiga, milles selgitatakse termin-mõiste olemust. Teekidele <DT> ja <DD> ei ole vastav sulgev teek kohustuslik.

Ülesanne 13. Loome definitsioonide loendi.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage dokumendi lõppu uus alapealkiri: Definitsioonide loend. ja vormindage see pealkirjade teise taseme vormindamise teegiga.
  3. Sisestame definitsiooni loendi teegid <DL> ja </DL>.
  4. Sisestame definitsiooni loendi teekide vahele uuelt realt järgmised teegid:

    Microsoft Word 97 Peamenüü punkti <B>File</B> elemendid:
    <DT>    New …
    <DD>    elemendi valimisel tuuakse ekraanile dialoogiaken, milles päritakse uue loodava dokumendi tüüpi.
    <DT>    Open …
    <DD>    elemendi valimisel avatakse failer-aken, mille abil saab arvutist otsida ja avada dokumente.
    <DT>Save As …
    <DD>    element avab failer-akna jooksva dokumendi salvestamiseks uue niega.
    <DT> Print …
    <DD>    element avab dialoogiakna, mille abil saab dokumendi printida.

  5. Salvestage muudatus ja värskendage lehitseja kuva.

Tekstis peale teeki <DT> ei saa kasutada ploki taseme teeke selliseid nagu lõigu teek <P> ja pealkirjade teegid: <H1>, <H2>, …, <H6>. Reegliks on, et tekst peale teeki <DT> peab mahtuma ära ühele reale. Selgitav tekst peale teeki <DD> kuvatakse järgmisele reale ja väikese taandega paremale poole. Informatsioonis, mis asub peale teeki <DD> võib kasutada ploki taseme teeke. Siit järeldub, et definitsioonide teegid võivad olla mitmetasemelised.

Mitmetasemelised loendid.

On juhuseid kus mingi loendi elemendi alla võib (tuleb) lisada veel mitu samatüübilist (teist tüüpi) elementi. Seejuures organiseeritakse mitmetasemeline ehk sisestatud loend. HTML keeles on lubatud suvaline eri tüüpi loendite kasutamine mitmetasemelise loendi loomisel, kuid samas tuleb nende kasutamisel olla küllalti korrektne.

Ülesanne 14. Loome mitmetasemelise loendi.

  1. Avage või aktiveerige Notepad dokumendiga "loendid.htm".
  2. Lisage dokumendi lõppu uus alapealkiri: Mitmetasemeline loend. ja vormindage see esimese taseme pealkirjade teegi abil.
  3. Sisestage alapealkirja järelt uuelt realt tärnidega loendi loomise teegid (see on meie mitmetasemelise loendi esimene kõige ülemisem tase): <UL> ja </UL>.
  4. Sisestame nüüd nimekirjale uuelt realt ka pealkirja: Kirjatarbed. ja vormindame selle teise taseme pealkirja vormindamise teegiga.
  5. Sisestame nüüd ka esimese taseme loendi elemendid:

    <LI>Kirjatarbed:
    <LI>    Kirjutusvahendid:

  6. Sisestage nüüd teise taseme loendid nii:

    <LI>Kirjatarbed:
    <OL>
    </OL>
    <LI>    Kirjutusvahendid:
    <OL>
    </OL>

  7. Ja teise taseme loendite elemendid sisestage nii:

    <LI>Kirjatarbed:
    <OL>
    <LI>Vihikud;
    <LI>Märkmikud.
    </OL>
    <LI>    Kirjutusvahendid:
    <OL>
    <LI>    Sulepead;
    <LI>    Pliiatsid.
    </OL>

  8. Salvestage muudatus ja värskendage lehitseja kuva.