შესვლა

HTML › დამწყები › სიები

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

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#ol#li#start#reversed

რას ისწავლი

  • როგორ შექმნა დანომრილი სია <ol>-ით
  • როგორ დაიწყო ნუმერაცია სხვა რიცხვიდან და როგორ ითვალო უკან
  • როგორ გამოიყენო ასოები ან რომაული რიცხვები

როცა რიგს მნიშვნელობა აქვს

რეცეპტში ჯერ კვერცხს ამტვრევ და მერე წვავ, და არა პირიქით. ინსტრუქციაში ჯერ ფაილს ინახავ და მერე ხურავ. რეიტინგში პირველი ადგილი პირველია. ასეთი სიისთვის HTML-ს დანომრილი სია (ordered list) აქვს:

HTML
<h2>როგორ მოვამზადოთ ერბოკვერცხი</h2>
<ol>
  <li>გააცხელე ტაფა და დაადე კარაქი.</li>
  <li>ჩატეხე ორი კვერცხი.</li>
  <li>მოაყარე მარილი.</li>
  <li>შეწვი სამი წუთი.</li>
</ol>

<ol> (ordered list) დაუნომრავი სიის მსგავსად მუშაობს, მხოლოდ ბრაუზერი წერტილების ნაცვლად ნომრებს წერს: 1, 2, 3, 4. პუნქტები ისევ <li> ელემენტებია: სიის ტიპს მხოლოდ გარე ელემენტი, <ul> თუ <ol>, განსაზღვრავს.

ნომრები ავტომატურად

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

start: სხვა რიცხვიდან

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

HTML
<ol start="5">
  <li>შეინახე ფაილი.</li>
  <li>გახსენი ბრაუზერში.</li>
</ol>

ეს სია 5-ით და 6-ით დაინომრება. start-ში ყოველთვის რიცხვი იწერება, ნუმერაციის სახის მიუხედავად: ასოებიან სიაში start="3" ნიშნავს, რომ ის „c“-ით დაიწყება.

reversed: უკუთვლა

reversed ატრიბუტი ნუმერაციას აბრუნებს: ბოლო პუნქტი იქნება 1. იდეალურია რეიტინგებისთვის, სადაც „ხუთეულს“ ბოლოდან ითვლიან:

HTML
<h2>ჩემი ტოპ-3 ფილმი</h2>
<ol reversed>
  <li>ტოი სტორი</li>
  <li>ვოლ-ი</li>
  <li>ზღარბი სონიკი</li>
</ol>

ნომრები იქნება 3, 2, 1. ყურადღება მიაქციე: reversed-ს მნიშვნელობა არ სჭირდება. ასეთ ატრიბუტს ლოგიკური ატრიბუტი (boolean attribute) ჰქვია: მისი არსებობა ნიშნავს „კი“, არარსებობა „არა“.

type: ასოები და რომაული რიცხვები

type ატრიბუტი ნუმერაციის სახეს ცვლის:

  • type="1" — 1, 2, 3 (ნაგულისხმევი);
  • type="a" — a, b, c;
  • type="A" — A, B, C;
  • type="i" — i, ii, iii;
  • type="I" — I, II, III.

ეს გამოგადგება, მაგალითად, ტესტის პასუხის ვარიანტებისთვის (a, b, c) ან წიგნის თავებისთვის (I, II, III). თუ სახე მხოლოდ გარეგნობაა და აზრს არ ცვლის, ჯობს CSS-ით შეცვალო.

სცადე თავად

გაუშვი. მერე რეცეპტს შუაში დაამატე ნაბიჯი და ნახე, როგორ გადაინომრა დანარჩენი. ბოლო სიას reversed წაუშალე.

HTML · სცადე თავად

ხშირი შეცდომები

  • ნომრები ხელით. <li>1. გააცხელე ტაფა</li> ორმაგ ნომერს მისცემს: „1. 1. გააცხელე“. ნომრებს ბრაუზერი წერს.
  • <ol> იქ, სადაც რიგი არ არის. საყიდლების სიას ნომრები არ სჭირდება.
  • reversed="true". ლოგიკურ ატრიბუტს მნიშვნელობა არ სჭირდება, საკმარისია reversed.

სავარჯიშო

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

HTML · სცადე თავად
💡 მინიშნება

მეორე სიას start="5" სჭირდება.

✅ ამოხსნის ნახვა
HTML
<h2>როგორ შევქმნა HTML ფაილი</h2>
<ol>
  <li>გავხსნი კოდის რედაქტორს.</li>
  <li>დავწერ HTML ჩონჩხს.</li>
  <li>შევინახავ სახელით index.html.</li>
  <li>გავხსნი ფაილს ბრაუზერში.</li>
</ol>
<h2>გაგრძელება</h2>
<ol start="5">
  <li>დავამატებ სათაურს და აბზაცს.</li>
  <li>შევინახავ და გვერდს განვაახლებ.</li>
</ol>

მინი-ქვიზი

1როდის გამოიყენო <ol> და არა <ul>?

2რომელი ატრიბუტი იწყებს ნუმერაციას 10-დან?

3<ol reversed>-ში სამი პუნქტია. რა ნომერი ექნება პირველს?

შეჯამება

  • დანომრილი სია: <ol> და მასში <li>. ნომრებს ბრაუზერი თვითონ ითვლის.
  • გამოიყენე, როცა რიგი მნიშვნელოვანია: ნაბიჯები, რეიტინგი, ინსტრუქცია.
  • start სხვა რიცხვიდან იწყებს, reversed უკან ითვლის, type ასოებს ან რომაულ რიცხვებს რთავს.
  • ნომრებს ხელით არ წერ: ცვლილებისას ისინი თვითონ გადაინომრება.
📝 ჩემი შენიშვნა