{"id":720,"date":"2020-05-05T20:05:15","date_gmt":"2020-05-05T20:05:15","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&p=720"},"modified":"2020-05-12T12:18:46","modified_gmt":"2020-05-12T12:18:46","slug":"html-loendid","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/html-loendid\/","title":{"rendered":"HTML loendid"},"content":{"raw":"Loendid (lists<\/em>) v\u00f5ivad veebilehel olla nagu tavap\u00e4rastes tekstideski nummerdatud v\u00f5i t\u00e4pploendid . M\u00f5lemat t\u00fc\u00fcpi loendi sisuks on loendi elemendid <li><\/code> (list item<\/em>).\r\n

Nummerdatud loend<\/h2>\r\nNummerdatud loendi jaoks on kasutusel element <ol><\/code> (ordered list<\/em>). N\u00e4iteks nummerdatud loendi kirjeldus ja selle tulemus:\r\n
<ol>\r\n  <li>Esimene loendi element<\/li>\r\n  <li>Teine loendi element<\/li>\r\n  <li>Kolmas loendi element<\/li>\r\n<\/ol><\/pre>\r\n1. Esimene loendi element\r\n2. Teine loendi element\r\n3. Kolmas loendi element\r\n\r\nKui me soovime nummerdatud loendi puhul alustada loendust mingist muust numbrist kui 1, siis saame kasutada atribuuti start<\/code>.\r\n
<ol start=\"10\">\r\n  <li>Esimene loendi element<\/li> \r\n  <li>Teine loendi element<\/li> \r\n  <li>Kolmas loendi element<\/li> \r\n<\/ol><\/pre>\r\n10. Esimene loendi element\r\n11. Teine loendi element\r\n12. Kolmas loendi element\r\n
Nummerdatud loendi type<\/code> atribuut<\/h2>\r\nKasutades atribuuti <type> saame me numbrid asendada ka t\u00e4htede v\u00f5i rooma numbritega.\r\ntype =\"1\" - loendi elemendid on nummerdatud (vaikev\u00e4\u00e4rtus)\r\ntype=\"A\" - loendi elemendid on nummerdatud suurt\u00e4htedega\r\ntype=\"a\" - loendi elemendid on nummerdatud v\u00e4iket\u00e4htedega\r\ntype=\"I\" - loendi elemendid on nummerdatud suurte rooma numbritega\r\ntype=\"i\" - loendi elemendid on nummerdatud v\u00e4ikeste rooma numbritega\r\n
<ol type=\"i\"> \r\n  <li>Esimene loendi element<\/li> \r\n  <li>Teine loendi element<\/li> \r\n  <li>Kolmas loendi element<\/li> \r\n<\/ol><\/pre>\r\ni. Esimene loendi element\r\nii. Teine loendi element\r\niii. Kolmas loendi element\r\n
T\u00e4pploend<\/h2>\r\nT\u00e4pploendi jaoks kasutatakse elementi <ul><\/code> (unordered list<\/em>). N\u00e4iteks t\u00e4pploendi kirjeldus ja selle tulemus:\r\n
<ul>\r\n  <li>Esimene loendi element<\/li>\r\n  <li>Teine loendi element<\/li>\r\n  <li>Kolmas loendi element<\/li>\r\n<\/ul><\/pre>\r\n\u2022 Esimene loendi element\r\n\u2022 Teine loendi element\r\n\u2022 Kolmas loendi element\r\n\r\nVaikev\u00e4\u00e4rtusena t\u00e4histatakse t\u00e4pploendi elemendid v\u00e4ikeste mustade t\u00e4ppidega. Soovi korral saame me valida aga ka teiste t\u00e4histajate vahel kasutades omadust list-style-type<\/code>. Teiste hulgas on meil valikus n\u00e4iteks disc<\/em> (vaikev\u00e4\u00e4rtus), circle<\/em>, square<\/em>, decimal<\/em>, decimal-leading-zero<\/em>, lower-roman<\/em>, upper-latin<\/em> jt v\u00f5i hoopis valik none<\/em>, mille puhul ei kuvata \u00fchtegi t\u00e4histajat.\r\n
<ul style=\"list-style-type:circle;\"> \r\n  <li>Esimene loendi element<\/li> \r\n  <li>Teine loendi element<\/li> \r\n  <li>Kolmas loendi element<\/li> \r\n<\/ul><\/pre>\r\nV\u00f5i siis asendame t\u00e4pploendi t\u00e4pi hoopis enda poolt valitud pildiga kasutades omadust list-style-image<\/code>.\r\n
<ul style=\"list-style-image:url(pildid\/banaan.jpg);\"> \r\n  <li>Esimene loendi element<\/li> \r\n  <li>Teine loendi element<\/li> \r\n  <li>Kolmas loendi element<\/li> \r\n<\/ul><\/pre>\r\n
Kirjelduste loend<\/h2>\r\nKui on tarvis loetleda terve hulk m\u00f5isteid\/kirjeldusi, siis selleks kasutatakse spetsiaalset loendielementi <dl><\/code> (Description List<\/em>).\r\n\r\nSelle loendi elemendid defineeritakse elementidega <dt><\/code> (Description Term<\/em>) ja nende selgitused \u2013 kirjeldused elementidega <dd><\/code> (Description Description<\/em>).\r\n
<dl>\r\n  <dt>Arvuti<\/dt>\r\n    <dd>Masin, mis pakub meelelahutust, infot ja paljut muud<\/dd>\r\n  <dt>Monitor<\/dt>\r\n    <dd>Muudab arvutis toimuva n\u00e4htavaks<\/dd>\r\n  <dt>Printer<\/dt>\r\n    <dd>Kirjutab arvutis toimuva paberile<\/dd>\r\n<\/dl><\/pre>\r\n
\r\n \t
Arvuti<\/dt>\r\n \t
Masin, mis pakub meelelahutust, infot ja paljut muud<\/dd>\r\n \t
Monitor<\/dt>\r\n \t
Muudab arvutis toimuva n\u00e4htavaks<\/dd>\r\n \t
Printer<\/dt>\r\n \t
Kirjutab arvutis toimuva paberile<\/dd>\r\n<\/dl>\r\n
Mitmetasandiline loend<\/h2>\r\nLoomulikult on v\u00f5imalik luua ka mitmetasemelisi loendeid ning seejuures t\u00e4pp- ja nummerdatud loendeid omavahel kombineerida. N\u00e4iteks liigendatud loend, milles esimene tase on nummerdatud, teine tase t\u00e4pploend:\r\n
<ol>\r\n  <li>Esimene loendi element\r\n    <ul>\r\n      <li>Esimene alamelement<\/li>\r\n      <li>Teine alamelement<\/li>\r\n    <\/ul>\r\n  <\/li>\r\n  <li>Teine loendi element\r\n    <ul>\r\n      <li>Esimene alamelement<\/li>\r\n      <li>Teine alamelement<\/li>\r\n    <\/ul>\r\n  <\/li>\r\n  <li>Kolmas loendi element<\/li>\r\n<\/ol>\r\n<\/pre>\r\n1. Esimene loendi element\r\n
    \r\n \t
  • Esimene alamelement<\/li>\r\n \t
  • Teine alamelement<\/li>\r\n<\/ul>\r\n2. Teine loendi element\r\n
      \r\n \t
    • Esimene alamelement<\/li>\r\n \t
    • Teine alamelement<\/li>\r\n<\/ul>\r\n3. Kolmas loendi element\r\n
      Enesekontroll (1 \u00fclesanne)<\/h3>\r\n[h5p id=\"20\"]\r\n