შესვლა

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

დაუნომრავი სია

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#ul#li#სია

რას ისწავლი

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

სია ყველგანაა

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

HTML
<h2>რა წავიღოთ ლაშქრობაში</h2>
<ul>
  <li>წყალი</li>
  <li>სენდვიჩები</li>
  <li>ქუდი</li>
  <li>პირველადი დახმარების ჩანთა</li>
</ul>
  • <ul> (unordered list) მთელი სიის გარსია.
  • <li> (list item, სიის პუნქტი) ერთი პუნქტია. ყოველ პუნქტს თავისი <li> აქვს.

ბრაუზერი ყოველი პუნქტის წინ შავ წერტილს, მარკერს (bullet) ხატავს და სიას ოდნავ შეწევს. მარკერის ფორმა, ფერი ან სულაც მისი მოშორება CSS-ის საქმეა. <li>-ების შეწევა კოდში, ისევე როგორც ადრე, მხოლოდ ჩვენთვისაა: ასე ერთი შეხედვით ჩანს, რომელი პუნქტი რომელ სიას ეკუთვნის.

რატომ ul და არა უბრალოდ ხაზები

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

რა შეიძლება იყოს li-ში

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

HTML
<ul>
  <li><a href="https://ka.wikipedia.org">ქართული ვიკიპედია</a>: თავისუფალი ენციკლოპედია</li>
  <li><strong>CodeQuest:</strong> პროგრამირების თამაში</li>
</ul>

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

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

დაუნომრავი სია აირჩიე, როცა:

  • პუნქტები ერთი სახისაა: ყველა ნივთია, ყველა ბმულია, ყველა თვისებაა;
  • რიგის შეცვლა აზრს არ ცვლის: „წყალი, ქუდი“ და „ქუდი, წყალი“ იგივეა.

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

სცადე თავად

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

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

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

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

სავარჯიშო

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

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

<ul>-ში ოთხი <li>. ბმული <li>-ის შიგნით: <li><a href="...">...</a></li>.

✅ ამოხსნის ნახვა
HTML
<h2>ჩემი ჰობები</h2>
<ul>
  <li>ხატვა</li>
  <li><strong>ჭადრაკი</strong>: ყოველ შაბათს ვთამაშობ</li>
  <li>პროგრამირება <a href="https://codequest.space">CodeQuest-ში</a></li>
  <li>ველოსიპედით სეირნობა</li>
</ul>

მინი-ქვიზი

1რომელი ელემენტია სიის ერთი პუნქტი?

2რომელი ჩანაწერია სწორი?

3რატომ ჯობს <ul> ხელით დაწერილ წერტილებს?

შეჯამება

  • დაუნომრავი სია: <ul> და მასში <li> პუნქტები.
  • გამოიყენე, როცა პუნქტების რიგს მნიშვნელობა არ აქვს.
  • <li>-ში შეიძლება ბმული, მონიშნული ტექსტი და სხვა ელემენტები.
  • <ul>-ის პირდაპირი შვილი მხოლოდ <li>-ა. მარკერების გარეგნობა CSS-ის საქმეა.
📝 ჩემი შენიშვნა