Šta je numerisana lista u HTML-u? Numerisana lista je skup elemenata sa uzastopnim brojevima. Njegova prednost je što je proces numeriranja elemenata automatiziran i stoga se nećete zbuniti. Također možete početi brojati ne od prvog, već od sto prvog elementa. Možete promijeniti vrstu liste: arapski brojevi, velika latinična slova, mala latinična slova, veliki rimski brojevi, mali rimski brojevi. Uvlake se dodaju oko numerisane liste: gore, dole i levo. Oznaka se koristi za kreiranje numerisane liste.

Svaka stavka u numerisanoj listi je označena parom oznaka.
1. , zatim primjer kako napraviti numerisanu listu:

   Primjer kreiranja numerisane liste

   
   
   1. Tačka jedan
   
   
   2. Tačka dva
   
   

   Numerisane liste mogu biti ugniježđene jedna u drugu. Dubina može biti bilo koja. Ova metoda se često koristi za kreiranje menija na web stranici. Dalje primjer ugniježđene, numerirane liste:

   Primjer ugniježđene, numerirane liste

   
   
   1. Tačka jedan
      
      
      
      1. Stav jedan u prvom
      
      
      2. Tačka dva u prvom
         
         
         
         
         
         
      
      
      
      
   
   
   2. Tačka dva
   
   

   Da biste promijenili tip liste, trebate koristiti atribut type. Vrijednost atributa mora biti prvi znak datog niza, na primjer, za arapske brojeve, tip = "1" , za rimska velika slova, tip = "I", itd.

   • Arapski brojevi - 1, 2 itd.
   • Velika latinična slova - A, B, itd.
   • Mala latinična slova - a, b, itd.
   • Veliki rimski brojevi - I, II itd.
   • Mali rimski brojevi - i, ii, itd.

   Uzmimo naš prethodni primjer i odredimo vrste lista:

   
   
   1. Tačka jedan
      
      
      
      1. Stav jedan u prvom
      
      
      2. Tačka dva u prvom
         
         
         
         1. Tačka jedan u prvom, u drugom
         
         
         2. Tačka dva u prvom, u drugom
         
         
         
         
      
      
      
      
   
   
   2. Tačka dva
   
   

   Koristite atribut start

   
   
   1920. Tačka jedan
   
   
   1921. Tačka dva
   
   

   Stiliziranje numerisane liste pomoću CSS-a

   Biće još mnogo tutorijala o tome, pa ćemo na brzinu pogledati stilizovanje liste. Prvo, pomerimo našu numerisanu listu 20 piksela od leve ivice. Da bismo to učinili, koristimo svojstvo margine.

   ol(
   margina: 0 0 0 20px;
   }

   Na internetu se često postavlja pitanje: "Kako promijeniti boju oznaka (za listu s nabrajanjem) ili boju numeracije (za numerisanu listu)?". To je vrlo lako učiniti, na primjer, ovako:

   Dodavanje oznake span

   
   
   1920. Tačka jedan
   
   
   1921. Tačka dva
   
   

   Promijenite boju

   Li (
   boja: crvena;
   }
   li span(
   boja: #000000;
   }

   Numerisana lista i SEO

   Numerisane liste takođe igraju važnu ulogu u SEO promociji, jer čine informacije na sajtu strukturiranijim. To znači da ako koristite liste na pravim mjestima, informacije će biti razumljivije kako čitaocu, tako i robotima za pretraživanje.

   Jedina razlika je u tome što je ova oznaka striktno napravljena za liste numeriranja. Naziv oznake dolazi od engleske skraćenice "Ordered List" - numerisana lista.

   Sintaksa oznake

   1. Stavka #1
   2. Stavka #2
   3. Stavka #3
   4. ...

   Gdje atribut type="value" može imati sljedeće vrijednosti

   • A - postavlja markere u obliku velikih latiničnih slova (A, B, C..);
   • a - postavlja markere u obliku malih latiničnih slova (a, b, c..);
   • I - postavlja markere u obliku velikih rimskih brojeva (I, II, III, IV..);
   • i - postavlja markere u obliku malih rimskih brojeva (i, ii, iii, iv..);
   • 1 (podrazumevano) - postavlja markere u obliku arapskih brojeva (1, 2, 3..);

   Atribut start="value" specificira početnu vrijednost (početnu vrijednost) izvještaja.

   Obrnuti atribut specificira obrnuti broj (ako je potrebno).

   Tag

   zahtijeva upotrebu završne oznake

   Oznaka para se koristi za formiranje elemenata liste

   1. . Između početne i završne oznake nalaze se pojedinačne riječi, fraze, paragrafi, slike, dijelovi koda i još mnogo toga, što je sadržaj liste s nabrajanjem.

      Bilješka

      Unutar liste moguće je promijeniti račun u svoj. Za ovu oznaku postoji poseban atribut value="".

   2. , kojoj je dodijeljena neka numerička vrijednost. Na primjer

      1. Stavka #1
      10. Stavka #2
      11. Stavka #3

      Primjeri sa numerisanim listama u html-u (

      )

      Primjer 1. Numerirana lista html-a u obliku latiničnih slova

      Primjer sa velikim slovima

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Primjer malim slovima

      1. Stavka #10
      2. Stavka #11
      3. Stavka #12

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Primjer 2. Numerirana html lista latiničnim slovima

      Primjer sa velikim slovima

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Primjer malim slovima

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Primer 3. Numerisana html lista sa različitom početnom pozicijom

      Primjer koji pokazuje mogućnosti start atributa, koji vam omogućava da postavite početnu vrijednost brojača.

      50. Stavka #1
      51. Stavka #2
      52. Stavka #3

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3

      Primjer 4. Promjena broja u html numerisanim listama

      Ispod je primjer s mogućnošću promjene vrijednosti brojača pomoću atributa value kada se prikazuju novi elementi u oznakama

   3. .

      10. Stavka #1
      11. Stavka #2
      100. Stavka #3
      101. Stavka #4

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3
      4. Stavka #4

      Primjer 5. Reverzibilna numerirana lista u html-u

      Ispod je primjer obrnute numerirane liste (brojite obrnutim redoslijedom).

      10. Stavka #1
      11. Stavka #2
      12. Stavka #3
      13. Stavka #4

      Evo kako to izgleda na stranici:

      1. Stavka #1
      2. Stavka #2
      3. Stavka #3
      4. Stavka #4

      HTML jezik pruža poseban skup oznaka za predstavljanje informacija u obliku lista. Liste su jedan od najčešće korišćenih oblika prezentacije podataka kako u elektronskim tako iu štampanim dokumentima. Vidimo liste skoro svakodnevno, bilo da je to lista stvari koje treba da uradimo u prodavnici, učenici u učionici ili samo stvari koje treba da uradimo. Mogućnost organiziranja struktura lista dostupna je u mnogim uređivačima teksta, posebno, moćni procesor teksta Microsoft Word ima zgodne alate za formatiranje lista različitih tipova (mogućnosti kreiranja HTML lista pomoću Microsoft Word-a razmatrane su u 8. poglavlju). Evo nekoliko slučajeva u kojima je korištenje lista prilično zgodno:

      • Kombiniranje dijelova informacija u jednu strukturu kako bi se dobio čitljiv izgled.
      • Opis složenih procesa korak po korak.
      • Raspored informacija u stilu tabele sadržaja, čiji paragrafi upućuju na relevantne delove dokumenta.

      Imajte na umu da su gore navedene stavke samo organizirane u obliku strukture liste.

      HTML pruža sljedeće glavne tipove lista: lista sa nabrajanjem, numerisana i lista definicija. Sljedeće oznake se koriste za implementaciju lista različitih tipova:

      ,
      ,

      , , . Uz pomoć različitih tipova lista ugrađenih u dokument, mogu se implementirati razne karakteristike, čiji je opis predmet ovog poglavlja. Razmatraju se karakteristike građenja lista različitih tipova, kao i upotreba ugniježđenih lista.

      bulleted list

      Jedna od vrsta lista implementiranih u HTML-u je lista sa nabrajanjem. Inače, liste ovog tipa se nazivaju neuređene ili

      poremećen. Prezime se često koristi kao formalni prijevod odgovarajućeg naziva oznake.

      , uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (UL - Unordered List, unordered list).

      U listi za nabrajanje, da bi se istakli njeni elementi, koriste se posebni znakovi, koji se nazivaju markeri liste (često se nazivaju bullets, što je formalno zvučanje engleskog izraza bullet). Izgled markera liste određuje pretraživač, a prilikom kreiranja ugniježđenih lista pretraživači automatski diverzificiraju izgled markera različitih nivoa ugniježđenja.

      Oznake

      I<LI >

      Da biste kreirali listu sa nabrajanjem, morate koristiti tag-container, unutar kojeg se nalaze svi elementi liste. Oznake za otvaranje i zatvaranje liste obezbeđuju prelom reda ispred i posle liste, odvajajući tako listu od glavnog sadržaja dokumenta, tako da nema potrebe da se ovde koriste oznake pasusa.

      
      .

      Svaka stavka liste mora početi oznakom

      • (LI - Stavka liste, stavka liste). Tag
      • ne treba odgovarajuću završnu oznaku, iako njeno prisustvo u principu nije zabranjeno. Preglednici obično započinju svaku novu stavku liste u novom redu kada prikazuju dokument.

        Gore navedene informacije su dovoljne da se napravi elementarna lista sa nabrajanjem. Evo primjera HTML dokumenta koji koristi listu sa nabrajanjem, čije je prikazivanje pretraživača prikazano na Sl. 2.1.

        horoskopski znakovi:

        • Ovan

        • Bik

        • Blizanci

        • Rak

        • lav

        • Djevica

        • vage

        • Škorpion

        • Strijelac

        • Jarac

        • Vodolija

        • Ribe

        Rice. 2.1. Prikaz liste sa nabrajanjem u pretraživaču

        Imajte na umu da pored stavki liste označenih oznakom

      • , mogu biti prisutni i drugi HTML elementi. U gornjem primjeru, jedan od ovih elemenata je običan tekst, koji nije stavka liste, ali igra ulogu svog naslova.

        Bilješka

        U nekim udžbenicima o HTML jeziku postoji naznaka da se oznaka kontejnera treba koristiti za postavljanje naslova liste (LH - Zaglavlje liste, zaglavlje liste). Ovu oznaku trenutno ne prepoznaje nijedan od uobičajenih pretraživača i nije dio HTML specifikacije. Time njegova upotreba postaje besmislena, iako neće dovesti do grešaka.

        U oznaci

        mogu se specificirati dva parametra: COMPACT i TYPE.

        Parametar COMPACT se upisuje bez vrijednosti i koristi se da naznači pretraživaču da datu listu treba prikazati u kompaktnom obliku. Na primjer, font ili razmak između redova liste može se smanjiti, itd.

        Bilješka

        Trenutno, prisustvo parametra COMPACT u oznaci

        ne utiče na prikaz lista od strane vodećih pretraživača. Stoga je korištenje ovog parametra besmisleno, pogotovo jer njegovu upotrebu ne preporučuje HTML 4.0 specifikacija.

        Parametar TYPE može imati sljedeće vrijednosti: disk, krug i kvadrat. Ovaj parametar se koristi za prisilno pojavljivanje markera liste. Tačan izgled markera zavisiće od pretraživača koji koristite. Tipične opcije prikaza su sljedeće:

        TIP = disk - markeri se prikazuju kao puni krugovi; TIP = krug - markeri se prikazuju kao nepopunjeni krugovi; TIP = kvadrat - markeri se prikazuju kao popunjeni kvadrati. Primjer snimanja:

        .

        Zadana vrijednost je TYPE = disk. Za ugniježđene liste sa nabrajanjem, zadana vrijednost je disk na prvom nivou, krug na drugom nivou i kvadrat na trećem nivou. Upravo to se radi u najnovijim verzijama Netscape i Internet Explorer pretraživača. Imajte na umu da drugi pretraživači mogu drugačije prikazati markere. Na primjer, u HTML 4.0 specifikaciji, tip markera koji se prikazuje kada je TYPE = square specificiran je kao obris kvadrata.

        Parametar TYPE sa istim vrijednostima može se koristiti za određivanje tipa markera za pojedinačne stavke liste. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste

        • .

          Primjer snimanja:

        • .

          Bilješka

          Pretraživači različito tumače indikaciju tipa markera za pojedinačnu stavku liste. Netscape pretraživač mijenja izgled markera za ovaj i sve naredne dok se ne naiđe na sljedeću redefinaciju izgleda markera. Internet Explorer samo mijenja izgled markera za ovaj element.

          Navedite grafičke markere

          Možete koristiti grafičke slike kao markere liste, što se široko koristi za kreiranje atraktivnih, lijepo dizajniranih HTML dokumenata. U stvari, ovu mogućnost ne pruža direktno HTML jezik, već je implementirana donekle umjetno. To ne znači da se to ne preporučuje ili zamjerava, već samo da se ovdje neće koristiti posebne konstrukcije HTML jezika.

          Da biste razumjeli ideju, morate razumjeti kako se liste implementiraju u HTML stranice. Ispostavilo se da je oznaka liste

          (kao i liste tagova drugih tipova, o kojima se govori u nastavku) obavlja jedini zadatak - govori pretraživaču da sve informacije koje se nalaze nakon ove oznake treba da budu prikazane sa pomakom udesno (uvlačenje) za određeni iznos. oznake
          • Pokazivanje na pojedinačne stavke liste daje standardne markere stavki liste.

            Ako treba da napravimo listu sa grafičkim markerima, onda uopšte možemo bez oznaka

          • . Biće dovoljno da umetnete željenu grafičku sliku ispred svakog elementa liste. Jedini zadatak koji treba riješiti u ovom slučaju je razdvojiti elemente liste jedan od drugog. Za ovo možete koristiti oznake pasusa.

            Ili prinudno prebacivanje linije
            . Primjer implementacije liste sa grafičkim markerima, čiji je prikaz prikazan na sl. 2.2 je prikazano ispod:

            horoskopski znakovi:
            

            Ovan
            

            Bik
            

            Blizanci
            

            Pack
            

            Leo
            

            Djevica
            

            vage
            

            Škorpion
            

            Strijelac
            

            Jarac
            

            Vodolija
            

            Ribe

            

            Rice. 2.2. Lista sa grafičkim oznakama

            U datom primjeru, grafička datoteka Green_ball.gif se koristi kao marker elementa liste. Imajte na umu da upotreba grafike na HTML stranicama može značajno povećati količinu informacija koje se prenose. Međutim, u ovom slučaju ovo povećanje je izuzetno malo. Ovdje se isti fajl koristi za sve markere,

            koji će biti prenošen samo jednom. Veličina datoteke koja sadrži malu sliku je također izuzetno mala.

            Bilješka

            Tehnike za kreiranje lista sa grafičkim markerima razmatrane su redom u Poglavlju 8.

            numerisana lista

            Drugi tip liste implementiran u HTML-u je numerisana lista. Inače, liste ovog tipa nazivaju se uređenim. Prezime se često koristi kao formalni prijevod odgovarajućeg naziva oznake.

            , uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (OL - Ordered List, uređena lista).

            Liste ovog tipa obično su uređeni niz pojedinačnih elemenata. Razlika od lista sa nabrajanjem je u tome što u numerisanoj listi svakom elementu automatski prethodi serijski broj. Tip numeracije zavisi od pretraživača i može se podesiti parametrima oznaka liste. Inače, implementacija numerisanih lista je veoma slična implementaciji lista sa nabrajanjem.

            Oznake

            I

            1. Da biste kreirali numerisanu listu, trebalo bi da koristite oznaku kontejnera unutar koje se nalaze svi elementi liste. Oznake za otvaranje i zatvaranje liste obezbeđuju prelom reda ispred i posle liste, odvajajući tako listu od glavnog sadržaja dokumenta.

               Kao i kod liste za nabrajanje, svaka stavka u listi sa nabrajanjem mora početi oznakom

            2. .

               Evo primjera HTML dokumenta koji koristi numerisanu listu, čiji prikaz pretraživač je prikazan na sl. 2.3.

               Najsjajnije zvezde vidljive sa Zemlje su:

               • Sirius

               • K anopus

               • Arcturus

               • Alpha Centauri

               • Vega

               • K apella

               • Rigel

               • Procyon

               • Achernar

               • Beta Centauri

               • Vetelgeuse

               • Aldebaran

                 
                 . . .

               • Mizar

                 
                 . . .

               • Polar

               

               Rice. 2.Z. numerisana lista

               U oznaci

               mogu se specificirati sljedeći parametri: COMPACT, TYPE i START.

               Parametar COMPACT ima isto značenje kao i liste za nabrajanje. Parametar TYPE se koristi za određivanje načina na koji je lista numerisana. Može poprimiti sljedeće vrijednosti:

               TYPE = A - postavlja markere u obliku velikih latiničnih slova;

               TYPE = a - postavlja markere u obliku malih latiničnih slova;

               TIP = I - postavlja markere u obliku velikih rimskih brojeva;

               TYPE = i - postavlja markere u obliku malih rimskih brojeva;

               TYPE = 1 - postavlja markere u obliku arapskih brojeva.

               Podrazumevano se uvijek koristi vrijednost TYPE = 1, odnosno numeracija arapskim brojevima. Ovo se također odnosi na ugniježđene uređene liste. Ovdje, za razliku od lista sa nabrajanjem, pretraživači po defaultu ne prave različite numeracije na različitim nivoima ugniježđenja lista. Imajte na umu da se iza broja elementa liste uvijek dodatno prikazuje znak "tačka".

               Parametar TYPE sa istim vrijednostima može se koristiti za određivanje kako pojedinačni elementi liste trebaju biti numerirani. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste

               1. .

                  Primjer snimanja:

               2. .

                  Parametar oznake START

                  omogućava vam da započnete numerisanje liste ne od jedne. Vrijednost parametra START uvijek mora biti prirodan broj, bez obzira na tip numeracije liste. Evo primjera:
                  .

                  Takva notacija određuje numeraciju liste od velikog latiničnog slova "E". Za ostale tipove numeracije, unos START=5 će postaviti numeraciju, odnosno od broja "5", rimskog broja "V" itd.

                  Promjena tipa numeracije liste i vrijednosti brojeva može se izvršiti i za bilo koji element liste. Tag

                  5. za numerisane liste, dozvoljava upotrebu parametara TYPE i VALUE. Parametar TYPE može imati iste vrijednosti kao i za oznaku
                     .

                     P primjer snimka:

                     1. .

                        Bilješka

                        Preglednici interpretiraju indikaciju tipa numeracije za pojedinačnu stavku liste na različite načine. Netscape pretraživač mijenja numeraciju za ovaj element i sve naredne elemente dok se ne naiđe na sljedeće nadjačavanje. Internet Explorer mijenja samo izgled broja za ovaj element.

                        Zvrijednost parametra VALUE oznake

                     2. - omogućava vam da promijenite broj datog elementa liste. Ovo mijenja numeraciju svih narednih elemenata. Tipična upotreba je za liste u kojima su neki elementi izostavljeni. Primjer takve liste dat je gore (slika 2.3). Daje uređenu listu najsjajnijih zvijezda, u kojoj se na 58 i 75 mjesta nalaze zvijezde koje su jasno vidljive na našim geografskim širinama (Mizar je najsjajnija zvijezda u sazviježđu Velikog medvjeda, a Sjevernjača je Mali medvjed).

                        Evo još jednog originalnog primjera upotrebe različitih tipova numeracije. HTML kod ispod definiše tri liste sa različitim brojevima. Radi lakšeg pregleda, svaka od lista je smeštena u posebnu ćeliju tabele. Sve tri liste su identične i razlikuju se samo po vrsti numeracije: u prvoj koloni tabele - arapski brojevi, u drugoj - rimski, au trećoj numeracija je latiničnim slovima. Imajte na umu da su elementi liste prazni, odnosno iza bilo koje oznake

                     3. nema podataka. Primjer ove vrste može se koristiti kao tabela korespondencije između arapskih i rimskih brojeva. Ispostavilo se da bilo koji pretraživač koji podržava liste može da se koristi za generisanje takve tabele (slika 2-4) sve dok ukucate dati HTML kod. Numeracija rimskim brojevima radi ispravno do vrijednosti 3999. Proučavanjem desne kolone možete razumjeti kako se izvodi numeriranje latiničnim slovima. Nakon iscrpljivanja jednoslovne numeracije (od A do Z), kao sljedeći broj uzima se prvi dvoslovni broj - AA itd.

                        . . .

                        . . .

                        . . .

                        

                        Rice. 2.4. Različiti tipovi numerisanja HTML liste

                        Lista definicija

                        Liste definicija, koje se nazivaju i rječnici definicija termina, posebna su vrsta liste. Za razliku od drugih tipova lista, svaki element liste definicija uvijek se sastoji od dva dijela. Prvi dio elementa liste sadrži definirani pojam, a drugi dio sadrži tekst u obliku rječničkog unosa koji otkriva značenje pojma.

                        Liste definicija su specificirane pomoću oznake kontejnera

                        (Definicijska lista). Unutar oznake kontejnera

                        (Definicijski termin) definirani pojam je označen, a oznaka

                        (Opis definicije) - paragraf sa svojom definicijom. Za oznake

                        I

                        možete izostaviti odgovarajuće krajnje oznake.

                        Općenito, lista definicija je napisana na sljedeći način:

                        Termin

                        Definicija pojma

                        U tekstu iza oznake

                        elementi na nivou bloka, kao što su oznake pasusa, ne mogu se koristiti

                        ili naslovima

                        -

                        . Kao opšte pravilo, tekst pojma koji se definiše treba da bude u jednom redu. Tekst koji sadrži definiciju pojma prikazuje se počevši od sljedećeg reda (ili red po red za neke pretraživače) nakon definicije pojma, uvučen udesno. U informacijama postavljenim iza oznake

                        , elementi na nivou bloka mogu se postaviti. Iz toga posebno slijedi da se liste definicija mogu ugniježditi.

                        U oznaci

                        parametar COMPACT može biti specificiran, čija je svrha slična ostalim gore opisanim listama.

                        Evo primjera HTML dokumenta koji koristi listu definicija:

                        Klasifikacija tipičnih ljudskih temperamenata,
                        osnovan

                        na stavove Hipokrata

                        Flegmatična osoba

                        Pasivan, vrlo sposoban, sporo se prilagođava;
                        raspoloženje je stabilno, malo podložno vanjskim utjecajima;
                        letargija emocionalnih reakcija i sporost u voljnoj aktivnosti
                        
                        

                        sanguine

                        Aktivan, energičan, prilagodljiv, -
                        živost i pokretljivost emocionalnih reakcija, brzina i snaga voljnih manifestacija
                        
                        

                        Kolerik

                        Aktivan, veoma energičan, uporan;
                        impulzivnost i jačina emocionalnih reakcija, nasilne voljne manifestacije
                        
                        

                        melanholic

                        Pasivan, lako se zamara, teško se prilagođava -
                        slabost voljnih manifestacija i prevladavanje depresivnog raspoloženja, sumnje u sebe

                        Prikaz datog HTML dokumenta u pretraživaču je prikazan na Sl. 2.5.

                        

                        Rice. 2.5. Lista definicija (podsjeća na grupu unosa u rječniku)

                        Upišite liste

                        I

                        Upišite liste

                        I se sada praktički ne koriste, iako je njihova podrška od strane vodećih pretraživača i dalje pružena. U HTML 4.0 specifikaciji, oba tipa lista su označena kao zastarjela. Umjesto toga, predlaže se korištenje lista za nabrajanje specificirane oznakom

                        .

                        U početku su liste ovih tipova zamišljene kao kompaktnije od konvencionalnih lista sa nabrajanjem. Prema pravilima za pisanje elemenata ovih lista, nije im bilo dozvoljeno da koriste blok elemente, što znači da je nemoguće implementirati ugniježđenje lista ovog tipa. Svaki element liste bio je jedan red teksta.

                        Za liste poput

                        planirano je da se uvede ograničenje na „dužinu teksta elementa liste (24 karaktera). Takvo ograničenje bi omogućilo

                        liste tipova

                        u obliku sličnom popisu direktorija u UNIX i MS-DOS operativnim sistemima kada se koristi /W ključ (u nekoliko kolona). Osim toga, za stavke liste ovog tipa nisu prikazani meci.

                        Trenutno sve ove ideje nisu realizovane, jer se dalje korišćenje lista ovih vrsta ne preporučuje. Moderne verzije pretraživača prikazuju liste ovih tipova na potpuno isti način kao i liste tog tipa

                        .

                        Ugniježđene liste

                        Postoje slučajevi kada element liste jednog tipa treba da uključi čitavu listu istog ili drugog tipa. Ovo će organizirati višeslojne ili ugniježđene liste. HTML dozvoljava proizvoljno ugniježđenje različitih tipova lista, ali se mora voditi računa kada ih organizirate.

                        Ispod je HTML kod dokumenta sa ugniježđenim listama, čiji je prikaz prikazan na Sl. 2.6. U ovom primeru, svaki element liste sa nabrajanjem ima svoju numerisanu listu.

                        Sateliti nekih planeta

                        • Zempa

                          1. mjesec

                        • mapc

                          1. Fobos

                          2. Deimos

                        • Uran

                          1. Ariel

                          2. Umbriel

                          3. Titania

                          4. Oberon

                          5. Miranda

                        • Neptun

                          1. Triton

                          2. Nereid

                          Liste su posvuda. Koriste se za:

                          • razbijanje velikih segmenata teksta na dijelove;
                          • isticanje važnih tačaka;
                          • izjava o “akcionom planu” i spisku aktivnosti ( numerisana lista u html-u).

                          Korištenje lista za nabrajanje olakšava ljudima obradu svega što im kažete. Ali kako se postavljaju na web stranicu?

                          Nabrajane liste (ili neuređene liste)

                          Prva vrsta liste koju ćemo pogledati je lista sa nabrajanjem.

                          Neuređene liste - oznaka

                          Lista sa nabrajanjem poznata je i kao neuređena lista jer nema numerisanje elemenata. Za listu sa nabrajanjem koristi se par oznaka. Ispod je jednostavan primjer:

                          • Stav 1
                          • Tačka 2
                          • Tačka 3

                          Prvo, cijela lista se uzima u oznake. Kada otvorite oznaku liste, obavezno je zatvorite, a zatim nastavite da popunjavate stavke liste.

                          atribut tipa

                          Atribut type određuje koju vrstu markera ćete vidjeti na stranici. Iako možete stilizirati širok raspon stilova markera pomoću CSS-a, pa čak i koristiti vlastitu sliku, najbolje je držati se osnovnih tipova ( uključujući u numerisanu HTML listu):

                          Stavke liste - Tag

                          Svaki element na listi je umotan u poseban par oznaka.

                        • . Često možete i bez
                        • , ali bih preporučio da se pridržavate ovog pravila.

                          Gornja lista je smeštena u posebnu oznaku

                          , ali svaki
                          • također podržava vlastiti atribut tipa, pa se stoga može kreirati sljedeća lista:

                            
                            

                            Uvlačenje liste sa nabrajanjem

                            Prije nego što se bilo koji CSS stil primjenjuje na listu, HTML ( tačnije pretraživač) primjenjuje uvlake na njega tako da se razlikuje od običnog pasusa s oznakom

                            Uređena/numerirana lista - oznaka

                            Ako želite da rasporedite elemente liste onda oznaku

                            će pomoći u ovome. Zadana je numerirana HTML lista:
                            1. Element 1
                            2. Element 2
                            3. Element 3

                            što nam daje izlaz:

                            A. Stavka 1
                            B. Stavka 2
                            C. Stavka 3

                            Atribut tipa vam omogućava da koristite nekoliko više opcija dizajna za numerisane liste u odnosu na one sa nabrajanjem.

                            Pokretanje numerisane liste od određenog broja

                            Recimo da objedinjujete uputstva za kreiranje tabela. Za ovo možete koristiti numerisanu listu. Nakon svake stavke želite da postavite slike i dodatni tekst, u kom slučaju će vam trebati nekoliko lista.

                            Problem je što podrazumevano svaka lista počinje brojem 1 (ili slovom A). To bi pokvarilo vaše vodstvo!

                            Srećom, HTML ima svojstvo start koje vam omogućava da započnete numerisanje od određenog broja:

                            4. četvrti korak
                            5. korak peti
                            6. šesti korak

                            Što nam daje sljedeće:
                            4. Četvrti korak
                            5. Korak peti
                            6. Šesti korak

                            Obrnuti redosled

                            Ako želite prikazati brojeve (ili slova) obrnutim redoslijedom, to možete učiniti dodavanjem obrnute ključne riječi u vašu HTML numeriranu oznaku liste:

                            1. Prva tačka
                            2. Druga tačka
                            3. Treći paragraf
                            4. Četvrta tačka
                            5. Peta tačka

                            Kao rezultat, lista će izgledati ovako:
                            5. Peta tačka.
                            4. Četvrta tačka.
                            3. Treća tačka.
                            2. Druga tačka.
                            1. Prva tačka.

                            Lista na više nivoa u HTML-u

                            Sa zakrpama podrške instaliranim u pretraživačima ( a ponekad i sa cssom poništiti za neke stranice) možete kreirati HTML višeslojnu numerisanu listu. Ovo se postiže ugrađivanjem jedne liste u drugu:

                            • Element najvišeg nivoa
                            • Podelement 1
                            • Podelement 2
                            • Element najvišeg nivoa

                            Šta nam daje:

                            Element najvišeg nivoa
                            o Rob 1
                            o Podelement 2
                            Element najvišeg nivoa

                            Možete koristiti kombinaciju oznaka

                            I
                            . Ovo može biti korisno ako želite da označite podstavke numerisane liste markerima.

                            1. Element najvišeg nivoa
                            o Rob 1
                            o Podelement 2
                            2. Element najvišeg nivoa

                            Koristite numerisane HTML liste na svojim stranicama.

                            Zaključak

                            Ovo je samo kratak uvod u korištenje lista u web dizajnu, ali možete započeti ovdje. Ako imate bilo kakvih pitanja, postavite ih u komentarima!

                            Prijevod članka " Numerisane i Bullet Point Liste u HTML-u» pripremio prijateljski projektni tim.

                            Jedna od vrsta lista implementiranih u HTML-u je lista sa nabrajanjem. Inače, liste ovog tipa se nazivaju neuređene ili neuređene. Prezime se često koristi kao formalni prijevod odgovarajućeg naziva oznake.

                            , uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (UL - Unordered List, unordered list).

                            U listi za nabrajanje, da bi se istakli njeni elementi, koriste se posebni znakovi, koji se nazivaju markeri liste (često se nazivaju bullets, što je formalno zvučanje engleskog izraza bullet). Izgled markera liste određuje pretraživač, a prilikom kreiranja ugniježđenih lista pretraživači automatski diverzificiraju izgled markera različitih nivoa ugniježđenja.

                            oznake

                            I

                            Da biste kreirali listu sa nabrajanjem, potrebno je da koristite oznaku kontejnera, unutar koje se nalaze svi elementi liste. Oznake za otvaranje i zatvaranje liste obezbeđuju prelom reda ispred i posle liste, odvajajući tako listu od glavnog sadržaja dokumenta, tako da nema potrebe da se ovde koriste oznake pasusa.

                            
                            .

                            Svaka stavka liste mora početi oznakom

                            • (LI - Stavka liste, stavka liste). Tag
                            • ne treba odgovarajuću završnu oznaku, iako njeno prisustvo u principu nije zabranjeno. Preglednici obično započinju svaku novu stavku liste u novom redu kada prikazuju dokument.

                              Gore navedene informacije su dovoljne da se napravi elementarna lista sa nabrajanjem. Evo primjera HTML dokumenta koji koristi listu sa nabrajanjem, čije je prikazivanje pretraživača prikazano na Sl. 2.1.

                              horoskopski znakovi:

                              • Ovan

                              • Bik

                              • Blizanci

                              • Djevica

                              • vage

                              • Škorpion

                              • Strijelac

                              • Jarac

                              • Vodolija

                              • Ribe

                              Rice. 2.1. Prikaz liste sa nabrajanjem u pretraživaču

                              Imajte na umu da pored stavki liste označenih oznakom

                            • , mogu biti prisutni i drugi HTML elementi. U gornjem primjeru, jedan od ovih elemenata je običan tekst, koji nije stavka liste, ali igra ulogu svog naslova.

                              Bilješka

                              U nekim udžbenicima o HTML jeziku postoji naznaka da se oznaka kontejnera treba koristiti za postavljanje naslova liste. (LH - Zaglavlje liste, zaglavlje liste). Ovu oznaku trenutno ne prepoznaje nijedan od uobičajenih pretraživača i nije dio HTML specifikacije. Time njegova upotreba postaje besmislena, iako neće dovesti do grešaka.

                              U oznaci

                              mogu se specificirati dva parametra: COMPACT i TYPE.

                              Parametar COMPACT se upisuje bez vrijednosti i koristi se da naznači pretraživaču da datu listu treba prikazati u kompaktnom obliku. Na primjer, font ili razmak između redova liste može se smanjiti, itd.

                              Bilješka

                              Trenutno, prisustvo parametra COMPACT u oznaci

                              ne utiče na prikaz lista od strane vodećih pretraživača. Stoga je korištenje ovog parametra besmisleno, pogotovo jer njegovu upotrebu ne preporučuje HTML 4.0 specifikacija.

                              Parametar TYPE može imati sljedeće vrijednosti: disk, krug i kvadrat. Ovaj parametar se koristi za prisilno pojavljivanje markera liste. Tačan izgled markera zavisiće od pretraživača koji koristite. Tipične opcije prikaza su sljedeće:

                              TIP = disk - markeri se prikazuju kao puni krugovi; TIP = krug - markeri se prikazuju kao nepopunjeni krugovi; TIP = kvadrat - markeri se prikazuju kao popunjeni kvadrati. Primjer snimanja:

                              .

                              Zadana vrijednost je TYPE = disk. Za ugniježđene liste sa nabrajanjem, zadana vrijednost je disk na prvom nivou, krug na drugom nivou i kvadrat na trećem nivou. Upravo to se radi u najnovijim verzijama Netscape i Internet Explorer pretraživača. Imajte na umu da drugi pretraživači mogu drugačije prikazati markere. Na primjer, u HTML 4.0 specifikaciji, tip markera koji se prikazuje kada je TYPE = square specificiran je kao obris kvadrata.

                              Parametar TYPE sa istim vrijednostima može se koristiti za određivanje tipa markera za pojedinačne stavke liste. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste

                              • .

                                Primjer snimanja:

                              • .

                                Bilješka

                                Pretraživači različito tumače indikaciju tipa markera za pojedinačnu stavku liste. Netscape pretraživač mijenja izgled markera za ovaj i sve naredne dok se ne naiđe na sljedeću redefinaciju izgleda markera. Internet Explorer samo mijenja izgled markera za ovaj element.

                                Navedite grafičke markere

                                Možete koristiti grafičke slike kao markere liste, što se široko koristi za kreiranje atraktivnih, lijepo dizajniranih HTML dokumenata. U stvari, ovu mogućnost ne pruža direktno HTML jezik, već je implementirana donekle umjetno. To ne znači da se to ne preporučuje ili zamjerava, već samo da se ovdje neće koristiti posebne konstrukcije HTML jezika.

                                Da biste razumjeli ideju, morate razumjeti kako se liste implementiraju u HTML stranice. Ispostavilo se da je oznaka liste

                                (kao i liste tagova drugih tipova, o kojima se govori u nastavku) obavlja jedini zadatak - govori pretraživaču da sve informacije koje se nalaze nakon ove oznake treba da budu prikazane sa pomakom udesno (uvlačenje) za određeni iznos. oznake
                                • Pokazivanje na pojedinačne stavke liste daje standardne markere stavki liste.

                                  Ako treba da napravimo listu sa grafičkim markerima, onda uopšte možemo bez oznaka

                                • . Biće dovoljno da umetnete željenu grafičku sliku ispred svakog elementa liste. Jedini zadatak koji treba riješiti u ovom slučaju je razdvojiti elemente liste jedan od drugog. Za ovo možete koristiti oznake pasusa.

                                  Ili prinudno prebacivanje linije
                                  . Primjer implementacije liste sa grafičkim markerima, čiji je prikaz prikazan na sl. 2.2 je prikazano ispod:

                                  koji će biti prenošen samo jednom. Veličina datoteke koja sadrži malu sliku je također izuzetno mala.

                                  Bilješka

                                  Metode za kreiranje lista sa grafičkim markerima razmatraju se redom u Poglavlju 8.