- 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.
- Ova opcija je
- Ova opcija
- Ovakva opcija
- Ova opcija je
- Ova opcija
- Ovakva opcija
- . 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
-
- Prva linija
- Druga linija
- 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.
- . Tag
- kreira kontejner za listu, oznaku
- postavlja termin i oznaku
- opis ili definicija pojma.
Snimljeno ovu listu 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 ili višeslojne liste 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
- Prva linija
- Druga linija
- Treća linija
- Ova opcija
- Prva linija
- Druga linija
- Treća linija
- Ovakva opcija
- Prva linija
- Druga linija
- Treća linija
U HTML-u, cijeli skup oznaka je odgovoran za organiziranje lista, čija organizacija mora odgovarati određena pravila 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 numerisana stavka liste ima jedinstveni marker koji ukazuje na redosled pojavljivanja ovog stava 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
- :
Numerisana lista:
- Kafa
- Tea
- Mlijeko
Pokušajte »Napomena: oznaka
- može sadržavati samo oznake kao podređene elemente
- , odnosno sav sadržaj numerisane liste mora biti smešten unutar elemenata
- . Tag
- , 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":
- Jabuke
- Banane
- Limuni
Numerisana lista sa type="I" atributom:
- Jabuke
- Banane
- Limuni
Vrste markera liste sa nabrajanjem:
- Jabuke
- Banane
- Limuni
- Jabuke
- Banane
- Limuni
Pokušajte »CSS svojstvo tipa liste stila, pored tipova markera za liste sa nabrajanjem, ima mnogo razne vrste markere i za numerisane liste. Ali ne uvijek iste promjene standardni pogled marker na drugom je dovoljan da se lista lepo napravi. Da biste dizajnirali liste, 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
- Jabuke
- Banane
- 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.
Numerisane liste su skup elemenata sa njihovim serijskim brojevima. Vrsta i tip numeracije zavise od parametara elementa
- , koji se koristi za kreiranje liste. Sljedeće vrijednosti mogu poslužiti kao elementi numeracije:
- arapski brojevi (1, 2, 3, ...);
- Arapski brojevi sa početnom nulom za brojeve manje od deset (01, 02, 03, ...,10);
- prestonice pisma(A, B, C, ...);
- mala latinična slova (a, b, c, ...);
- veliki rimski brojevi (I, II, III, ...);
- mali rimski brojevi (i, ii, iii, ...);
- armenska numeracija;
- Gruzijsko numerisanje.
- . Vrijednost je bilo koji pozitivan cijeli broj. Nije bitno koja je vrsta numeracije postavljena, čak i ako se latinična slova koriste kao lista. Ako se atributi start i value istovremeno primjenjuju na listu, onda potonji ima prednost i numeriranje se prikazuje od broja specificiranog vrijednosti, kao što je prikazano u primjeru 1.
Primjer 1: Promjena numeracije liste
Liste - Trebali biste dobro voditi računa o svom radnom mjestu.
- Podesite osvetljenje u prostoriji tako da se izvor svetlosti nalazi sa strane ili iza operatera.
- Bo izbegavaj medicinske komplikacije Preporučljivo je odabrati stolicu sa mekim sjedištem.
Prvi element liste u ovom primjeru počinje rimskim brojem IV, pošto je naveden atribut start="4", zatim dolazi broj V, a posljednji element izlazi van reda i dodjeljuje mu se broj X (slika 1).
Rice. 1. Rimski brojevi u listi
Pisanje brojeva
Podrazumevano, numerisana lista izgleda ovako: prvo dolazi broj, zatim tačka i nakon toga se prikazuje tekst odvojen razmakom. Ovaj oblik pisanja je vizualan i zgodan, ali neki programeri više vole da vide drugačiji način dizajniranja numeracije lista. Naime, tako da umjesto tačke postoji zagrada koja zatvara, kao što je prikazano na sl. 2 ili nešto slično.
Rice. 2. Prikaz numerisane liste sa zagradama
Stilovi vam omogućavaju da promijenite tip numeriranja liste koristeći svojstva sadržaja i brojača. Prvo, ol selektor treba postaviti na poništavanje brojača : item , ovo je neophodno kako bi numeriranje u svakoj novoj listi počelo iznova. U suprotnom, numerisanje će se nastaviti i umesto 1,2,3 videćete 5,6,7. Vrijednost stavke je jedinstveni identifikator brojača; sami ga biramo. Zatim morate sakriti originalne markere kroz svojstvo stila lista-style-type sa vrijednošću ništa.
Svojstvo content obično radi u sprezi sa pseudoelementima ::after i ::before. Dakle, konstrukcija li::before kaže da se neki sadržaj mora dodati prije svakog elementa liste (primjer 2).
Primjer 2. Kreiranje vlastite numeracije
Li::before (sadržaj: brojač(stavka) ") "; /* Dodajte zagradu brojevima */ counter-increment: item; /* Podesite ime brojača */ )
Svojstvo sadržaja sa brojačem vrednosti(stavkom) prikazuje broj; Dodavanjem zagrade, kao što je prikazano u ovom primjeru, dobijamo traženu vrstu numeracije. kontrainkrement je potreban za povećanje broja liste za jedan. Imajte na umu da se isti identifikator, pod nazivom item , koristi u cijelom. Konačni kod je prikazan u primjeru 3.
Primjer 3: Promjena prikaza liste
Liste - Prvo
- Sekunda
- Treće
- Četvrto
Koristeći gornju metodu, možete napraviti bilo koju vrstu numerirane liste, na primjer, staviti broj u uglaste zagrade, u ovom slučaju će se samo jedan red promijeniti u stilovima.
Sadržaj: "[" counter(item) "] ";
Spisak sa ruskim slovima
Postoji numerisana lista sa latiničnim slovima, ali nema ruskih slova za listu. Mogu se dodati umjetno koristeći gornju tehniku. Pošto se numerisanje vrši preko stilova, sama lista ostaje originalna, dodaje joj se samo odabrana klasa, nazovimo je ćirilica (primer 4).
Primjer 4: Kod za kreiranje liste
- Jedan
- Dva
- Tri
Dodavanje slova se vrši pomoću pseudoelementa ::before i svojstva content. Pošto svaki red mora imati svoje slovo, koristićemo pseudo-klasu :nth-child(1) sa brojem slova napisanim u zagradama. Prvo slovo je, naravno, A, drugo je B, treće je C, itd. Cijeli ovaj skup se dodaje li selektoru na sljedeći način (primjer 5).
Primjer 5: Upotreba pseudo-class:nth-child
Ćirilica li:nth-child(1)::before (sadržaj: "a)"; ) .cyrilic li:nth-child(2)::before (sadržaj: "b)"; ) .cyrilic li:nth-child(3)::before (sadržaj: "na)"; )
U ovom primjeru, svako slovo je praćeno zagradama, sva slova su mala. Možete definisati sopstveni tip numerisanja liste, na primer može da sadrži velika slova sa tačkom, sa jednom ili dve zagrade ili samo slova. Za razliku od standardnog numerisanja, mi smo slobodni da radimo šta god želimo. Lista od deset slova trebala bi biti dovoljna za gotovo sve situacije, ali ako se to odjednom pokaže nedovoljno, ništa nas ne sprječava da proširimo listu i uključimo barem sva slova ruske abecede.
Konačno podešavamo poravnanje i poziciju slova, opciono određujemo veličinu fonta, boju i druge parametre (primjer 6).
Primjer 6. Lista sa ruskim slovima
Lista - Borsch
- Kotleti od štuke
- Kulebyaka
- Pečurke u pavlaci
- Palačinke sa kavijarom
- Kvass
Rezultat ovog primjera prikazan je na sl. 3.
U HTML markup jeziku postoje 3 vrste lista - uređene (numerisane), neuređene (nenumerisane) i liste definicija.
Da biste napravili takvu listu, potrebne su vam 2 vrste elemenata: 'ul' (skraćenica od neuređena lista, tj. neuređena lista) i 'li' (element liste). Sve što je napisano unutar 'li' je označeno markerom.
Izgled takve liste može se kontrolisati navođenjem tipova markera.
Vrste markera
Postoji poseban atribut tipa koji se nalazi u oba elementa liste. Ovo je vaš tip markera. Postoje samo 3 vrste: krug, disk i kvadrat:
- - kvadrat
- prvi element
- drugi element
- posljednji element
- Marketing odjel
- Ovaj odjel se bavi promocijom roba i usluga
- Odjel za finansije
- Ovo odjeljenje se bavi svim finansijskim transakcijama
- VIJESTI DANA
-
- Danas kiša
- Kiša će padati cijeli dan
- VIJESTI NOĆI
- Noću će padati kiša
- Sutra počinje novi dan
- (od engleskog List Item - stavka liste). Podrazumevana je numerisana lista sa arapskim brojevima.
- element 1
- element 2
- element 3
- Probajte sami"
- Uzmi ključ
- Ubacite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadi ključ iz brave
- Otvoriti vrata
- Uzmi ključ
- Ubacite ključ u bravu
- Okrenite ključ za dva okreta
- Izvadi ključ iz brave
- Otvoriti vrata
- 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 po defaultu).
- na sljedeći način:
-
U tom slučaju, sekvencijalno numerisanje liste će biti prekinuto i od ove tačke numerisanje će početi ponovo, u u ovom slučaju od sedam.
Primjer upotrebe atributa vrijednost tag
U ovom primjeru, "Prva stavka liste" bi bila broj 1, "Stavka druge liste" bi bila broj 7, a "Treća stavka liste" bi bila broj 8.
Formatiranje numerisanih lista pomoću CSS-a
Za promjenu brojeva liste trebate koristiti svojstvo tip-stil liste CSS stilovi:
- . Pretraživač uvlači svaku stavku liste i automatski prikazuje znakove za nabrajanje.
- Prva tačka
- Druga tačka
- Treća tačka
- Nije potrebno postavljati samo tekst, prihvatljivo je postaviti bilo koji element streaming sadržaja (linkove, pasuse, slike itd.)
- Dozvoljeno je kreiranje ugniježđene liste ili liste drugog nivoa. Da biste ugnijezdili listu, opišite nova lista unutrašnji element
- već postojeću listu. Kada ugnijezdite jednu listu za nabrajanje u drugu, pretraživač automatski mijenja stil za nabrajanje za listu drugog nivoa. Bilo koja lista može biti ugniježđena u drugu. Sljedeći primjer pokazuje strukturu liste s nabrajanjem ugniježđene unutar druge stavke numerirane liste.
- Probajte sami"
- ponedjeljak
- Pošalji poštu
- Posjeta uredniku
- Odabir teme
- Dekorativni dizajn
- Završni izvještaj
- Večernje pregledavanje poruka
- utorak
- Revidirati raspored
- Pošaljite slike
- srijeda...
- ponedjeljak
- Pošalji poštu
- Posjeta uredniku
- Odabir teme
- Dekorativni dizajn
- Završni izvještaj
- Večernje pregledavanje poruka
- utorak
- Revidirati raspored
- Pošaljite slike
- srijeda...
- Probajte sami"
- Kafa
- Kafa
- Kafa
- Kafa
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Kafa
- Mlijeko
- Probajte sami"
- Bik
- Blizanci
- Ovan
- Bik
- Blizanci
- (od engleskog Definition Term - definirana riječ, pojam) i
- (od engleskog Definition Description - opis pojma koji se definiše).
- Prvi mandat
- Opis prvog pojma
- Drugi mandat
- Opis drugog termina
- Probajte sami"
- World Wide Web
- - sa engleskog World Wide Web (WWW) je distribuirani sistem koji omogućava pristup 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 pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenog dizajna.
Stilovi numerisane liste
Primjer Značenje Opis a, b, c niži alfa Mala slova A, B, C gornji alfa Velika slova i, ii, iii nižerimski Rimski brojevi malim slovima I, II, III gornji roman Rimski brojevi velikim slovima Primjer: Primjena CSS svojstva tip-stil liste
Liste sa nabrajanjem
Liste sa oznakama su u suštini slične numerisanim listama, samo što ne sadrže sekvencijalno numerisanje stavki. Liste sa oznakama se kreiraju pomoću blok elementa
TagU sljedećem primjeru možete vidjeti da se, prema zadanim postavkama, mali marker u obliku popunjenog kruga dodaje prije svake stavke liste:
Unutar oznake
Ugniježđene liste
Bilo koja lista može biti ugniježđena u drugu. Unutar elementaPrimjer: Ugniježđene liste
Formatiranje lista za nabrajanje
Za promjenu izgled treba koristiti svojstvo markera liste tip-stil liste CSS stilovi:
Sljedeći primjer pokazuje različite stilove lista sa nabrajanjem:
Primjer: Stilovi liste za nabrajanje
disk:
krug:
Kvadrat:
ništa:
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 bile lijepe, č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
Znakovi zodijaka
Znakovi zodijaka
Liste definicija (opisa)
Liste definicija su vrlo korisne za kreiranje, na primjer, vašeg ličnog rječnika pojmova. Svaka stavka liste definicija ima dva dijela: pojam i njegovu definiciju.
Stavljate cijelu listu u element
Liste definicija se često koriste u naučnim, tehničkim i obrazovnim publikacijama, koristeći ih za sastavljanje glosara, rječnika, priručnika itd.Opća struktura liste opisa je sljedeća:
Sljedeći primjer pokazuje jednu moguću upotrebu liste definicija:
Primjer: Lista definicija
World Wide Web - sa engleskog. World Wide Web (WWW) je distribuirani sistem koji omogućava pristup 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. Web stranica je skup pojedinačnih web stranica koje su međusobno povezane linkovima i jedinstvenim dizajnom.
Podrazumevano, tekst pojma je pritisnut na levu ivicu prozora pretraživača, a opis pojma se nalazi ispod i pomera udesno.
- - disk
- - obim
Ovisno o tome gdje navedete tip markera, možete ga promijeniti za cijelu listu ili za određeni element.
Naručena lista
Da biste napravili listu, potrebna su vam i 2 elementa: 'ol' i 'li' (element liste). Markeri se zamjenjuju brojevima sa tačkom. Primjer jednostavne liste:
Izgled uređene liste možete kontrolisati navođenjem različitih tipova numeracije.
Vrste numeracije
Postoji poseban atribut tipa koji se postavlja u element 'ol' ili 'li'. Ovo je vaš tip liste. Postoji ukupno 5 vrsta:
- - Numeracija arapskim brojevima (1, 2, 3)
- - Numeracija velikim slovima (A, B, C)
- - Numeracija malim slovima (a, b, c)
- - Numeracija velikim rimskim brojevima (I, II, III)
- - Numeracija malim rimskim brojevima (i, ii, iii)
- - Od kojeg broja započeti numeraciju?
U zavisnosti od toga gde navedete vrstu numeracije, možete je promeniti za celu listu ili za određeni element.
Lista definicija
Napravljena je lista definicija za unose u rječniku.
Postoji opći kontejner 'dl'. Unutar njega su 'dt' (termin definicije) i 'dd' (opis definicije). Najjednostavniji primjer:
Svi elementi svih lista su blok elementi. Ali samo inline elementi se mogu postaviti unutar 'dt' elementa. Možete staviti šta god želite u elemente 'dd' i 'li'. Odavde dolaze ugniježđene liste.
Ugniježđeno (mješovite liste)
To su liste na više nivoa, unutar kojih postoji hijerarhija. Često se takve liste koriste prilikom izrade mape lokacije. primjer:
- Miješana lista
HTML podržava liste od tri različite vrste, od kojih svaki ima svoje parametre:
Numerisane liste
U numerisanu listu, pretraživač automatski ubacuje brojeve elemenata po redosledu, počevši od određene vrednosti (obično 1). Ovo vam omogućava da ubacite i izbrišete stavke liste bez ometanja numeracije, budući da će preostali brojevi biti automatski ponovo izračunati.
Numerisane liste se kreiraju korišćenjem blok elementa
TagNumerirane stavke liste moraju sadržavati više stavki liste, kao što je prikazano u sljedećem primjeru:
Primjer: Numerirana lista
Korak po korak instrukcije
Ponekad kada gledate postojeće HTML kodove naići ćete na argument tip u elementu
Ovdje: upišite – navedite simbole:
Ako želite da lista počinje brojem koji nije 1, trebali biste to navesti koristeći atribut počni tag
Sljedeći primjer prikazuje numerisanu listu s velikim rimskim brojevima i početnom vrijednošću XLIX:Numeriranje se također može započeti korištenjem atributa vrijednost, koji se dodaje elementu
Sa praktične tačke gledišta, principi prikazivanja stavki u listi sa nabrajanjem mogu se primeniti na sličan način kao na numerisanoj listi. Ali s obzirom na to da se radi o nabrajanju, postoje neke karakteristike o kojima će se dalje govoriti.
Numeracija liste
Dozvoljeno je započeti listu od bilo kojeg broja; za ovu svrhu se koristi početni atribut elementa
- ili vrijednost elementa
- , koji sadrži sav prikazani sadržaj liste):
Ispod su skraćene verzije koda i vrsta numeracije koja može biti u jednom ili drugom slučaju.
Prikaz liste:
Prikaz liste:
Numeracija mala slova latinica:
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
Vrijednost diska je zadana.
Primjer kreiranja liste s nabrajanjem s kružićima:
Kao rezultat, lista će imati sljedeći oblik:
Kreiranje liste s kvadratnim markerima:
Lista će izgledati ovako:
Atribut tipa može se primijeniti na više od same oznake
- , ali i na oznaku