თქვენ უნდა გადაიტანოთ ის style.css ფაილში და ეს არის ის.

ვალიდატორი ასევე მიუთითებს ზუსტად სად არის შეცდომა:

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

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

თქვენ ასევე შეგიძლიათ შეამოწმოთ CSS კოდი ვალიდობისთვის W3c ვალიდატორში. ამის გაკეთება შეგიძლიათ ამ ბმულის გამოყენებით. მოქმედების პრინციპი იგივეა: თქვენ მიუთითებთ საიტის URL-ს, ან ირჩევთ ფაილს თქვენს კომპიუტერში და დააჭირეთ ღილაკს "შემოწმება".

იგივე HTML ვალიდატორისგან განსხვავებით, CSS ვალიდატორი რუსულ ენაზეა.

CSS შეცდომები და გაფრთხილებები

CSS კოდის მოქმედების შემოწმებისას, სერვისი აწარმოებს უამრავ შეცდომებს და გაფრთხილებებს. მე მივიღე 23 შეცდომა და 281 გაფრთხილება. ერთი შეხედვით, ეს შეიძლება ბევრი ჩანდეს და შეიძლება საშინელიც კი იყოს, მაგრამ ამ შეცდომებისა და გაფრთხილებების უმეტესობა ნაჩვენებია მხოლოდ იმიტომ, რომ სერვისმა არ იცის გარკვეული თვისებები, რომლებიც ვრცელდება სხვადასხვა ბრაუზერზე.

ჩემს შემთხვევაში, 281 გაფრთხილებიდან უმეტესობა არის CSS თვისებები ნორმალური ჩვენებისთვის სხვადასხვა ბრაუზერში:

სერვისი ათავსებს ისეთ ტეგებს, როგორც „უცნობი გამყიდველის გაფართოება“. ამიტომ, თუ თქვენი CSS ფაილების შემოწმებისას ხედავთ ასეთი შეცდომების დიდ რაოდენობას, მაშინ არ ინერვიულოთ. Ყველაფერი კარგადაა.

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

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

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

კარგი ახლა, ნახვამდის!

წინა სტატია
შემდეგი სტატია

2016-12-29

ჩვენ ვაკეთებთ ღილაკების ანიმაციას და ვამოწმებთ საიტს HTML და CSS კოდის ნამდვილობაზე

გამარჯობა ძვირფასო სტუმარო!

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

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

• ღილაკების მოცულობის გაკეთება
• ღილაკების ინტერაქტიული
• აუცილებელია ვალიდაცია?
• როგორ შევამოწმოთ HTML კოდი მოქმედებისთვის
• როგორ შევამოწმოთ CSS კოდი მოქმედებისთვის
• საიტის წყარო ფაილები

ღილაკების მოცულობის გაკეთება

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

ქვემოთ მოცემულია გვერდითი ზოლის ფრაგმენტი ასეთი ღილაკებით.

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

ჩვენ განვსაზღვრავთ ხაზოვანი გრადიენტის მნიშვნელობებს შემდეგნაირად:

1. ფერების ჩრდილებს დავაყენებთ ქვემოდან ზემოდან, დაწყებული ღილაკის ძირითად ფერთან შედარებით მუქი ფერით. იმის დასადგენად, თუ რომელი ფერი გამოვიყენოთ გრადიენტის დასაწყისში, ვიყენებთ გრაფიკული რედაქტორის ხელსაწყოს, ამ შემთხვევაში Photoshop-ს.

ამისათვის, როდესაც დიზაინის განლაგების დოკუმენტი ღიაა, თქვენ უნდა აირჩიოთ "ფერების ამომრჩევი", გადაიტანეთ კურსორი ღილაკის საჭირო არეალზე, დაადგინოთ ძირითადი ფერი და შემდეგ გამოიყენოთ "Color Picker" ინსტრუმენტები ასარჩევად. იმავე ყავისფერი ჩრდილის მუქი ფერი. ჩვენს შემთხვევაში, ავიღოთ ფერი მნიშვნელობით "653939". ქვემოთ მოყვანილი ეკრანის სურათი ნათლად აჩვენებს, თუ როგორ შეიძლება ამის გაკეთება.

2. შემდეგ განვსაზღვრავთ გრადიენტის გაჩერების პოზიციას, სადაც საწყისი, მუქი ფერი გადაიქცევა მთავარში. გაჩერების პოზიციას ვათავსებთ დაახლოებით შუაში. ამავდროულად, იმისთვის, რომ ფერი უფრო გაჯერებული იყოს, მოდით გადავიტანოთ გაჩერების პოზიცია ოდნავ ზემოთ და განვსაზღვროთ მისი მნიშვნელობა, ვთქვათ, სიმაღლის 70%.

3. ბოლო, რაც უნდა გააკეთოთ გრადიენტური თვისებების მინიჭებისთვის, არის უფრო ღია ფერის განსაზღვრა, ვიდრე მთავარი, რომელიც გააფერადებს ღილაკებს ზედა. ეს კეთდება ისევე, როგორც გრადიენტის საწყისი ფერის განსაზღვრისას. ამ შემთხვევაში, ჩვენ ავიღებთ ამ ფერის მნიშვნელობას, როგორც "b88686".

3. მიღებული მონაცემების საფუძველზე ღილაკების ადრე გენერირებულ CSS თვისებებს დავამატებთ ხაზოვან გრადიენტს.

შეყვანა: {

სიმაღლე :30px;

ზღვარი-ქვედა :10px;

საზღვარი-რადიუსი : 5px;

ფონი :#a76d6d;

ტექსტის გასწორება :ცენტრი;

შრიფტი-წონა : თამამი;

ფერი :#fff;

ათწილადი : უფლება;

ფონის სურათი

შეიძლება აღინიშნოს, რომ ექსტრემალური ფერების განსაზღვრისას, გაჩერების პოზიციები აქ არ არის მითითებული, რადგან ეს არ არის აუცილებელი 0% და 100% მნიშვნელობებისთვის.

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

როგორც ხედავთ, ღილაკებმა შეიძინა მცირე ამობურცულობა. ახლა თქვენ შეგიძლიათ დაიწყოთ მათი "აღორძინება".

ღილაკების ინტერაქტიული დაყენება

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

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

ჯერ ამას გავაკეთებთ პასიური მდგომარეობისთვის და ვცდილობთ გამოვსახოთ ისე, რომ ღილაკები ზედაპირზე მაღლა აიწიოს.

ჩვენ შევარჩევთ საზღვრებისა და ჩრდილების ფერებს ისევე, როგორც წინა შემთხვევებში.

CSS კოდი შესაბამისი დამატებების შემდეგ ასე გამოიყურება:

შეყვანა: {

სიმაღლე :30px;

ზღვარი-ქვედა :10px;

საზღვარი-რადიუსი : 5px;

ფონი :#a76d6d;

ტექსტის გასწორება :ცენტრი;

შრიფტი-წონა : თამამი;

ფერი :#fff;

ათწილადი : უფლება;

ფონის სურათი :წრფივი-გრადიენტი(ზემოდან, #653939, #a76d6d 50%, #b88686);

ყუთი-ჩრდილი :2px 2px 4px 0px #422a2a;

საზღვარი-სიგანე :2px;

სასაზღვრო სტილის :მყარი;

საზღვრის ფერი :#დდბებე #241616 #241616 #დდბებე;

აქ შეიძლება აღინიშნოს, რომ საზღვრები წარმოდგენილია თვისებების კომბინაციით, რომელიც განსაზღვრავს სისქეს (საზღვრის სიგანე მნიშვნელობასთან ერთად 2 პიქსელი), სტილი (საზღვრის სტილი) მნიშვნელობით, რომელიც მიუთითებს მყარი საზღვრისა და ფერების (საზღვრის ფერი) ოთხივე მხარეს.

მოდით განაახლოთ ბრაუზერი და ვნახოთ, როგორ გამოიყურება ღილაკები ახლა.

როგორც ხედავთ, როგორც ჩანს, ღილაკები ამ მდგომარეობაში გაიზარდა.

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

ღილაკების აქტიური მდგომარეობის CSS კოდი ასე გამოიყურება.

შეყვანა: ჰოვერი {

ყუთი-ჩრდილი :არცერთი;

საზღვრის ფერი :#a76d6d #a76d6d #a76d6d #a76d6d;

ამ შემთხვევაში ჩვენ ისევ შევცვლით საზღვრების ფერს და დავამატებთ ჩრდილს, მხოლოდ ამ შემთხვევაში იქნება შიდა და ოფსეტური გარეშე. ფსევდო კლასის სელექტორი ასევე შეიცვლება :active-ზე, რომელიც შეესაბამება დაჭერის მდგომარეობას.

დაჭერილი მდგომარეობის CSS კოდი იქნება შემდეგი.

შეყვანა: აქტიური {

ყუთი-ჩრდილი :0px 0px 7px 2px #422a2a ჩასმული;

საზღვრის ფერი :#777 #fff #fff #777;

ქვემოთ, შედარებისთვის, ნაჩვენებია ღილაკი "ძებნა", სადაც ნათლად ჩანს, როგორ იცვლის ის გარეგნობას მისი მდგომარეობის მიხედვით.

ნახ.8 პასიური მდგომარეობა

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

აუცილებელია ვალიდაცია?

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

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

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

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

ახლა მოდით გადავიდეთ კოდების პირდაპირ შემოწმებაზე, ჯერ HTML, შემდეგ CSS.

როგორ შევამოწმოთ HTML კოდი მოქმედებისთვის

არსებითად, კოდის დადასტურების შემოწმება თავისთავად საკმაოდ მარტივია, როგორც ახლა ხედავთ. მაგრამ შეცდომების აღმოფხვრას, როგორც წესი, გარკვეული დრო სჭირდება. რა თქმა უნდა, თუ კოდი შედგება რამდენიმე სტრიქონისგან, მაშინ სირთულეები აქ ვერ წარმოიქმნება. მაგრამ, თუ ასობით და ათასობით მათგანია, მაშინ შეიძლება აქ დიდი შრომა მოგიწიოთ, ეს ყველაფერი დამოკიდებულია იმაზე, თუ რამდენად კარგად იყო შედგენილი კოდი. ამიტომ, უმჯობესია ამის გაკეთება უფრო ხშირად და ერთობლივად შეამოწმოთ ჯვარედინი თავსებადობა.

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

HTML კოდის შესამოწმებლად, უბრალოდ მიჰყევით ბმულს https://validator.w3.org/, სადაც გაიხსნება გვერდი შესამოწმებელი გვერდის მისამართის შეყვანის ველით.

ეკრანის სურათი 51

ღილაკზე „შემოწმება“ დაჭერის შემდეგ მივიღებთ შემოწმების შედეგს.

ამ შემთხვევაში, HTML კოდი მოქმედებს, მაგრამ არსებობს რეკომენდაცია, გამოიყენოთ lang ატრიბუტი მნიშვნელობით "რუ", რადგან გვერდი იყენებს რუსულს.

lang ატრიბუტი მიზნად ისახავს ბრაუზერებს დაეხმაროს აჩვენონ გარკვეული სიმბოლოები, როგორიცაა ციტატები, გამოყენებული ენის მიხედვით. აქედან გამომდინარე, ჩვენთვის სრულიად სასარგებლო იქნება მისი HTML კოდში ჩართვა. ჩვენ ამას გავაკეთებთ html ტეგში ისე, რომ ამ ატრიბუტს შეუძლია იმოქმედოს მთელ დოკუმენტზე.

როგორ გააკეთოთ ეს დამატება ნაჩვენებია შემდეგ ცხრილში.

"რუ" >

. . .

ახლა კი, ხელახლა რომ შევამოწმოთ, დავინახავთ, რომ კოდი სრულიად მოქმედი გახდა ყოველგვარი კომენტარის გარეშე.

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

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

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

როგორ შევამოწმოთ CSS კოდი მოქმედებისთვის

ჩვენ გადავხედეთ HTML კოდის ვალიდაციას. CSS კოდი განიხილება ზუსტად იმავე თანმიმდევრობით. მხოლოდ ამ შემთხვევაში უნდა გამოიყენოთ სხვა დამადასტურებელი გვერდი, რომელიც ამ შემთხვევისთვის მდებარეობს http://jigsaw.w3.org/css-validator/.

გავხსნათ და ისევე, როგორც წინა ჯერზე, შევიყვანოთ შესამოწმებელი გვერდის მისამართი და შემდეგ დააჭირეთ ღილაკს „შემოწმება“.

ამ შემოწმების შედეგი ნაჩვენებია ეკრანის სურათზე.

როგორც ხედავთ, ჩვენი CSS კოდი სრულად შეესაბამება სპეციფიკაციას ყოველგვარი შეცდომის გარეშე, რაც კარგი შედეგია.

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

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

ოჰ, ჩვენ ამას გავაკეთებთ საახალწლო არდადეგების შემდეგ.

და ბოლოს, შეგვიძლია ყველას მივულოცოთ მომავალი ახალი წელი! ახალ წელს კი გისურვებთ ჯანმრთელობას, სიყვარულს, სიხარულს, კეთილდღეობას და, რა თქმა უნდა, დიდ წარმატებებს საკუთარი ვებგვერდის შექმნაში, რომ შეძლოთ წარმატებით იმუშაოთ ინტერნეტში!

საიტის წყარო ფაილები

საიტის წყაროს ფაილები განახლებებით, რომლებიც განხორციელდა ამ სტატიაში, შეგიძლიათ გადმოწეროთ მიმაგრებულიდან დამატებითი მასალები.

ერთ-ერთ წინა სტატიაში ვისაუბრე. თუმცა, ყველამ არ იცის, რომ გარდა ამისა HTML-ის ვალიდატორი, Იქ არის ვალიდატორი ასევე CSS-ისთვის.

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

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

რომ შეამოწმეთ CSS ვალიდობა, თქვენ უნდა გამოიყენოთ ეს W3 სერვისი: http://jigsaw.w3.org/css-validator/.

მაშინვე ვიტყვი, რომ განსხვავებით HTML, კეთება CSS მოქმედებსბევრად უფრო მარტივია, რადგან ძირითადად არის მხოლოდ შეცდომები, გარდა , რომლებიც უმჯობესია თავიდან იქნას აცილებული საერთოდ.

ნება მომეცით შევაჯამოთ. საერთოდ არ არის აუცილებელი კოდის მოქმედების გაკეთება, მაგრამ მკაცრად გირჩევთ ამის გაკეთებას, რადგან ასეთი საიტი უფრო ადვილი იქნება საძიებო სისტემების მიერ ( HTML ვალიდობა), იმუშავეთ უფრო სწრაფად, ადვილად რედაქტირებისთვის და მოიპოვეთ პროფესიონალების პატივისცემა.

ვებ კოდის ვალიდობის შემოწმება ნიშნავს W3C სტანდარტებთან და სერთიფიკატებთან შესაბამისობის შემოწმებას.
W3C (World Wide Web Consortium) არის ვებ-გვერდის ტექნიკური შემქმნელები, რომლებიც შეიმუშავებენ სტანდარტებსა და სახელმძღვანელოებს კოდის დასაწერად. W3C სერთიფიკატები და სტანდარტები სავალდებულოა ყველასთვის, ვინც მუშაობს ინტერნეტში. საჭიროა კოდის მართლწერის საერთო სტანდარტები, რათა ქსელის ყველა აპლიკაცია დაუკავშირდეს ერთ ენობრივ სივრცეში, სტანდარტულ ენებზე და ესმოდეს ერთმანეთს ვებ დოკუმენტებთან მუშაობისას.
W3C არა მხოლოდ ქმნის ვებ სტანდარტებს, არამედ აქტიურად უწყობს ხელს მათ განხორციელებას.
W3C-ს აქვს ონლაინ სერვისები HTML/XHTML და CSS კოდების ნამდვილობის შესამოწმებლად.
W3C ვალიდატორების გამოყენებით თქვენი კოდის W3C სტანდარტებთან შესაბამისობის შემოწმება საუკეთესო გზაა.

უფასო ონლაინ სერვისები W3C-სგან კოდის მოქმედების შესამოწმებლად.
W3C-ის ვალიდიატორებს აქვთ ინტუიციური ინტერფეისი. მათთან მუშაობა მარტივი და მარტივია.
სერვისები შესაძლებელს ხდის შემოწმების განხორციელებას სამ რეჟიმში და, შესაბამისად, აქვს მხოლოდ სამი ღილაკი:
შეამოწმეთ URL
(შესამოწმებლად საჭიროა მიუთითოთ ინტერნეტში არსებული საიტის ნებისმიერი გვერდის მისამართი)
შეამოწმეთ ატვირთული ფაილი
(შესამოწმებლად თქვენ უნდა მიუთითოთ შემოწმებული ფაილის გზა)
შეამოწმეთ აკრეფილი ტექსტი
(შესამოწმებლად, თქვენ უნდა დააკოპიროთ და ჩასვით შემოწმებული კოდი ვალიდიატორის ფანჯარაში)

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

როგორ გამოვიყენოთ ონლაინ ვალიდატორები W3C-დან.
დაუკავშირდით ვალიდატორს მისამართზე:
(http://validator.w3.org/ - HTML ან XHTML ვალიდაციისთვის
http://jigsaw.w3.org/css-validator/ - CSS-ის შესამოწმებლად)
ვალიდატორის ფანჯარაში, რომელიც იხსნება, აირჩიეთ სამი გადამოწმების მეთოდიდან ერთი
(საიტის გვერდის URL, ლოკალური ფაილი ან აკრეფილი ტექსტი)
გადადით შესაბამის ჩანართზე
მიუთითეთ შესამოწმებელი ობიექტი
(შეიყვანეთ ვებ გვერდის URL, რომელსაც ამოწმებთ,
ან ლოკალურ კომპიუტერზე ფაილისკენ მიმავალი გზა,
ან ჩადეთ შესამოწმებელი კოდი, შესაბამისად)
დააჭირეთ ღილაკს "შემოწმება" და ნახეთ ტესტის შედეგი

W3C-ის სერვისები ამოწმებენ კოდს ნამდვილობისთვის და დაუყოვნებლივ მიუთითებენ შეცდომებზე, თუ არის ასეთი. თითოეული შეცდომა იქნება კომენტირებული. კომენტარები, სამწუხაროდ, ინგლისურ ენაზეა. ასე რომ, Google-ის თარჯიმანს შეუძლია დაეხმაროს მხოლოდ, საჭიროების შემთხვევაში, შეასწოროს კოდი და კვლავ შეამოწმოს შესაბამისობა.
W3C-ის ვალიდატორები სრულიად უფასო და ავტომატიზირებულია. მაშასადამე, თქვენ შეგიძლიათ ჩაქუჩით მათ შეცდომებზე თქვენი მუშაობით დიდი ხნის განმავლობაში და დაუსჯელად. სწორედ ამიტომ შეიქმნა ეს სერვისები.

ჩვეულებრივი ალტერნატივა W3C ვალიდიატორებისთვის.
ვებ კოდის შესამოწმებლად W3C ონლაინ სერვერების გარდა, HTML Validator გაფართოება Mozilla Firefox ბრაუზერისთვის ძალიან კარგ შედეგებს იძლევა. ბრაუზერში ასეთი დანამატის არსებობა აადვილებს ვებმასტერის მუშაობას და კიდევ ერთხელ ადასტურებს, რომ Mozilla Firefox არის „სამართავი“ ბრაუზერი.
mozilla-ს გაფართოება შეგიძლიათ ჩამოტვირთოთ აქ: http://users.skynet.be/mgueury/mozilla/

თქვენ შეგიძლიათ დააინსტალიროთ გაფართოება შემდეგნაირად:
- გაუშვით Firefox.
შემდეგი: მენიუ - ინსტრუმენტები - დანამატები - გაფართოებები.
და, უბრალოდ გადაიტანეთ და ჩამოაგდეთ გადმოწერილი ფაილი (xpi გაფართოება) ფანჯარაში, რომელიც იხსნება.
ამის შემდეგ გაფართოება ავტომატურად დაინსტალირდება.

ან (მეორე მეთოდი):
- გაუშვით Firefox.
შემდეგი: მენიუ - ფაილი - ფაილის გახსნა - მიუთითეთ გადმოწერილი ფაილის გზა.
ამის შემდეგ გაფართოება ისევ ავტომატურად დაინსტალირდება.

ინსტალაციის დასრულების შემდეგ, თქვენ უნდა გადატვირთოთ ბრაუზერი.
როდესაც გადატვირთავთ, გამოჩნდება ფანჯარა, რომელიც მოგთხოვთ აირჩიოთ ვებ გვერდების სკანირების მეთოდი:
"HTML Tidy" ან "SGML Parser" ან "Serial"
ჩვენ ვირჩევთ „SGML Parser“ მეთოდს, როგორც ყველაზე მოსახერხებელ და მისაღებ ვარიანტს. დააწკაპუნეთ შესაბამის ღილაკზე ახლა, ბრაუზერის ფანჯარაში, გამოჩნდება დანამატის მალსახმობი, ხოლო მის გვერდით არის ღილაკი დანამატის პარამეტრების მენიუსთვის.
მე მაქვს ის ზედა და მარჯვნივ:

HTML Validator Mozilla Firefox ბრაუზერისთვის მუშაობს სრულიად ავტომატურად. მას არ სჭირდება იმის ჩვენება, თუ რა უნდა შეამოწმოს. ის ამოწმებს ყველა დოკუმენტს, რომელიც გაიხსნება Mozilla Firefox-ში. ძალიან კომფორტულია. საკმარისია გადახედოთ პროგრამის ეტიკეტის ფერს, რათა გავიგოთ, არის თუ არა პრობლემები ღია დოკუმენტში.
ტესტის შედეგებიდან გამომდინარე, ხატის ფერი შეიძლება იყოს მწვანე, ყვითელი ან წითელი, რაც მიუთითებს შემდეგზე:
მწვანე - "შეცდომის გარეშე", ყველაფერი "კარგია"
ყვითელი - "შეცდომები არ არის, მაგრამ არის გაფრთხილებები"
წითელი - "შეცდომებია"

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

კეთილი იყოს თქვენი მობრძანება ვებმასტერების უფასო ბლოგში! ბოლო დროს ვისაუბრე იმაზე, თუ როგორ უნდა შევამოწმო და დღეს ვთავაზობ გავაგრძელოთ ვებ გვერდის ვალიდაციის თემა. მოდით შევამოწმოთ კასკადური სტილის ცხრილები (CSS) და HTML დოკუმენტები სტილის ფურცლებით ინტერნეტის ზოგადად მიღებული სტანდარტების შესაბამისობისთვის.

CSS სტილის ენის შემქმნელია World Wide Web Consortium (შემოკლებით W3C), ორგანიზაცია, რომელიც ავითარებს და ახორციელებს ტექნოლოგიის სტანდარტებს ინტერნეტში.

CSS (ინგლისური კასკადური სტილის ფურცლებიდან - კასკადური სტილის ფურცლები) არის ფორმალური ენა, რომელიც შექმნილია დოკუმენტის გარეგნობის აღსაწერად მარკირების ენის გამოყენებით.

W3C კონსორციუმის მიერ შემოთავაზებული სტილის შესამოწმებლად არის ძალიან სასარგებლო სერვისი. მოდით გადავიდეთ CSS Validation Service-ის მთავარ გვერდზე და შევამოწმოთ CSS-ის ვალიდობა.

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

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

1. შეამოწმეთ URI-ით - უბრალოდ მიუთითეთ გვერდის მისამართი;
2. შეამოწმეთ ატვირთული ფაილი - თქვენ უნდა აირჩიოთ ადგილობრივი CSS ფაილი;
3. შეამოწმეთ აკრეფილი ტექსტი - თქვენ უნდა შეიყვანოთ CSS კოდი სისწორის შესამოწმებლად.

დამატებითი ფუნქციები საშუალებას გაძლევთ მიუთითოთ გაფართოებული სკანირების პარამეტრები. აქ არის თითოეული მათგანის მოკლე შინაარსი:

• პროფილი - ჩამოთვლის ყველა მახასიათებელს და განხორციელების შესაძლებლობებს კონკრეტულ პლატფორმაზე. ნაგულისხმევი არჩევანი მიჰყვება ყველაზე ხშირად გამოყენებულ მესამე დონის სტანდარტს, CSS3.
• გაფრთხილებები — ანგარიშების დეტალების დაყენება: ყველა ან ყველაზე მნიშვნელოვანი გაფრთხილება, რეგულარული ანგარიში, გაფრთხილებების ჩვენების გარეშე. სერვისს შეუძლია აწარმოოს ორი ტიპის შეტყობინებები: შეცდომები და გაფრთხილებები. თუ ტესტირებადი CSS არ შეესაბამება რეკომენდაციას, ეს შეცდომაა. გაფრთხილებები განსხვავდება შეცდომებისგან იმით, რომ ისინი არ არის სპეციფიკაციის პრობლემები.
• Environment — მიუთითეთ, სად გამოიყენება სტილები, როგორიცაა ხელის მოწყობილობაზე, ეკრანზე, ტელევიზორზე ან ბეჭდურ გვერდზე. რეკომენდირებულია ყველა სტილის გარემოს ტესტირება.
• გამყიდველის გაფართოებები - მიზანშეწონილია დატოვოთ ისინი ნაგულისხმევად, შესაძლებელია მხოლოდ შეცდომების ან მხოლოდ გაფრთხილებების ჩვენება. ბრაუზერის გამყიდველები ზოგჯერ ახორციელებენ ექსპერიმენტულ CSS თვისებებს და იყენებენ შემდეგ პრეფიქსებს მათ მხარდასაჭერად: -moz- (Firefox-ისთვის), -webkit- (Chrome-სთვის), -ms- (Internet Explorer-ისთვის), -o- (Oper-სთვის) და სხვები.

მე ვაზუსტებ URL მისამართს, ვაკონფიგურირებ დამატებით გადამოწმების პარამეტრებს და დასაწყებად დააჭირეთ ღილაკს „შემოწმება“. ჰოო! CSS შემოწმების შედეგი: შეცდომები არ მოიძებნა!

სამწუხაროდ, ჩვენ ვერ ავიცილეთ გაფრთხილებები, რომლებიც დაკავშირებულია უცნობ მომწოდებლის გაფართოებასთან. არაუშავს, CSS შემოწმების სერვისი უფასო, საიმედო და სასარგებლო პროგრამაა, მაგრამ, როგორც ნებისმიერ პროგრამას, მას შეიძლება ჰქონდეს ხარვეზები.

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

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

ქვემოთ მოცემულია ინფორმაცია მოქმედი დამოწმებული CSS-ის შესახებ. ნუ იჩქარებთ მის კოპირებას და თქვენს ვებსაიტზე გამოყენებას! დიახ, სწორი CSS-ის მოცემულ ვერსიაში არ არის შეცდომები და თვისებები, რომელთა გამოყენება გამოიწვევს გაფრთხილებებს, კოდი 100%-ით გაივლის სრულ შემოწმებას. მაგრამ ეფექტი მიიღწევა ამ თვისებების მოხსნით, ამიტომ საიტს შეიძლება ჰქონდეს ჩვენების პრობლემები ან მოლოდინები შეიძლება არ ემთხვეოდეს რეალობას.

ეს სერვისი მასპინძლობს და ინახება W3C სერვერზე, მაგრამ ამავე დროს არ არის ოფიციალური CSS შემოწმების ინსტრუმენტი.

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

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