Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Savjet
  • Numerisana html lista sa podstavkama. Numerisana lista u HTML-u

Numerisana html lista sa podstavkama. Numerisana lista u HTML-u

Pozdrav, dragi čitaoci blog stranice. Danas, kao dio ovog odjeljka, želim govoriti o raznim Html listama koje se mogu kreirati na osnovu UL, OL, LI i DL tagova posebno dizajniranih za ovo. UL i LI parovi kreiraju liste sa nabrajanjem, OL i LI parovi kreiraju numerisane liste, a DL, DT i DD elementi kreiraju takozvane liste definicija. Također ćemo ukratko razmotriti principe kreiranja ugniježđenih struktura.

Želio bih vas podsjetiti da smo već uspjeli razgovarati o osnovama modernog, kao i o tabelarnom izgledu (). Osim toga, dotakli smo se osnova i naučili do kraja.

Bullet liste zasnovane na UL i LI oznakama

UL oznaka se koristi za kreiranje lista sa nabrajanjem, a OL oznaka se koristi za kreiranje numerisanih lista. Ove oznake su uparene i blok oznake, baš kao i LI element.

Između početne i završne oznake nalaze se pojedinačne stavke liste, koje su zauzvrat zatvorene u otvaranju i zatvaranju LI elementa. Pregledač dodaje uvlake u jednom redu na vrhu i na dnu HTML lista, slično uvlačenju napravljenom oznakom pasusa.

Pogledajmo, na primjer, opciju s nabrajanjem koja bi mogla izgledati ovako:

  • Prva linija
  • Sekunda
  • Poslednji element

Samo LI elementi mogu biti unutar otvaranja i zatvaranja UL tagova, a unutar samih ovih elemenata (klauzula) možete umetnuti bilo koji sadržaj (tekst, slike, naslove, pasuse, linkove pa čak i druge liste).

One. UL služi samo za organizovanje nabrajanog (ne uređenog) popisa, a sve što vidite na web stranici unutar njega implementirano je korištenjem sadržaja LI elemenata.

Za UL, možete promijeniti vrstu markera navođenjem različitih vrijednosti za atribut „Type“. Ako "Type" (kontrola izgleda markera) za UL element nije naveden, tada će se prikazati podrazumevani izgled markera (disk - krug popunjen bojom teksta):

    • — popunjen krug (podrazumevano);
      • - nepopunjeni krug;
        • - kvadrat

U gornjim primjerima naveli smo atribut “Type” u UL elementu, koristeći ovaj tip markera za sve stavke. Ali atribut “Type” se također može specificirati za svaku pojedinačnu LI oznaku, postavljajući vlastiti tip markera za ovu stavku.

Primjer liste s grafičkim oznakama s različitim tipovima oznaka za svaku stavku:

  1. Marker u obliku popunjenog diska
  2. Marker u obliku neobojenog diska
  3. Square

Numerisane liste u HTML-u na osnovu oznake OL

Za kreiranje numerisane liste koriste se OL tagovi unutar kojih će se LI elementi ponovo nalaziti. OL i LI, kao što sam već spomenuo, su bazirani na blokovima (to jest, imaju tendenciju da zauzmu sav raspoloživi prostor u širini) i ništa osim LI elemenata ne može se postaviti unutar OL-a.

Ispostavilo se da su OL i UL servisne oznake koje su potrebne samo da naznače pretraživaču koju vrstu liste kreiramo (označene ili numerisane). U slučaju numerirane stavke, lijevo od svake stavke nećemo vidjeti marker, već broj i tačku iza njega:

  1. Prva linija
  2. Druga tačka
  3. Treća linija

Kao što sam spomenuo gore, elementi UL, OL i LI imaju mogućnost korištenja atributa TYPE. Omogućava vam da konfigurišete tip markera ili odredite koji brojevi ili slova će se koristiti za numerisanje stavki liste. Za numerisanu listu, parametri ovog atributa mogu imati sledeće vrednosti:

    1. — numerisanje će se vršiti uobičajenim arapskim brojevima (ista opcija će se koristiti podrazumevano, u nedostatku atributa „Type“);
      1. — velika slova kao numerisanje;
        1. - mala slova;
          1. - veliki rimski brojevi;
            1. - mali rimski brojevi;

            Primjer numerirane liste s različitim vrstama numeracije za svaku stavku:

            1. numerisan velikim rimskim brojevima
            2. Numeracija malim latiničnim slovima
            3. Numeracija malim rimskim brojevima

            Prilikom kreiranja numerisanih lista, takođe je moguće započeti numerisanje ne od jednog, već od broja navedenog u START atributu. Na primjer:

            1. Prvi element čiji je broj naveden u OL oznaci sa start="23" atributom
            2. Sljedeća stavka, s brojem jedan viši
            3. Još jedan

            Za OL, također možete započeti novo numeriranje od bilo koje vrijednosti, počevši od bilo koje stavke, pisanjem atributa VALUE sa potrebnim brojem u početnom LI ove stavke. Na primjer:

            1. Prva tačka sa brojem jedan
            2. Ovaj element će dobiti broj naveden u atributu value="32".
            3. Stavka sa velikim brojem

            Dizajniranje izgleda lista u CSS-u (style sheets)

            Ali, u pravilu, sada se izgled markera ne postavlja preko atributa TYPE, već za koji su navedena odgovarajuća svojstva.

            Ovdje ću jednostavno dati primjer raznih markera za nenumerisane liste, čiji se izgled postavlja kroz zasebnu datoteku sa kaskadnim stilskim listovima.

            • Prva tačka
            • Sekunda
            • Last

            Ali o tome ćemo govoriti u narednim člancima. Ovako je postavljen izgled UL markera na ovom blogu. Slike se koriste kao markeri: za redovne stavke nenumerirane liste - , za ugniježđene stavke nenumerirane liste - .

            Posebne i ugniježđene liste u HTML kodu

            Treći i posljednji tip se zove “definicijska lista” i specificira se pomoću tri taga - DL, DT i DD. DL govori pretraživaču da je ono što slijedi lista definicija.

            Obično se ovaj tip koristi (ili je bio namijenjen da se koristi) za pisanje rječnika koji se sastoje od pojmova (ograđenih u DT oznakama) i njihovih opisa (ograđenih u DD oznakama).

            Prvi mandat
            Opis
            Drugi mandat
            Njegov opis

            Ako pogledate gornji primjer, primijetit ćete da je DD element (opis pojma) pomaknut (za 40 piksela) u odnosu na DT element (sam termin).

            Generalno, DL, DT i DD su blok oznake i samo sadržaj sa inline oznakama može se umetnuti unutar DT elementa (ispada da se blok elementi naslova i pasusa ne mogu koristiti unutar DT). A unutar DD tagova možete umetnuti bilo koji element, kako inline tako i blok.

            Ugniježđena lista u HTML-u se kreira analogno jednostavnom, ali unutar glavne liste, neke od stavki su još jednom zatvorene u oznaku za otvaranje i zatvaranje UL ili OL.

            Imajte na umu da se završni LI stavke u kojoj će se kreirati ugniježđena stavka postavlja samo nakon cijelog koda ugniježđene liste (ovo je vrlo važno za njen ispravan prikaz na web stranici). Ugniježđena lista može izgledati otprilike ovako:

            1. Prvi pasus glavne numerisane
            2. Druga tačka
              • Prvi element ugniježđenog s nabrajanjem
              • Sekunda
              • Treća i poslednja tačka
            3. Treći element je numerisan

            Sretno ti! Vidimo se uskoro na stranicama blog stranice

            Možda ste zainteresovani

            Kako umetnuti link i sliku (fotografiju) u HTML - IMG i A tagove Odaberite, Option, Textarea, Label, Fieldset, Legend - Html oznake za oblik padajućih lista i tekstualnih polja
            Html obrasci za sajt - oznake Forma, Input i Select, Option, Textarea, Label i drugi za kreiranje elemenata web obrasca
            Kako se boje postavljaju u Html i CSS kodu, odabir RGB nijansi u tabelama, Yandex izlaz i drugi programi
            Embed i object - Html oznake za prikazivanje medijskog sadržaja (video, flash, audio) na web stranicama
            Oznake i atributi naslova H1-H6, horizontalna linija Hr, prijelom reda Br i paragraf P prema Html 4.01 standardu
            Tabele u HTML-u - Tabela, Tr i Td oznake, kao i Colspan, Cellpadding, Cellspacing i Rowspan za njihovo kreiranje
            Šta je jezik za označavanje hiperteksta Html i kako pogledati listu svih oznaka u W3C validatoru
            Font (lice, veličina i boja), blok citata i pre tagovi - naslijeđeno formatiranje teksta u čistom HTML-u (ne koristi se CSS)
            Iframe i Frame - šta su to i kako najbolje koristiti okvire u HTML-u
            Img - Html oznaka za umetanje slike (Src), poravnavanje i premotavanje teksta oko nje (align), kao i postavljanje pozadine (background)

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

            Peta verzija HTML standarda podržava 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- ovo je skup elemenata (stavki liste) koji imaju određeni niz. Svaka stavka u numerisanoj listi ima jedinstveni marker koji označava redosled kojim se stavka pojavljuje u odnosu na druge stavke na listi. Po defaultu, numerisani markeri stavki liste su brojevi. Prva stavka je označena brojem 1, druga je označena brojem 2 i tako dalje.

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

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

              , unutar koje se nalaze elementi liste sa podacima. Svaka stavka liste je označena pomoću oznake
            1. :

              Numerisana lista:

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

              Napomena: oznaka

                može sadržavati samo oznake kao podređene elemente
              1. , odnosno sav sadržaj numerisane liste mora biti smeš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.

                Označena lista

                Označena lista- to su nenumerisane, odnosno neuređene liste elemenata čiji redosled nije bitan. Sve stavke liste sa naznakom imaju iste oznake za nabrajanje, a podrazumevano se pojavljuju kao mali crni krugovi.

                Da biste kreirali liste sa nabrajanjem u HTML-u, koristite oznaku

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

                  Označena lista:

                  • Kafa
                  • Tea
                  • Mlijeko
                  Pokušajte »

                  Vrste markera

                  Tipovi numerisanih listića za nabrajanje mogu se promeniti korišćenjem atributa tipa. Ovaj atribut podržava pet tipova markera:

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

                  Promjena markera liste:

                  Naslov stranice

                  Numerisana lista sa atributom type="a":

                  1. Jabuke
                  2. Banane
                  3. Limuni

                  Numerisana lista sa type="I" atributom:

                  1. Jabuke
                  2. Banane
                  3. Limuni

                  Vrste markera liste sa nabrajanjem:

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

                  CSS svojstvo list-style-type, pored tipova markera za liste sa nabrajanjem, ima mnogo različitih tipova markera za numerisane liste. Ali promjena jedne standardne vrste markera u drugu nije uvijek dovoljna za stvaranje lijepe liste. Za dizajniranje lista bolje je koristiti CSS, koji vam omogućava ne samo promjenu izgleda markera, već i zamjenu markera slikama, kontrolu njihove lokacije i kontrolu uvlačenja. Možete vidjeti kako se sve ovo radi.

                  Horizontalna lista

                  Ako koristite HTML listbox za kreiranje horizontalnog menija, onda ćete morati da rasporedite stavke liste jednu za drugom u istom redu. Ovo se ne može učiniti pomoću HTML-a, pa ćete morati koristiti CSS.

                  Da biste kreirali horizontalnu listu, morate postaviti CSS svojstvo prikaza za stavke liste sa vrijednošću inline ili inline-block, ovisno o tome koja druga svojstva ćete koristiti.

                  Naslov stranice

                  Numerisana lista

                  1. Jabuke
                  2. Banane
                  3. Limuni

                  Označena lista:

                  • Jabuke
                  • Banane
                  • Limuni
                  Pokušajte »

                  Nakon toga, sve stavke liste će se poredati u jedan red. Imajte na umu da će oznake za nabrajanje nestati sa stavki liste i da neće biti razmaka između njih, ali će ostati lijevo uvlačenje liste.

                  Možete vidjeti kako horizontalnu listu pretvoriti u horizontalni meni.

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

                    , uz pomoć kojih se liste ovog tipa organizuju u HTML dokumente (UL - Unordered List, nesređena lista).

                    U listi za nabrajanje, specijalni znakovi koji se nazivaju markeri liste koriste se za isticanje njenih elemenata (često se nazivaju bullets, što je formalni izgovor engleskog izraza bullet). Izgled markera liste određuje pretraživač, a prilikom kreiranja ugniježđenih lista, pretraživači automatski diverzificiraju izgled markera na različitim nivoima 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 pre i posle liste, čime se lista odvaja od glavnog sadržaja dokumenta, tako da nema potrebe da ovde koristite oznake pasusa


                    .

                    Svaki element liste mora početi oznakom

                  • (LI - Stavka liste, element liste). Tag
                  • ne zahtijeva 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.

                    Dostavljene informacije su dovoljne za izradu osnovne liste sa nabrajanjem. Hajde da damo primer HTML dokumenta koji koristi listu sa nabrajanjem, čiji je prikaz od strane pretraživača prikazan na Sl. 2.1.

                    Primjer liste s oznakama

                    horoskopski znakovi:

                    • Ovan

                    • Bik

                    • Blizanci

                    • Djevica

                    • Vage

                    • Škorpion

                    • Strijelac

                    • Jarac

                    • Vodolija

                    • Riba

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

                    Imajte na umu da pored elemenata 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, već služi kao njen naslov.

                    Bilješka

                    Neki udžbenici o HTML jeziku navode da se oznaka kontejnera treba koristiti za postavljanje naslova liste (LH - Zaglavlje liste, zaglavlje liste). Ovu oznaku trenutno ne prepoznaju nijedan uobičajeni pretraživač i nije dio HTML specifikacije. Stoga 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 bi se pretraživaču naznačilo da datu listu treba prikazati u kompaktnom obliku. Na primjer, može se smanjiti font ili razmak između redova liste, itd.

                      Bilješka

                      Trenutno, prisustvo parametra COMPACT u oznaci

                        ni na koji način ne utiče na prikaz lista u vodećim pretraživačima. Stoga je korištenje ovog parametra besmisleno, pogotovo zato što 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 znakova za nabrajanje liste. Tačan tip markera zavisi od pretraživača koji koristite. Tipične opcije prikaza su sljedeće:

                        TIP = disk - markeri se prikazuju kao popunjeni krugovi; TIP = krug - markeri se prikazuju kao otvoreni krugovi; TIP = kvadrat - markeri se prikazuju kao popunjeni kvadrati. Primjer unosa:

                          .

                          Zadana vrijednost je TYPE = disk. Za ugniježđene liste sa nabrajanjem, zadana vrijednost je disk na prvom nivou, krug na drugom nivou, kvadrat na trećem nivou i dalje. To je upravo ono š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 specifikaciji HTML 4.0, 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 elemente liste. Da biste to učinili, dozvoljeno je navesti parametar TYPE s odgovarajućom vrijednošću u oznaci elementa liste

                        • .

                          Primjer unosa:

                        • .

                          Bilješka

                          Preglednici različito tumače specifikaciju tipa metka 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 mijenja izgled markera samo za ovaj element.

                          Markeri grafičke liste

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

                          Da biste razumjeli ideju, morate razumjeti mehanizam za implementaciju lista na HTML stranicama. Ispostavilo se da je oznaka liste

                            (kao, zaista, liste tagova drugih tipova, o kojima će se raspravljati u nastavku) obavlja jedan zadatak - govori pretraživaču da sve informacije koje se nalaze nakon ove oznake trebaju biti prikazane pomaknute udesno (uvučeno) za određenu količinu. Oznake
                          • , koji ukazuju na pojedinačne stavke liste, daju standardne markere stavki liste.

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

                          • . Biće dovoljno da umetnete željenu grafičku sliku ispred svakog elementa liste. Jedini problem koji treba riješiti je razdvajanje elemenata liste jedan od drugog. Za ovo možete koristiti oznake pasusa

                            Ili prisilno prebacivanje na red
                            . 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čine datoteke male slike su također izuzetno male.

                            Bilješka

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

                            Koristeći HTML liste, možete kreirati meni za svoju web lokaciju sa različitim stavkama i podstavkama. Koristeći liste, kreira se sadržaj (mapa) sajta, što je veoma zgodno za pretraživače.

                            I tako, postoje oznake "" - one definiraju listu s nabrajanjem.
                            Oznake "" – definišu stavke, odnosno elemente liste sa nabrajanjem.

                            Prvo, napravimo jednostavnu listu od nekoliko stavki:

                            <html > <glava > <naslov > Jednostavna HTML lista sa nabrajanjemnaslov > glava > <tijelo > <ul > <li > Jedanli > <li > Dvali > <li > Trili > <li >Četirili > ul > tijelo > html >
                            • Tri

                            Za html oznake možete postaviti neke tipove koji su napisani unutra
                            prva oznaka"

                              " V type=" "

                              Kreirajmo listu u kojoj će umjesto tačaka biti mali krugovi (probušene tačke). Ova vrsta se zove " krug"

                              <html > <glava > <naslov > HTML lista sa nabrajanjemnaslov > glava > <tijelo > <ul type= "krug"> <li > Jedanli > <li > Dvali > <li > Trili > <li >Četirili > ul > tijelo > html >
                              • Četiri

                              Sada, umjesto tipa "krug", postavimo "tip" kvadrat" (kvadrati)

                              <html > <glava > <naslov > HTML lista sa nabrajanjemnaslov > glava > <tijelo > <ul type= "kvadrat"> <li > einli > <li > zweili > <li > dreili > <li > vierli > ul > tijelo > html >

                              CSS lekcije detaljno pokrivaju rad sa listama, iz kojih možete naučiti kako postaviti boje za stavke i tekst u njima, kao i kako postaviti sam tip markera (to može biti ne samo kvadrat
                              ili tačka - može biti gotovo bilo koji simbol).


                              Numerisane liste html

                              Liste se ne mogu samo označiti, već i numerisati, jer je to ponekad neophodno. To mogu biti brojevi (1, 2, 3...) i slova engleske abecede u malim i velikim slovima. Uzmite u obzir sve gore opisano.

                              Za postavljanje numeracije koriste se oznake "".
                              Tip je specificiran unutar prve oznake.

                              Numeracija po brojevima (od jednog)

                              <html > <glava > <naslov > Numerisana lista htmlnaslov > glava > <tijelo > <ol > <li > Jednomli > <li > Dvali > <li > Trili > <li >Četirili > ol > tijelo > html >
                              1. Četiri

                              Ako vam je potrebno da numeracija počinje od nule (nula) ili od tri, na primjer, tada morate upisati oznake u prvi start=" " i potreban broj.

                              <html > <glava > <naslov > Numerisana lista htmlnaslov > glava > <tijelo > <ol start= "0" > <li > nulali > <li > jedanli > <li > dvali > <li > trili > ol > tijelo > html >

                              Pogledajmo sada kako postaviti "numeraciju slova".

                              malim slovima:

                              <html > <glava > <naslov > Numerisane liste htmlnaslov > glava > <tijelo > <ol type= "a"> <li > Merkurli > <li > Venerali > <li > zemljali > <li > marsli > ol > tijelo > html >
                              1. Merkur
                              2. Venera
                              3. zemlja

                              velikim slovima:

                              <html > <glava > <naslov > Numerisane HTML listenaslov > glava > <tijelo > <ol type= "A"> <li > Jupiterli > <li > Saturnli > <li > Uranli > <li > Neptunli > <li ><b> Plutonb>li > ol > tijelo > html >
                              1. Jupiter
                              2. Saturn
                              3. Neptun
                              4. Pluton

                              Osim običnih lista u html-u, možete kreirati liste na više nivoa, odnosno pododjeljke za određene stavke. Da biste to učinili, nakon oznake i naslova "

                            • naslov "ubaci drugu listu, a zatim je zatvori drugom oznakom"
                            • "

                              <html > <glava > <naslov > Višerazinska lista htmlnaslov > glava > <tijelo > <ul type= "kvadrat" > <li > Violinali > <li > gitara<ul > <li > klasičnali > <li > ritam gitarali > <li > električna gitarali > ul > li > <li > Bubnjevili > <li > Dudochkali > ul > tijelo > html >
                              • Violina
                              • gitara
                                • klasična
                                • ritam gitara
                                • električna gitara
                              • Bubnjevi
                              • Dudochka

                              Sljedeća lekcija će se baviti kreiranjem jednostavnog menija na osnovu znanja stečenog iz ove lekcije.

                              - 4.5 od 5 na osnovu 2 glasa

                              Vrlo često određene informacije na web stranici moraju biti predstavljene u obliku lista.

                              Liste vam omogućavaju da organizirate i sistematizujete različite informacije i prezentirate ih posjetitelju u prikladnom obliku.

                              Liste u HTML-u dolaze u tri varijante: liste sa nabrajanjem, numerisane liste i liste definicija. Pogledajmo kako ih kreirati po redu.

                              Označena lista.

                              Ova vrsta liste se najčešće koristi. Označena lista u HTML-u se kreira pomoću oznaka

                              • . U ovom slučaju, marker se dodaje nasuprot svake stavke liste; po defaultu, to je marker u obliku kruga. Koristeći oznake, kreira se kontejner unutar kojeg se nalaze elementi liste: .

                                Kôd liste za nabrajanje će izgledati ovako:

                                • Ova opcija je
                                • Ova opcija
                                • Ovakva opcija

                                Možete pokušati kreirati HTML stranicu koristeći ovaj kod i za vas, rezultat će biti sljedeća lista:

                                Kao što vidite, svaki element liste se postavlja u novi red, sa određenim uvlakama koje se kreiraju sa leve, gornje i donje strane. Svaka stavka liste počinje markerom; marker može biti popunjeni krug (koristi se po defaultu), krug ili kvadrat. Na oznaci

                                  Postoji atribut tipa koji se koristi za postavljanje stila markera. Ovaj atribut ima sljedeća značenja:

                                  • disk - krug;
                                  • krug - krug;
                                  • kvadrat - kvadrat.

                                  Vrijednost diska je zadana.

                                  Primjer kreiranja liste s nabrajanjem s kružićima:

                                  • Ova opcija je
                                  • Ova opcija
                                  • Ovakva opcija

                                  Kao rezultat, lista će imati sljedeći oblik:

                                  Kreiranje liste s kvadratnim markerima:

                                  • Ova opcija je
                                  • Ova opcija
                                  • Ovakva opcija

                                  Lista će izgledati ovako:

                                  Atribut tipa može se primijeniti na više od same oznake

                                    , ali i na oznaku
                                  • . Na ovaj način možete kreirati listu s raznim oznakama.

                                    • Ova opcija je
                                    • Ova opcija
                                    • Ovakva opcija

                                    Rezultat će biti sljedeći:

                                    Numerisane liste.

                                    Numerisane liste u HTML-u su liste u kojima svaka stavka ima serijski broj; numerisane liste se kreiraju pomoću oznake

                                      i ugniježđene u njegove oznake
                                      1. Prva linija
                                      2. Druga linija
                                      3. Treća linija

                                      Lista izgleda ovako:

                                      Podrazumevano, numerisanje je arapskim brojevima. Ali oznaka

                                        Postoji atribut tipa, pomoću čije vrijednosti možete numerirati velikim slovima (type="A") ili malim (type="a") latiničnim slovima, rimskim brojevima u gornjem dijelu (type="I") ) i niži (type="i") registar.

                                        Ispod su skraćene verzije koda i vrsta numeracije koja može biti u jednom ili drugom slučaju.

                                        Prikaz liste:

                                        Prikaz liste:

                                        Numeracija malim slovima latinice:

                                        Prikaz liste:

                                        Prikaz liste:

                                        Prikaz liste:

                                        Lista definicija u HTML-u.

                                        Poseban tip liste su liste definicija. Razlikuju se po tome što se svaki element liste sastoji od dva elementa, pojma i teksta koji otkriva njegovo značenje. Ove liste se kreiraju pomoću oznaka

                                        . Tag
                                        kreira kontejner za listu, oznaku
                                        postavlja termin i oznaku
                                        opis ili definicija pojma.

                                        Ova lista je napisana na sljedeći način:

                                        Termin 1
                                        Definicija 1
                                        Termin 2
                                        Definicija pojma 2
                                        Termin 3
                                        Definicija 3

                                        Rezultat će biti sljedeća lista:

                                        Kao što vidite, ovo stvara odgovarajuće uvlačenje za termin i tekst definicije.

                                        Ugniježđene liste ili liste na više nivoa u HTML-u.

                                        Ponekad je potrebno ugniježditi drugu listu unutar jednog elementa određene vrste liste. HTML vam omogućava da neograničeno ugrađujete neke liste u elemente drugih lista.

                                        Na primjer, evo koda koji ugnijezdi numerirane liste unutar stavki liste sa nabrajanjem.

                                        • Ova opcija je
                                          1. Prva linija
                                          2. Druga linija
                                          3. Treća linija
                                        • Ova opcija
                                          1. Prva linija
                                          2. Druga linija
                                          3. Treća linija
                                        • Ovakva opcija
                                          1. Prva linija
                                          2. Druga linija
                                          3. Treća linija

Najbolji članci na ovu temu