ტეგები და ელემენტები

რას ისწავლი

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

ტეგი და ელემენტი

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

<p>ბიტი კოდს წერს.</p>

• <p> გამხსნელი ტეგია (opening tag): კუთხურ ფრჩხილებში ჩაწერილი სახელი.
• </p> დამხურავი ტეგია (closing tag): იგივე სახელი, ოღონდ დახრილი ხაზით.
• მათ შორის მდგომი ტექსტი შინაარსია (content).
• სამივე ერთად, გამხსნელი ტეგი, შინაარსი და დამხურავი ტეგი, არის ელემენტი (element).

ტეგი, მაშ, ელემენტის საზღვარია, ელემენტი კი მთლიანი „ნაწილი“, რომელსაც ბრაუზერი ეკრანზე ხატავს. როცა ამბობენ „აბზაცის ელემენტი“, გულისხმობენ მთელ <p>...</p>-ს.

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

ატრიბუტები

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

<a href="https://codequest.space">CodeQuest-ის საიტი</a>
<p title="ეს მინიშნება მაუსის მიტანისას ჩანს">მიიტანე მაუსი ამ აბზაცზე.</p>

ატრიბუტს აქვს სახელი და მნიშვნელობა, ტოლობის ნიშნით შეერთებული: href="https://codequest.space". მნიშვნელობა ორმაგ ბრჭყალებში იწერება. თუ ატრიბუტი რამდენიმეა, მათ ინტერვალი ჰყოფს:

<img src="/icons/icon-192.png" alt="რობოტი ბიტი" width="96">

აქ სამი ატრიბუტია: src (რომელი ფაილი), alt (ტექსტური აღწერა) და width (სიგანე). ატრიბუტების რიგს მნიშვნელობა არ აქვს.

ზოგი ატრიბუტი მხოლოდ კონკრეტულ ელემენტებს აქვს: href ბმულს, src სურათს. ზოგი კი ნებისმიერ ელემენტზე მუშაობს. ასეთებია title, რომელიც მაუსის მიტანისას მინიშნებას აჩენს, id, რომელიც ელემენტს უნიკალურ სახელს აძლევს, და class, რომლითაც მერე CSS-ში ელემენტებს გააფერადებ. ამ კურსში მათ ბევრჯერ შეხვდები.

ცარიელი ელემენტები

ზოგ ელემენტს შინაარსი არ აქვს და ამიტომ არც დამხურავი ტეგი სჭირდება. მათ ცარიელ ელემენტებს (void elements) უწოდებენ:

• <br> ხაზის გადატანა აბზაცის შიგნით;
• <hr> ჰორიზონტალური გამყოფი ხაზი;
• <img> სურათი: ყველაფერი, რაც სჭირდება, ატრიბუტებშია;
• <meta> ინფორმაცია <head>-ში, რომელიც უკვე ნახე.

ძველ კოდში შეიძლება შეხვდე ჩანაწერს <br /> ბოლოში დახრილი ხაზით. თანამედროვე HTML-ში ის სავალდებულო არ არის: <br> საკმარისია.

სცადე თავად

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

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

• ბრჭყალების გარეშე მნიშვნელობა. width=96 ხშირად მუშაობს, მაგრამ title=გამარჯობა ბიტი ინტერვალზე წყდება. მნიშვნელობა ყოველთვის ბრჭყალებში ჩაწერე.
• ატრიბუტი დამხურავ ტეგში. </a href="..."> არასწორია. ატრიბუტები მხოლოდ გამხსნელ ტეგში იწერება.
• დამხურავი ტეგი ცარიელ ელემენტზე. </br> ან </img> არ არსებობს.

<h1>ჩემი კოლექცია</h1>
<p>ვაგროვებ მარკებს.<br>უკვე 120 მაქვს.</p>
<hr>
<p title="საიდუმლო მინიშნება">მიიტანე მაუსი და ნახავ.</p>

მინი-ქვიზი

შეჯამება

• ტეგი ელემენტის საზღვარია: <p> გამხსნელი, </p> დამხურავი.
• ელემენტი = გამხსნელი ტეგი + შინაარსი + დამხურავი ტეგი.
• ატრიბუტები გამხსნელ ტეგში იწერება: სახელი="მნიშვნელობა", ინტერვალით გამოყოფილი.
• ცარიელ ელემენტებს (br, hr, img, meta) დამხურავი ტეგი არ აქვს.