HTML სიები

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

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

სანამ დავიწყებთ

⚡️

წინა თავში ტექსტური ელემენტების გაცნობისას დემონსტრაციისთვის გამოვიყენეთ h1 - დან h6 - მდე ყველა სათაურის ელემენტი.

თუმცა ხშირ შემთხვევაში ჩვენს დოკუმენტებში ასეთი დაწვრილმანება შეიძლება არც დაგვჭირდეს ხოლმე და ამ შემთხვევაში მხოლოდ h1 მთავარი სათაურისთვის და h2 ყველა მომდევნო ქვესათაურისთვის საკმარისია.

ამიტომ მოდით შევცვალოთ ჩვენი დოკუმენტის კოდიც და ყველა ქვესათაური h2 - ზე გადავიყვანოთ - შეცვლილი ელემენტები აღნიშნულია შესაბამისი მარკერებით:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ვებ გვერდის სათაური</title>
    </head>
    <body>
        <h1>HTML-ის შესავალი</h1>
        <p><strong>ავტორი:</strong> ოთარ ზაკალაშვილი</p>
        <p><strong>გამოქვეყნების თარიღი:</strong> 2025 წლის 15 თებერვალი</p>
        <h2>რა არის HTML?</h2>
 
        <p>HTML (HyperText Markup Language) არის <strong>ვებ გვერდების</strong> შექმნის ძირითადი ენა. ის განსაზღვრავს სტრუქტურას და შინაარსს.</p>
        
        <h2>როგორ მუშაობს HTML?</h2>
        <p>HTML იყენებს <em>ტეგებს</em> ელემენტების განსაზღვრისთვის. მაგალითად, p ტეგი განსაზღვრავს პარაგრაფს/აბზაცს.</p>
        
        <h2>HTML-ის ძირითადი ელემენტები</h2>
        <p>ამ ეტაპისთვის HTML-ის რამდენიმე ძირითად ელემენტი შეგვიძლია გამოვყოთ: h1, p, strong და em </p>
        
        <h2>HTML-ის ისტორია</h2>
        <p>HTML შეიქმნა <strong>ტიმ ბერნერს-ლიმ</strong> მიერ 1991 წელს და დღემდე განაგრძობს განვითარებას.</p>
        
        <h2>დასკვნა</h2>
        <p>HTML-ის სწავლა <em>ძალიან მნიშვნელოვანია</em> ვებ დეველოპერებისთვის, რადგან ის საფუძველს ქმნის ყველა ვებგვერდისთვის.</p>
    </body>
</html>

ახლა მზად ვართ გასაგრძელებლად.

დანომრილი სია

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

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

იმისათვის რომ სიის სტრუქტურა შევქმნათ, <ol> ელემენტი უნდა გამოვიყენოთ როგორც მშობელი და <li> ელემენტები იქნებიან შვილები.

შესაბამისად დალაგებული სიის სტრუქტურა ასე გამოიყურება:

<ol>
    <li>პირველი ელემენტი</li>
    <li>მეორე ელემენტი</li>
    <li>მესამე ელემენტი</li>
</ol>

თუ დააკვირდებით ამ სტრუქტურაში არსად არ არის მოცემული სიის ელემენტების ნომრები მაგრამ თუ ამ კოდს თქვენს HTML დოკუმენტში ჩაამატებთ და ბროუზერით გახსნით აღმოაჩენთ რომ მას გაუჩნდება ნომრები 1,2,3 და ა.შ. სწორედ ამაშია დანომრილი სიის მთავარი “ჯადოქრობა”. ბროუზერმა იცის რომ როცა <ol> ელემენტს ვიყენებთ, დანომრილ სიას ვგულისხმობთ ამიტომ მის შვილ ელემენტებს ავტომატურად გადანომრავს და ჩვენ არ გვიწევს რიგითობის შესაბამისი რიცხვების ხელით ჩაწერა.

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

არსებობს სიტუაციები სადაც სიის ელემენტებს შორის რიგითობას დიდი მნიშვნელობა არ აქვს და მათი გადანომვრა საჭირო არ არის. მაგალითად Word - ის დოკუმენტებში ასეთ სიას bullet list - ს ვეძახით - სიის ყოველ ელემენტს მუქი წრით (bullet - ით) რომ გამოვყოფთ ხოლმე.

ასეთ სიას HTML - დოკუმენტებში დაულაგებელი სია/Unordered List - ჰქვია და ელემენტიც შესაბამისი აბრევიატურით გამოისახება <ul>.

ალბათ მიხვდებოდით რომ <ul> - იც მშობელი ელემენტია <ol> - ის მსგავსად და მასაც სჭირდება შვილი <li> ელემენტები იმისთვის რომ სია შედგეს.

მოდით ვნახოთ როგორ გამოიყურება დაულაგებელი სია:

<ul>
    <li>პირველი ელემენტი</li>
    <li>მეორე ელემენტი</li>
    <li>მესამე ელემენტი</li>
</ul

როგორც ხედავთ აქ ერთადერთი ცვლილება თავად მშობელი ტეგის სახელშია, სადაც ol გვეწერა იქ ul ჩავწერეთ და მივიღეთ დაულაგებელი სიის სტრუქტურა.

შეჯამება

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>ვებ გვერდის სათაური</title>
    </head>
    <body>
        <h1>HTML-ის შესავალი</h1>
        <p><strong>ავტორი:</strong> ოთარ ზაკალაშვილი</p>
        <p><strong>გამოქვეყნების თარიღი:</strong> 2025 წლის 15 თებერვალი</p>
        <h2>რა არის HTML?</h2>
 
        <p>HTML (HyperText Markup Language) არის <strong>ვებ გვერდების</strong> შექმნის ძირითადი ენა. ის განსაზღვრავს სტრუქტურას და შინაარსს.</p>
        
        <h2>როგორ მუშაობს HTML?</h2>
        <p>HTML იყენებს <em>ტეგებს</em> ელემენტების განსაზღვრისთვის. მაგალითად, p ტეგი განსაზღვრავს პარაგრაფს/აბზაცს.</p>
        
        <h2>HTML-ის ძირითადი ელემენტები</h2>
        <p>ამ ეტაპისთვის HTML-ის რამდენიმე ძირითად ელემენტი შეგვიძლია გამოვყოთ: h1, p, strong და em </p>
 
        <h2>HTML-ის სიები</h2>
        <p>HTML-ში სიები გამოიყენება ინფორმაციის სტრუქტურირებისთვის. არსებობს ორი ძირითადი ტიპი - დანომრილი და დაუნომრავი სია. მოდით ვნახოთ ორივე.</p>
 
        <h3>დანომრილი სია</h3>
        <ol>
            <li>პირველი ელემენტი</li>
            <li>მეორე ელემენტი</li>
            <li>მესამე ელემენტი</li>
        </ol>
 
        <h3>დაუნომრავი სია</h3>
        <ul>
            <li>პირველი ელემენტი</li>
            <li>მეორე ელემენტი</li>
            <li>მესამე ელემენტი</li>
        </ul>
        
        <h2>HTML-ის ისტორია</h2>
        <p>HTML შეიქმნა <strong>ტიმ ბერნერს-ლიმ</strong> მიერ 1991 წელს და დღემდე განაგრძობს განვითარებას.</p>
        
        <h2>დასკვნა</h2>
        <p>HTML-ის სწავლა <em>ძალიან მნიშვნელოვანია</em> ვებ დეველოპერებისთვის, რადგან ის საფუძველს ქმნის ყველა ვებგვერდისთვის.</p>
    </body>
</html>

💪

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

მაგალითად: საყიდლების სია, საგნების სია, საყვარელი მანქანების რეიტინგი და ა.შ.

ტექსტური ელემენტები სურათები და ატრიბუტები