HTML მხარს უჭერს სამი სხვადასხვა ტიპის სიას, რომელთაგან თითოეულს აქვს საკუთარი ტეგები:

• – დანომრილი (ციფრების ან ასოების გამოყენებით) სია, რომლის თითოეულ ელემენტს აქვს სერიული ნომერი (ასო);
  1. – ბურთულებით (არა დანომრილი) სია, რომლის თითოეული ელემენტის გვერდით მოთავსებულია მარკერი (და არა რიცხვითი ან ანბანური სიმბოლოები, რომლებიც მიუთითებენ სერიულ ნომრებზე);

     • - განმარტებების სია შედგება სახელის/მნიშვნელობის წყვილებისგან, ტერმინებისა და განმარტებების ჩათვლით.

     დანომრილი სიები

     დანომრილ სიაში ბრაუზერი ავტომატურად აყენებს ელემენტების ნომრებს თანმიმდევრობით, დაწყებული გარკვეული მნიშვნელობით (ჩვეულებრივ 1). ეს საშუალებას გაძლევთ ჩასვათ და წაშალოთ სიის ელემენტები ნუმერაციის შეფერხების გარეშე, რადგან დარჩენილი ნომრები ავტომატურად ხელახლა გამოითვლება.
     დანომრილი სიები იქმნება ბლოკის ელემენტის გამოყენებით

     (ინგლისური მოწესრიგებული სიიდან - დანომრილი სიიდან). კონტეინერის გვერდით
     სიის თითოეული ელემენტისთვის მოთავსებულია ელემენტი
     1. (ინგლისური სიიდან - სიის ელემენტი). ნაგულისხმევი არის დანომრილი სია არაბული ნომრებით.
        მონიშნეთ
        აქვს შემდეგი სინტაქსი:
        1. ელემენტი 1
        2. ელემენტი 2
        3. ელემენტი 3

        დანომრილი სიის ელემენტები უნდა შეიცავდეს სიის მრავალ ელემენტს, როგორც ეს ნაჩვენებია შემდეგ მაგალითში:

        მაგალითი: დანომრილი სია

        • თავად სცადე"

        ნაბიჯ-ნაბიჯ ინსტრუქცია

        1. მიიღეთ გასაღები
        2. ჩადეთ გასაღები საკეტში
        3. გადაატრიალეთ გასაღები ორი შემობრუნებით
        4. ამოიღე გასაღები საკეტიდან
        5. Გააღე კარი

        ნაბიჯ-ნაბიჯ ინსტრუქცია

        1. მიიღეთ გასაღები
        2. ჩადეთ გასაღები საკეტში
        3. გადაატრიალეთ გასაღები ორი შემობრუნებით
        4. ამოიღე გასაღები საკეტიდან
        5. Გააღე კარი

        ხანდახან არსებული HTML კოდების დათვალიერებისას თქვენ წააწყდებით არგუმენტს ტიპიელემენტში

        , რომელიც გამოიყენება ნუმერაციის ტიპის აღსანიშნავად (ასოები, რომაული და არაბული ციფრები და ა.შ.). Სინტაქსი:

        აქ: აკრიფეთ – სიის სიმბოლოები:

        • A - დიდი ლათინური ასოები (A, B, C...);
        • a - პატარა ლათინური ასოები (a, b, c...);
        • I - დიდი რომაული ციფრები (I, II, III...);
        • i - პატარა რომაული ციფრები (i, ii, iii...);
        • 1 - არაბული ციფრები (1, 2, 3 . . .) (ნაგულისხმევად გამოიყენება).

        თუ გსურთ სია დაიწყოს 1-ის გარდა სხვა რიცხვით, ეს უნდა მიუთითოთ ატრიბუტის გამოყენებით დაწყებატეგი

        .
        შემდეგი მაგალითი გვიჩვენებს დანომრილ სიას დიდი რომაული ციფრებით და XLIX-ის საწყისი მნიშვნელობით:

        ნუმერაციის დაწყება ასევე შესაძლებელია ატრიბუტის გამოყენებით ღირებულება, რომელიც ემატება ელემენტს

        1. შემდეგი გზით:

        7. ამ შემთხვევაში, სიის თანმიმდევრული ნუმერაცია შეწყდება და ამ მომენტიდან ნუმერაცია კვლავ დაიწყება, ამ შემთხვევაში შვიდიდან.

           ატრიბუტის გამოყენების მაგალითი ღირებულებატეგი

        8. , რომელიც საშუალებას გაძლევთ შეცვალოთ მოცემული სიის ელემენტის რაოდენობა:

           ამ მაგალითში "პირველი სიის ელემენტი" იქნება ნომერი 1, "მეორე სიის ელემენტი" იქნება ნომერი 7 და "მესამე სიის ელემენტი" იქნება ნომერი 8.

           დანომრილი სიების ფორმატირება CSS-ით

           სიის ნომრების შესაცვლელად თქვენ უნდა გამოიყენოთ ქონება სიის სტილის ტიპი CSS სტილის ფურცლები:

           დანომრილი სიის სტილები

           მაგალითი	მნიშვნელობა	აღწერა
           ა, ბ, გ	ქვედა ალფა	ქვედა რეგისტრი
           A, B, C	ზედა-ალფა	Დიდი ასოები
           მე, იი, იიი	ქვედა რომაული	რომაული ციფრები მცირე ასოებით
           I, II, III	ზემო რომაული	რომაული ციფრები დიდი ასოებით

           მაგალითი: CSS თვისების გამოყენება სიის სტილის ტიპი

           ბურთულებიანი სიები

           ბურთულებიანი სიები არსებითად დანომრილი სიების მსგავსია, მხოლოდ ისინი არ შეიცავს ნივთების თანმიმდევრულ ნუმერაციას. ბურთულებიანი სიები იქმნება ბლოკის ელემენტის გამოყენებით

           (ინგლისური Unordered List - უნომრო სიიდან). სიის თითოეული ელემენტი, როგორც დანომრილ სიებში, იწყება ტეგით
           • . ბრაუზერი აკეთებს სიის თითოეულ ელემენტს და ავტომატურად აჩვენებს პუნქტებს.
             მონიშნეთ
             აქვს შემდეგი სინტაქსი:
             • პირველი წერტილი
             • მეორე წერტილი
             • მესამე წერტილი

             შემდეგ მაგალითში ხედავთ, რომ ნაგულისხმევად, სიის თითოეული ელემენტის წინ ემატება პატარა მარკერი შევსებული წრის სახით:

             ტეგის შიგნით

             • არ არის საჭირო მხოლოდ ტექსტის განთავსება, მისაღებია ნაკადის ნებისმიერი ელემენტის განთავსება (ბმულები, აბზაცები, სურათები და ა.შ.)

               ჩადგმული სიები

               ნებისმიერი სიის ჩასმა შეიძლება სხვაში. ელემენტის შიგნით
             • დასაშვებია წყობილი სიის ან მეორე დონის სიის შექმნა. სიის ჩასადებლად, აღწერეთ ახალი სია ელემენტის შიგნით
             • უკვე არსებული სია. როდესაც ერთი ბურთულებით ჩამოსხმული სიას მეორეში ათავსებთ, ბრაუზერი ავტომატურად ცვლის პუნქტების სტილს მეორე დონის სიისთვის. ნებისმიერი სიის ჩასმა შეიძლება სხვაში. შემდეგი მაგალითი გვიჩვენებს ბურთულიანი სიის სტრუქტურას, რომელიც ჩასმულია დანომრილი სიის მეორე პუნქტში.

               მაგალითი: ჩადგმული სიები

               • თავად სცადე"
               • ორშაბათი
                 1. ფოსტის გაგზავნა
                 2. ეწვიეთ რედაქტორს
                    • თემის შერჩევა
                    • დეკორატიული დიზაინი
                    • Საბოლოო ანგარიში
                 3. შეტყობინებების საღამოს ნახვა
               • სამშაბათი
                 1. განრიგის გადახედვა
                 2. სურათების გაგზავნა
               • ოთხშაბათს...
               • ორშაბათი
                 1. ფოსტის გაგზავნა
                 2. ეწვიეთ რედაქტორს
                    • თემის შერჩევა
                    • დეკორატიული დიზაინი
                    • Საბოლოო ანგარიში
                 3. შეტყობინებების საღამოს ნახვა
               • სამშაბათი
                 1. განრიგის გადახედვა
                 2. სურათების გაგზავნა
               • ოთხშაბათს...

               ბურთულებული სიების ფორმატირება

               სიის მარკერის გარეგნობის შესაცვლელად, თქვენ უნდა გამოიყენოთ თვისება სიის სტილის ტიპი CSS სტილის ფურცლები:

               შემდეგი მაგალითი გვიჩვენებს ბურთულიანი სიების სხვადასხვა სტილს:

               მაგალითი: Bullet List Styles

               • თავად სცადე"
               • ყავა
               • ყავა
               • ყავა
               • ყავა

               დისკი:

               • ყავა
               • რძე

               წრე:

               • ყავა
               • რძე

               მოედანი:

               • ყავა
               • რძე

               არცერთი:

               • ყავა
               • რძე

               გრაფიკული მარკერები.

               HTML-ში შესაძლებელია სიის შექმნა გრაფიკული მარკერებით. ერთია, როცა სიის მარკერები არის სტანდარტული წრეები ან კვადრატები და სულ სხვაა, როცა დეველოპერი თავად ირჩევს მარკერს გვერდის დიზაინის შესაბამისად. იმისათვის, რომ სიის ელემენტები ლამაზი იყოს, ხშირად იყენებენ პატარა სურათებს.
               ჩვეულებრივი მარკერის გრაფიკულით ჩანაცვლებისთვის, შეცვალეთ ქონება სიის სტილის ტიპითითო ქონებაზე სია-სტილი-იმიჯიდა მიუთითეთ სურათის URL:

               მაგალითი: გრაფიკული მარკერები

               • თავად სცადე"

               ზოდიაქოს ნიშნები

               • კურო
               • ტყუპები

               ზოდიაქოს ნიშნები

               • ვერძი
               • კურო
               • ტყუპები

               განმარტებების სიები (აღწერილობები)

               განმარტებების სიები ძალიან სასარგებლოა, მაგალითად, ტერმინების თქვენი პირადი ლექსიკონის შესაქმნელად. თითოეული განმარტების სიის პუნქტს აქვს ორი ნაწილი: ტერმინი და მისი განმარტება.
               თქვენ ათავსებთ მთელ სიას ელემენტში

               (ინგლისური განმარტებების სიიდან - განმარტებების სია). მასში შედის ტეგები

               (ინგლისური დეფინიციის ტერმინიდან - განსაზღვრული სიტყვა, ტერმინი) და

               (ინგლისური დეფინიციის აღწერა - განმარტება ტერმინის განმარტება).
               განმარტებების სიები ხშირად გამოიყენება სამეცნიერო, ტექნიკურ და საგანმანათლებლო პუბლიკაციებში, მათი გამოყენებით ლექსიკონების, ლექსიკონების, საცნობარო წიგნების და ა.შ.

               აღწერილობების ჩამონათვალის ზოგადი სტრუქტურა ასეთია:

               Პირველი სემესტრი

               პირველი ტერმინის აღწერა

               მეორე ვადა

               მეორე ტერმინის აღწერა

               შემდეგი მაგალითი გვიჩვენებს განმარტებების სიის ერთ შესაძლო გამოყენებას:

               მაგალითი: განმარტებების სია

               • თავად სცადე"

               მსოფლიო ქსელი - ინგლისურიდან. მსოფლიო ქსელი (WWW) არის განაწილებული სისტემა, რომელიც უზრუნველყოფს წვდომას დაკავშირებულ დოკუმენტებზე, რომლებიც მდებარეობს ინტერნეტთან დაკავშირებულ სხვადასხვა კომპიუტერზე. ინტერნეტი არის ქსელების ერთობლიობა, რომლებიც იყენებენ ერთიან გაცვლის პროტოკოლს ინფორმაციის გადასაცემად. ვებსაიტი არის ინდივიდუალური ვებ გვერდების ერთობლიობა, რომლებიც ერთმანეთთან არის დაკავშირებული ბმულებით და ერთიანი დიზაინით.

               მსოფლიო ქსელი

               - ინგლისურიდან მსოფლიო ქსელი (WWW) არის განაწილებული სისტემა, რომელიც უზრუნველყოფს ინტერნეტთან დაკავშირებულ სხვადასხვა კომპიუტერზე განლაგებულ შესაბამის დოკუმენტებზე წვდომას.

               ინტერნეტი

               — ქსელების ერთობლიობა, რომლებიც იყენებენ გაცვლის ერთ პროტოკოლს ინფორმაციის გადასაცემად.

               საიტი

               - ინდივიდუალური ვებ გვერდების ნაკრები, რომლებიც ერთმანეთთან არის დაკავშირებული ბმულებით და ერთიანი დიზაინით.

               ნაგულისხმევად, ტერმინის ტექსტი დაჭერილია ბრაუზერის ფანჯრის მარცხენა კიდეზე, ხოლო ტერმინის აღწერა მდებარეობს ქვემოთ და გადატანილია მარჯვნივ.

               HTML-ში ორი ტიპის სიებია: დანომრილი და უნომრო. მათი შექმნა თითქმის იგივეა. ტეგებიც კი განსხვავდება ერთი სიმბოლოთი. თქვენ ასევე შეგიძლიათ შექმნათ, რომელიც შეიძლება შეიცავდეს როგორც დანომრილს, ასევე მარკერს.

               ეს სიები შეიძლება გარდაიქმნას თქვენთვის სასურველი გზით. ეს ყველაფერი დამოკიდებულია თქვენს ფანტაზიაზე. პირველ რიგში, ჩვენ გადავხედავთ სტანდარტულ სიებს, ისევე როგორც Word რედაქტორში, შემდეგ კი გავაუმჯობესებთ მათ და შევქმნით მათ აღიარების მიღმა.

               HTML დანომრილი სია

               რეგულარული დანომრილი შეიძლება შეიქმნას შემდეგი ტეგების გამოყენებით:

               სიის პირველი ელემენტი

               სიის მეორე პუნქტი

               სიის მესამე პუნქტი

               მარტივი სიები ასე გამოიყურება

               სტანდარტების მიხედვით, სიის თითოეული ელემენტი უნდა იყოს გახსნისა და დახურვის ტეგის შიგნით. მაგრამ თუ არ დააყენებთ დახურვის ტეგს, შედეგი ზუსტად იგივე იქნება. პროცესორი საკმაოდ ჭკვიანია. სიის კონვერტაციის დროს ის აანალიზებს გახსნის ტეგებს. თუ ახალს ნახავს

               , შემდეგ ავტომატურად აყენებს მის წინ

               .

               ამრიგად, სიების შედგენა შესაძლებელია, როგორც ნაჩვენებია ქვემოთ.

               

               მაგრამ პროფესიონალების თვალსაზრისით, ეს არასწორია.

               

               უნომრო (ან ბურთულა) სიები იქმნება იმავე გზით, მხოლოდ ol ტეგის ნაცვლად ul წერია.

               არ არსებობს რიცხვები და ასოები - მხოლოდ სხვადასხვა სიმბოლოები, რომლებსაც მარკერები ჰქვია.

               

               HTML მრავალ დონის დანომრილი სია

               ბევრი მომხმარებელი დაინტერესებულია ამ შესაძლებლობით. აქედან გამომდინარე, უნდა აღინიშნოს, რომ ნებისმიერი HTML დანომრილი სია შეიძლება გაკეთდეს მრავალ დონის. დამატებითი დონეები შეიძლება იყოს იგივე ან ეტიკეტირებული.

               

               ზემოთ მოცემულ მაგალითში ნაჩვენები სიის შესაქმნელად, თქვენ უნდა დაწეროთ შემდეგი.

               

               გთხოვთ გაითვალისწინოთ, რომ ამ კოდში, პირველი მაგალითებისგან განსხვავებით, დამატებულია ტიპის ატრიბუტი. მისი წყალობით, თქვენ შეგიძლიათ მიუთითოთ დახარისხების ტიპი როგორც დანომრილი, ასევე ბურთულიანი სიებისთვის.

               დანომრილისთვის მივუთითებთ ანბანს ან რიცხვების ტიპს, ხოლო სხვა შემთხვევებისთვის - მარკერის ტიპს.

               თუ იყენებთ სპეციალურ HTML ტეგს, დანომრილი სია შეიძლება გახდეს თქვენთვის სასურველი.

               თქვენ შეგიძლიათ მიუთითოთ ტიპის ატრიბუტი ნებისმიერი მნიშვნელობით ცხრილიდან. ან css style კლასში მიუთითეთ list-style-type სასურველი დახარისხების ტიპით.

               

               მნიშვნელობების თარგმნა საკმაოდ მარტივია. საკმარისია ინგლისური ენის საბაზისო ცოდნა. მაგრამ მაშინაც კი, თუ თქვენ არ შეგიძლიათ თარგმნოთ სიტყვები "წრე", "კვადრატი" და ა.

               დანომრილი სიებისთვის გამოიყენეთ შემდეგი პარამეტრები:

               • 1 - არაბული ციფრები;
               • A - დიდი ასოები;
               • a - პატარა ლათინური ასოები;
               • I - დიდი რომაული ციფრები;
               • i - პატარა რომაული ციფრები.

               ნაგულისხმევი ყოველთვის არის სია, ანუ, თუ არაფერს მიუთითებთ, იგივეა, რაც type="1".

               გარდა ამისა, დანომრილი სიები შეიძლება დაიწყოს ნებისმიერ სასურველ პოზიციაზე. ნაგულისხმევად, გამომავალი იწყება 1-დან. მაგრამ თუ გსურთ, შეგიძლიათ დაიწყოთ მინიმუმ ასიდან. ამისათვის თქვენ უნდა მიუთითოთ დაწყების ატრიბუტი ნებისმიერი მნიშვნელობით.

               

               გარდა ამისა, შეგიძლიათ დასკვნის გაკეთება საპირისპირო თანმიმდევრობით. ამისათვის თქვენ უნდა დაწეროთ უკუღმა.

               

               სიების დიზაინი

               HTML დანომრილი სია შეიძლება შეიქმნას ისე ლამაზად, რომ შეიძლება მაშინვე ვერ გააცნობიეროთ, რომ ეს არის ჩვეულებრივი სია და არა ფოტოშოპში შექმნილი სურათი.

               აქ მოცემულია ლამაზი სიების მაგალითები.

               

               როგორც მაგალითიდან ჩანს, თქვენ შეგიძლიათ შეცვალოთ ნუმერაციის გარეგნობა და თავად ელემენტები.

               თქვენ შეგიძლიათ შექმნათ ასეთი რეგულარული სია.

               

               css სტილში თქვენ უნდა მიუთითოთ დიზაინი ol ტეგებისთვის. გთხოვთ გაითვალისწინოთ, რომ ამ შემთხვევაში პარამეტრები გამოყენებული იქნება ყველა სიაზე მთელ საიტზე, სადაც გამოიყენება ეს სტილის ფაილი.

               

               ჯერ განვიხილოთ ვარიანტი მრგვალი სიის დიზაინით. დაუბრუნდით სიის კოდს. იქ მითითებულია კლასის მომრგვალებული სია. ეს ის კლასია, რომლითაც თქვენ უნდა შეაერთოთ ასეთი სილამაზის შესაქმნელად. კლასს რაც გინდათ, შეგიძლიათ დაასახელოთ.

               

               

               

               ახლა მოდით შევხედოთ კვადრატულ დიზაინს.

               

               სტილები საკმაოდ მსგავსია. განსხვავება ისაა, რომ პირველ შემთხვევაში ელემენტი დამრგვალებულია CSS შესაძლებლობების გამოყენებით.

               განლაგების პროფესიონალმა დიზაინერმა უნდა განჭვრიტოს და გაიგოს, რომ ყველა მომხმარებელი არ იყენებს თანამედროვე კომპიუტერებს. ყველას არ აქვს დაინსტალირებული Windows 7, 8, 10 არის მომხმარებელთა პროცენტი, რომლებიც ჯერ კიდევ არიან Windows XP-ზე და იყენებენ Internet Explorer-ის ძველ ვერსიებს.

               როგორც წესი, ელემენტების თითქმის ყველა თანამედროვე დიზაინის გაუმჯობესება არ არის მხარდაჭერილი. მომხმარებელს მოეჩვენება, რომ საიტის დიზაინზე მუშაობა საერთოდ არ შესრულებულა. რომ ყველაფერი მოშორდა. ელემენტები ერთმანეთს ეჯახება. ამის თავიდან ასაცილებლად, თქვენ უნდა გაითვალისწინოთ ყველა ვარიანტი.

               ზოგიერთი ვებმასტერი მათზე თვალს ხუჭავს, რადგან მათი წილი თანამედროვე ბაზარზე სულ უფრო და უფრო მცირე ხდება. მაგრამ პროფესიონალისთვის ყველა ვიზიტორი მნიშვნელოვანია, განსაკუთრებით თუ ეს არის კომერციული საიტი.

               გააკეთეთ რაიმე შესაფერისი ყველასთვის ან გაითვალისწინეთ ბრაუზერის ყველა ვარიაცია.

               HTML-ში ტეგების მთელი ნაკრები პასუხისმგებელია სიების ორგანიზებაზე, რომელთა ორგანიზაცია უნდა შეესაბამებოდეს მონაცემთა სტრუქტურირების გარკვეულ წესებს.

               HTML სტანდარტის მეხუთე ვერსია მხარს უჭერს 3 ტიპის სიებს: დანომრილი სიები, ბურთულები და განმარტებითი სიები. ის ასევე იძლევა შესაძლებლობას მოათავსოთ სიები ერთმანეთში, შექმნან წყობილი მრავალ დონის სიები.

               დანომრილი სია

               დანომრილი სია- ეს არის ელემენტების ერთობლიობა (სიის ელემენტები), რომლებსაც აქვთ გარკვეული თანმიმდევრობა. დანომრილი სიის თითოეულ პუნქტს აქვს უნიკალური მარკერი, რომელიც მიუთითებს იმ თანმიმდევრობით, რომლითაც ელემენტი გამოჩნდება სიის სხვა ელემენტებთან შედარებით. ნაგულისხმევად, დანომრილი სიის ელემენტის მარკერები არის ნომრები. პირველი პუნქტი დანომრილია 1-ით, მეორე - 2 და ა.შ.

               დანომრილი სიების ყველაზე გავრცელებული მაგალითებია სხვადასხვა კერძების მომზადების რეცეპტები. ვინაიდან ნებისმიერი რეცეპტი არის დანომრილი სია, მოქმედებების მკაფიო თანმიმდევრობით.

               HTML-ში დანომრილი სიების შესაქმნელად გამოიყენეთ ტეგი

               , რომლის შიგნითაც განთავსებულია სიის ელემენტები მონაცემებით. სიის თითოეული ელემენტი მითითებულია ტეგის გამოყენებით
               1. :

                  დანომრილი სია:

                  1. ყავა
                  2. ჩაი
                  3. რძე
                  სცადე »

                  შენიშვნა: ტეგი

                  შეიძლება შეიცავდეს მხოლოდ თეგებს, როგორც საბავშვო ელემენტებს
                  1. , ანუ დანომრილი სიის ყველა შინაარსი უნდა განთავსდეს ელემენტების შიგნით
                  2. . მონიშნეთ
                  3. , თავის მხრივ, არ აქვს შეზღუდვები შინაარსზე, ამიტომ შეგიძლიათ მასში განათავსოთ აბზაცები, სურათები, ლინკები, ცხრილები, სხვა სიები და ა.შ.

                     ბურთულებიანი სია

                     ბურთულებიანი სია- ეს არის უნომრო, ანუ ელემენტების უწესრიგო სიები, რომელთა თანმიმდევრობას მნიშვნელობა არ აქვს. სიის ყველა ელემენტს აქვს ერთი და იგივე ბურთულები და ნაგულისხმევად ისინი გამოჩნდებიან პატარა შავი წრეების სახით.

                     HTML-ში ბურთულიანი სიების შესაქმნელად გამოიყენეთ ტეგი

                     , რომელშიც თავად სიის ელემენტებია განთავსებული (როგორც დანომრილი სიების შემთხვევაში, ტეგი
                     • , რომელიც შეიცავს სიის ყველა ნაჩვენებ შიგთავსს):

                       ბურთულების სია:

                       • ყავა
                       • ჩაი
                       • რძე
                       სცადე »

                       მარკერების სახეები

                       დანომრილი სიის ბურთულების ტიპები შეიძლება შეიცვალოს ტიპის ატრიბუტის გამოყენებით. ეს ატრიბუტი მხარს უჭერს მარკერების ხუთ ტიპს:

                       ბურთულიან სიებს არ გააჩნიათ ტიპის ატრიბუტი, ასე რომ თქვენ არ შეგიძლიათ შეცვალოთ ბურთულებიანი სიის ტიპი HTML-ის გამოყენებით. მარკერის ტიპის შესაცვლელად, ამ შემთხვევაში, შეგიძლიათ გამოიყენოთ CSS თვისება list-style-type , რომლითაც, ნაგულისხმევი მნიშვნელობის გარდა, შეგიძლიათ აირჩიოთ მარკერის კიდევ ორი ​​ტიპი: წრე ან კვადრატი.

                       სიის მარკერების შეცვლა:

                       დანომრილი სია type="a" ატრიბუტით:

                       1. ვაშლი
                       2. ბანანი
                       3. ლიმონები

                       დანომრილი სია type="I" ატრიბუტით:

                       1. ვაშლი
                       2. ბანანი
                       3. ლიმონები

                       ბურთულებიანი სიის მარკერების ტიპები:

                       • ვაშლი
                       • ბანანი
                       • ლიმონები
                       • ვაშლი
                       • ბანანი
                       • ლიმონები
                       სცადე »

                       CSS თვისების list-style-type , გარდა მარკერების ტიპებისა პუნქტიანი სიებისთვის, აქვს მრავალი სხვადასხვა ტიპის მარკერი დანომრილი სიებისთვის. მაგრამ ერთი სტანდარტული ტიპის მარკერის შეცვლა ყოველთვის არ არის საკმარისი ლამაზი სიის შესაქმნელად. სიების შესაქმნელად უმჯობესია გამოიყენოთ CSS, რომელიც საშუალებას გაძლევთ არა მხოლოდ შეცვალოთ მარკერის გარეგნობა, არამედ შეცვალოთ მარკერები სურათებით, გააკონტროლოთ მათი ადგილმდებარეობა და აკონტროლოთ ჩაღრმავება. თქვენ ხედავთ, თუ როგორ უნდა გააკეთოთ ეს ყველაფერი.

                       ჰორიზონტალური სია

                       თუ თქვენ იყენებთ HTML სიის ველს ჰორიზონტალური მენიუს შესაქმნელად, მაშინ მოგიწევთ სიის ელემენტების დალაგება ერთმანეთის მიყოლებით იმავე ხაზზე. ამის გაკეთება შეუძლებელია HTML-ის გამოყენებით, ამიტომ მოგიწევთ CSS-ის გამოყენება.

                       ჰორიზონტალური სიის შესაქმნელად, თქვენ უნდა დააყენოთ CSS დისპლეის თვისება სიის ელემენტებისთვის inline ან inline-block მნიშვნელობით, იმისდა მიხედვით, თუ რა სხვა თვისებების გამოყენებას აპირებთ.

                       დანომრილი სია

                       1. ვაშლი
                       2. ბანანი
                       3. ლიმონები

                       ბურთულების სია:

                       • ვაშლი
                       • ბანანი
                       • ლიმონები
                       სცადე »

                       ამის შემდეგ, სიის ყველა ელემენტი გაერთიანდება ერთ ხაზზე. გთხოვთ გაითვალისწინოთ, რომ პუნქტები გაქრება სიის ელემენტებიდან და მათ შორის სივრცეც კი არ იქნება, მაგრამ სიის მარცხენა შეწევა დარჩება.

                       თქვენ ხედავთ, როგორ გადააქციოთ ჰორიზონტალური სია ჰორიზონტალურ მენიუდ.

                       ერთადერთი განსხვავება ისაა, რომ ეს ტეგი მკაცრად არის შექმნილი სიების ნუმერაციისთვის. ტეგის სახელწოდება მომდინარეობს ინგლისური აბრევიატურიდან "Ordered List" - დანომრილი სია.

                       ტეგის სინტაქსი

                       1. ელემენტი #1
                       2. ელემენტი #2
                       3. ელემენტი #3
                       4. ...

                     სადაც type="value" ატრიბუტს შეუძლია მიიღოს შემდეგი მნიშვნელობები

                     • A - ადგენს მარკერებს დიდი ლათინური ასოების სახით (A, B, C..);
                     • a - ადგენს მარკერებს მცირე ლათინური ასოების სახით (a, b, c..);
                     • I - ადგენს მარკერებს დიდი რომაული ციფრების სახით (I, II, III, IV..);
                     • i - ადგენს მარკერებს მცირე რომაული ციფრების სახით (i, ii, iii, iv..);
                     • 1 (ნაგულისხმევი) - აყენებს მარკერებს არაბული ციფრების სახით (1, 2, 3..);

                     start="value" ატრიბუტი განსაზღვრავს ანგარიშის საწყის მნიშვნელობას (დაწყების მნიშვნელობას).

                     შებრუნებული ატრიბუტი განსაზღვრავს საპირისპირო დათვლას (საჭიროების შემთხვევაში).

                     მონიშნეთ

                     მოითხოვს დახურვის ტეგის სავალდებულო გამოყენებას

                     სიის ელემენტების ფორმირებისთვის გამოიყენება დაწყვილებული ტეგი

                  4. . გახსნისა და დახურვის ტეგებს შორის არის ცალკეული სიტყვები, ფრაზები, აბზაცები, სურათები, კოდის ნაწილები და მრავალი სხვა, რომლებიც წარმოადგენს ბურთულების სიის შინაარსს.

                     შენიშვნა

                     სიის შიგნით შეგიძლიათ შეცვალოთ ანგარიში საკუთარზე. ამ მიზნით ტეგზე არის სპეციალური ატრიბუტი value="".

                  5. , რომელსაც ენიჭება გარკვეული რიცხვითი მნიშვნელობა. Მაგალითად

                     1. ელემენტი #1
                     10. ელემენტი #2
                     11. ელემენტი #3

               მაგალითები დანომრილი სიებით html-ში (

               )

               მაგალითი 1. HTML დანომრილი სია ლათინური ასოებით

               მაგალითი დიდი ასოებით

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               მაგალითი პატარა ასოებით

               1. ელემენტი #10
               2. ელემენტი #11
               3. ელემენტი #12

               ასე გამოიყურება გვერდზე:

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               მაგალითი 2. HTML დანომრილი სია რომაული ასოებით

               მაგალითი დიდი ასოებით

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               ასე გამოიყურება გვერდზე:

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               მაგალითი პატარა ასოებით

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               ასე გამოიყურება გვერდზე:

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               მაგალითი 3. დანომრილი სია html სხვადასხვა საწყისი პოზიცია

               მაგალითი, რომელიც აჩვენებს start ატრიბუტის შესაძლებლობებს, რაც საშუალებას გაძლევთ დააყენოთ მრიცხველის საწყისი მნიშვნელობა.

               50. ელემენტი #1
               51. ელემენტი #2
               52. ელემენტი #3

               ასე გამოიყურება გვერდზე:

               1. ელემენტი #1
               2. ელემენტი #2
               3. ელემენტი #3

               მაგალითი 4. html დანომრილ სიებში რაოდენობის შეცვლა

               ქვემოთ მოცემულია მაგალითი მრიცხველის მნიშვნელობების შეცვლის შესაძლებლობით მნიშვნელობის ატრიბუტის გამოყენებით ტეგებში ახალი ელემენტების ჩვენებისას

               • .

                 10. ელემენტი #1
                 11. ელემენტი #2
                 100. ელემენტი #3
                 101. ელემენტი #4

                 ასე გამოიყურება გვერდზე:

                 1. ელემენტი #1
                 2. ელემენტი #2
                 3. ელემენტი #3
                 4. ელემენტი #4

                 მაგალითი 5. უკუ დანომრილი სია html-ში

                 ქვემოთ მოცემულია საპირისპირო დანომრილი სიის მაგალითი (დათვლა საპირისპირო თანმიმდევრობით).

                 10. ელემენტი #1
                 11. ელემენტი #2
                 12. ელემენტი #3
                 13. ელემენტი #4

                 ასე გამოიყურება გვერდზე:

                 1. ელემენტი #1
                 2. ელემენტი #2
                 3. ელემენტი #3
                 4. ელემენტი #4

                 განმარტებების სიები აკავშირებს კონკრეტულ ობიექტებს და მათ განმარტებებს სიაში. მაგალითად, თუ გსურთ დაამატოთ განმარტებები ნივთებს სავაჭრო სიაში, შეგიძლიათ გააკეთოთ ეს ასე:

                 რძე თეთრი თხევადი რძის პროდუქტი. პური ფქვილისგან დამზადებული საკვები პროდუქტი. კარაქი არის ყვითელი მყარი რძის პროდუქტი. ყავის მარცვლები ზოგიერთი ყავის ხის ნაყოფის თესლი.

                 ყველა განმარტება და ტერმინი არის განსაზღვრების ჯგუფი (ან სახელი-მნიშვნელობის ჯგუფი). თქვენ შეგიძლიათ გქონდეთ იმდენი განსაზღვრების ჯგუფი, რამდენიც გსურთ, მაგრამ თითოეულ ჯგუფს უნდა ჰქონდეს მინიმუმ ერთი ტერმინი და მინიმუმ ერთი განმარტება. თქვენ არ შეგიძლიათ გქონდეთ ტერმინი განმარტების გარეშე ან განმარტება ტერმინის გარეშე.

                 შესაძლებელია ერთზე მეტი ტერმინის ასოცირება ერთ განმარტებასთან, ან პირიქით. მაგალითად, ტერმინს "ყავა" შეიძლება ჰქონდეს რამდენიმე მნიშვნელობა და თქვენ შეგიძლიათ აჩვენოთ ისინი ერთმანეთის მიყოლებით:

                 ყავა მოხალული, დაფქული ყავის მარცვლებისგან დამზადებული სასმელი, ფინჯანი ყავა, რომლის დროსაც სვამენ საშუალო და მუქ ყავისფერ ყავას

                 ალტერნატიულად, შესაძლებელია იყოს ერთზე მეტი ტერმინი იგივე განმარტებით. ეს გამოიყენება ტერმინის ვარიაციების საჩვენებლად, რომლებსაც ყველა ერთი და იგივე მნიშვნელობა აქვს:

                 სოდა პოპ სოდა კოლა ტკბილი, გაზიანი სასმელი

                 განმარტებების სიები განსხვავდება სხვა ტიპის სიებისგან, რადგან ისინი იყენებენ განსაზღვრულ ტერმინებს და განმარტებების აღწერილობებს სიის ობიექტების ნაცვლად.

                 ამიტომ განსაზღვრების სიებში გამოიყენება ერთი წყვილი ელემენტი

                 , რომელიც მოიცავს ტეგების ჯგუფებს
                 და
                 . მინიმუმ ერთი თეგის ჯგუფი უნდა იყოს დაწყვილებული
                 ერთ ჯგუფთან ერთად
                 ; ტეგები
                 ყოველთვის პირველ რიგში უნდა იყოს.

                 ერთი ტერმინის განმარტებების მარტივი სია ერთი განმარტებით ასე გამოიყურება:

                 ვადა

                 ტერმინის განმარტება

                 ვადა

                 ტერმინის განმარტება

                 ვადა

                 ტერმინის განმარტება

                 რომელიც გამოდის შემდეგნაირად:

                 ტერმინი ტერმინის განმარტება ტერმინი ტერმინის განმარტება ტერმინის განმარტება

                 ამ მაგალითში ჩვენ ერთზე მეტ ტერმინს ვუკავშირებთ განმარტებას და პირიქით:

                 ვადა

                 ტერმინის განმარტება

                 ვადა

                 ვადა

                 განმარტება, რომელიც ეხება ორივე წინა ტერმინს

                 ტერმინი, რომელსაც შეიძლება ჰქონდეს ორივე შემდეგი განმარტება

                 ტერმინის ერთი განმარტება

                 ტერმინის კიდევ ერთი განმარტება

                 რომელიც წარმოდგენილი იქნება შემდეგნაირად:

                 ტერმინი ტერმინის განმარტება ტერმინი ტერმინი განმარტება, რომელიც ეხება ორივე წინა ტერმინს ტერმინი, რომელსაც შეიძლება ჰქონდეს ორივე შემდეგი განმარტება ტერმინის ერთი განმარტება ტერმინის სხვა განმარტება

                 არ არის გავრცელებული პრაქტიკა რამდენიმე ტერმინის ერთ განმარტებასთან ასოცირება, მაგრამ კარგია იცოდეთ, რომ ეს შესაძლებელია, თუ საჭიროება გაჩნდება.

                 სიის ტიპის შერჩევა

                 როდესაც გადაწყვეტთ სიის კონკრეტული ტიპის გამოყენებას, ჩვეულებრივ შეგიძლიათ გადაწყვიტოთ ორი მარტივი კითხვის დასმით:

                 1. არის თუ არა ტერმინები განსაზღვრული (ან სხვა სახელების/მნიშვნელობების წყვილები ერთმანეთთან დაკავშირებული)?
                    • თუ კი, გამოიყენეთ განმარტებების სია.
                    • თუ არა, ნუ გამოიყენებთ განმარტებების ჩამონათვალს - გადადით შემდეგ კითხვაზე.
                 2. აქვს თუ არა მნიშვნელობა სიის ელემენტების თანმიმდევრობას?
                    • თუ კი, გამოიყენეთ შეკვეთილი სია.
                    • თუ არა, გამოიყენეთ მოუწესრიგებელისია.

                 განსხვავება HTML სიებსა და ტექსტს შორის

                 შეიძლება ვინმეს გაინტერესებდეს, რა განსხვავებაა HTML სიასა და ზოგიერთ ტექსტს შორის, რომელსაც აქვს ბურთულები ან ხელნაწერი რიცხვები. HTML სიის გამოყენებას რამდენიმე უპირატესობა აქვს:

                 • თუ თქვენ გჭირდებათ სიის ელემენტების თანმიმდევრობის შეცვლა შეკვეთილ სიაში, თქვენ უბრალოდ გადაიტანეთ ისინი HTML კოდით. თუ ნომრები ხელით არის დაწერილი, მოგიწევთ ყველაფრის გავლა და თითოეული ელემენტის ნომრის შეცვლა თანმიმდევრობის გამოსასწორებლად - რაც, რბილად რომ ვთქვათ, საკმაოდ მოსაწყენია!
                 • HTML სიის გამოყენება საშუალებას გაძლევთ სწორად შექმნათ სიის სტილი. თუ უბრალოდ იყენებთ დიდ ტექსტს, ბევრად უფრო რთული იქნება ცალკეული ელემენტების სტილისტიკა მეტ-ნაკლებად სასარგებლო გზით.
                 • HTML სიის გამოყენება შიგთავსს აძლევს სწორ სემანტიკურ სტრუქტურას, ვიდრე უბრალოდ „სიის მსგავსი“ ვიზუალური ეფექტი. ამას მნიშვნელოვანი უპირატესობები აქვს, რადგან ის საშუალებას აძლევს ეკრანის მკითხველებს აცნობონ მხედველობის დაქვეითებულ მომხმარებლებს, რომ ისინი კითხულობენ სიას და არა უბრალოდ ტექსტისა და რიცხვების დამაბნეველ ნარევს.

                 მეორეს მხრივ: ტექსტი და სიები არ არის იგივე. სიის ნაცვლად ტექსტის გამოყენება მეტ შრომას მოითხოვს და შეიძლება პრობლემები შეუქმნას დოკუმენტის მკითხველებს. ამიტომ, თუ დოკუმენტი მოითხოვს სიას, მაშინ უნდა იქნას გამოყენებული სათანადო HTML სია.

                 ჩადგმული სიები

                 სიის ელემენტი შეიძლება შეიცავდეს სხვა მთლიან სიას - ამას ეწოდება "ბუდებული" სია. ეს შეიძლება სასარგებლო იყოს ისეთი საგნებისთვის, როგორიცაა სარჩევი, როგორიცაა ლექციის დასაწყისში:

                 1. თავი პირველი 1. ნაწილი პირველი 2. ნაწილი მეორე 3. ნაწილი მესამე 2. თავი მეორე 3. თავი მესამე

                 მთავარი პუნქტი, რომელიც უნდა გვახსოვდეს, არის ის, რომ წყობილი სია უნდა ეხებოდეს ერთ კონკრეტულ სიის ელემენტს. კოდში ამის ასახვისთვის, ჩადგმული სია მოთავსებულია ამ სიის ელემენტში. ზემოთ მოყვანილი სიის კოდი ასე გამოიყურება:

                 1. Პირველი თავი
                    1. სექცია პირველი
                    2. სექცია მეორე
                    3. სექცია მესამე
                 2. თავი მეორე
                 3. თავი მესამე

                 გაითვალისწინეთ, რომ წყობილი სია იწყება ელემენტის შემდეგ

               • და ტექსტი, რომელიც შეიცავს ელემენტის სიას („თავი პირველი“); და მთავრდება ელემენტის წინ
               , რომელიც შეიცავს ელემენტის სიას. ჩადგმული სიები ხშირად ქმნიან ვებსაიტის სანავიგაციო მენიუს საფუძველს, რადგან ისინი მოსახერხებელი გზაა ვებსაიტის სტრუქტურის განსაზღვრისათვის.

               თეორიულად, თქვენ შეგიძლიათ განათავსოთ ნებისმიერი რაოდენობის სიები, თუმცა პრაქტიკაში ეს შეიძლება დამაბნეველი გახდეს, თუ სიები ძალიან ღრმად არის ჩასმული. ძალიან დიდი სიებისთვის, შესაძლოა უკეთესი იყოს შინაარსის დაყოფა მრავალ სიაში სათაურებით, ან თუნდაც ცალკეულ გვერდებად.

               ნაბიჯ ნაბიჯ მაგალითი

               მოდით შევხედოთ ნაბიჯ-ნაბიჯ მაგალითს, რათა ყველაფერი ერთად გავაერთიანოთ. განვიხილოთ შემდეგი სცენარი:

               ჩვენ ვქმნით მცირე ვებ გვერდს კულინარიული სკოლისთვის. მთავარ გვერდზე ჩვენ ვაჩვენებთ საიდუმლო რეცეპტების ჩამონათვალს, რომლებიც დაკავშირებულია რეცეპტების გვერდებთან. რეცეპტის თითოეულ გვერდზე ჩამოთვლილია საჭირო ინგრედიენტები, შენიშვნები ამ ინგრედიენტებზე და მომზადების მეთოდი. სამი კატეგორიაა "ტორტები" (მათ შორის რეცეპტები "უბრალო ღრუბელი", "შოკოლადის ტორტი" და "ვაშლის ჩაის ტორტი"); "ბისკვიტები" (მათ შორის რეცეპტები "ANZAC ორცხობილა", "Jam Drops" და "Dalting Moments"); და "Quickbreads" (მათ შორის რეცეპტები "Damper" და "Scones"). კლიენტს არ აინტერესებს რა თანმიმდევრობით არის ნაჩვენები კატეგორიები და რეცეპტები, მას უბრალოდ სურს, რომ ხალხმა გაიგოს, რომელი ნივთებია კატეგორიები და რომელი რეცეპტები.

               მოდით გავიაროთ ამ ვებსაიტის შექმნის პროცესი. ამ განყოფილებაში ჩვენ შევქმნით მარკირებას და ასევე დავამატებთ სტილს სიებს. სტილის შესახებ დეტალურად არ იქნება გაშუქებული ლექცია სიის სტილის შესახებ მოგვიანებით სერიაში.

               მთავარი გვერდის განლაგება

               შექმენით კარგად ჩამოყალიბებული HTML გვერდი, მათ შორის doctype, ელემენტები html, თავი და სხეული და შეინახეთ როგორც stepbystep-main.html . დაამატეთ ძირითადი სათაური (h1) "HTML კულინარიული სკოლა" და ქვესათაური (h2) "რეცეპტები":

               HTML კულინარიული სკოლა

               რეცეპტები

               რეცეპტები

               • ნამცხვრები
               • ორცხობილა
               • სწრაფი პურები

               li ელემენტების შეწევა აადვილებს კოდს წაკითხვას, მაგრამ არ არის საჭირო.

               ახლა თქვენ უნდა დაამატოთ რეცეპტები, როგორც ქვეპუნქტები, მაგალითად, "უბრალო ღრუბელი", "შოკოლადის ტორტი" და "ვაშლის ჩაის ტორტი" არის "ნამცხვრების" კატეგორიის ნაწილი. ამისათვის თქვენ უნდა შექმნათ წყობილი სია სიის თითოეულ პოზიციაზე. ვინაიდან ბრძანება არ არის მნიშვნელოვანი, ის კვლავ ჯდება მოუწესრიგებელისია. სასწავლო მასალის გასამარტივებლად, ყველა რეცეპტი შეიძლება მიბმული იყოს რეცეპტის ერთ გვერდზე:

               რეცეპტები

               • ნამცხვრები
                 • უბრალო ღრუბელი
                 • Შოკოლადის ნამცხვარი
                 • ვაშლის ჩაის ტორტი
               • ორცხობილა
                 • ორცხობილა ANZAC
                 • ჯემის წვეთები
                 • დნობის მომენტები
               • პურები/სწრაფი პურები
                 • დემპერი
                 • სკონები