როგორ მუშაობს ვებგვერდი

რას ისწავლი

• რა როლი აქვს ბრაუზერს და სერვერს
• რა ხდება, როცა მისამართს აკრეფ და Enter-ს აჭერ
• როგორ ნახო ნებისმიერი ვებგვერდის HTML კოდი

ორი მხარე: ბრაუზერი და სერვერი

ვებგვერდის ჩვენებაში ორი კომპიუტერი მონაწილეობს.

• ბრაუზერი (browser) პროგრამაა შენს კომპიუტერში ან ტელეფონში: Chrome, Edge, Firefox, Safari. მისი საქმეა გვერდის „მოთხოვნა“ და მიღებული HTML-ის ეკრანზე დახატვა. ბრაუზერს კლიენტსაც (client) უწოდებენ.
• სერვერი (server) კომპიუტერია სადღაც მონაცემთა ცენტრში, რომელიც დღე და ღამე ჩართულია და ელოდება მოთხოვნებს. მასზე ინახება საიტის ფაილები: HTML, სურათები, სტილები.

მათ შორის საუბარი ინტერნეტით მიმდინარეობს და ყოველთვის ერთნაირად: კლიენტი ითხოვს, სერვერი პასუხობს.

მისამართიდან გვერდამდე

როცა ბრაუზერში წერ https://codequest.space/learn/ და Enter-ს აჭერ, რამდენიმე წამის მეასედში ასეთი რამ ხდება:

1. მისამართის გარჩევა. ტექსტს, რომელსაც აკრეფ, URL ჰქვია. https ამბობს, როგორ ვილაპარაკოთ, codequest.space რომელ სერვერს, /learn/ რომელი გვერდი გვინდა.
2. სერვერის პოვნა. სახელი codequest.space ადამიანისთვისაა. კომპიუტერებს რიცხვითი მისამართები სჭირდება, ამიტომ ბრაუზერი ჯერ ეკითხება „ინტერნეტის სატელეფონო წიგნს“, DNS-ს: რა მისამართი აქვს ამ სახელს?
3. მოთხოვნა (request). ბრაუზერი სერვერს უგზავნის შეტყობინებას: „მომეცი გვერდი /learn/“. ამ საუბრის წესებს HTTP ჰქვია, ხოლო https-ის ბოლო ასო ნიშნავს, რომ საუბარი დაშიფრულია.
4. პასუხი (response). სერვერი პოულობს საჭირო ფაილს და უგზავნის ბრაუზერს. ეს ფაილი HTML-ია: ზუსტად ის ტექსტი ტეგებით, რომლის წერასაც ახლა სწავლობ.
5. დამატებითი ფაილები. ბრაუზერი HTML-ს კითხულობს და პოულობს ცნობებს სხვა ფაილებზე: სურათებზე, CSS-ზე, JavaScript-ზე. თითოეულისთვის სერვერს ახალ მოთხოვნას უგზავნის.
6. დახატვა. როცა ყველაფერი მოვიდა, ბრაუზერი HTML-ს და CSS-ს აერთიანებს და გვერდს ეკრანზე ხატავს.

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

ნებისმიერი გვერდის HTML

ინტერნეტში ყველა გვერდის HTML ღიაა. Chrome-სა და Edge-ში დააჭირე Ctrl+U ან მარჯვენა ღილაკი → „View page source“: გაიხსნება ზუსტად ის ტექსტი, რომელიც სერვერმა გამოგზავნა. F12 კი დეველოპერის ხელსაწყოებს (DevTools) ხსნის: ჩანართში „Elements“ ხედავ გვერდის HTML-ს და მაუსის მიტანით გაიგებ, რომელი ტეგი რომელ ნაწილს ხატავს. ეს სწავლის შესანიშნავი გზაა: ნებისმიერი საიტი, რომელიც მოგწონს, გასაღებია, თუ როგორ არის აწყობილი.

სცადე თავად

ეს გვერდი სურათს შეიცავს. როცა მას გაუშვებ, ბრაუზერი ჯერ HTML-ს წაიკითხავს, მერე სერვერს ცალკე მოთხოვნით სურათს სთხოვს. შეცვალე სურათის მისამართი რაიმე არარსებულით, მაგალითად /icons/nothing.png, და ნახე, რა მოხდება.

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

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

<h1>ჩემი პირველი მოთხოვნა</h1>
<img src="/icons/icon-192.png" alt="რობოტი ბიტი" width="96">
<p>ბრაუზერმა ორი მოთხოვნა გაგზავნა: ჯერ ამ გვერდის HTML-ისთვის, მერე ბიტის სურათისთვის.</p>

მინი-ქვიზი

შეჯამება

• ბრაუზერი (კლიენტი) ითხოვს, სერვერი პასუხობს. საუბრის წესები HTTP-ა.
• URL ამბობს, რომელ სერვერს და რომელ გვერდს ვთხოვთ. DNS სახელს რიცხვით მისამართად თარგმნის.
• ჯერ HTML მოდის, მერე მასში ნახსენები სურათები, სტილები და სკრიპტები ცალ-ცალკე.
• Ctrl+U აჩვენებს გვერდის HTML-ს, F12 დეველოპერის ხელსაწყოებს ხსნის.