შესვლა

HTML › დამწყები › HTML-ის საფუძვლები

რა არის HTML

მარტივი⏱ 6 წთ+20 XP👑 Pro#HTML#მარკირება#ვებგვერდი

რას ისწავლი

  • რას ნიშნავს HTML და რისთვის გამოიყენება
  • რით განსხვავდება მარკირების ენა პროგრამირების ენისგან
  • როგორ ინაწილებს საქმეს HTML, CSS და JavaScript

ყოველი ვებგვერდის საფუძველი

ნებისმიერი ვებგვერდი, რომელიც ოდესმე გინახავს, ახალი ამბების საიტი, ონლაინ თამაშის მენიუ თუ ეს გვერდი, ერთ ენაზეა აწყობილი. მას HTML ჰქვია. სახელი ინგლისური სიტყვების შემოკლებაა: HyperText Markup Language, ანუ ჰიპერტექსტის მარკირების ენა.

  • ჰიპერტექსტი (hypertext) ტექსტია, რომელშიც ბმულებია: ერთ გვერდზე დაჭერით მეორეზე გადადიხარ. სწორედ ბმულებმა აქცია ცალკეული გვერდები ერთ დიდ ქსელად, ინტერნეტად.
  • მარკირება (markup) ნიშნავს ტექსტზე „ნიშნების“ დასმას: ეს სათაურია, ეს აბზაცი, ეს ბმული.

მარკირება და არა პროგრამირება

HTML პროგრამირების ენა არ არის. მასში არ არის ცვლადები, პირობები ან ციკლები. HTML არაფერს „ითვლის“, ის მხოლოდ აღწერს: რა წერია გვერდზე და რა როლი აქვს თითოეულ ნაწილს.

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

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

<h1> ამბობს „აქ იწყება მთავარი სათაური“, </h1> კი „აქ მთავრდება“. <p> აბზაცია, ინგლისური სიტყვიდან paragraph. ასეთ ნიშნებს ტეგები (tags) ჰქვია. ბრაუზერი მათ ეკრანზე არ აჩვენებს: ის ტეგებს კითხულობს და ტექსტს შესაბამისად ხატავს. სათაურს დიდი, მუქი შრიფტით, აბზაცს ჩვეულებრივით.

სამი ენა, სამი საქმე

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

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

ჯერ HTML ისწავლება, რადგან დანარჩენი ორი მასზე „ეკიდება“. CSS-ს ელემენტების გასაფერადებლად ჯერ ელემენტები სჭირდება, JavaScript-ს ღილაკზე რეაგირებისთვის ჯერ ღილაკი.

სცადე თავად

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

HTML · სცადე თავად

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

  • „HTML-ით პროგრამას დავწერ“. HTML გვერდის აგებულებას აღწერს. გამოთვლებისა და ლოგიკისთვის JavaScript გჭირდება.
  • ტეგების ეკრანზე ჩვენების მოლოდინი. ბრაუზერი ტეგებს არ აჩვენებს, ის მათ მიხედვით ხატავს. თუ ეკრანზე <h1> ჩანს, ტეგი არასწორადაა დაწერილი.
  • დამხურავი ტეგის დავიწყება. </h1>-ის გარეშე ბრაუზერმა არ იცის, სად მთავრდება სათაური, და შემდეგი ტექსტიც შეიძლება სათაურად აქციოს.

სავარჯიშო

დაწერე შენი პატარა გვერდი: მთავარი სათაური შენი სახელით და ორი აბზაცი. პირველში დაწერე, რამდენი წლის ხარ, მეორეში შენი ჰობი.

HTML · სცადე თავად
💡 მინიშნება

სათაური <h1>...</h1>-ში, თითოეული აბზაცი <p>...</p>-ში.

✅ ამოხსნის ნახვა
HTML
<h1>ნინო</h1>
<p>მე 12 წლის ვარ.</p>
<p>მიყვარს ხატვა და კოდის წერა.</p>

მინი-ქვიზი

1რას ნიშნავს HTML?

2რომელი ენა პასუხობს გვერდის ფერებსა და შრიფტებზე?

3რას ნიშნავს <p> ტეგი?

შეჯამება

  • HTML ვებგვერდის აგებულებას აღწერს: სათაურები, აბზაცები, სურათები, ბმულები.
  • ის მარკირების ენაა, არა პროგრამირების: ცვლადები და ციკლები მასში არ არის.
  • ტეგები, მაგალითად <h1> და <p>, ბრაუზერს ეუბნება, რა როლი აქვს ტექსტს.
  • HTML ჩონჩხია, CSS ტანსაცმელი, JavaScript კუნთები.
📝 ჩემი შენიშვნა