Arvutiteaduse instituut
  1. Esileht
  2. Noored Koodi
EN
Logi sisse
Tähelepanu! Tehnilise tõrke tõttu on hetkel kättesaadavad vaid 2020.a. ja hilisemad üles laetud failid ja kevadsemestri kursused. Rikke kõrvaldamisega tegeletakse.

Noored Koodi

Veebilehed

<< Kõik kursused

  • Kursusest
    • 0. Sissejuhatus veebimaailma

HTML

  • 1. Mis on HTML?
  • 2. Tekst ja viidad
  • 3. Loendid. Tabelid
  • 4. Pildid. Audio. Video

CSS

  • 5. Mis on CSS?
  • 6. Tabelid, loendid, piirid

6.1 Tabelid 6.2 Loendid 6.3 Piirid

  • 7. Pseudoelemendid ja positsioneerimine
  • 8. Kursorid, taustad, pildid
Peatüki sisukord

6.2 Loendid

Selles peatükis käsitletakse loendeid. Materjali edukaks läbimiseks vajate põhiteadmisi märgenditest: <ul>, <ol>, <li> - mis olid selgitatud HTML-i peatükis.

Loendite puhul kehtivad kõik eelmises moodulis kirjeldatud teksti kujundusvahendid. Lisaks saab listidele määrata numbrite ja täppide stiili parameetri list-style-type abil.

Nummerdatud loendi puhul (märgend <ol>) saab parameetrile list-style-type järgmisi väärtusi omistada:

  • decimal - araabia numbrid (vaikimisi väärtus)
  • decimal-leading-zero - numbritele lisatakse polsterdusena ette 0
  • lower-roman - väikesed rooma numbrid
  • upper-roman - suured rooma numbrid
  • lower-alpha - väikesed tähed
  • upper-alpha - suured tähed
  • none - tüüp puudub

Vaata rohkem siit

Nummerdamata loendi puhul (märgend <ul>) saab kasutada väärtuseid:

  • disc - ketas (vaikimisi)
  • circle - ring
  • square - ruut

Näide

<!DOCTYPE html>
<html>
<head>
  <meta charset="ISO-8859-1" />
  <style type="text/css">
ul {
   list-style-type: upper-roman;
}  
   
  </style>
</head>
<body>
<ul>Loendi näide
<li>Üks</li>
<li>Kaks</li>
<li>Kolm</li>
</ul>
</body>
</html>

Selle koodi tulemus näeb veebilehitsejas järgmiselt:

Loendi list-style-position omadus annab veebilehitsejale märku, kus peaks tekst olema selle märkide suhtes. Vaikimisi on tekst märkidest eemal, kuid saate teha ka nii, et märgid oleksid teksti kõrval.

  • outside - tekstist eemal (vaikimisi)
  • inside - teksti kõrval

Iseseisev ülesanne:

Kasutage oma HTML ja CSS teadmisi ning koostage loend, mis näeks välja identne järgmisega:

Peatüki sisukord
  • Arvutiteaduse instituut
  • Loodus- ja täppisteaduste valdkond
  • Tartu Ülikool
Tehniliste probleemide või küsimuste korral kirjuta:

Kursuse sisu ja korralduslike küsimustega pöörduge kursuse korraldajate poole.
Õppematerjalide varalised autoriõigused kuuluvad Tartu Ülikoolile. Õppematerjalide kasutamine on lubatud autoriõiguse seaduses ettenähtud teose vaba kasutamise eesmärkidel ja tingimustel. Õppematerjalide kasutamisel on kasutaja kohustatud viitama õppematerjalide autorile.
Õppematerjalide kasutamine muudel eesmärkidel on lubatud ainult Tartu Ülikooli eelneval kirjalikul nõusolekul.