კოდის შემოწმება

რას ისწავლი

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

ბრაუზერი ზედმეტად კეთილია

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

ამიტომ არსებობს ვალიდატორი (validator): პროგრამა, რომელიც HTML-ს წესებთან ადარებს და ყოველ შეცდომას გიჩვენებს.

W3C-ის ვალიდატორი

HTML-ის სტანდარტებს რამდენიმე ორგანიზაცია ქმნის, მათ შორის W3C (World Wide Web Consortium). მისი უფასო ვალიდატორი მისამართზეა validator.w3.org. მას სამი გზით გადასცემ გვერდს:

1. მისამართით (Validate by URI): უკვე გამოქვეყნებული გვერდისთვის.
2. ფაილით (Validate by File Upload): შენს კომპიუტერში არსებული .html ფაილისთვის.
3. ჩასმით (Validate by Direct Input): კოდს პირდაპირ ჩააკოპირებ.

ვალიდატორი შედეგად ორი სახის შეტყობინებას აჩვენებს:

• Error (შეცდომა): წესის დარღვევა, რომელიც უნდა გასწორდეს.
• Warning (გაფრთხილება): რეკომენდაცია. ყოველთვის შეცდომა არ არის, მაგრამ ღირს დაფიქრება.

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

ყველაზე ხშირი შეცდომები

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

• End tag … seen, but there were open elements: ტეგი დაუხურავია, ან ტეგები გადაჯვარედინებულია. ჩადგმის თავი გაიხსენე.
• An img element must have an alt attribute: სურათს alt აკლია.
• Duplicate ID: ერთი id ორჯერ. ის უნიკალური უნდა იყოს.
• Element … not allowed as child of element …: ელემენტი არასწორი მშობლის შიგნითაა, მაგალითად <p> <ul>-ში <li>-ის გარეშე.
• Consider adding a lang attribute: <html>-ს lang აკლია.

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

ხელმისაწვდომობის შემოწმება

სწორი HTML ჯერ კიდევ არ ნიშნავს, რომ გვერდი ყველასთვის მოსახერხებელია. Chrome-სა და Edge-ში DevTools-ს აქვს ჩანართი Lighthouse: ის გვერდს ამოწმებს და ხელმისაწვდომობის (Accessibility) ქულას აძლევს, თან პრობლემების სიას: სურათი alt-ის გარეშე, ველი წარწერის გარეშე, ბმული უაზრო ტექსტით, ძნელად წასაკითხი ფერები. ამ კურსის ყველა წესს, რომელიც ისწავლე, ეს ხელსაწყო ამოწმებს.

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

სცადე თავად

ამ კოდში ოთხი შეცდომაა: იპოვე ისინი ხელით, ისე, როგორც ვალიდატორი. ბრაუზერი გვერდს მაინც აჩვენებს. შემდეგ დააკოპირე კოდი validator.w3.org-ის „Direct Input“ ველში და შეამოწმე, ყველა იპოვე თუ არა.

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

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

<h1>ჩემი ცხოველები</h1>
<p id="intro">მყავს <strong>კატა და ძაღლი.</strong></p>
<img src="/icons/icon-192.png" alt="ბიტი, ჩვენი ოჯახის რობოტი" width="64" height="64">
<ul>
  <li>ფისო</li>
  <li>მურია</li>
</ul>
<p id="outro">ბოლო აბზაცი.</p>

მინი-ქვიზი

შეჯამება

• ბრაუზერი HTML-ის შეცდომებს მალავს, ვალიდატორი (validator.w3.org) ავლენს.
• Error გასასწორებელია, Warning რეკომენდაცია. გაასწორე პირველი და თავიდან შეამოწმე.
• ყველაზე ხშირი: დაუხურავი ტეგი, alt-ის გარეშე სურათი, განმეორებული id, არასწორი მშობელი.
• ხელმისაწვდომობისთვის Lighthouse და კლავიატურის ტესტი.