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

მოკლედ,  რა არის HTML?

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

My cat is very grumpy

თუ გვსურს გამოვყოთ ცალკე ხაზზე, შეგვიძლია მივუთითოთ რომ პარაგრაფია, რისთვისაც უნდა მოვაქციოთ პარაგრაფის ჭდეებს შორის:

<p>My cat is very grumpy</p>

HTML-ელემენტის აგებულება

მოდი გავარჩიოთ პარაგრაფის ელემენტი დაწვრილებით.

ელემენტის ძირითადი ნაწილებია:

  1. გამხსნელი ჭდე: იგი შედგება ელემენტის დასახელებისგან (მოცემულ შემთხვევაში, ესაა ასობგერა p), რომელიც მოთავსებულია კუთხოვან ფრჩხილებს შორის. ამგვარი ჭდე აღნიშნავს, რომ ამ ადგილიდან იწყება ელემენტის მოქმედება — ამ შემთხვევაში, იწყება პარაგრაფი.
  2. დამხურავი ჭდე: ისევე გამოიყურება, როგორც გამხსნელი, უბრალოდ დამატებული აქვს წინ გადახრილი ხაზი, ელემენტის დასახელებამდე. ეს ჭდე აღნიშნავს, რომ ამ ადგილზე ელემენტის მოქმედება მთავრდება — ამ შემთხვევაში მთავრდება პარაგრაფი. ამ ხაზის გამოტოვება, ერთ-ერთი ყველაზე მეტად გავრცელებული შეცდომაა დამწყებებისთვის, რაც უცნაურ შედეგებს იწვევს ხოლმე გვერდის ჩვენებისას.
  3. შიგთავსი: ესაა ელემენტის შიგთავსი, ამ შემთხვევაში უბრალოდ ტექსტი.
  4. ელემენტი: გამხსნელი და დამხურავი ჭდეები, შიგთავსთან ერთად წარმოადგენს ელემენტს.

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

თვისებები დამატებით მონაცემებს შეიცავს ელემენტის თაობაზე, რომელთა გამოჩენაც არ გსურთ ძირითად შიგთავსში. ამ შემთხვევაში, class არის თვისების სახელი (name), ხოლო editor-note მისი მნიშვნელობა (value). თვისება class საშუალებას გაძლევთ გამოარჩიოთ მოცემული ელემენტი სხვა დანარჩენებისგან და მიმავალში მიანიჭოთ გაფორმების ან სხვა სახის მონაცემები.

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

  1. ადგილის გამოტოვება ელემენტის დასახელებისგან (ან წინა თვისებისგან, თუ უკვე სხვა თვისებაც აქვს მინიჭებული).
  2. თვისების სახელი, ტოლობის ნიშნით.
  3. გამხსნელი და დამხურავი ბრჭყალები, რომლებშიც მოქცეული იქნება თვისების მნიშვნელობა.        

შრეებად დაწყობა

ასევე შესაძლებელია ელემენტების ერთიმეორეში განთავსება — შრეებად (ინგ. nesting). მაგალითად, თუ გვინდა წინადადებაში გამოვყოთ სიტყვა very შეგვიძლია მოვაქციოთ <strong>-ელემენტში:

<p>My cat is <strong>very</strong> grumpy.</p>

საჭიროა ხოლმე გადაამოწოთ, სწორად არის თუ არა ელემენტები ერთიმეორეში ჩასმული. ზედა მაგალითის მიხედვით, პირველად იხსნება  <p>-ელემენტი, შემდეგ კი <strong>-ელემენტი; შესაბამისად, ჯერ უნდა დაიხუროს <strong> ელემენტი, შემდეგ კი <p>-ელემენტი. ქვემოთ მოცემული ჩანაწერი, არამართებული იქნება:

<p>My cat is <strong>very grumpy.</p></strong>

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

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

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

<img src="images/firefox-icon.png" alt="My test image">

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

 HTML-ის დოკუმენტის აგებულება

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image">
  </body>
</html>

აქ გვაქვს შემდეგი რამ:

  • <!DOCTYPE html> — doctype ანუ დოკუმენტის სახეობა. შორეულ ხანებში, როცა HTML ჯერ კიდევ ახალგაზრდა იყო (დაახლოებით 1991/92 წლებში), doctype წარმოადგენდა HTML-გვერდის ერთგვარ მაკავშირებელს წესების კრებულთან, რომელთან შესაბამისობის მიხედვითაც განისაზღვრებოდა, კარგი იყო თუ არა HTML. იგი აგრეთვე გულისხმობდა შეცდომების თვითშემოწმებას და სხვა გამოსადეგ რამეებს. თუმცა დღეს უკვე ეს ყველაფერი არავის აღელვებს და უბრალოდ ისტორიულ ქმნილებას წარმოადგენს, რომლის გამოყენებაც აუცილებელია, რომ ბრაუზერმა იცოდეს რა სახის დოკუმენტთან აქვს საქმე და ყველაფერმა გამართულად იმუშაოს. ჯერჯერობით სულ ესაა რაც უნდა იცოდეთ.
  • <html></html><html>-ელემენტი. იგი შემოსაზღვრავს მთლიანი გვერდის შიგთავსს და ზოგჯერ უწოდებენ ძირეულ ელემენტსაც.
  • <head></head><head>-ელემენტი. იგი გამოიყენება ერთგვარ სათავსად, რომელშიც შეგიძლიათ განათავსოთ ყველაფერი, რასაც გინდათ თქვენი HTML-გვერდი შეიცავდეს, თუმცა არაა საჭირო ეს ყველაფერი მომხმარებელმა იხილოს. მათ შორისაა საკვანძო სიტყვები და გვერდის აღწერა, რომელიც გამოჩნდება საძიებო სისტემების შედეგებში, ასევე CSS შიგთავსის გასაფორმებლად, ტექსტის კოდირების მისათითებლად და ა.შ.
  • <meta charset="utf-8"> — ეს ელემენტი განსაზღვრავს, რომ თქვენი დოკუმენტი უნდა იყენებდეს UTF-8 კოდირებას, რომელიც მოიცავს ასონიშნების უმეტესობას, მრავალი დამწერლობიდან. ჩვეულებრივ, ამის შემდეგ ნებისმიერი სახის შიგთავსის განთავსებას შეძლებთ. შესაბამისად, მისი დამატება აგარიდებთ უსიამოვნებებს მომავალში.
  • <title></title><title>-ელემენტი. იგი განსაზღვრავს თქვენი გვერდის სათაურს, რომელიც გამოჩნდება ბრაუზერის იმ ჩანართზე, სადაც გახსნილია. აგრეთვე აღწერს გვერდს, სანიშნებში და რჩეულებში დამატებისას.
  • <body></body><body>-ელემენტი. იგი მოიცავს ყველა იმ შიგთავსს, რომელიც გსურთ მომხმარებლებმა იხილონ საიტზე სტუმრობისას, მათ შორისაა ტექსტი, სურათები, ვიდეოები, თამაშები, დასაკრავი ჩანაწერები და სხვ.

სურათები

კვლავ დავუბრუნდეთ <img>-ელემენტს:

<img src="images/firefox-icon.png" alt="My test image">

როგორც აღვნიშნეთ, იგი სურათს სვამს გვერდის იმ ადგილას, სადაც მდებარეობს. ამას აკეთებს თვისებით  src (source ქართ. „წყარო“), რომელშიც მითითებულია სურათის ფაილის მისამართი.

აგრეთვე გვაქვს თვისება  alt (alternative ქართ. „შემცვლელი“). მისი საშუალებით ეთითება აღმწერი ტექსტი, რომელიც განკუთვნილია მათთვის, ვინც ვერ ხედავს სურათს შემდეგი მიზეზით:

  1. მხედველობა აქვთ დაქვეითებული. ასეთი მომხმარებლები იყენებენ დამხმარე საშუალებას, როგორიცაა ეკრანის წამკითხველი, რომლითაც ხდება შემცვლელი ტექსტის ამოკითხვა.
  2. რაღაც ხარვეზის გამო, სურათი ვერ ჩაიტვირთა. მაგალითად, src-თვისებაში მითითებული ბმულის შეცვლა ან სურათის სხვა მდებარეობაზე გადატანა იწვევს ამას. გვერდის ხელახლა გახსნისას, სურათის ადგილას დაახლოებით ასე გამოჩნდება ტექსტი:

შემცვლელი ტექსტის საკვანძო სიტყვაა „აღმწერი“. alt-ტექსტი სწორედ იმ ინფორმაციას უნდა აწვდიდეს მკითხველს, თუ რა უნდა ყოფილიყო სურათზე გამოსახული. ამ მაგალითში მოცემული ტექსტი „My test image“ საერთოდ არაა გამოსადეგი. ჩვენი Firefox-ის ლოგოსთვის, გაცილებით უმჯობესი იქნებოდა „Firefox-ის ლოგო: დედამიწაზე შემოხვეული ცეცხლოვანი მელა“.

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

ვრცლად, ხელმისაწვდომობის შესახებ იხილეთ ხელმისაწვდომობის შემსწავლელ მოდულში.

ტექსტის მონიშვნა

მოცემული განყოფილება ეხება ხშირად გამოყენებულ HTML-ელემენტებს, რომლებიც გამოსადეგია ტექსტის მოსანიშნად.

სათაურები

სასათაურე (Heading) ელემენტები საშუალებას გაძლევთ მიუთითოთ, რომ ტექსტის შესაბამისი ნაწილი წარმოადგენს სათაურს — ან ქვესათაურს. ზუსტად ისევე, როგორც წიგნებშია ძირითადი სათაური, თავების სათაურები, ქვეთავების სათაურები, HTML-დოკუმენტშიც მსგავსადაა. HTML შეიცავს 6 დონის სათაურს <h1><h6>, თუმცა ძირითადად მხოლოდ 3 ან 4 გამოიყენება ხოლმე:

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

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

შენიშვნა: ალბათ შეამჩნევდით, რომ თქვენი პირველი დონის სათაურს, საკუთარი ნაგულისხმევი გაფორმება გააჩნია. ნუ გამოიყენებთ სასათაურე ელემენტებს ამ გაფორმების ტექსტისთვის მისანიჭებლად, შრიფტის ზომის გასაზრდელად ან გასამუქებლად, ვინაიდან ისინი განკუთვნილია ხელმისაწვდომობისა და სხვა დანიშნულებებისთვის, მაგალითად საძიებო სისტემებში მოსახვედრად (SEO). შეეცადეთ სწორი თანმიმდევრობით შექმნათ სათაურები თქვენი გვერდებისთვის, დონეების გამოტოვების გარეშე.

პარაგრაფები

როგორც ზემოთ აღინიშნა, <p>-ელემენტები განკუთვნილია ტექსტის პარაგრაფად გამოყოფისთვის; იგი ხშირად გამოიყენება ტექსტური შიგთავსის შექმნისას:

<p>This is a single paragraph</p>

დაამატეთ საკუთარი ტექსტი მაგალითის სახით (შეგიძლია აიღოთ სტატიიდან როგორ უნდა გამოიყურებოდეს თქვენი ვებსაიტი?) ერთ ან რამდენიმე პარაგრაფად და განათავსეთ თქვენი <img>-ელემენტის ქვეშ.

სიები

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

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

სიის თითოეული ერთეული უნდა განთავსდეს ელემენტში <li> (list item ქართ. „სიის ერთეული“).

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

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

მისი მონიშვნა შეგვიძლია შემდეგნაირად

<p>At Mozilla, we’re a global community of</p>
    
<ul> 
  <li>technologists</li>
  <li>thinkers</li>
  <li>builders</li>
</ul>

<p>working together ... </p>

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

ბმულები

ბმულები ძალიან მნიშვნელოვანია — სწორედ ისინი ქმნიან ქსელს! ბმულის დასამატებლად, გვესაჭიროება მარტივი ელემენტი — <a> — „a“ წარმოადგენს შემოკლებას სიტყვისა „anchor“ (ქართ. „ღუზა“ — ანალოგია აღებულია გემის დანიშნულების ადგილზე გადასვლითა და გაჩერებიდან). ტექსტის ბმულად ქცევისთვის, მიჰყევით შემდეგ საფეხურებს:

  1. აირჩიეთ ტექსტი. მაგალითად იყოს „Mozilla Manifesto“.
  2. მოაქციეთ ტექსტი <a>-ელემენტში, როგორც ნაჩვენებია:
    <a>Mozilla Manifesto</a>
  3. მიანიჭეთ <a>-ელემენტს href თვისება:
    <a href="">Mozilla Manifesto</a>
  4. მიუთითეთ მნიშვნელობა ამ თვისებას ვებმისამართის სახით, რომელზე მიბმაც გსურთ:
    <a href="https://www.mozilla.org/ka/about/manifesto/">Mozilla Manifesto</a>

შეიძლება არასასურველი შედეგი მიიღოთ, თუ არ მიაქცევთ ყურადღებას https:// ან http:// თავსართს, რომელსაც ეწოდება ოქმი (პროტოკოლი, ინგლ. protocol) მისამართის დასაწყისში. ბმულის შექმნის შემდეგ კი დაწკაპეთ მასზე რომ გადაამოწმოთ, სწორ მისამართზე გადაჰყავხართ თუ არა.

href შესაძლოა თავიდან უაზრო დასახელებად მოგეჩვენოთ თვისებისთვის. თუ გიჭირთ მისი დამახსოვრება, გეტყვით რომ იგი მომდინარეობს სიტყვებისგან hypertext reference.

ახლა კი დაამატეთ ბმული თქვენს გვერდზე, თუ ჯერ არ გაგიკეთებიათ.

შეჯამება

თუ ყველა მითითებას მიჰყევით მოცემულ სტატიაში, უნდა მიგეღოთ ქვემოთ გამოსახული გვერდის მსგავსი რამ (შეგიძლიათ იხილოთ აქედანაც):

A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

რამე დაბრკოლებას თუ გადააწყდით, ნებისმიერ დროს შეგიძლიათ შეადაროთ თქვენი ნამუშევარი ჩვენი მაგალითის სრულ კოდს GitHub-ზე.

აქ, ჩვენ მხოლოდ მცირედით შევეხეთ HTML-ის ზედაპირს. უფრო ღრმად და საფუძვლიანად გასარკვევად, იხილეთ  HTML-ის შესწავლის თემა.

 

მოცემულ მოდულში

დოკუმენტების ჭდეები და წვლილის შემტანები

ამ გვერდის შექმნაში, წვლილის შემტანები: G12r
ბოლო განახლების ავტორი: G12r,