პირველი HTML გვერდი

რას ისწავლი

• რისგან შედგება სრული HTML დოკუმენტი
• რატომ გჭირდება <meta charset="utf-8"> ქართული ტექსტისთვის
• როგორ შექმნა .html ფაილი შენს კომპიუტერში და გახსნა ბრაუზერში

გვერდის ჩონჩხი

წინა თავებში მხოლოდ რამდენიმე ტეგს ვწერდით და რედაქტორი დანარჩენს თვითონ ავსებდა. ნამდვილ HTML ფაილს კი სრული ჩონჩხი უნდა ჰქონდეს. ის ყოველთვის ასე გამოიყურება:

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <title>ჩემი პირველი გვერდი</title>
  </head>
  <body>
    <h1>გამარჯობა, ვებო!</h1>
    <p>ეს ჩემი პირველი ნამდვილი HTML გვერდია.</p>
  </body>
</html>

მოდი, ხაზ-ხაზ გავარჩიოთ:

1. <!DOCTYPE html> ბრაუზერს ეუბნება: „ეს თანამედროვე HTML დოკუმენტია“. ყოველთვის პირველ ხაზზე იწერება.
2. <html lang="ka"> მთელი დოკუმენტის გარსია. lang="ka" ამბობს, რომ გვერდი ქართულადაა. ეს ეხმარება ეკრანის წამკითხველ პროგრამებს, რომლებსაც უსინათლო ადამიანები იყენებენ, და საძიებო სისტემებს.
3. <head> გვერდის „უხილავი“ ნაწილია: ინფორმაცია გვერდის შესახებ, რომელიც ეკრანზე პირდაპირ არ ჩანს.
4. <meta charset="utf-8"> ამბობს, რა კოდირებით (encoding) არის ფაილი შენახული. UTF-8 ყველა ენის ასოს მოიცავს, ქართულსაც.
5. <title> გვერდის სათაურია, რომელიც ბრაუზერის ჩანართზე ჩანს.
6. <body> ყველაფერია, რაც ეკრანზე ჩანს: სათაურები, აბზაცები, სურათები.

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

რატომ ქართულისთვის utf-8

კომპიუტერი ტექსტს რიცხვებად ინახავს: ყოველ ასოს თავისი რიცხვი აქვს. კოდირება წესების წიგნია, რომელიც ამბობს, რომელი რიცხვი რომელ ასოს ნიშნავს. თუ ბრაუზერმა არ იცის, რომელი წიგნით წაიკითხოს, ქართული ასოების ნაცვლად შეიძლება ასეთი „ხეები“ გამოჩნდეს: გáƒáƒ›áƒáƒ ჯáƒáƒ‘áƒ. ხაზი <meta charset="utf-8"> ამ პრობლემას აგვარებს. ფაილი ტექსტურ რედაქტორშიც UTF-8 კოდირებით შეინახე: თანამედროვე რედაქტორები ამას ნაგულისხმევად აკეთებენ.

ფაილი შენს კომპიუტერში

1. გახსენი ნებისმიერი ტექსტური რედაქტორი. Windows-ში Notepad-იც გამოდგება, მაგრამ უკეთესია სპეციალური კოდის რედაქტორი, მაგალითად VS Code.
2. ჩააკოპირე ზემოთ მოცემული ჩონჩხი.
3. შეინახე ფაილი სახელით index.html. გაფართოება .html მნიშვნელოვანია: ის ოპერაციულ სისტემას ეუბნება, რომ ეს ვებგვერდია.
4. ორჯერ დააჭირე ფაილს: ის ბრაუზერში გაიხსნება. ჩანართზე დაინახავ სათაურს „ჩემი პირველი გვერდი“.

სახელი index.html შემთხვევით არ არის: სერვერები ამ სახელის ფაილს ნაგულისხმევად აჩვენებენ, როცა საქაღალდის მისამართს ხსნი. ასე რომ, ეს საიტის „მთავარი გვერდის“ სახელია.

სცადე თავად

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

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

• ფაილი შენახულია როგორც index.html.txt. Windows ზოგჯერ გაფართოებებს მალავს და Notepad ბოლოში .txt-ს ამატებს. შენახვისას აირჩიე „All files“ ან ჩართე გაფართოებების ჩვენება.
• ხილული შინაარსი <head>-ში. სათაურები და აბზაცები <body>-ში იწერება. <head> გვერდის შესახებ ინფორმაციისთვისაა.
• დავიწყებული charset. ქართული ტექსტი უცნაური სიმბოლოებით გამოჩნდება.

<!DOCTYPE html>
<html lang="ka">
  <head>
    <meta charset="utf-8">
    <title>ჩემი ჰობი</title>
  </head>
  <body>
    <h1>რა მიყვარს</h1>
    <p>თავისუფალ დროს ფეხბურთს ვთამაშობ.</p>
    <p>ასევე მიყვარს თამაშების შექმნა კოდით.</p>
  </body>
</html>

მინი-ქვიზი

შეჯამება

• სრულ დოკუმენტს აქვს <!DOCTYPE html>, <html>, <head> და <body>.
• <head>-ში წერია charset, title და სხვა ინფორმაცია გვერდის შესახებ. <body>-ში ხილული შინაარსი.
• lang="ka" და charset="utf-8" ქართული გვერდის აუცილებელი ნაწილებია.
• ფაილი .html გაფართოებით შეინახე. მთავარ გვერდს ჩვეულებრივ index.html ჰქვია.