head და body

რას ისწავლი

• რა იწერება <head>-ში და რა <body>-ში
• რატომ ჰგავს დოკუმენტი წიგნს ყდით და გვერდებით
• რას აკეთებს ბრაუზერი, როცა ელემენტი არასწორ ნაწილშია

წიგნის ყდა და გვერდები

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

HTML დოკუმენტიც ორ ნაწილად იყოფა:

• <head> (თავი) ინფორმაციაა გვერდის შესახებ: სათაური ჩანართისთვის, კოდირება, აღწერა საძიებო სისტემებისთვის, ბმულები CSS ფაილებზე. ეს ყველაფერი ეკრანზე პირდაპირ არ ჩანს.
• <body> (სხეული) თვითონ შინაარსია: ყველაფერი, რასაც მომხმარებელი ხედავს და რასთანაც მუშაობს.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <title>ბიტის ბლოგი</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>ბიტის ბლოგი</h1>
    <p>დღეს ვისწავლე, რა არის head და body.</p>
  </body>
</html>

<head> და <body> ერთმანეთის და-ძმები არიან: ორივე პირდაპირ <html>-ის შიგნითაა, ერთმანეთის მიყოლებით. ჯერ ყოველთვის <head>, მერე <body>. თითოეული დოკუმენტში მხოლოდ ერთხელ გვხვდება.

რა იწერება head-ში

ამ კურსში და შემდეგ კურსებში <head>-ში ძირითადად ასეთ ელემენტებს შეხვდები:

• <meta charset="utf-8">: კოდირება;
• <title>: გვერდის სათაური;
• <meta name="...">: აღწერა, მობილურის პარამეტრები და სხვა ინფორმაცია;
• <link>: კავშირი სხვა ფაილებთან, მაგალითად CSS-თან ან ჩანართის ხატულასთან;
• <script>: JavaScript კოდი ან მისი ფაილი.

შემდეგ თავში მათ დაწვრილებით გავარჩევთ.

რა იწერება body-ში

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

როცა ყველაფერი აირევა

რა მოხდება, თუ აბზაცს <head>-ში ჩაწერ? ბრაუზერი, როგორც უკვე ვიცით, შეცდომაზე არ ჩერდება. ის ხედავს, რომ <p> <head>-ს არ ეკუთვნის, ჩუმად ხურავს <head>-ს, ხსნის <body>-ს და აბზაცს იქ სვამს. გვერდი ერთი შეხედვით ნორმალურად გამოიყურება, მაგრამ შენი კოდი და ის, რაც ბრაუზერმა „გაიგო“, ერთმანეთს აღარ ემთხვევა. ეს ზუსტად ის შეცდომაა, რომელიც მოგვიანებით, CSS-ის ან JavaScript-ის დამატებისას იჩენს თავს.

იგივე ხდება, თუ <head> და <body> საერთოდ არ დაწერე: ბრაუზერი მათ თვითონ „დაამატებს“. DevTools-ის ჩანართ Elements-ში ყოველთვის ნახავ ორივეს, თუნდაც ფაილში არ ეწეროს. მაგრამ საკუთარ კოდში ყოველთვის თვითონ დაწერე ორივე: ასე შენი ფაილი და ბრაუზერის ხე ერთნაირი იქნება.

სცადე თავად

ამ კოდში აბზაცი <head>-შია. გაუშვი: გამოჩნდება? მერე გადაიტანე ის სწორ ადგილას.

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

• ხილული შინაარსი <head>-ში. ბრაუზერი მას გადაიტანს, მაგრამ კოდი არასწორი რჩება.
• ორი <body>. დოკუმენტს ერთი სხეული აქვს. მეორე ბრაუზერი უბრალოდ პირველს შეუერთებს.
• <head> <body>-ის შემდეგ. რიგი ყოველთვის ერთია: ჯერ თავი, მერე სხეული.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <title>ფილმები</title>
  </head>
  <body>
    <h1>ჩემი ფილმები</h1>
    <p>ჩემი საყვარელი ფილმია „ტოი სტორი“.</p>
  </body>
</html>

მინი-ქვიზი

შეჯამება

• <head> ინფორმაციაა გვერდის შესახებ: title, meta, link, script.
• <body> ყველაფერია, რაც ეკრანზე ჩანს.
• ორივე <html>-ის შიგნითაა, ჯერ head, მერე body, თითო-თითო.
• არეულ ელემენტებს ბრაუზერი ჩუმად გადაალაგებს. ჯობს, თავიდანვე სწორად დაწერო.