HTML - ელემენტები - თავი 2

ვაგრძელებთ HTML - ის შესწავლას და ამ თავში დეტალურად განვიხილავთ HTML ელემენტებს.

რა არის HTML ელემენტი?

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

საინტერესო ფაქტი

<div> ყველაზე ხშირად გამოყენებადი HTML ელემენტია და უმეტესად გამოიყენება სხვა HTML ელემენტების კონტეინერად.

გამხსნელი ტეგი

ტეგი რომელიც იწყება ნაკლებობის ნიშნით < გრძელდება HTML ელემენტის დასახელებით და სრულდება მეტობის ნიშნით > არის გამხსნელი ტეგი და მისი მაგალითებია <h1>, <p> და ა.შ.

დამხურავი ტეგი

ტეგი რომელიც იწყება მეტობის ნიშნითა და დახრილი ხაზით </, გრძელდება HTML ელემენტის დასახელებით და სრულდება ნაკლებობის ნიშნით > არის დამხურავი ტეგი და მისი მაგალითებია </h1>,</p> და ა.შ.

HTML ელემენტი

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

ასე მაგალითად <h1> სათაურის ტექსტი </h1> ან <p> პარაგრაფის ტექსტი </p> - ამ მაგალითებში ვხედავთ სრულ HTML ელემენტებს რომლებიც იწყება გამხსნელი ტეგით და სრულდება დამხურავი ტეგით ხოლო "სათაურის ტექსტი" და "პარაგრაფის ტექსტი" არის კონტეტნი რომელი მოცემული ამ გამხნელ და დამხურავ ტეგებს შორის.

HTML სათაურები (headings)

HTML - ში სათაურებისთვის გამოყოფილია 6 ელემენტი რომელთაც heading სიტყვის შემოკლებითა და სათაურის მნიშვმელობის/პრიორიტეტის შესაბამისი რიცხვის კომბინაციით ჩავწერთ. მაგალითად h1 - ში იგულისხმება "heading 1" რაც მიუთითებს იმაზე რომ h1 ელემენტი არის პირველი დონის სათაური.

სათაურების დონეებად გამოყოფა საჭიროა ჩვენი დოკუმენტის სტრუქტურის შესაქმნელად იმისთვის რომ სათაურებისა და ქვესათაურების იერაქია შევქმნათ.

შესაბამისად არსებობს h1, h2, h3, h3, h5 და h6 ელემენტები - რაც საშუალებას გვაძლევს რომ 6 დონეზე - შესაბამისად ტექსტი დავყოთ სექციებად, ქვე-სექციებად და მათ სათაურებად.

ასე გამოიყურებე HTML ელემენტების ჩანაწერი:

<h1>პირველი დონის სათაური</h1>
<h2>მეორე დონის სათაური</h2>
<h3>მესამე დონის სათაური</h3>
<h4>მეოთხე დონის სათაური</h4>
<h5>მეხუთე დონის სათაური</h5>
<h6>მეექვსე დონის სათაური</h6>

მეტი სიცხადისთვის იხილეთ ილუსტრაცია:

HTML პარაგრაფები

HTML - ში პარარაფის/აბზაცისთვის გამოიყენება <p> ტეგი. მგალითი:

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML ბმულები

ბმულების შესაქმნელად anchor ტეგს ვიყენებთ რომელიც შემოკლებით <a> ტეგითაა წარმოდგენილი და სრული ელემენტი ასე გამოიყურება:

<a href="https://www.example.com">This is a link</a>

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

ატრიბუტების შესახებ კიდევ უფრო ვრცლად ვისაუბრებთ მესამე თავში.

HTML სურათები

დოკუმენტში სურათების ჩასამატებლად ვიყენებთ <img> ტეგებს. შესაბამისი ელემენტი ასე ჩაიწერება:

<img src="image.jpg" alt="An example image">

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

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

HTML სიები (lists)

HTML საშუალებას გვაძლევს შევქმნათ სიები და მომხარებელს ინფორმაცია დალაგებული ან დაულაგებელი სიის სახით ვაჩვენოთ.

დალაგებულია ის სია რომელში ჩამატებული ელემენტებიც რაღაც წინასწარ განსაზღვრული თანმიმდევრობით ან ნუმერაციით არის წარმოდგენილი. მას HTML - ში Ordered List - ს ეძახიან და <ol> ტეგის სახითაა წარმოდგენილი.

დაულაგებელია ისეთი სია რომელშიც ელემენტები რაიმე წინასწარ განსაზღვრული წესრიგით არ არის ჩამატებული. ასეთ სიას HTML - ში Unordered List - ს უწოდებენ და შესაბამისი ტეგის სახელი ამ ორი სიტყვის აბრევიატურითაა წარმოდგენილი <ul>.

დაულაგებელ ან დალაგებულ სიაში ელემენტების ჩასამატებლად გამოიყენება List Item დასახელების მქონე ელემენტები რომლებიც შემოკლებული აბრევიატურით და შესაბამისი <li> ტეგითაა წარმოდგენილი.

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

<!-- Ordered List -->
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
 
<!-- Unordered List -->
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ამ ეტაპზე სულ ეს არის. შემდეგ თავში კიდევ უფრო დეტალურად განვიხილავთ HTML ატრიბუტებს და მათ დანიშნულებას. ახლა კი დავალებების დროა! 💪

დავალებები

1. შექმენით ახალი HTML ფაილი და გამოიყენეთ ყველა ის HTML ელემენტი რომელიც ამ თავში განვიხილეთ.
2. შექმენით ფილმების დალაგებული სია და მასში ჩაამატეთ თქვენი საყვარელი 3 ფილმი. ფილმების თანმიმდევრობა განსაზღვრეთ იმის მიხედვით თუ რომელი უფრო მოგწონთ.
3. თითოეულ ფილმს დაუმატეთ ბმული რომელზე დაკლიკებისას უნდა გაიხსნა შესაბამისი ფილმის IMDB გვერდი https://www.imdb.com - საიტზე.