Institute of Computer Science
  1. Main page
  2. Youth to Code
ET
Log in

Youth to Code

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
  • Institute of Computer Science
  • Faculty of Science and Technology
  • University of Tartu
In case of technical problems or questions write to:

Contact the course organizers with the organizational and course content questions.
The proprietary copyrights of educational materials belong to the University of Tartu. The use of educational materials is permitted for the purposes and under the conditions provided for in the copyright law for the free use of a work. When using educational materials, the user is obligated to give credit to the author of the educational materials.
The use of educational materials for other purposes is allowed only with the prior written consent of the University of Tartu.
Terms of use for the Courses environment