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

რას ისწავლი

• როგორ ჩასვა სია სხვა სიის პუნქტში
• რატომ უნდა იყოს შიდა სია <li>-ის შიგნით და არა პირდაპირ <ul>-ში
• როგორ შეურიო დანომრილი და დაუნომრავი სიები

სია სიაში

ზოგი სია იერარქიულია: მთავარ პუნქტებს ქვეპუნქტები აქვს. წიგნის სარჩევი, საიტის მენიუ ქვემენიუებით, ამოცანების სია, სადაც ყოველ ამოცანას რამდენიმე ნაბიჯი აქვს. HTML-ში ასეთი სია ჩადგმული სიით (nested list) იწერება:

<ul>
  <li>ხილი
    <ul>
      <li>ვაშლი</li>
      <li>მსხალი</li>
    </ul>
  </li>
  <li>ბოსტნეული
    <ul>
      <li>კიტრი</li>
      <li>პომიდორი</li>
    </ul>
  </li>
</ul>

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

მთავარი წესი: შიდა სია li-ის შიგნით

ყურადღებით დააკვირდი, სად დგას შიდა <ul>: <li>-ის შიგნით, სიტყვა „ხილის“ შემდეგ და </li>-მდე. ეს ლოგიკურია: ვაშლი და მსხალი ხილის ნაწილია, ამიტომ ისინი ხილის პუნქტს ეკუთვნის.

ყველაზე ხშირი შეცდომა შიდა სიის პირდაპირ <ul>-ში ჩასმაა:

<!-- არასწორია: ul-ის შვილი მხოლოდ li შეიძლება იყოს -->
<ul>
  <li>ხილი</li>
  <ul>
    <li>ვაშლი</li>
  </ul>
</ul>

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

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

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

<ol>
  <li>მოამზადე ინგრედიენტები:
    <ul>
      <li>2 კვერცხი</li>
      <li>კარაქი</li>
    </ul>
  </li>
  <li>გააცხელე ტაფა.</li>
  <li>შეწვი კვერცხი.</li>
</ol>

როგორ წავიკითხოთ ჩადგმული სია კოდში

ჩადგმული სია კოდში ერთი შეხედვით რთულად გამოიყურება, რადგან ერთმანეთის მიყოლებით ბევრი გამხსნელი და დამხურავი ტეგია. დაგეხმარება ორი ჩვევა. პირველი: შეწევა. ყოველი ახალი დონე ორი ინტერვალით უფრო მარჯვნივ დაწერე, და ერთი შეხედვით დაინახავ, რომელი სია რომელ პუნქტშია. მეორე: წაიკითხე როგორც წინადადება. „ხილის პუნქტი იწყება, მასში ვაშლი და მსხალია, ხილის პუნქტი მთავრდება“. თუ </li> სხვაგან გიდგას, მაგალითად ქვესიის წინ, წინადადება აირევა და შეცდომა თვალში მოგხვდება.

რამდენ დონეზე

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

სცადე თავად

გაუშვი. მერე დაამატე მესამე მთავარი პუნქტი კენკრა ორი ქვეპუნქტით. დარწმუნდი, რომ შიდა <ul> <li>-ის შიგნითაა.

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

• შიდა სია <li>-ის გარეთ. ის <li>-ის შიგნით უნდა იყოს, ქვეპუნქტების „მშობელი“ პუნქტის </li>-მდე.
• </li>-ის დავიწყება. ჩადგმულ სიებში დამხურავი ტეგები ადვილად იკარგება. შეწევა ბევრს ეხმარება.
• ზედმეტად ღრმა ჩადგმა. სამ დონეზე მეტი ძნელი წასაკითხია.

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

მინი-ქვიზი

შეჯამება

• ჩადგმული სია იერარქიას აჩვენებს: მთავარი პუნქტები და ქვეპუნქტები.
• შიდა სია მშობელი <li>-ის შიგნით იწერება, მის </li>-მდე.
• <ul> და <ol> შეიძლება ერთმანეთში შეერიოს.
• ორი-სამი დონე საკმარისია.