2016-12-29
ჩვენ ვაკეთებთ ღილაკების ანიმაციას და ვამოწმებთ საიტს HTML და CSS კოდის ნამდვილობაზე
გამარჯობა ძვირფასო სტუმარო!
დღეს ჩვენ განვიხილავთ შექმნილი ვებ გვერდის მაგალითის გამოყენებით, თუ როგორ შეგიძლიათ შეამოწმოთ საიტი ვალიდურობისთვის, კერძოდ, HTML და CSS ენების დადგენილ სპეციფიკაციებთან შესაბამისობაში.
გარდა ამისა, შემოწმებამდე ჩვენ განვახორციელებთ CSS სტილის ფურცლის გარკვეულ გადახედვას გვერდითი ზოლის ღილაკების „ანიმაციასთან“ დაკავშირებულ ნაწილში, სადაც სტატიკური ღილაკების ინტერაქტიულობას შევცვლით, მათი მდგომარეობიდან გამომდინარე, მათ გარეგნობას შევცვლით - პასიური, აქტიური და დაჭერილი.
- ღილაკების სამგანზომილებიანი გაკეთება
- ღილაკების ინტერაქტიული დაყენება
- გჭირდებათ დადასტურება
- როგორ გადავამოწმოთ HTML კოდი
- როგორ გადავამოწმოთ CSS კოდი
- საიტის წყარო ფაილები
ღილაკების სამგანზომილებიანი გაკეთება
წინა სტატიაში ჩვენ შევქმენით მთავარი შინაარსის არე, რათა შეესაბამებოდეს მთავარი გვერდის განლაგებას. ამავდროულად, გვერდითა ზოლში არის ღილაკები, რომლებიც სტატიკურია და ჰგავს ჩვეულებრივ ბრტყელ ყავისფერ ოთხკუთხედს მომრგვალებული კუთხეებით.
ქვემოთ მოცემულია გვერდითი ზოლის ფრაგმენტი ამ ღილაკებით.
ღილაკების „ანიმაციისთვის“, ჯერ CSS სტილების დახმარებით მივცეთ მათ გარკვეული მოცულობა. ჩვენ ამას გავაკეთებთ ხაზოვანი გრადიენტის თვისების გამოყენებით, რომელიც ადრე გამოიყენებოდა როტაციის, საძიებო და გამოწერის ბლოკების დიზაინში.
ხაზოვანი გრადიენტის მნიშვნელობები განისაზღვრება შემდეგნაირად:
1. ფერების ჩრდილებს დავაყენებთ ქვემოდან ზევით, დაწყებული ღილაკის მთავარი ფერით უფრო მუქი ფერის. იმის დასადგენად, თუ რომელი ფერი გამოვიყენოთ გრადიენტის დასაწყისში, ვიყენებთ გრაფიკული რედაქტორის ხელსაწყოს, ამ შემთხვევაში Photoshop-ს.
ამისათვის, ღია დიზაინის განლაგების დოკუმენტით, აირჩიეთ "ფერების ამომრჩევი", გადაიტანეთ კურსორი ღილაკის საჭირო ზონაზე, განსაზღვრეთ საბაზისო ფერი და შემდეგ გამოიყენეთ "ფერის ამომრჩევი" ხელსაწყოები მუქი ფერის შესარჩევად. იგივე ყავისფერი ჩრდილში. ჩვენს შემთხვევაში, ავიღოთ ფერი "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;
სასაზღვრო სტილის : მყარი;
სასაზღვრო-ფერი : #ddbebe # 241616 # 241616 #ddbebe;
აქ შეიძლება აღინიშნოს, რომ საზღვრები წარმოდგენილია თვისებების კომბინაციით, რომელიც განსაზღვრავს სისქეს (საზღვრის სიგანე მნიშვნელობასთან ერთად 2 პიქსელი), სტილი (საზღვრის სტილი) მნიშვნელობით, რომელიც განსაზღვრავს მყარ საზღვარს და ფერებს (საზღვრის ფერი) ოთხივე მხარეს.
მოდით განაახლოთ ბრაუზერი და ვნახოთ, როგორ გამოიყურება ღილაკები ახლა.
როგორც ხედავთ, ღილაკები, როგორც ჩანს, აწეულია ამ მდგომარეობაში.
ახლა ვცადოთ ღილაკები დაჭერილ მდგომარეობას გავხადოთ. ამისათვის ჩვენ ამოვიღებთ ჩრდილს და შევცვლით საზღვრების ფერს. ამ შემთხვევაში, ჩვენ გამოვიყენებთ სპეციალურ სელექტორს: hover ფსევდოკლასი, რომელიც შეესაბამება აქტიურ მდგომარეობას.
CSS ღილაკების აქტიური მდგომარეობისთვის ასე გამოიყურება.
შეყვანა: ჰოვერი {
ყუთი-ჩრდილი : არცერთი;
სასაზღვრო-ფერი : # a76d6d # a76d6d # a76d6d # a76d6d;
ამ შემთხვევაში ჩვენ ისევ შევცვლით საზღვრების ფერს და დავამატებთ ჩრდილს, მხოლოდ ამ შემთხვევაში იქნება შიდა და ოფსეტური გარეშე. ფსევდო კლასის სელექტორი ასევე შეიცვლება: აქტიური, დაჭერილი მდგომარეობის შესაბამისი.
დაჭერილი მდგომარეობის 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 ვალიდობა), უფრო სწრაფი მუშაობა, ადვილი რედაქტირება და პროფესიონალების პატივისცემა.
ახლახან მივიღე რამდენიმე შეკითხვა მომხმარებლებისგან ჩემი თემების მართებულობასთან და ზოგადად ვალიდაციასთან დაკავშირებით. ამ პოსტში მინდა მათ ვუპასუხო.
რა არის ვალიდობა?
ითვლება, რომ კოდის ვალიდობა არის ნებისმიერი კოდის ერთიანი, უნივერსალური მახასიათებელი.
სინამდვილეში, ვალიდობა არის დოკუმენტის html კოდის შესაბამისობა წესების გარკვეულ კომპლექტთან, რომელიც მითითებულია doctype-ში ან ნაგულისხმევია HTML5-ში.
ანუ ვალიდობა ფარდობითი ცნებაა, ვინაიდან წესები განსხვავებულია და მათაც აქვთ მოთხოვნები.
უფრო გასაგები რომ იყოს, მე მივცემ მაგალითს, რომელიც აღმოვაჩინე საიტზე css-live.ru:
საცხოვრებელი კორპუსების და ატომური ელექტროსადგურების მშენებლობაზე გამოიყენება სხვადასხვა SNiP-ები (სამშენებლო კოდები და რეგულაციები), შესაბამისად, ერთი წესების მიხედვით მოქმედი დოკუმენტი შეიძლება არ იყოს მოქმედი სხვაგვარად (ატომური ელექტროსადგური, რომელიც აშენებულია საცხოვრებელი კორპუსის სტანდარტების მიხედვით. კარგი იქნებოდა!).
Doctype ჩვეულებრივ მიუთითებს დოკუმენტზე, რომელზედაც დაგეგმილია html ვალიდაცია, მაგრამ მისი არჩევა შესაძლებელია პრაგმატული მიზეზების გამო ბრაუზერის ოპტიმალური რეჟიმის ასარჩევად.
XHTML5 შეიძლება საერთოდ არ ჰქონდეს doctype, მაგრამ იყოს მოქმედი.
რა არის დადასტურება?
მარტივი სიტყვებით, ვალიდაცია არის კოდის შემოწმებისა და არჩეულ დოქტიპთან (DTD) შესაბამისობაში მოყვანის პროცესი.
როგორ შემოწმდება ვალიდობა?
HTML კოდის ვალიდობა მოწმდება ხელსაწყოთი, რომელსაც ეწოდება Validator.
ყველაზე ცნობილი w3c ვალიდატორი არის https://www.w3.org.
w3c ვალიდატორი ახორციელებს რამდენიმე კოდის შემოწმებას.
მთავარი პირობა:
- სინტაქსის შეცდომების შემოწმება:
მაგალითი habrahabr.ru/post/101985-დან:მიუხედავად იმისა, რომ სწორი სინტაქსია არის არასწორი HTML ტეგი
ასე რომ, სინტაქსის შემოწმება მინიმალურად სასარგებლოა კარგი HTML-ის დასაწერად. - ტეგების ბუდობის შემოწმება:
HTML დოკუმენტში ტეგები უნდა დაიხუროს გახსნის საპირისპირო თანმიმდევრობით. ეს შემოწმება განსაზღვრავს დახურულ ან არასწორად დახურულ ტეგებს. - HTML ვალიდაცია DTD-ის მიხედვით:
შემოწმება, თუ როგორ ემთხვევა კოდი მითითებულ DTD - დოკუმენტის ტიპის განსაზღვრა (doctype). იგი მოიცავს ტეგების სახელების, ატრიბუტებისა და ტეგის „ჩაშენების“ შემოწმებას (ერთი ტიპის ტეგები სხვა ტიპის ტეგებში). - შეამოწმეთ უცხო ელემენტები:
ის აღმოაჩენს ყველაფერს, რაც კოდშია, მაგრამ არ არის დოქტიპში.
მაგალითად, მორგებული ტეგები და ატრიბუტები.
CSS კოდის მოქმედების შესამოწმებლად, არის css ვალიდატორი - http://jigsaw.w3.org/css-validator.
კოდის მოქმედება- ეს არის მექანიკური შემოწმების შედეგი ფორმალური OB-ების არარსებობისთვის, დადგენილი წესების მიხედვით.
თქვენ უნდა გესმოდეთ, რომ დადასტურება არის ინსტრუმენტი და არა ღირებულება.
განლაგების გამოცდილმა დიზაინერებმა, როგორც წესი, იციან სად უნდა დაარღვიონ HTML ან CSS ვალიდაციის წესები და სად არა და რა ემუქრება (ან არ ემუქრება) ამა თუ იმ ვალიდაციის შეცდომას.
მაგალითები, როდესაც საიტი აკეთებს არასწორ კოდს:
- უფრო მოსახერხებელი და სწრაფი - მორგებული ატრიბუტები Javascrip / AJAX ან
- SEO ოპტიმიზირებულია - ARIA მარკირება.
ცხადია, რომ ვალიდურობას აზრი არ აქვს.
როგორც წესი, განლაგების გამოცდილი დიზაინერები იცავენ შემდეგ წესებს:
- კოდში არ უნდა იყოს უხეში შეცდომები.
- მინორი შეიძლება მოითმინოს, მაგრამ მხოლოდ საპატიო მიზეზების გამო.
რაც შეეხება html / CSS ვალიდაციის შეცდომებს:
ვალიდაციის შეცდომები (OB) შეიძლება დაიყოს ჯგუფებად:
- OB-ები შაბლონის ფაილებში:
მათი პოვნა და გამოსწორება არ არის რთული.
თუ რომელიმე მცირე შეცდომა ხელს უწყობს საიტის უფრო ფუნქციონირებას ან უფრო სწრაფად, შეგიძლიათ დატოვოთ ისინი. - OB მესამე მხარის სკრიპტებში, რომლებიც დაკავშირებულია საიტზე:
მაგალითად, Vkontakte ვიჯეტი, Twitter სკრიპტი ან ვიდეო ფაილები YouTube-დან.
მათი გამოსწორება არანაირად შეუძლებელი იქნება, რადგან ეს ფაილები და სკრიპტები განთავსებულია სხვა საიტებზე და მათზე წვდომა არ გვაქვს. - CSS წესები, რომლებსაც ვალიდატორი არ ესმის:
ვალიდატორი ამოწმებს, რომ საიტის კოდი ემთხვევა HTML ან CSS-ის კონკრეტულ ვერსიას.
თუ თქვენს შაბლონში იყენებდით CSS ვერსიის 3-ის წესებს და ვალიდატორი ამოწმებს შესაბამისობას 2.1 ვერსიასთან, მაშინ ის ჩათვლის ყველა CSS3 წესს შეცდომად, თუმცა ეს ასე არ არის. - OV-ები, რომლებიც აუცილებლად უნდა დარჩეს საიტზე სასურველი შედეგის მისაღებად. Მაგალითად:
- noindex ტეგები. ისინი არ არის მოქმედი, მაგრამ ისინი ძალიან აუცილებელია და თქვენ უნდა შეეგუოთ ამას.
- ხაკი. ზოგიერთ ბრაუზერში საიტის სწორი ჩვენების მისაღებად, ზოგჯერ თქვენ უნდა გამოიყენოთ ჰაკები - კოდი, რომელიც მხოლოდ გარკვეულ ბრაუზერს ესმის.
- თავად ვალიდატორის შეცდომები.
ხშირად ის ვერ ხედავს რაიმე ტეგს (მაგალითად, თეგების დახურვა) და აცნობებს OB-ს შესახებ, სადაც ის არ არის.
გამოდის, რომ სამუშაო ადგილზე თითქმის ყოველთვის იქნება რაიმე სახის OB.
უფრო მეტიც, შეიძლება ბევრი მათგანი იყოს.
მაგალითად, Google-ის, Yandex-ისა და mail.ru-ს მთავარი გვერდები შეიცავს რამდენიმე ათეულ შეცდომას.
მაგრამ, ისინი არ არღვევენ საიტების ჩვენებას ბრაუზერებში და არ ერევიან მათ მუშაობაში.
ყველაფერი რაც ზემოთ დაწერილი ეხება ჩემს თემებსაც.
რთული თემებია:
- WordPress ფუნქციები (მაგალითად the_category ())რომელიც იძლევა არასწორ კოდს.
- ვიდეო გამომავალი ვიდეო ჰოსტინგის საიტებიდან, მაგალითად, YouTube-დან და ბევრი OV არის YouTube კოდში, რომლებზეც გავლენას ვერც თქვენ და ვერც მე ვერ მოვახერხეთ.
- სოციალური ქსელების ღილაკები, რომლებიც დაკავშირებულია ამ ქსელების სკრიპტების გამოყენებით და შეიცავს OB.
- CSS3 და HTML5 წესები, რომლებსაც ძველი ვალიდატორები შეცდომებად თვლიან.
ამავდროულად, CSS3 და HTML5 ვერსიების ვალიდატორები ძველ წესებს შეცდომებად თვლიან :). - ზოგჯერ, Internet Explorer-ში ან სხვა ბრაუზერების ძველ ვერსიებში სწორი ჩვენების მისაღწევად, თქვენ უნდა გამოიყენოთ ეგრეთ წოდებული hacks - კოდი, რომელიც მხოლოდ კონკრეტულ ბრაუზერს ესმის, რათა დაწეროთ წესები საიტის ჩვენების სპეციალურად ამ ბრაუზერისთვის.
შედეგად, თქვენ შეგიძლიათ მიიღოთ სრულიად მოქმედი კოდი მხოლოდ მაშინ, როდესაც აკრიფებთ ძალიან მარტივ თემებს, ე.ი. ისეთები, რომლებიც შეიცავს ფუნქციების მინიმალურ რაოდენობას.
ჩემი რომელიმე თემის განლაგების დასრულების შემდეგ, მე ყოველთვის ვამოწმებ მას ვალიდატორთან და ვასწორებ ყველა OB-ს, რომელიც შეიძლება გამოსწორდეს თემის ფუნქციონირების დაკარგვის გარეშე.
ანუ, თუ არის არჩევანი სამუშაო ფუნქციურობასა და ვალიდობას შორის, მე ვირჩევ ფუნქციონირებას.
თუ თქვენ აკრეფთ თქვენს თემებს, გირჩევთ იგივე გააკეთოთ.
ჩემი გადმოსახედიდან (და ასევე განლაგების დიზაინერების უმეტესობის თვალსაზრისით), html / CSS ვალიდაციისადმი დამოკიდებულება, როგორც საბოლოო ჭეშმარიტება, არასწორია. აუცილებელია მხოლოდ იმ OV-ების გამოსწორება, რომლებიც:
- ბრაუზერის მიერ გვერდის სწორად ჩვენების თავიდან აცილება (დახურული და არასწორად ჩასმული ტეგები).
- შეანელეთ გვერდის ჩატვირთვა (არასწორად დაკავშირებული სკრიპტები).
- შეიძლება დაფიქსირდეს თემის დარღვევის გარეშე.
ვიმედოვნებ, რომ ყველა დადასტურების კითხვას ვუპასუხე.
მე უკვე აღვნიშნე რა არსებობს html კოდის მოქმედების თვალსაზრისით. ეს დროდადრო მაინც უნდა გაკეთდეს, რადგან მოქმედებისროგორც html ასევე cssძლიერად მოქმედებს საიტზე, ანუ თქვენი რესურსის იდენტური ჩვენება სხვადასხვა ბრაუზერში (ზოგადი სტატია პოპულარული და საუკეთესო ვებ ბრაუზერების შესახებ, რომელიც, იმედი მაქვს, დაგეხმარებათ არჩევანის გაკეთებაში ერთი მათგანის სასარგებლოდ).
გარდა ამისა, მე უკვე აღვნიშნე, მიუხედავად იმისა, რომ საძიებო სისტემები ამ ეტაპზე არ ითვალისწინებენ CSS და HTML კოდების შეცდომებს საიტების რეიტინგისას, მომავალში ყველაფერი შეიძლება შეიცვალოს და შეგიძლიათ მიიღოთ სიტუაცია, სადაც ლამაზად შექმნილი, შექმნილია ხალხის პროექტმა შეიძლება დაკარგოს პოტენციური აუდიტორიის ნაწილი იმის გამო, რომ მან ვერ გაიარა ვალიდაცია. კარგი, ეს ყველაფერი ლექსია, აქ ყველა თავად წყვეტს, რამდენად მნიშვნელოვანია ყველაფერი.
ვფიქრობ, თქვენ ახლა იცნობთ ჩემს აზრს, რადგან მე ვწერ ამ სტატიას, რაც იმას ნიშნავს, რომ ყურადღების ღირსად მიმაჩნია სეო ოპტიმიზაციის ისეთ მნიშვნელოვან ნაწილთან ერთად, როგორიცაა ბმულების და ტექსტის ფრაგმენტების დახურვა Google-ის ინდექსაციისგან და Yandex, ან კომპეტენტური გამოყენება.
კარგი, როგორც ამბობენ, უფრო არსებითად. პირველი, ცოტა რამ CSS-ის შესახებ. CSS ( კასკადური სტილის ფურცლები- Cascading Style Sheets) არის სტილის ენა, რომელიც განსაზღვრავს HTML დოკუმენტების ჩვენებას. ანუ, თუ HTML აღწერს გვერდის შინაარსს, მაშინ CSS აფორმატებს ამ კონტენტს, სხვა სიტყვებით რომ ვთქვათ, აძლევს მას სრულ იერს. სხვათა შორის, თქვენი საიტის სიჩქარის გასაუმჯობესებლად სასარგებლო იქნება თქვენი თემის ფაილების ჰოსტინგი.
W3C ვალიდატორი: CSS კოდის დამოწმება
ახლა მოდით გადავიდეთ იმაზე, თუ როგორ შევამოწმოთ დოკუმენტის ვალიდობა (ჩვენი ვებსაიტის ან WordPress ბლოგის გვერდები). ასევე, როგორც HTML კოდის შემოწმების შემთხვევაში, გამოვიყენებთ ერთ-ერთ ინსტრუმენტს. მოდით გადავიდეთ CSS ვალიდაციის სერვისზე:
როგორც ხედავთ, არსებობს სამი გზა CSS-ის მოქმედების შესამოწმებლად W3C ვალიდიატორის გამოყენებით. სხვათა შორის, გაითვალისწინეთ, რომ ვალიდატორის გვერდის ბოლოში არის ჩანაწერი, რომელიც მიუთითებს, რომ HTML კოდი უნდა შემოწმდეს ვალიდობისთვის. მხოლოდ ორივე სწორი კოდი უზრუნველყოფს მთელი დოკუმენტის სისწორეს. შესამოწმებლად, შეიყვანეთ URL. მაგალითად, შევამოწმოთ ჩემი ბლოგის მთავარი გვერდი:
W3C ვალიდიატორის მიერ CSS კოდის შეცდომებზე შემოწმების შედეგს არ შეიძლება ეწოდოს იმედგაცრუებული, რადგან მხოლოდ 2 შეცდომა იქნა ნაპოვნი. რა თქმა უნდა, ეს შეცდომები განსხვავებულია, თითოეულ შემთხვევაში ისინი სხვადასხვა შედეგებს იწვევს. ვნახოთ, რა შეგვიძლია გავაკეთოთ მათ აღმოსაფხვრელად. აქ ყველაფერი მოსახერხებელია, რადგან W3C ვალიდატორი იძლევა არა მხოლოდ ბმულს არასწორი კოდის შემცველ დოკუმენტზე, არამედ ხაზის ნომერზე, რომელზეც ის მდებარეობს. სხვათა შორის, ქვემოთ, გაფრთხილებებისა და შეცდომების სიის შემდეგ, გამოჩნდება სწორი CSS კოდის ვარიანტი, რომლის გამოყენებაც შესაძლებელია:
დოკუმენტის ბმული არის CSS ვალიდაციის შედეგების გვერდზე css.ieრომელიც მდებარეობს თემის საქაღალდეში. იგი შეიქმნა ბრაუზერის ბლოგის მისაღწევად (თანმიმდევრული ჩვენება პოპულარულ ბრაუზერებში). უფრო მეტიც, ეს არის Internet Explorer-ის სხვადასხვა მოდიფიკაციისთვის, რომელიც განიცდის სხვადასხვა „ჯამბებს“ საიტის იერსახის დამახინჯების მხრივ, განსაკუთრებით მისი ძველი ვერსიებისთვის (IE9 ამ მხრივ ბევრად უკეთესია). ბრაუზერის ჯვარედინი თავსებადობა ძალიან მნიშვნელოვანია პროექტის წინსვლისთვის, მაგრამ შემოწმების შემდეგ აღმოჩნდა, რომ ეს დოკუმენტი შეიცავს თვისებებს, რომლებიც არ შეესაბამება W3C სტანდარტებს.
ამრიგად, ჩვენ ვიღებთ 3 და 12 ხაზებს, რომლებიც შეიცავს შეცდომებს. მათ გამოსასწორებლად, თქვენ უნდა წაშალოთ ანალიზის შეცდომა html (ფილტრი: გამოხატულება (document.execCommand ("BackgroundImageCache", false, true));)და ქონება .ზუმი... ახლა არ შევალ პროგრამირებისა და საიტების განლაგების სირთულეებში, მხოლოდ აღვნიშნავ, რომ ქონება გამოხატულებახელს უწყობს ფონის სურათების შემაშფოთებელი მბჟუტავი ეფექტის მოშორებას, რომელიც ჩნდება IE6-ში.
ანუ ბრაუზერში, რომლის გამოყენებაც ფუჭდება და შემდგომ ვერსიებში ეს „გაუქმება“ აღარ შეინიშნება. დაუყოვნებლივ უნდა ვთქვა, რომ ამ "მედიკამენტს" გამოვიყენებ გარკვეული დროის განმავლობაში, სანამ პოტენციური ვიზიტორების რაოდენობა IE6-ით არ მიაღწევს მინიმალურ დონეს. თუმცა, სიცხადისთვის, რომ გაჩვენოთ, როგორ რეაგირებს W3C ვალიდატორი ამაზე, მე მას წავშლი.
.zoom თვისება, რომელიც ადგენს ელემენტის მასშტაბირების ფაქტორს, რომელიც არ არის W3C საერთაშორისო სტანდარტის ნაწილი, მხარდაჭერილია Opera, Safari ბრაუზერების ძალიან ძველი ვერსიებით, მათ შორის IE8(მე-9 ვერსია თითქმის მთლიანად „კანონმორჩილია“, ასე რომ, იმედი მაქვს, მალე ვებმასტერები გათავისუფლდებიან ჰაკის გამოყენების აუცილებლობისგან, ანუ დამატებითი კოდებისგან, რათა მიაღწიონ ბრაუზერის მაქსიმალური თავსებადობას). ახლა ვნახოთ არასწორი ელემენტების შემცველი დოკუმენტი და გავასწოროთ:
ეს დოკუმენტი მდებარეობს ჩემს ღრუბლიანი თემის საქაღალდეში, მე ვშლი ზემოხსენებულ ელემენტებს, რომლებმაც ვერ გაიარეს ვალიდაციის შემოწმება. გარდა ამისა, ვალიდაციის შემოწმების შედეგებში, შეცდომების გარდა, ასევე იყო მრავალი ე.წ.
მაგალითად, მე შევეცდები ნათლად ვაჩვენო, თუ როგორ უნდა მოვიშოროთ მათგან ყველაზე გავრცელებული და გზად ავხსნა მათი მნიშვნელობა. როგორც ხედავთ, W3C ვალიდატორი აფრთხილებს ტექსტისა და ფონის იგივე ფერების არსებობის შესახებ. უნდა ითქვას, რომ ეს ზოგადად არასასურველია ნებისმიერ შემთხვევაში, რადგან საძიებო სისტემებმა შეიძლება მიიჩნიონ ეს მდგომარეობა, როგორც ინფორმაციის დამალვა, რაც სავსეა სერიოზული სანქციებით.
რა თქმა უნდა, ეს ყოველთვის ასე არ არის, მაგრამ ამ საშიშროების დაფასება არ შეიძლება. ასე რომ, პირდაპირ გადავიდეთ სიტუაციის გამოსწორებაზე. თქვენი საუკეთესო ვარიანტია ფაილის კოპირება სტილი.cssთქვენი თემა HTML და PHP რედაქტორის რვეულში ++, რომელზეც მე ვისაუბრე და რაც ამარტივებს სტრიქონის ნომრით ძიებას:
ახლა ჩვენ ვიცით, სად მდებარეობს ეს ხაზები თქვენს თემატურ ფაილში, შეცვალეთ ფერი ჩრდილის ოდნავ შეცვლით. თექვსმეტობით ფერში #ffffff წარმოადგენს თეთრს. ვცვლით შემდეგნაირად: ბოლო f-ის ნაცვლად შევიყვანთ d-ს, ამიტომ ვიღებთ თეთრის ოდნავ განსხვავებულ ელფერს; ახლა ცვლილებები არ იქნება შესამჩნევი მომხმარებლებისთვის, მაგრამ საძიებო სისტემები დაინახავენ განსხვავებას:
ასე შეგიძლიათ შეასწოროთ თქვენი რესურსის გვერდების CSS კოდის არასწორი ნაწილები. ანალოგიურად ვხვდებით დანარჩენ ნაწილებს, რომლებიც მონიშნულია გაფრთხილებებით და რომლებიც საჭიროებს გასწორებას, რაც შეეხება გაფრთხილებებს 483-ე სტრიქონთან დაკავშირებით (სხვათა შორის, საკმაოდ ცოტა იყო, დაახლოებით 10). შემოწმებისას აღმოვაჩინე, რომ მიზეზი იყო WP Page Numbers მოდული, რომელიც უზრუნველყოფს გვერდის ნავიგაციას.
ამან მიბიძგა ამ მოდულის დეაქტივაციისკენ და იყო მიზეზი იმისა, რომ საბოლოოდ შევცვალე იგი კოდის ინექციით, რაც გადადგმული ნაბიჯი იყო სერვერის დატვირთვის შესამცირებლად. როგორც კი ეს გავაკეთე, გაფრთხილებები ამ კონკრეტული მოდულის მიერ კოდის მოქმედების დარღვევასთან დაკავშირებით მაშინვე გაქრა მეორე შემოწმების შემდეგ. ზემოთ მოყვანილი ჟესტების შემდეგ, ჩვენ ხელახლა ვამოწმებთ CSS ვალიდობას W3C ვალიდატორის გამოყენებით:
ახლა თქვენ იცით, როგორ შეამოწმოთ CSS დოკუმენტის (საიტის ან ბლოგის ვებ გვერდი) ვალიდობა W3C ვალიდიატორის გამოყენებით. და ბოლოს, მინდა აღვნიშნო, რომ ყველა თავად წყვეტს CSS კოდის მოქმედების შემოწმების ხარისხს და სიხშირეს, ეს ყველაფერი დამოკიდებულია გარემოებებზე, მაგრამ მიუხედავად ამისა, დროდადრო ეს უნდა გაკეთდეს უშეცდომოდ, ჩემი ღრმა რწმენით. . გამოიწერეთ ბლოგის განახლებები, რომ მიიღოთ ახალი მასალები ელექტრონული ფოსტით. ნება მომეცი შვებულება წავიდე, იმედია ცოტა ხნით დავშორდებით.
ვალიდაცია არის CSS კოდის გადამოწმება CSS2.1 ან CSS3 სპეციფიკაციის წინააღმდეგ. შესაბამისად, სწორ კოდს, რომელიც არ შეიცავს შეცდომებს, ეწოდება მოქმედი, ხოლო რომელიც არ აკმაყოფილებს სპეციფიკაციას, ეწოდება არასწორი. კოდის შესამოწმებლად ყველაზე მოსახერხებელი გზაა ვებგვერდი. http://jigsaw.w3.org/css-validator/, ამ სერვისის გამოყენებით შეგიძლიათ მიუთითოთ დოკუმენტის მისამართი, ატვირთოთ ფაილი ან შეამოწმოთ აკრეფილი ტექსტი. სერვისის დიდი პლუსია რუსული და უკრაინული ენების მხარდაჭერა.
შეამოწმეთ URI
ეს ჩანართი საშუალებას გაძლევთ მიუთითოთ ინტერნეტში განთავსებული გვერდის მისამართი. თქვენ არ გჭირდებათ http: // პროტოკოლის დაწერა, ის ავტომატურად დაემატება (ნახ. 1.42).
ბრინჯი. 1.42. დოკუმენტის შემოწმება მისამართზე
მისამართის შეყვანის შემდეგ დააჭირეთ ღილაკს "შემოწმება" და გამოჩნდება ორი წარწერა: "გილოცავთ! შეცდომები არ მოიძებნა "თუ წარმატებულია, ან" უკაცრავად, ჩვენ ვიპოვეთ შემდეგი შეცდომები "თუ კოდი არასწორია. შეცდომის ან გამაფრთხილებელი შეტყობინებები შეიცავს ხაზის ნომერს, ამომრჩეველს და შეცდომის აღწერას.
შეამოწმეთ ატვირთული ფაილი
ეს ჩანართი გაძლევთ საშუალებას ჩატვირთოთ HTML ან CSS ფაილი და შეამოწმოთ იგი შეცდომებზე (სურათი 1.43).
ბრინჯი. 1.43. ფაილის შემოწმება ჩატვირთვისას
სერვისი ავტომატურად ცნობს ფაილის ტიპს და, თუ მითითებულია HTML დოკუმენტი, ამოიღებს სტილს მისგან დასადასტურებლად.
შეამოწმეთ აკრეფილი ტექსტი
ბოლო ჩანართი განკუთვნილია HTML ან CSS-კოდის პირდაპირი შეყვანისთვის, ხოლო მხოლოდ სტილი შემოწმდება (ნახ. 1.44).
ბრინჯი. 1.44. შეყვანილი კოდის შემოწმება
ეს ვარიანტი, როგორც ჩანს, ყველაზე მოსახერხებელია კოდით სხვადასხვა ექსპერიმენტების ჩასატარებლად ან მცირე ფრაგმენტების სწრაფად შესამოწმებლად.
CSS ვერსიის არჩევა
CSS3 ამატებს სტილის ბევრ ახალ თვისებას წინა ვერსიასთან შედარებით, ამიტომ კოდის ვალიდაცია უნდა იყოს სპეციფიკური ვერსიისთვის. ნაგულისხმევად, სერვისი განსაზღვრავს CSS2.1-ს, ასე რომ, თუ გსურთ შეამოწმოთ თქვენი კოდი CSS3-თან მიმართებაში, უნდა მიუთითოთ ის პირდაპირ. ამისათვის დააჭირეთ ტექსტს "დამატებითი ფუნქციები" და გახსნილ ბლოკში სიიდან "პროფილი" აირჩიეთ CSS3.
ბრინჯი. 1.45. CSS ვერსიის მითითება შესამოწმებლად
იდენტიფიკატორები და კლასები
დროდადრო იმართება დებატები განლაგებაში იდენტიფიკატორების გამოყენების მიზანშეწონილობის შესახებ. მთავარი მიზეზი ის არის, რომ იდენტიფიკატორები განკუთვნილია ვებ გვერდზე ელემენტების წვდომისა და მანიპულირებისთვის, ხოლო კლასები უნდა იქნას გამოყენებული ექსკლუზიურად ელემენტების სტილის შესაცვლელად. ნამდვილად არ არის განსხვავება, თუ რა სტილში შედის, მაგრამ არის რამდენიმე რამ, რაც უნდა გვახსოვდეს იდენტიფიკატორებისა და კლასების შესახებ, ისევე როგორც ხარვეზები, რომლებიც შეიძლება დაელოდონ დეველოპერებს.
ჯერ ჩამოვთვალოთ ამ სელექტორების დამახასიათებელი ნიშნები.
იდენტიფიკატორები
დოკუმენტის კოდში, თითოეული იდენტიფიკატორი უნიკალურია და უნდა იყოს ჩართული მხოლოდ ერთხელ.
იდენტიფიკატორის სახელი რეგისტრის მგრძნობიარეა.
getElementById მეთოდის საშუალებით შეგიძლიათ ელემენტზე წვდომა მისი იდენტიფიკატორით და შეცვალოთ ელემენტის თვისებები.
იდენტიფიკატორის სტილი უპირატესობას ანიჭებს კლასებს.
კლასები შეიძლება გამოყენებულ იქნას არაერთხელ თქვენს კოდში.
კლასების სახელები რეგისტრირებულია.
კლასები შეიძლება გაერთიანდეს ერთმანეთთან, ერთ ტეგზე რამდენიმე კლასის დამატებით.
იდენტიფიკატორები
თუ ვებ გვერდის მუშაობისას თქვენ გჭირდებათ გარკვეული ელემენტების სტილის შეცვლა ან მათში ტექსტის ჩვენება, ეს ბევრად უფრო ადვილია იდენტიფიკატორებით. ელემენტის გამოძახება ხდება getElementById მეთოდით, რომლის პარამეტრი არის იდენტიფიკატორის სახელი. მაგალითში 1.70, იდენტიფიკატორი სახელად userName ემატება ფორმის ტექსტურ ველს, შემდეგ JavaScript ფუნქციის გამოყენებით ამოწმებს, რომ მომხმარებელმა შეიყვანა რაიმე ტექსტი ამ ველში. თუ ტექსტი არ არის, მაგრამ დაჭერილია გაგზავნის ღილაკი, ტეგის შიგნით გამოჩნდება შეტყობინება msg იდენტიფიკატორით. თუ ყველაფერი სწორია, ფორმის მონაცემები იგზავნება მოქმედების ატრიბუტით მითითებულ მისამართზე.
მაგალითი 1.70. ფორმის მონაცემების დადასტურება XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
