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

რას ისწავლი

• როგორ შექმნა განმარტებების სია <dl>, <dt> და <dd> ელემენტებით
• როდის ჯობს ის ჩვეულებრივ სიას
• როგორ მისცე ერთ ტერმინს რამდენიმე განმარტება

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

მესამე და ბოლო სახის სია განსხვავებულია: მისი ყოველი პუნქტი წყვილია. პირველ ნაწილში რაღაცის სახელია, მეორეში მისი აღწერა. ლექსიკონი ზუსტად ასეა აწყობილი: სიტყვა და მისი მნიშვნელობა. HTML-ში ამას განმარტებების სია (description list) ჰქვია:

<dl>
  <dt>HTML</dt>
  <dd>ვებგვერდის აგებულების აღწერის ენა.</dd>

  <dt>CSS</dt>
  <dd>ვებგვერდის გარეგნობის აღწერის ენა.</dd>

  <dt>JavaScript</dt>
  <dd>პროგრამირების ენა, რომელიც გვერდს ქცევას აძლევს.</dd>
</dl>

• <dl> (description list) მთელი სიის გარსია.
• <dt> (description term) ტერმინია: ის, რასაც ვხსნით.
• <dd> (description details) განმარტებაა.

ბრაუზერი <dd>-ს ნაგულისხმევად ოდნავ შეწევს, ასე რომ, წყვილები ერთი შეხედვით ჩანს.

როდის გამოიყენო

განმარტებების სია ყველაფერს უხდება, რაც „სახელი — მნიშვნელობა“ წყვილებისგან შედგება:

• ლექსიკონი ან ტერმინების სია სასწავლო გვერდზე;
• ხშირად დასმული კითხვები: კითხვა <dt>-ში, პასუხი <dd>-ში;
• მახასიათებლები: „ფერი — ლურჯი“, „წონა — 2 კგ“, „ასაკი — 7+“;
• მეტამონაცემები: „ავტორი — ნინო“, „თარიღი — 12 მაისი“.

თუ პუნქტები ერთი ნაწილისგან შედგება, ჩვეულებრივი <ul> ან <ol> ჯობს. თუ წყვილები ბევრია და რამდენიმე სვეტი გჭირდება, შეიძლება ცხრილი ჯობდეს: მას ამ კურსის შემდეგ მოდულში ისწავლი.

რატომ არა უბრალოდ სათაურები და აბზაცები

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

რამდენიმე dt და dd

ერთ ტერმინს შეიძლება რამდენიმე განმარტება ჰქონდეს, და პირიქით, რამდენიმე ტერმინს ერთი განმარტება:

<dl>
  <dt>ბმული</dt>
  <dd>ელემენტი, რომელიც სხვა გვერდზე გადაგიყვანს.</dd>
  <dd>იწერება a ელემენტით და href ატრიბუტით.</dd>

  <dt>ტეგი</dt>
  <dt>tag</dt>
  <dd>ელემენტის საზღვარი კუთხურ ფრჩხილებში.</dd>
</dl>

მეორე შემთხვევაში ქართული და ინგლისური სახელები ერთი და იგივე განმარტებას იზიარებს. <dd>-ის შიგნით შეიძლება იყოს არა მარტო ტექსტი, არამედ ბმული, სია ან რამდენიმე აბზაცი. <dt> კი მოკლე უნდა იყოს: ტერმინი ან კითხვა, რომელიც ერთ ხაზზე ეტევა.

სცადე თავად

გაუშვი, მერე დაამატე ლექსიკონს კიდევ ორი ტერმინი ამ კურსიდან.

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

• <li> <dl>-ში. განმარტებების სიაში <li> არ იწერება: მხოლოდ <dt> და <dd>.
• განმარტება ტერმინის გარეშე. ყოველ <dd>-ს მის წინ <dt> სჭირდება.
• <dl> შეწევისთვის. თუ უბრალოდ შეწეული ტექსტი გინდა, ეს CSS-ია.

<h2>ხშირი კითხვები</h2>
<dl>
  <dt>როდის ვბრუნდებით?</dt>
  <dd>საღამოს 6 საათზე, სკოლის ეზოში.</dd>
  <dt>რა უნდა წავიღოთ?</dt>
  <dd>წყალი, სადილი და ქურთუკი.</dd>
  <dt>რა ღირს?</dt>
  <dd>15 ლარი, ავტობუსის ჩათვლით.</dd>
</dl>

მინი-ქვიზი

შეჯამება

• განმარტებების სია: <dl>, მასში <dt> (ტერმინი) და <dd> (განმარტება).
• გამოიყენე ლექსიკონისთვის, ხშირი კითხვებისთვის, მახასიათებლებისთვის.
• ტერმინს რამდენიმე განმარტება შეიძლება ჰქონდეს, ან რამდენიმე ტერმინს ერთი.
• <dl>-ში <li> არ იწერება.