შესავალი HTML-ში
რა არის HTML?
HTML (HyperText Markup Language - ჰიპერტექსტური მარკაპის ენა) არის მარკაპის ენა, რომელიც მუითებებს ბრაუზერს, თუ როგორი სტრუქტურა მისცეს ვებგვერდს. HTML-ში გამოიყენება ელემენტები, რომ ტექსტური კონტენტი შევკრათ ან მოვნიშნოთ (mark up), რათა ამ კონტენტს გარკვეული გარეგნობა, ქცევა ან დანიშნულება შეეძინოს.
HTML შედგება ელემენტებისგან, რომლებიც გამოიყენება კონტენტის სხვადასხვა ნაწილის შესაფუთად, რათა მას მიენიჭოს განსხვავებული გარეგნობა ან დანიშნულება. ნიმუშად ავიღოთ მარტივი ტექსტი, რომელსაც მარკაპს გავუკეთებთ:
მე მინდა ვისწავლო მეტი!თუ ჩვენ გვსურს, რომ ეს ტექსტი გამოყურებოდეს როგორც პარაგრაფი (აბზაცი), ჩვენ შეგვიძლია მივუთითოთ, რომ ის არის პარაგრაფი. როგორ? ჩვენ ტექსტი უნდა ჩავსვათ თეგებში (tag), რაც შედეგად ელემენტს მოგვცემს:
<p>მე მინდა ვისწავლო მეტი!</p>HTML ელემენტის ანატომია
ყურადღებით დავაკვირდეთ პარაგრაფის ელემენტს. უბრალო ტექსტისგან ის იმით განსხვავდება,
რომ რაღაც უწერია დასაწყისსა (<p>) და დასასრულში (</p>). ამათ ეწოდებათ თეგები,
რადგან მათი დანიშნულება ელემენტების მონიშვნა.
ელემენტი შემდეგი ნაწილებისგან შედგება:
- გამხსნელი თეგი: ეს არის ელემენტის დასახელება (ამ შემთხვევაში
p), რომელიც შეფუთულია მეტობა-ნაკლებობის ნიშნებს<>შორის. ეს თეგი განსაზღვრავს საიდან იწყება ელემენტი. - დამხურველი თეგი: ეს ჰგავს გამხსნელ თეგს, თუმცა შეიცავს დახრილ ხაზს ელემენტის სახელამდე (
</p>). იგი განსაზღვრავს, სად მთავრდება ელემენტი. ხშირად დამწყებ დეველოპერებს ამ ელემენტის დაწერა ავიწყდებათ ხოლმე! - კონტენტი: კონტენტი არის ის შიგთავსი, რომელიც გამხსნელ და დამხურველ თეგებს შორის არის მოქცეული. ჩვენ მაგალითში ეს არის ტექსტი:
მე მინდა ვისწავლო მეტი!.
ამ ყველაფრის გაერთიანებით ჩვენ ვიღებთ HTML-ის ელემენტს.
არსებობს ელემენტები, რომლებსაც კონტენტი არ გააჩნიათ, ამიტომ მათ არც დამხურველი თეგი არ სჭირდებათ:
<hr />ეს ელემენტი დოკუმენტში ჰორიზონტალურ ხაზს აჩენს. ასეთ ელემენტებს ეწოდებათ void ელემენტები.
ამ ელემენტებს მეტობის ნიშნამდე არ სჭირდებათ / სიმბოლო, თუმცა ჩვენ მას ყოველთვის ვუწერთ,
რათა ის კონფლიქტში არ მოვიდეს სხვა მარკაპის ენებთან, რომლებსაც ეს სიმბოლო ესაჭიროებათ.
ელემენტებს ასევე გააჩნიათ ე.წ ატრიბუტები, რომლებიც ასე გამოიყურება:
<p class="battle-cry">მე მინდა ვისწავლო მეტი!</p>ატრიბუტი იწერება გამხსნელი თეგის სახელის შემდეგ, მეტობის ნიშნამდე.
ის შედგება ატრიბუტის სახელისგან (class), რომელსაც მოყვება ტოლობა და ბრჭყალები.
ბრჭყალებს შორის იწერება ატრიბუტის მნიშვნელობა (battle-cry).
ატრიბუტის დანიშნულება ელემენტისთვის იმ დამატებითი ინფორმაციის მინიჭება,
რომელიც არ გვინდა რომ უშუალოდ დოკუმენტში გამოჩნდეს.
class-ის ატრიბუტი საშუალებას გვაძლევს, ელემენტს მივანიჭოთ არაუნიკალური იდენტიფიკატორი,
რომლითაც შეგვიძლია შემდგომ ამ ელემენტს (ან ნებისმიერ სხვა ელემენტს, რომელსაც იგივე მნიშვნელობა აქვს class ატრიბუტზე)
ჩავწვდეთ, და მას მოდიფიცირება გავუკეთოთ CSS-ით ან JavaScript-ით.
არსებობს ატრიბუტები, რომლებას მნიშვნელობა არ ეწერებათ, მაგალითად required:
<input type="text" required />მნიშვნელობის მქონე ატრიბუტებს ყოველთვის აქვთ:
- თავისუფალი სივრცე ატრიბუტის სახელსა და ელემენტის სახელს შორის;
- ატრიბუტის სახელი, რომელსაც ტოლობის ნიშანი მოყვება;
- ატრიბუტის მნიშვნელობა ტოლობის შემდეგ, გამხსნელ და დამხურველ ბრჭყალებში.
ელემენტები ელემენტებში
HTML ელემენტის კონტენტად არა მხოლოდ ტექსტი მოიაზრება, არამედ სხვა ელემენტებიც! ამას ეწოდება ნესტინგი (nesting).
მაგალითად, თუ გვინდა, რომ აქცენტი გავაკეთოთ იმაზე, რომ ჩვენ ძალიან გვინდა სწავლა (მე მინდა ვისწავლო მეტი!), მაშინ შეგვიძლია გამოვიყენოთ <strong> თეგი.
<p>მე <strong>მინდა</strong> ვისწავლო მეტი!</p>ელემენტების ნესთინგს გააჩნია თავისი წესი. ვინაიდან ჩვენ გავხსენით <p> ელემენტი და მას მოვაყოლეთ <strong>,
ჩვენ ჯერ აუცილებლად უნდა დავხუროთ შიდა ელემენტი - <strong> და მხოლოდ შემდეგ დავხუროთ <p>.
ასევე, ზოგი ელემენტის დანესტვა სემანტიკურად არასწორია, მაგალითად არ შეიძლება გვქონდეს პარაგრაფის შიგნით პარაგრაფი:
<p>აბზაცი <p>აბზაცის შიგნით აბზაცი (სადმე გინახავთ?)</p></p>HTML დოკუმენტის ანატომია
რათა ვებსაიტი გავმართოთ, უბრალოდ პარაგრაფების წერა არ გამოგვადგება, საჭიროა, რომ დოკუმენტი კონკრეტული სტრუქტურით შევადგინოთ!
ჩვენი ვებსაიტის ფოლდერში, სადაც გვაქვს index.html ჩვენ უნდა შევიტანოთ შემდეგი აუცილებელი ელემენტები:
<!doctype html>
<html lang="ka-GE">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ჩემი ვებ გვერდი</title>
</head>
<body>
<p>მე მინდა ვისწავლო მეტი!</p>
</body>
</html>აქ გვაქვს შემდეგი ელემენტები:
<!DOCTYPE html>- სავალდებულო პრეამბულა. განსაზღვრავს დოკუმენტის ტიპს და ამ დოკუმენტისთვის საჭირო წესებს.<html></html>- ძირეული ელემენტი, რომელიც კრავს მთლიან დოკუმენტს. მას ასევე გააჩნიაlangატრიბუტი, რომელიც მიუთითებს ვებსაიტის ენაზე.<head></head>- კონტეინერი ყველა იმ ინფორმაციისთვის, რომელიც დოკუმენტს ენიჭება, მაგრამ არ ჩანს უშუალოდ ვებ-გვერდზე, მაგალითადmetaელემენტები.<meta charset="utf-8">- ეს ელემენტი აყენებს დოკუმენტში ქერექთერების ფორმატს. UTF-8 არის ყველაზე გავრცელებული ფორმატი, რომელიც თითქმის ყველა ენას მოიცავს.<meta name="viewport" content="width=device-width">- ვიუპორტის ელემენტი უზრუნველყოფს გვერდის ვვიუპორტის (მოწყობილობის ეკრანის, ბრაუზერის ფანჯრის) სიგანეზე. ეს ძირითადად საჭიროა იმისთვის, რომ მობილურის ბრაუზერებმა დოკუმენტი საჭიროზე მეტი სიგანით არ ჩატვირთოს.<title></title>- განსაზღვრავს გვერდის სათაურს, რომელიც ბრაუზერის ტაბზე ჩანს. ის ასევე გამოიყენება სათაურად ბუქმარქებში.<body></body>- შეიცავს ყველა კონტენტს, რომელსაც ვებ გვერდზე გამოვსახავთ. ყველაფერს, რასაც ამ საიტზე ხედავთ,<body>-ს შიგნით არის მოთავსებული!
კომენტარები
დოკუმენტის შიგნით შეგვიძლია დავწეროთ ისეთი ტექსტი, რომელსაც არანაირი ფუნქციური დანიშნულება არ აქვს, გარდა იმისა, რომ გარკვეულ ინფორმაციას აძლევს უშუალოდ კოდის წამკითხველს (ხშირ შემთხვევაში დეველოპერს). ის ხშირად გამოიყენება კოდის ასახსნელად.
<!-- ეს არის კომენტარი! -->
<p>ეს არ არის კომენტარი...</p>კომენტარი იწყება <!-- სიმბოლოთი, რომელსაც მოყვება კომენტარის კონტენტი, და ის იხურება --> სიმბოლოთი.
ყველაფერი, რაც ამ ისრებს შორის მოექცევა, ბრაუზერის მიერ იგნორირებულია.
სურათები
<img> ელემენტი დოკუმენტში სვამს სურათს:
<img src="images/my-image.png" alt="my image" /><img> ელემენტი, იქ სადაც ამ ელემენტს დავწერთ, გამოაჩენს სურათს, თუმცა მას ამისთვის სჭირდება src ატრიბუტში სურათის მისამართის მითითება.
ეს სურათი ჩვენ ვებსაიტის ფოლდერის შიგნით, images ფოლდერში გვაქვს მოთავსებული.
ჩვენ სურათს ასევე დავურთეთ alt ატრიბუტი, სადაც შეგვიძლია მივუთითოთ მოკლე სურათის აღწერა იმ მომხმარებლებისთვის, რომლებიც სურათს ვერ ხედავენ
(შეზღუდული შესაძლებლობების გამო, ან უბრალოდ იმიტომ, რომ სურათი ვერ ჩაიტვირთა).
ტექსტის მარკაპი
განვიხილოთ რამდენიმე მნიშვნელოვანი ელემენტი, რომელიც ტექსტის მარკაპისთვის გვჭირდება.
სათაურები
ჩვენ შეგვიძლია დოკუმენტში ჩავსვათ სათაურები და ქვესათაურები, რათა ტექსტი თემატურად დავყოთ.
ისევერ როგორც წიგნებში, შეგვიძლია განვსაზღვროთ უმთავრესი სათაური, ცალკეული თავის სათაურები,
ქვეთავის სათაურები და ა.შ. HTML-ში არსებობს 6 სათაურის დონე, <h1>-დან <h6>-მდე,
თუმცა ყველაზე ხშირად 1-დან 4-მდე გამოიყენება.
<h1>უმთავრესი სათაური (ყველაზე დიდი)</h1>
<h2>ზედა დონის სათაური</h2>
<h3>ქვეთავის სათაური</h3>
<h4>ქვე-ქვეთავის სათაური</h4>მაშასადამე სათაურის ელემენტებს გააჩნიათ იერარქია. რაც უფრო მცირეა მათი რიცხვი, მით უფრო მაღალია სათაურის დონე (და ზომა).
პარაგრაფები
<p> ელემენტს უკვე ვიცნობთ! ეს ელემენტი ძალიან ხშირად დაგვჭირდება ტექსტის მარკაპისთვის.
ვცადოთ რამდენიმე პარაგრაფის გამოსახვა:
<p>ეს არის პირველი აბზაცი.</p>
<p>ეს არის მეორე აბზაცი, რომელიც გამოჩნდება პირველის ქვეშ!</p>სიები
ონლაინ ვებსაიტებზე ხშირად ვხვდებით სიებს. მათთვის HTML-ში არსებობს სპეციალური ელემენტები. სიების მარკაპისთვის საჭიროა სულ მცირე 2 ელემენტი: ერთი, რომ განვსაზღვროთ სიის ბლოკი და ტიპი, ხოლო მეორე, რომ განვსაზღვროთ ცალკეული სიის ელემენტები. გავრცელებულია სიის ორი ტიპი:
- დაუნომრავი (unordered) სია - როცა ნივთების თანმიმდევრობას მნიშვნელობა არ აქვს. ასეთი სიის ბლოკი იქმნება
<ul>ელემენტით - დანომრილი (ordered) სია - როცა ნივთების თანმიმდევრობა მნიშვნელოვანია. ასეთი სიის ბლოკი იქმნება
<ol>ელემენტით
მაგალითად, თუ გვინდა რომ ჩამოვწეროთ საშოპინგო (დაუნომრავი) სია:
<p>დღეს საყიდელი მაქვს</p>
<ul>
<li>პური</li>
<li>მაწონი</li>
<li>ხაჭო</li>
</ul>თუ თანმიმდევრობა ჩვენთვის მნიშვნელოვანია, სია შევქმნათ ol-ით:
<ol>
<li>პური</li>
<li>მაწონი</li>
<li>ხაჭო</li>
</ol>ბმულები
ბმულების გარეშე ვები არ იქნებოდა ვები!
ბმულების შესაქმნელად ვიყენებთ <a> ელემენტს, რომელიც სიტყვა "anchor"-იდან (ღუზა) გამომდინარეობს.
შევფუთოთ ჩვენთვის სასურველი ტექსტი <a> ელემენტით:
<a href="https://iswavle.com">ისწავლეთ ვებ დეველოპმენტი აქ!</a>ბმულის ელემენტს ასევე სჭირდება href ატრიბუტი, სადაც უნდა მივუთითოთ სასურველი მისამართი.
ბმულზე დაკლიკება გადაიყვანს მომხმარებელს href-ში მითითებულ გვერდზე.
შეგვიძლია მომხმარებელს ბმული გავახსნევინოთ ბრაუზერის ახალ ტაბში, თუ ელემენტს target ატრიბუტზე
მივანიჭებთ _blank-ს:
<a href="https://iswavle.com" target="_blank">ისწავლეთ ვებ დეველოპმენტი აქ!</a>შეჯამება
ამ თავში ჩვენ მიმოვიხილეთ HTML-ის თავისებურებები, სინტაქსი, დოკუმენტზე მუშაობის პრინციპები და ძირითადი ელემენტები, რომელიც ფაქტობრივად ყველა ვებსაიტზე შეიძლება ვნახოთ.