შესვლა

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

რედაქტორი და ბრაუზერი

მარტივი⏱ 7 წთ+20 XP👑 Pro#HTML#VS Code#DevTools#ბრაუზერი

რას ისწავლი

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

კოდის რედაქტორი

HTML ჩვეულებრივი ტექსტია, ამიტომ მის დასაწერად ნებისმიერი ტექსტური რედაქტორი გამოდგება. მაგრამ კოდის რედაქტორი (code editor) ბევრად მოსახერხებელია. ყველაზე პოპულარულია Visual Studio Code (მოკლედ VS Code): უფასოა და Windows-ზე, macOS-სა და Linux-ზე მუშაობს. რას გაძლევს ის:

  • გაფერადება: ტეგები, ატრიბუტები და ტექსტი სხვადასხვა ფერისაა, ამიტომ შეცდომა თვალში გხვდება.
  • ავტომატური დახურვა: <p>-ს რომ დაწერ, რედაქტორი </p>-ს თვითონ ამატებს.
  • შევსება: დაიწყე ტეგის სახელი და რედაქტორი შემოგთავაზებს ვარიანტებს.
  • სწრაფი ჩონჩხი: VS Code-ში ცარიელ .html ფაილში დაწერე ! და დააჭირე Tab: სრული დოკუმენტის ჩონჩხი მაშინვე გაჩნდება.

Word-ის მსგავსი პროგრამები კოდისთვის არ გამოდგება: ისინი ფაილში დამალულ ფორმატირებას ამატებს და ბრჭყალებს „ლამაზ“ ბრჭყალებად ცვლის, რომელსაც ბრაუზერი ვერ გაიგებს.

სამუშაო ციკლი

ვებგვერდის წერა სამი მოძრაობის გამეორებაა:

  1. დაწერე ცვლილება რედაქტორში.
  2. შეინახე ფაილი: Ctrl+S.
  3. განაახლე გვერდი ბრაუზერში: F5 ან Ctrl+R.

ყველაზე ხშირი დაბნეულობა: „შევცვალე, მაგრამ არაფერი შეიცვალა!“ ცხრიდან რვაჯერ ფაილი უბრალოდ არ არის შენახული ან გვერდი არ არის განახლებული. VS Code-ის ჩანართზე შეუნახავ ფაილს წრე აქვს მიხატული.

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

დეველოპერის ხელსაწყოები

ბრაუზერში F12 ხსნის დეველოპერის ხელსაწყოებს (DevTools). HTML-ისთვის ყველაზე მნიშვნელოვანია ჩანართი Elements: ის აჩვენებს გვერდის ხეს, ანუ რომელი ელემენტი რომლის შიგნითაა. მარჯვენა ღილაკი გვერდის ნებისმიერ ნაწილზე → „Inspect“ (ან „გამოკვლევა“) მაშინვე აჩვენებს მის HTML-ს.

Elements-ში ტექსტის რედაქტირებაც შეიძლება: ორჯერ დააჭირე და შეცვალე. ცვლილება მხოლოდ შენს ეკრანზეა და განახლებისას ქრება, ამიტომ ექსპერიმენტისთვის იდეალურია.

ბრაუზერი შეცდომებს „პატიობს“

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

სცადე თავად

ამ კოდში ორი ტეგი დაუხურავია. გაუშვი და ნახე, რა მოუვიდა ტექსტს. მერე დახურე ტეგები და ისევ გაუშვი.

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

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

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

სავარჯიშო

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

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

ყოველ გამხსნელ ტეგს თავისი დამხურავი სჭირდება: </h1> და ორი </p>.

✅ ამოხსნის ნახვა
HTML
<h1>ჩემი დღე</h1>
<p>დილით სკოლაში წავედი.</p>
<p>საღამოს კოდი ვწერე.</p>

მინი-ქვიზი

1შეცვალე ფაილი, მაგრამ ბრაუზერში არაფერი შეიცვალა. რა უნდა შეამოწმო პირველ რიგში?

2რას აჩვენებს DevTools-ის ჩანართი Elements?

3რას აკეთებს ბრაუზერი დაუხურავ ტეგთან?

შეჯამება

  • კოდის რედაქტორი (მაგ. VS Code) გაფერადებით, ავტომატური დახურვით და შევსებით გეხმარება.
  • სამუშაო ციკლი: დაწერე, შეინახე (Ctrl+S), განაახლე (F5).
  • F12 → Elements აჩვენებს, როგორ გაიგო ბრაუზერმა შენი HTML.
  • ბრაუზერი შეცდომებს ჩუმად ასწორებს, ამიტომ ყოველი ელემენტი თვითონ დახურე.
📝 ჩემი შენიშვნა