Määratluste loendi koodi näidis:

Definitsiooniloendid Mõiste 1 Mõiste 1 määratlus Mõiste 2 Mõiste 2 määratlus

Tulemus:

Pesastatud loendid

On olukordi, kus peate loendielemendisse lisama oma loendi. Selliseid loendeid nimetatakse mitmetasandilisteks või pesastatud. Selleks kasutatakse meile juba tuntud listi siltide kombinatsiooni.

Mitmetasandilise loendi näidiskood:

Pesastatud loendid

• Loomad
  1. kassid
  2. koerad
• Taimed
  1. puud
  2. lilled

Nummerdatud loendid on elementide kogum koos nende seerianumbritega. Nummerdamise tüüp ja tüüp sõltuvad sildi atribuutidest

, mida kasutatakse loendi koostamiseks. Iga nummerdatud loendi üksus on tähistatud sildiga
1. nagu allpool näidatud.
   1. Esimene punkt
   2. Teine punkt
   3. Kolmas punkt

   Kui te ei määra täiendavaid atribuute ja kirjutage lihtsalt silt

   , siis on vaikimisi loend araabia numbritega (1, 2, 3,...), nagu on näidatud näites 11.3.

   Näide 11.3. Looge nummerdatud loend

   Ajaga töötamine

   1. täpsuse loomine (te ei jää kunagi millekski hiljaks);
   2. ravi täpsuse vastu (teil ei ole kunagi kiiret);
   3. muutused aja ja kellade tajumises.
   
   
   

   Selle näite tulemus on näidatud joonisel fig. 11.3.

   Riis. 11.3. Nummerdatud loendivaade

   Pange tähele, et nummerdatud loend lisab ka automaatse taande teksti üla-, alaossa ja vasakule.

   Nummerdamiselementidena võivad olla järgmised väärtused:

   • araabia numbrid (1, 2, 3, ...);
   • suured ladina tähed (A, B, C, ...);
   • väikesed ladina tähed (a, b, c, ...);
   • suured rooma numbrid (I, II, III, ...);
   • väiketähtedega rooma numbrid (i, ii, iii, ...).

   Nummerdatud loendi tüübi märkimiseks kasutage sildi atribuuti type

   . Selle võimalikud väärtused on toodud tabelis. 11.2.
   Tabel 11.2. Nummerdatud loendi tüübid

   Loendi tüüp	HTML kood	Näide
   Araabia numbrid		1. Tšeburaška 2. Krokodill Gena 3. Shapoklyak
   Ladina tähestiku suured tähed		A. Tšeburaška B. Krokodill Gena C. Shapoklyak
   Ladina tähestiku väikesed tähed		a. Tšeburaška b. Krokodill Gena c. Shapoklyak
   Rooma numbrid suurtähtedega		I. Tšeburaška II. Krokodill Gena III. Shapoklyak
   Rooma numbrid väiketähtedega		i. Tšeburaška ii. Krokodill Gena iii. Shapoklyak

   Loendi alustamiseks kindla väärtusega kasutage märgendi algusatribuuti

   . Pole vahet, mis tüüpi loendis tüüp on seadistatud, atribuut start töötab nii rooma kui ka araabia numbritega samamoodi. Näide 11.4 näitab, kuidas luua loendit, kasutades kaheksaga algavaid rooma numbreid.

   Näide 11.4. Loendi nummerdamine

   8. Kuningas Magnum XLIV
   9. Kuningas Siegfried XVI
   10. Kuningas Sigismund XXI
   11. Kuningas Husbrandt I
   
   
   

   Selle näite tulemus on näidatud joonisel fig. 11.4.

   

   Riis. 11.4. Nummerdatud loend rooma numbritega

   - 2 hääle põhjal 4,5 viiest

   Väga sageli tuleb veebisaidil teatud teave esitada loendite kujul.

   Loendid võimaldavad organiseerida ja süstematiseerida erinevat informatsiooni ning esitada seda külastajale mugaval kujul.

   HTML-i loendeid on kolme erinevat tüüpi: täpploendid, nummerdatud loendid ja määratluste loendid. Vaatame, kuidas neid järjekorras luua.

   Täpploend.

   Seda tüüpi loendit kasutatakse kõige sagedamini. HTML-i täppidega loend luuakse siltide abil

   • . Sel juhul lisatakse iga loendiüksuse juurde marker, vaikimisi on see ringikujuline marker. Siltide abil luuakse konteiner, mille sees asuvad loendi elemendid: .

     Täpploendi kood näeb välja selline:

     • See valik on
     • See valik
     • Variant selline

     Võite proovida seda koodi kasutades luua HTML-lehte ka teie jaoks, tulemuseks on järgmine loend:

     

     Nagu näete, paigutatakse iga loendi element uuele reale, kusjuures vasakule, üla- ja allapoole luuakse teatud taanded. Iga loendi üksus algab markeriga; marker võib olla täidetud ring (kasutatakse vaikimisi), ring või ruut. Sildi juures

     Seal on atribuut type, mida kasutatakse markeri stiili määramiseks. Sellel atribuudil on järgmised tähendused:
     • ketas - ring;
     • ring - ring;
     • ruut - ruut.

     Plaadi väärtus on vaikeväärtus.

     Näide ringimarkeritega täpploendi loomisest:

     • See valik on
     • See valik
     • Variant selline

     Selle tulemusena on loend järgmine:

     

     Täpploendi loomine ruudu markeritega:

     • See valik on
     • See valik
     • Variant selline

     Nimekiri näeb välja selline:

     

     Tüübiatribuuti saab rakendada enamale kui lihtsalt märgendile

     , aga ka sildi juurde
     • . Nii saate luua loendi mitmesuguste täppidega.
       • See valik on
       • See valik
       • Variant selline

       Tulemus saab olema järgmine:

       

       Nummerdatud nimekirjad.

       HTML-i nummerdatud loendid on loendid, milles igal üksusel on seerianumber; nummerdatud loendid luuakse märgendi abil

       ja pesastatud selle siltidesse

       1. 1. Esimene rida
          2. Teine rida
          3. Kolmas rida

          Nimekiri näeb välja selline:

          

          Vaikimisi on nummerdamine araabia numbritega. Aga silt

          Seal on atribuut type, mille väärtusi kasutades saate nummerdada ladina tähtedega suurtähtedega (type="A") või väiketähtedega (type="a"), ülemisse rooma numbritega (type="I" ) ja alumine (type="i" ) register.

          Allpool on toodud koodi lühendatud versioonid ja numeratsiooni tüüp, mis ühel või teisel juhul olla võib.

          Loendivaade:

          Loendivaade:

          

          Nummerdamine ladina tähestiku väiketähtedega:

          Loendivaade:

          

          Loendivaade:

          

          Loendivaade:

          

          HTML-i definitsioonide loend.

          Loendi eritüüp on definitsiooniloendid. Need erinevad selle poolest, et iga loendi element koosneb kahest elemendist, terminist ja tekstist, mis paljastab selle tähenduse. Need loendid luuakse siltide abil

          . Tag

          loob loendi jaoks konteineri, sildi

          määrab termini ja sildi

          termini kirjeldus või määratlus.

          See nimekiri on kirjutatud järgmiselt:

          Tähtaeg 1

          Definitsioon 1

          2. tähtaeg

          Mõiste 2 määratlus

          3. tähtaeg

          3. definitsioon

          Tulemuseks on järgmine loend:

          

          Nagu näete, loob see terminile ja määratluse tekstile sobiva taande.

          Pesastatud või mitmetasandilised loendid HTML-is.

          Mõnikord on vaja teatud tüüpi loendi ühe elemendi sisse pesastada mõni muu loend. HTML võimaldab teil piiramatult manustada mõnda loendit teiste loendite elementidesse.

          Näiteks siin on kood, mis pesastab nummerdatud loendid täpploendi üksuste sees.

          • See valik on
            1. Esimene rida
            2. Teine rida
            3. Kolmas rida
          • See valik
            1. Esimene rida
            2. Teine rida
            3. Kolmas rida
          • Variant selline
            1. Esimene rida
            2. Teine rida
            3. Kolmas rida

          Täpploendi määratlemiseks lisatakse iga loendiüksuse ette väike täpp, tavaliselt täidetud ringi kujul. Loend ise moodustatakse konteineri abil

          ja iga loendi üksus algab sildiga
          • nagu allpool näidatud.
            • Esimene punkt
            • Teine punkt
            • Kolmas punkt

            Loend peab sisaldama sulgevat silti

          , muidu tekib tõrge. Sulgev silt Kuigi see pole nõutav, soovitame selle alati lisada selgelt eraldatud loendiüksustesse.

          Näide 11.1 näitab HTML-koodi veebilehele täpploendi lisamiseks.

          Näide 11.1. Looge täpploend

          ---

          • Tšeburaška
          • Krokodill Gena
          • Shapoklyak
          • Rott Larisa

          ---

          
          
          

          Selle näite tulemus on näidatud joonisel fig. 11.1.

          Riis. 11.1. Täpploendi vaade

          Pöörake tähelepanu loendi üla-, ala- ja vasakpoolsele polsterdusele. Sellised taanded lisatakse automaatselt.

          Markeritel võib olla üks kolmest vormist: ring (vaikimisi), ring ja ruut. Markeri stiili valimiseks kasutage sildi tüübi atribuuti

          . Vastuvõetavad väärtused on toodud tabelis. 11.1
          Tabel 11.1. Loetlege täppide stiilid

          Loendi tüüp	HTML kood	Näide
          Loetelu ringimarkeritega		Esiteks Teiseks Kolmandaks
          Nimekiri ringide täppidega		Esiteks Teiseks Kolmandaks
          Nimekiri ruudukujuliste täppidega		Esiteks Teiseks Kolmandaks

          Markerite välimus võib erinevates brauserites, samuti fondi ja teksti suuruse muutmisel veidi erineda.

          Loendi koostamine ruudukujuliste täppidega on näidatud näites 11.2.

          Näide 11.2. Markerite tüüp

          Uskumuste muutmine

          • religioosse usu muutumine (valikuline: budism, konfutsianism, hinduism). Eripakkumine – judaism ja islam koos;
          • muutus uskumuses lemmikpeo eksimatusse;
          • usk, et tulnukad on olemas;
          • poliitilise süsteemi kui parima omataolise eelistamine (valida: feodalism, sotsialism, kommunism, kapitalism).
          
          
          

          Selle näite tulemus on näidatud joonisel fig. 11.2.

          Tere, kallid ajaveebisaidi lugejad. Täna tahan selle jaotise raames rääkida erinevatest HTML-loenditest, mida saab luua spetsiaalselt selleks loodud UL, OL, LI ja DL siltide põhjal. UL ja LI paarid loovad täpploendeid, OL ja LI paarid nummerdatud loendeid ning DL, DT ja DD elemendid nn definitsiooniloendeid. Samuti käsitleme põgusalt pesastatud struktuuride loomise põhimõtteid.

          Tuletan teile meelde, et meil on juba õnnestunud rääkida nii kaasaegse kui ka tabelipaigutuse põhitõdedest (). Lisaks puudutasime põhitõdesid ja õppisime läbi.

          UL ja LI siltidel põhinevad täppideloendid

          UL-märgendit kasutatakse täpploendite loomiseks ja OL-märgendit nummerdatud loendite loomiseks. Need sildid on paarikaupa ja plokksildid, nagu LI element.

          Ava- ja sulgemismärgendite vahel on üksikud loendielemendid, mis omakorda on suletud ava- ja sulgemiselemendi sisse. Brauser lisab üherealised taanded HTML-loendite üla- ja alaossa, sarnaselt lõigusildiga loodud taandele.

          Vaatame näiteks täppidega valikut, mis võib välja näha järgmine:

          • Esimene rida
          • Teiseks
          • Viimane element

          Ava- ja sulgemismärgendite sees võivad olla ainult LI-elemendid ning nende elementide (klauslite) sisse saate sisestada mis tahes sisu (teksti, pilte, pealkirju, lõike, linke ja isegi muid loendeid).

          Need. UL on mõeldud ainult täppidega (mitte järjestatud) loendi korraldamiseks ja kõik, mida näete selle sees oleval veebilehel, on realiseeritud LI elementide sisu abil.

          UL-i puhul saate markeri tüüpi muuta, määrates atribuudile „Tüüp” erinevad väärtused. Kui UL-elemendi jaoks pole määratud "Tüüp" (markerite välimust reguleeriv), kuvatakse markeri vaikimisi välimus (ketas - teksti värviga täidetud ring):

          1. — täidetud ring (vaikimisi);
             • - täitmata ring;
               • - ruut

          Ülaltoodud näidetes määrasime UL-elemendis atribuudi „Tüüp”, kasutades seda tüüpi markerit kõigi üksuste jaoks. Kuid atribuudi „Tüüp” saab määrata ka iga üksiku LI-sildi jaoks, määrates selle üksuse jaoks oma markeri tüübi.

          Näide iga üksuse jaoks erinevat tüüpi täppidega täpploendist:

          

          1. Marker täidetud ketta kujul
          2. Marker värvimata ketta kujul
          3. Ruut

          Nummerdatud loendid HTML-is OL-i sildi alusel

          Nummerdatud kirje loomiseks kasutatakse OL-i silte, mille sees LI-elemendid taas paiknevad. OL ja LI, nagu ma juba mainisin, on plokipõhised (see tähendab, et nad võtavad laiuselt kogu nende käsutuses oleva ruumi) ja OL-i ei saa paigutada midagi peale LI elementide.

          Selgub, et OL ja UL on teenusesildid, mida on vaja ainult selleks, et näidata brauserile, millist tüüpi loendit me loome (täpp- või nummerdatud). Nummerdatud üksuse puhul näeme igast elemendist vasakul mitte markerit, vaid selle taga numbrit ja punkti:

          

          1. Esimene rida
          2. Teine punkt
          3. Kolmas rida

          Nagu ma just eespool mainisin, on UL-, OL- ja LI-elementidel võimalus kasutada atribuuti TYPE. See võimaldab teil konfigureerida markeri tüüpi või määrata, milliseid numbreid või tähti loendiüksuste nummerdamiseks kasutatakse. Nummerdatud loendi korral võivad selle atribuudi parameetrid võtta järgmisi väärtusi:

          1. — nummerdatakse tavaliste araabia numbritega (atribuudi „Tüüp” puudumisel kasutatakse vaikimisi sama valikut);
             1. — numeratsioonina suurtähed;
                1. - väiketähed;
                   1. - suured rooma numbrid;
                      1. - väikesed rooma numbrid;

                         Näide nummerdatud loendist, kus iga üksuse jaoks on erinevat tüüpi nummerdamine:

                         

                         1. nummerdatud suurte rooma numbritega
                         2. Nummerdamine väikeste ladina tähtedega
                         3. Nummerdamine väikeste rooma numbritega

                         Nummerdatud loendite loomisel on võimalik nummerdamist alustada ka mitte ühest, vaid atribuudis START määratud numbrist. Näiteks:

                         1. Esimene element, mille number on määratud OL-i sildis atribuudiga start="23".
                         2. Järgmine üksus ühe võrra kõrgema numbriga
                         3. Veel üks

                         OL-i puhul saab uut nummerdamist alustada ka mis tahes väärtusest, alustades suvalisest üksusest, kirjutades selle üksuse ava LI-sse vajaliku numbriga atribuudi VALUE. Näiteks:

                         1. Esimene punkt numbriga üks
                         2. See element saab atribuudis value="32" määratud numbri
                         3. Suure numbriga kaup

                         Loendite välimuse kujundamine CSS-is (stiililehed)

                         Kuid reeglina määratakse nüüd markerite välimus mitte atribuudi TYPE kaudu, vaid mille jaoks on määratud vastavad omadused.

                         Toon siin lihtsalt näite erinevatest markeritest nummerdamata loendite jaoks, mille välimus määratakse eraldi faili kaudu koos kaskaadlaadilehtedega.

                         • Esimene punkt
                         • Teiseks
                         • Viimane

                         Kuid me räägime sellest järgmistes artiklites. Nii on seatud UL-i markerite välimus siin blogis. Markeritena kasutatakse pilte: nummerdamata loendi tavaliste üksuste jaoks - , nummerdamata loendi pesastatud üksuste jaoks - .

                         Spetsiaalsed ja pesastatud loendid HTML-koodis

                         Kolmandat ja viimast tüüpi nimetatakse "definitsiooniloenditeks" ja need määratakse kolme sildi abil - DL, DT ja DD. DL ütleb brauserile, et järgnev on määratluste loend.

                         Tavaliselt kasutatakse seda tüüpi (või kavatseti kasutada) sõnastikukirjete kirjutamiseks, mis koosnevad terminitest (kaasatud DT-märgenditesse) ja nende kirjeldustest (kaasatud DD-märgenditesse).

                         Esimene ametiaeg

                         Kirjeldus

                         Teine ametiaeg

                         Selle kirjeldus

                         

                         Kui vaatate ülaltoodud näidet, märkate, et DD-element (termini kirjeldus) on DT-elemendi (termini enda) suhtes nihutatud (40 piksli võrra).

                         Üldjuhul on DL, DT ja DD plokksildid ning DT elemendi sisse saab sisestada ainult tekstisisese siltidega sisu (selgub, et pealkirjade ja lõikude plokkelemente DT sees kasutada ei saa). Ja DD-märgendite sisse saate sisestada mis tahes elemente, nii tekstisiseseid kui ka blokeeritud.

                         Pesastatud loend HTML-is luuakse see analoogia põhjal lihtsaga, kuid põhiloendi sees on osa üksusi taas suletud ava- ja lõpusildiga UL või OL.

                         Pange tähele, et selle üksuse sulgev LI, milles pesastatud üksus luuakse, asetatakse alles pärast kogu pesastatud loendi koodi (see on väga oluline selle õigeks kuvamiseks veebilehel). Pesastatud loend võib välja näha umbes selline:

                         

                         1. Peamise nummerdatud esimene lõik
                         2. Teine punkt
                            • Pesastatud täppidega esimene element
                            • Teiseks
                            • Kolmas ja viimane punkt
                         3. Kolmas element nummerdatud

                         Edu sulle! Kohtumiseni ajaveebisaidi lehtedel

                         Võib-olla olete huvitatud

                         Kuidas lisada linki ja pilti (fotot) HTML-i – IMG ja A sildid Valige, Valik, Tekstiala, Silt, Väljakomplekt, Legend – HTML-sildid ripploendite ja tekstiväljade vormis
                         Saidi HTML-vormid – veebivormi elementide loomiseks sildid Vorm, Sisend ja Vali, Valik, Tekstiala, Silt ja muud
                         Kuidas Html- ja CSS-koodis värve seadistatakse, RGB-varjundite valik tabelites, Yandexi väljund ja muud programmid
                         Embed and object – HTML-sildid meediumisisu (video, flash, heli) kuvamiseks veebilehtedel
                         Pealkirjade H1-H6, horisontaaljoone Hr, reavahetuse Br ja lõigu P sildid ja atribuudid vastavalt Html 4.01 standardile
                         Html-vormingus tabelid – sildid Table, Tr ja Td, samuti Colspan, Cellpadding, Cellspacing ja Rowspan nende loomiseks
                         Mis on hüperteksti märgistuskeel Html ja kuidas vaadata W3C validaatori kõigi siltide loendit
                         Font (nägu, suurus ja värv), Blockquote ja eelsildid – pärandteksti vormindamine puhtas HTML-is (CSS-i ei kasutata)
                         Iframe ja Frame – mis need on ja kuidas raame HTML-is kõige paremini kasutada
                         Img – HTML-märgend pildi lisamiseks (Src), teksti joondamiseks ja ümber mähkimiseks (joondamine), samuti tausta (tausta) määramiseks