{"id":268,"date":"2020-01-20T17:26:40","date_gmt":"2020-01-20T15:26:40","guid":{"rendered":"http:\/\/skolarbbos.net\/?p=268"},"modified":"2020-03-08T15:06:33","modified_gmt":"2020-03-08T13:06:33","slug":"kreiranje-liste-u-html-u","status":"publish","type":"post","link":"https:\/\/skolarbbos.net\/?p=268","title":{"rendered":"Kreiranje listi u HTML-u"},"content":{"rendered":"<p>Kada ka\u017eemo liste, uglavnom mislimo na jednostavno, vizuelno odvajanje sadr\u017eaja u smislene celine. To je svakako ta\u010dno, ali liste u HTML-u mogu biti mnogo vi\u0161e. Lista mo\u017ee poslu\u017eiti da odvojimo odre\u0111ene celine, radi grupisanja vi\u0161e linkova u celinu, radi dodeljivanja prioriteta odre\u0111enim elementima i tako dalje.<\/p>\n<p>Same liste i ne moraju izgledati kao \u0161to ih mo\u017eda zami\u0161ljamo, ve\u0107 mogu imati potpuno druga\u010diji izgled, pri \u010demu korisnik i ne prime\u0107uje da je sadr\u017eaj strukturiran pomo\u0107u liste. Na primer, veliki broj navigacija (osnovnih menija) na sajtovima danas je kreiran pomo\u0107u lista, koje su stilizovane poput dropdown menija i sl.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-270 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82.jpg\" alt=\"liste82\" width=\"699\" height=\"430\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82.jpg 699w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82-300x185.jpg 300w\" sizes=\"auto, (max-width: 699px) 100vw, 699px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Prikaz tipi\u010dne liste na jednoj od strana Wikipedije<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-271 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82a.jpg\" alt=\"liste82a\" width=\"569\" height=\"429\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82a.jpg 569w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste82a-300x226.jpg 300w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Prikaz liste u ne\u0161to druga\u010dijem obliku<\/em><\/p>\n<p>U prvom primeru na slici vidimo jednu standardnu primenu liste, i to takozvaneneure\u0111ene liste, gde je pomo\u0107u bulleta strukturiran tekst u smislene celine, pojedina\u010dne stavke. Takav prikaz nabrajanja je pregledniji od obi\u010dnog paragrafa teksta.<\/p>\n<p>U drugom primeru vidimo navigaciju sajta koja je tako\u0111e realizovana pomo\u0107u neure\u0111ene liste, ali koja je drasti\u010dno izmenjena u vizuelnom smislu, kori\u0161\u0107enjem CSS opisa. Same stavke su pore\u0111ane horizontalno, jedna pored druge i lista sadr\u017ei i ugnje\u017edene stavke koje se otvaraju vertikalno na prelazak mi\u0161em.<\/p>\n<p>Ipak, obe liste, i u prvom i drugom primeru, imaju\u00a0 istovetnu strukturu u HTML jeziku, samo se razlikuje njihova stilizacija, vizuelni prikaz, za \u0161ta je zaslu\u017ean CSS. Dakle, mo\u017eemo zaklju\u010diti da <strong>HTML liste koristimo za strukturiranje<\/strong> (uglavnom) tekstualnog <strong>sadr\u017eaja<\/strong>. Sama vizuelizacija, prikaz, mo\u017ee se razlikovati od onoga \u0161ta tradicionalno smatramo nabrajanjem (listom).<\/p>\n<p>Dalje u toku ove lekcije upozna\u0107emo se detaljno sa strukturom listi.<\/p>\n<p><strong>Tipovi listi<\/strong><\/p>\n<p>Postoji tri tipa listi:<\/p>\n<ul>\n<li><strong>Ordered (ure\u0111ene) liste<\/strong> su liste \u010dije se stavke ozna\u010davaju nekim tipom rednih elemenata. Naj\u010de\u0161\u0107e brojevima, rimskim brojevima, slovima alfabete i tako dalje.<\/li>\n<li><strong>Unordered (neure\u0111ene) liste<\/strong> su liste \u010dije se stavke ozna\u010davaju raznim elementima &#8211; kvadrat, krug, crta i tako dalje. Za razliku od ure\u0111enih listi, ne potencira se zna\u010daj redosleda elemenata.<\/li>\n<li><strong>Definition (definicione) liste<\/strong> su liste \u010dije se stavke sastoje iz dva dela, teksta i definicije. Korisne su za kreiranje pitanja i odgovora, jer su uvek sastavljene iz parova. Danas se ovaj tre\u0107i tip sve manje koristi.<\/li>\n<\/ul>\n<p><strong>Ure\u0111ene liste<\/strong><\/p>\n<p>Za ozna\u010davanje ure\u0111enih listi se koristi tag &lt;ol&gt;. Kao kod ranije pomenutih tagova, postavljamo po\u010detni i kranji ol tag, a zatim unutar njega, nove &lt;li&gt;tagove, od kojih je svaki nova stavka liste. Pogledajmo na primeru:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-273 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste83a.jpg\" alt=\"liste83a\" width=\"431\" height=\"331\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste83a.jpg 431w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste83a-300x230.jpg 300w\" sizes=\"auto, (max-width: 431px) 100vw, 431px\" \/><\/p>\n<p>Prime\u0107ujemo da na po\u010detku liste stoji po\u010detni &lt;ol&gt; tag, zatim slede pojedina\u010dne stavke okru\u017eene tagom &lt;li&gt;, i na kraju se zavr\u0161ava lista sa&lt;\/ol&gt;. Ovakvom strukturom je tag liste obuhvatio sve unete stavke i browser zna da su sve stavke povezane u jednu celinu. Po default vrednostima, u browseru ova lista izgleda ovako:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-274 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste83b.jpg\" alt=\"liste83b\" width=\"210\" height=\"206\" \/><\/p>\n<p style=\"text-align: center;\"><em>Prikaz <strong>ure\u0111ene<\/strong> liste u browseru<\/em><\/p>\n<p>Ono \u0161to je bitno i na \u0161ta treba obratiti pa\u017enju je da nismo ru\u010dno u stavkama unosili redne brojeve, iako su oni prisutni u prikazu. Browseri prilikom prikaza ure\u0111enih listi sami dodaju redne brojeve ispred stavki.<\/p>\n<p>Naravno, kao \u0161to \u0107emo videti kasnije tokom godine kada budemo upoznali CSS jezik, mo\u017eemo i ukloniti te brojeve ako \u017eelimo, ili ih mo\u017eemo promeniti u rimske brojeve, slova alfabete i sli\u010dno.<\/p>\n<p><strong>Neure\u0111ene liste<\/strong><\/p>\n<p>Neure\u0111ene liste imaju veoma sli\u010dnu strukturu kao malopre pomenute ure\u0111ene liste. Razlika je u tagu koji koristimo. U slu\u010daju neure\u0111enih listi to je tag &lt;ul&gt;. Imaju\u0107i to u vidu primer mo\u017ee izgledati ovako:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-276 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84A.jpg\" alt=\"liste84A\" width=\"401\" height=\"308\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84A.jpg 401w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84A-300x230.jpg 300w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/p>\n<p>Dok bi prikaz u browseru izgledao ovako:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-277 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84B.jpg\" alt=\"liste84B\" width=\"206\" height=\"205\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84B.jpg 206w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste84B-150x150.jpg 150w\" sizes=\"auto, (max-width: 206px) 100vw, 206px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Prikaz <strong>neure\u0111ene<\/strong> liste u browseru<\/em><\/p>\n<p>Kao \u0161to mo\u017eemo primetiti, vi\u0161e se ne prikazuju redni brojevi ve\u0107 jednostavno nabrajanje preko <em>bulleta<\/em>(ta\u010daka). Nemaju svi browseri isti prikaz u pogledu veli\u010dine i pozicije bulleta, ali su prili\u010dno sli\u010dni. Kao i kod ure\u0111enih listi, mo\u017eemo kasnije promeniti ili ukloniti oznake (CSS jezikom).<\/p>\n<p>Po\u0161to su ure\u0111ene i neure\u0111ene liste tako sli\u010dne, mo\u017eemo jednostavnom promenom taga liste u k\u00f4du, promeniti tip liste iz ure\u0111ene u neure\u0111enu i obrnuto.<\/p>\n<p>Ranije smo napomenuli, a sada \u0107emo ponoviti da je veoma va\u017eno kako pi\u0161emo k\u00f4d. Moramo voditi ra\u010duna da sve tagove pravilno otvorimo i zatvorimo, ali i da ih ne ukr\u0161tamo. I jedan pogre\u0161an karakter mo\u017ee na\u010diniti haos na strani u prikazu.<\/p>\n<p>Postoje takozvane ugnje\u017edene liste, koje za razliku od prethodnih primera imaju vi\u0161e nivoa stavki. To najlak\u0161e mo\u017eemo primetiti na slede\u0107em primeru:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-279 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste85A.jpg\" alt=\"liste85A\" width=\"370\" height=\"472\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste85A.jpg 370w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste85A-235x300.jpg 235w\" sizes=\"auto, (max-width: 370px) 100vw, 370px\" \/><\/p>\n<p>A evo kako to izgleda u browseru:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-280 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste85B.jpg\" alt=\"liste85B\" width=\"231\" height=\"234\" \/><\/p>\n<p style=\"text-align: center;\"><em>Prikaz ugnje\u017edene liste u browseru<\/em><\/p>\n<p>U primeru, ako posmatramo prikaz u browseru, mo\u017eemo uo\u010diti prvi nivo stavki, dok jedna stavka (<em>fudbal<\/em>) ima svoje ugnje\u017edene stavke. Ako pa\u017eljivo pogledamo k\u00f4d, vidimo da je kompletna ugnje\u017edena lista (obojena plavom bojom u k\u00f4du) sme\u0161tena unutar jedne stavke sadr\u017eaju\u0107e liste.<\/p>\n<p>Ovde je neure\u0111ena lista ugnje\u017edena tako\u0111e u <em>ul<\/em> listu. Pored ovakvog primera, mo\u017eemo ugnjezdiiti <em>ol<\/em> u <em>ul<\/em> listu i obrnuto.<\/p>\n<p><strong>Type atribut za ul i ol liste<\/strong><\/p>\n<p>Simbol koji se prikazuje ispred stavki liste mo\u017ee se definisati pomo\u0107u CSS opisa, ili kroz HTML atribut<strong>type<\/strong>. Time zaklju\u010dujmo da listu mo\u017eemo stilizovati bilo koriste\u0107i CSS pravila, bilo HTML tagove. Za sada \u0107emo se zadr\u017eati na HTML varijanti.<\/p>\n<p>Atribut type za neure\u0111ene liste (ul) mo\u017ee imati slede\u0107e vrednosti:<\/p>\n<ul>\n<li><strong>circle<\/strong> &#8211; \u0161to odgovara krugu<\/li>\n<li><strong>disc<\/strong> &#8211; \u0161to odgovara punom krugu<\/li>\n<li><strong>square<\/strong>, \u0161to odgovara kvadratu<\/li>\n<\/ul>\n<p>dok za ure\u0111ene (ol) mo\u017ee biti:<\/p>\n<ul>\n<li><strong>A<\/strong> &#8211; \u0161to odgovara velikim slovima<\/li>\n<li><strong>a<\/strong> &#8211; \u0161to odgovara malim slovima<\/li>\n<li><strong>I<\/strong> &#8211; \u0161to odgovara velikim rimskim brojevima<\/li>\n<li><strong>i<\/strong> &#8211; \u0161to odgovara malim rimskim brojevima<\/li>\n<\/ul>\n<p>I u kodu jedna neure\u0111ene lista mo\u017ee izgledati ovako:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-283 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste87A.jpg\" alt=\"liste87A\" width=\"448\" height=\"314\" srcset=\"https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste87A.jpg 448w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste87A-300x210.jpg 300w, https:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste87A-120x85.jpg 120w\" sizes=\"auto, (max-width: 448px) 100vw, 448px\" \/><\/p>\n<p>Zbog atributa type sa vredno\u0161\u0107u square zaklju\u010dujemo da \u0107e ova lista imati stavke ozna\u010dene kvadratima.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-284 aligncenter\" src=\"http:\/\/skolarbbos.net\/wp-content\/uploads\/2015\/11\/liste87B.jpg\" alt=\"liste87B\" width=\"197\" height=\"201\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"Kada ka\u017eemo liste, uglavnom mislimo na jednostavno, vizuelno odvajanje sadr\u017eaja u smislene<a class=\"moretag\" href=\"https:\/\/skolarbbos.net\/?p=268\"> &lt;b&gt;[Nastavi sa \u010ditanjem...]&lt;\/b&gt;<\/a>","protected":false},"author":1,"featured_media":269,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-268","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html"],"_links":{"self":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=268"}],"version-history":[{"count":1,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":1288,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/posts\/268\/revisions\/1288"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=\/wp\/v2\/media\/269"}],"wp:attachment":[{"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/skolarbbos.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}