Kako napraviti listu sa nabrajanjem u html-u. Označene liste numerisane liste html - HTML lekcije

IN HTML jezik predviđen je poseban set oznaka za predstavljanje informacija u obliku lista. Liste su jedan od najčešće korištenih oblika predstavljanja podataka u oba elektronski dokumenti, kao i u štampi. 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 mnogima uređivači teksta posebno moćan program za obradu teksta Microsoft Word ima zgodne alate za formatiranje lista različitih tipova (mogućnost kreiranja HTML lista kada pomoć od Microsofta Word se razmatra 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.

          Primjer liste s nabrajanjem

            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 piše 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. To je upravo ono što se radi u najnovije verzije Netscape pretraživači i Internet Explorer. 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 tumače indikaciju tipa markera na različite načine za pojedinačni element lista. Netscape pretraživač mijenja izgled markera za ovaj i sve naredne dok se ne naiđe na sljedeću redefinaciju izgleda markera. Internet pretraživač Explorer mijenja izgled markera samo za dati 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 - ukazuje pretraživaču da sve informacije koje se nalaze nakon ove oznake trebaju biti 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:

                  bulleted list

                    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 ovaj slučaj 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 predstavljaju 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.

                      Primer numerisane liste

                        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

                          1. 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.

                              Wvrijednost 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.

                              Upotreba <a href="https://obanracer.ru/bs/operatory-vetvleniya-v-komande-select-preobrazovaniya-nvl-dlya-razlichnyh-tipov.html">razne vrste</a> numerisanje u listama


                                1. . . .


                              1. . . .


                              1. . . .

                              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 se prikazuje počevši od sljedeći red(ili linija za neke pretraživače) nakon definicije pojma, uvučena 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:

                              Primjer liste definicija

                              Klasifikacija tipičnih ljudskih temperamenata,
                              osnovan

                              o stavovima 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 operativni sistemi UNIX i MS-DOS kada koristite prekidač /W (u više 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.

                                  Primjer ugniježđene liste

                                    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

                                    Drugi tip liste implementiran u HTML-u je numerisana lista. Inače, HTML 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 su obično 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 liste oznaka. Inače, implementacija numerisanih lista je veoma slična implementaciji lista sa nabrajanjem.

                                      oznake
                                        I

                                      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 pre 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

                                    1. .

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

                                      Primer numerisane liste

                                      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

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

                                              Primjer snimanja:

                                            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.

                                              Vrijednost 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.

                                              Korištenje različitih tipova numeracije u listama


                                                . . .

                                              Rice. 2.4. Različiti tipovi numerisanja HTML liste

                                              HTML podržava liste od tri različite vrste, od kojih svaki ima svoje uslove:

                                                1. - numerisanu (brojevima ili slovima) listu, čiji svaki element ima serijski broj (slovo);
                                                  • - lista sa nabrajanjem (ne numerisana), pored svakog elementa koji se stavlja marker (a ne numerički ili abecedni znakovi koji označavaju serijski broj);
                                                  • – Lista definicija se sastoji od parova ime/vrijednost, uključujući termine i definicije.

                                                  Numerisane liste

                                                  U numerisanu listu, pretraživač automatski ubacuje brojeve elemenata po redosledu, počevši od neke vrednosti (obično 1). Ovo vam omogućava da ubacite i uklonite stavke liste bez ometanja numeracije, budući da će se preostali brojevi automatski ponovo izračunati.
                                                  Numerisane liste se kreiraju korišćenjem blok elementa

                                                    (sa engleskog. Ordered List - numerisana lista). Pored kontejnera
                                                      za svaku stavku na listi postavlja se element
                                                    1. (od engleskog List Item - stavka liste). Podrazumevana je numerisana lista sa arapskim brojevima.
                                                      Tag
                                                        ima sljedeću sintaksu:

                                                        1. element 1
                                                        2. element 2
                                                        3. element 3

                                                        Numerirane stavke liste moraju sadržavati više stavki liste, kao što je prikazano u sljedećem primjeru:

                                                        Primjer: Numerirana lista

                                                        • Probajte sami"

                                                        Korak po korak instrukcije

                                                        1. Uzmi ključ
                                                        2. Ubacite ključ u bravu
                                                        3. Okrenite ključ za dva okreta
                                                        4. Uzmi ključ iz brave
                                                        5. Otvoriti vrata

                                                        Korak po korak instrukcije

                                                        1. Uzmi ključ
                                                        2. Ubacite ključ u bravu
                                                        3. Okrenite ključ za dva okreta
                                                        4. Uzmi ključ iz brave
                                                        5. Otvoriti vrata

                                                        Ponekad kada gledate postojeće HTML kodove, naići ćete na argument tip u elementu

                                                          , koji se koristi za određivanje vrste numeracije (slova, rimski i arapski brojevi, itd.). sintaksa:

                                                            Ovdje: upišite - znakove liste:

                                                            • A - velika latinična slova (A, B, C . . .);
                                                            • a - mala latinična slova (a, b, c . . .);
                                                            • I - veliki rimski brojevi (I, II, III . . .);
                                                            • i - mali rimski brojevi (i, ii, iii . . .);
                                                            • 1 - arapski brojevi (1, 2, 3 . . .) (koristi se prema zadanim postavkama).

                                                            Ako želite da lista počinje brojem koji nije 1, morate to navesti koristeći atribut start tag

                                                              .
                                                              Sljedeći primjer prikazuje numerisanu listu sa velikim rimskim brojevima i početna vrijednost XLIX:

                                                              Numerisanje se također može započeti korištenjem atributa vrijednost, koji se dodaje elementu

                                                            1. na sljedeći način:

                                                            2. U tom slučaju, sekvencijalno numerisanje liste će biti prekinuto i od ove tačke numerisanje će početi iznova, u ovom slučaju od sedam.

                                                              Primjer upotrebe atributa vrijednost tag

                                                            3. , koji vam omogućava da promijenite broj datog elementa liste:

                                                              U ovom primjeru, "Prva stavka liste" bi bila broj 1, "Stavka druge liste" bi bila broj 7, a "Third List Item" bi bila broj 8.

                                                              Formatiranje numerisanih lista pomoću CSS-a

                                                              Za promjenu brojeva liste koristite svojstvo tip-stil liste css stilovi:

                                                                Stilovi numerisane liste
                                                                PrimjerZnačenjeOpis
                                                                a, b, cniži alfaMala slova
                                                                A, B, Cgornji alfaVelika slova
                                                                i, ii, iiidonji romanRimski brojevi malim slovima
                                                                I, II, IIIgornji rimskiRimski brojevi velikim slovima

                                                                Primjer: Primjena CSS svojstva tip-stil liste

                                                                Bulleted Lists

                                                                Bulleted Lists suštinski slični numerisanim, samo što ne sadrže sekvencijalno numerisanje pasusa. Liste sa oznakama se kreiraju pomoću elementa bloka

                                                                  (od engleskog Unordered List - nesređena lista). Svaki element liste, kao u numerisanim listama, počinje oznakom
                                                                • . Pretraživač uvlači svaku stavku liste i automatski prikazuje znakove za nabrajanje.
                                                                  Tag
                                                                    ima sljedeću sintaksu:

                                                                    • Prva tačka
                                                                    • Druga tačka
                                                                    • Treći paragraf

                                                                    U sljedećem primjeru možete vidjeti da je, prema zadanim postavkama, mali popunjeni marker kruga dodan ispred svake stavke liste:

                                                                    Unutar oznake

                                                                  • nije potrebno postavljati samo tekst, dozvoljeno je postavljanje bilo kojeg elementa streaming sadržaja (linkova, pasusa, slika itd.)

                                                                    Ugniježđene liste

                                                                    Bilo koja lista može biti ugniježđena u drugu. Unutar elementa
                                                                  • moguće je kreirati ugniježđenu listu ili listu drugog nivoa. Da biste ugnijezdili listu, opišite novu listu unutar elementa
                                                                  • već postojeća lista. Kada ugnezdi jednu listu sa nabrajanjem u drugu, pretraživač automatski menja stil za nabrajanje za listu drugog nivoa. Bilo koja lista može biti ugniježđena u drugu. Sljedeći primjer pokazuje strukturu liste sa nabrajanjem ugniježđene u drugu stavku numerisane liste.

                                                                    Primjer: Ugniježđene liste

                                                                    • Probajte sami"
                                                                    • ponedjeljak
                                                                      1. Pošalji mail
                                                                      2. Posjeta uredniku
                                                                        • Izbor teme
                                                                        • Dekorativni dizajn
                                                                        • Završni izvještaj
                                                                      3. Večernje gledanje poruka
                                                                    • utorak
                                                                      1. Revidirati raspored
                                                                      2. Pošaljite slike
                                                                    • srijeda...

                                                                    • ponedjeljak
                                                                      1. Pošalji mail
                                                                      2. Posjeta uredniku
                                                                        • Izbor teme
                                                                        • Dekorativni dizajn
                                                                        • Završni izvještaj
                                                                      3. Večernje gledanje poruka
                                                                    • utorak
                                                                      1. Revidirati raspored
                                                                      2. Pošaljite slike
                                                                    • srijeda...

                                                                    Formatiranje lista sa nabrajanjem

                                                                    Za promjenu izgled markeri liste bi trebali koristiti svojstvo tip-stil liste css stilovi:

                                                                      Sljedeći primjer pokazuje različite stilove za liste s nabrajanjem:

                                                                      Primjer: Stilovi liste s nabrajanjem

                                                                      • Probajte sami"
                                                                      • Kafa
                                                                      • Kafa
                                                                      • Kafa
                                                                      • Kafa

                                                                      disk:

                                                                      • Kafa
                                                                      • Mlijeko

                                                                      krug:

                                                                      • Kafa
                                                                      • Mlijeko

                                                                      Kvadrat:

                                                                      • Kafa
                                                                      • Mlijeko

                                                                      ništa:

                                                                      • Kafa
                                                                      • Mlijeko

                                                                      Grafički markeri.

                                                                      U HTML-u je moguće kreirati listu sa grafičkim markerima. Jedno je kada su markeri liste standardni krugovi ili kvadrati, a sasvim drugo kada programer sam bira marker u skladu sa dizajnom stranice. Kako bi stavke na listi izgledale lijepo, često se koriste male slike.
                                                                      Za zamjenu običnog markera grafičkim, zamijenite svojstvo tip-stil liste po nekretnini slika u stilu liste i navedite URL slike:

                                                                        Primjer: Grafički markeri

                                                                        • Probajte sami"

                                                                        Znakovi zodijaka

                                                                        • Bik
                                                                        • Blizanci

                                                                        Znakovi zodijaka

                                                                        • Ovan
                                                                        • Bik
                                                                        • Blizanci

                                                                        Liste definicija (opisa)

                                                                        Liste definicija su vrlo zgodne za kreiranje, na primjer, vašeg ličnog rječnika pojmova. Svaka stavka na listi definicija ima dva dijela: pojam i njegovu definiciju.
                                                                        Stavljate cijelu listu u element

                                                                        (sa engleskog. Definition List - lista definicija). Uključuje oznake
                                                                        (od engleskog. Definicija Term - definirana riječ, pojam) i
                                                                        (od engleskog. Definition Description - opis definisanog pojma).
                                                                        Liste definicija se često koriste u naučnim, tehničkim i obrazovnim publikacijama, uz njihovu pomoć prave pojmovnike, rječnike, priručnike itd.

                                                                        Opća struktura liste opisa je sljedeća:

                                                                        Prvi mandat
                                                                        Opis prvog pojma
                                                                        Drugi mandat
                                                                        Opis drugog termina

                                                                        Sljedeći primjer pokazuje jednu od moguće upotrebe lista definicija:

                                                                        Primjer: Lista definicija

                                                                        • Probajte sami"

                                                                        World Wide Web - sa engleskog. World Wide Web (WWW) je distribuirani sistem koji omogućava pristup međusobno povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet. Internet je skup mreža koje koriste jedan protokol razmjene za prijenos informacija. Stranica je skup pojedinačnih web stranica koje su povezane linkovima i imaju zajednički dizajn.

                                                                        World Wide Web
                                                                        - sa engleskog. World Wide Web (WWW) je distribuirani sistem koji omogućava pristup međusobno povezanim dokumentima koji se nalaze na različitim računarima povezanim na Internet.
                                                                        Internet
                                                                        - skup mreža koje koriste jedan protokol razmjene za prijenos informacija.
                                                                        Website
                                                                        - skup zasebnih web stranica koje su međusobno povezane linkovima i jedinstvenim dizajnom.

                                                                        Podrazumevano, tekst pojma je smešten na levoj ivici prozora pretraživača, a opis pojma se nalazi ispod i pomera se udesno.

                                                                        Numerisane liste su skup elemenata sa njihovim serijskim brojevima. Vrsta i tip numeracije zavise od atributa oznake

                                                                          , koji se koristi za kreiranje liste. Svaka stavka u numerisanoj listi je identifikovana oznakom
                                                                        1. kao što je prikazano ispod.

                                                                          1. Prva tačka
                                                                          2. Druga tačka
                                                                          3. Treći paragraf

                                                                          Ako ne navedete nikakve dodatne atribute i samo napišite oznaku

                                                                            , tada se lista sa arapskim brojevima (1, 2, 3,...) koristi po defaultu, kao što je prikazano u primjeru 11.3.

                                                                            Primjer 11.3. Napravite numerisanu listu

                                                                            numerisana lista

                                                                            Rad sa vremenom

                                                                            1. stvaranje tačnosti (nikada ni za šta nećete zakasniti);
                                                                            2. lijek za tačnost (nikad nećete žuriti);
                                                                            3. promjena u percepciji vremena i satova.

                                                                            Rezultat ovog primjera prikazan je na sl. 11.3.

                                                                            Rice. 11.3. Prikaz numerisane liste

                                                                            Imajte na umu da numerisana lista takođe dodaje automatsko uvlačenje na vrh, dno i levo od teksta.

                                                                            Sljedeće vrijednosti mogu djelovati kao elementi numeriranja:

                                                                            • arapski brojevi (1, 2, 3, ...);
                                                                            • velika latinična slova (A, B, C, ...);
                                                                            • mala latinična slova (a, b, c, ...);
                                                                            • veliki rimski brojevi (I, II, III, ...);
                                                                            • mali rimski brojevi (i, ii, iii, ...).

                                                                            Atribut tipa oznake koristi se za označavanje tipa numerisane liste.

                                                                              . Njegove moguće vrijednosti su date u tabeli. 11.2.

                                                                              Tab. 11.2. Tipovi numerisanih lista
                                                                              Vrsta liste HTML kod Primjer
                                                                              arapski brojevi

                                                                              1. Cheburashka
                                                                              2. Krokodil Gena
                                                                              3. Shapoklyak
                                                                              Velika slova latinice

                                                                              A. Cheburashka
                                                                              B. Krokodil Gena
                                                                              C. Shapoklyak
                                                                              Mala slova latinice

                                                                              a. Cheburashka
                                                                              b. Krokodil Gena
                                                                              c. Shapoklyak
                                                                              Rimski brojevi u velikim slovima

                                                                              I. Cheburashka
                                                                              II. Krokodil Gena
                                                                              III. Shapoklyak
                                                                              Rimski brojevi u malim slovima

                                                                              i. Cheburashka
                                                                              ii. Krokodil Gena
                                                                              iii. Shapoklyak

                                                                              Da biste započeli listu sa određenom vrijednošću, koristite start atribut oznake

                                                                                . Nije bitno koji je tip liste postavljen sa tipom, startni atribut radi isto i za rimske i za arapske brojeve. Primjer 11-4 pokazuje kako napraviti listu koristeći velike rimske brojeve koji počinju sa osam.

                                                                                Primjer 11.4. Numeracija liste

                                                                                Rimski brojevi

                                                                                1. Kralj Magnum XLIV
                                                                                2. Kralj Zigfrid XVI
                                                                                3. Kralj Sigismund XXI
                                                                                4. Kralj Husbrandt I

                                                                                Rezultat ovog primjera prikazan je na sl. 11.4.

                                                                                Rice. 11.4. Numerisana lista sa rimskim brojevima

                                                                                U HTML-u, cijeli skup oznaka je odgovoran za organiziranje lista, čija organizacija mora biti u skladu sa određenim pravilima strukturiranja podataka.

                                                                                Peti standard html verzije Podržane su 3 vrste lista: numerisane liste, liste sa nabrajanjem i liste definicija. Takođe pruža mogućnost ugniježđenja lista jedne u drugu, kreirajući ugniježđene liste na više nivoa.

                                                                                numerisana lista

                                                                                numerisana lista je skup elemenata (stavki liste) koji imaju određeni niz. Svaka stavka u numerisanoj listi ima jedinstveni marker koji označava redosled stavke u odnosu na druge stavke na listi. Po defaultu, numerisani markeri stavki liste su brojevi. Prva stavka ide pod broj 1, druga pod broj 2 i tako dalje.

                                                                                Najčešći primjeri numerisanih lista su recepti za kuhanje raznih jela. Pošto je svaki recept numerisana lista, sa jasnim redosledom radnji.

                                                                                Da biste kreirali numerisane liste u HTML-u, koristite oznaku

                                                                                  , unutar kojeg se nalaze elementi liste sa podacima. Svaka stavka liste je identificirana oznakom.
                                                                                1. :

                                                                                  Numerisana lista:

                                                                                  1. Kafa
                                                                                  2. Tea
                                                                                  3. Mlijeko
                                                                                  Pokušajte »

                                                                                  napomena: oznaka

                                                                                    as podređeni elementi može sadržavati samo oznake
                                                                                  1. , odnosno cijeli sadržaj numerisane liste mora biti smješten unutar elemenata
                                                                                  2. . Tag
                                                                                  3. , zauzvrat, nema ograničenja na sadržaj, tako da u njega možete postavljati pasuse, slike, linkove, tabele, druge liste itd.

                                                                                    bulleted list

                                                                                    bulleted list- to su neuređene, odnosno neuređene liste elemenata čiji redoslijed nije bitan. Sve stavke liste za nabrajanje imaju iste oznake za nabrajanje, po defaultu se prikazuju kao mali crni krugovi.

                                                                                    HTML oznaka se koristi za kreiranje lista sa nabrajanjem.

                                                                                      , unutar koje se nalaze elementi same liste (kao u slučaju numerisanih lista, koristi se oznaka
                                                                                    • , koji sadrži sav prikazani sadržaj liste):

                                                                                      Nabrajana lista:

                                                                                      • Kafa
                                                                                      • Tea
                                                                                      • Mlijeko
                                                                                      Pokušajte »

                                                                                      Vrste markera

                                                                                      Tipovi metaka u numerisanoj listi mogu se promeniti pomoću atributa tipa. Ovaj atribut podržava pet tipova markera:

                                                                                      Liste sa nabrajanjem nemaju atribut tipa, tako da ne možete promijeniti tip oznake u listi za nabrajanje koristeći HTML. Za promjenu vrste markera, u ovom slučaju, možete koristiti CSS svojstvo m list-style-type , s kojim, osim zadane vrijednosti, možete odabrati još dvije vrste markera: krug ili kvadrat.

                                                                                      Promjena markera za liste:

                                                                                      Naslov stranice

                                                                                      Numerisana lista sa atributom type="a":

                                                                                      1. Jabuke
                                                                                      2. Banane
                                                                                      3. Limuni

                                                                                      Numerisana lista sa atributom type="I":

                                                                                      1. Jabuke
                                                                                      2. Banane
                                                                                      3. Limuni

                                                                                      Vrste markera liste sa nabrajanjem:

                                                                                      • Jabuke
                                                                                      • Banane
                                                                                      • Limuni
                                                                                      • Jabuke
                                                                                      • Banane
                                                                                      • Limuni
                                                                                      Pokušajte »

                                                                                      CSS svojstvo tipa stila liste, pored tipova za nabrajanje za liste sa nabrajanjem, ima mnogo različitih tipova nabrajanja za numerisane liste. Ali nije uvijek mijenjanje jednog standardnog tipa markera u drugi dovoljno za lijepo dizajniranje liste. Da biste dizajnirali liste, bolje je koristiti CSS, koji vam omogućava ne samo da promijenite izgled markera, već i da zamijenite markere slikama, kontrolirate njihovu lokaciju i kontrolirate uvlačenje. Možete vidjeti kako se sve ovo radi.

                                                                                      horizontalna lista

                                                                                      Ako koristite HTML listu za kreiranje horizontalnog menija, onda ćete morati da rasporedite stavke liste jednu pored druge u istoj liniji. Ne možete to učiniti s HTML-om, pa ćete morati koristiti CSS.

                                                                                      Da biste kreirali horizontalnu listu, morate postaviti CSS svojstvo prikaza stavki liste na inline ili inline-block, ovisno o tome koja druga svojstva ćete koristiti.

                                                                                      Naslov stranice

                                                                                      numerisana lista

                                                                                      1. Jabuke
                                                                                      2. Banane
                                                                                      3. Limuni

                                                                                      Nabrajana lista:

                                                                                      • Jabuke
                                                                                      • Banane
                                                                                      • Limuni
                                                                                      Pokušajte »

                                                                                      Nakon toga, sve stavke na listi će se postaviti u jedan red. Imajte na umu da će oznake za nabrajanje nestati sa stavki liste i da neće biti čak ni razmaka između njih, ali će ostati uvlaka na lijevoj strani liste.

                                                                                      Kako horizontalnu listu pretvoriti u horizontalni meni, možete vidjeti.