Καλως ΗΡΘΑΤΕ! Εδώ φτάνουμε στο τέλος. Υπάρχει ένας ολόκληρος χρόνος γόνιμης δουλειάς μπροστά, έχουν προγραμματιστεί πολλές ενδιαφέρουσες ιδέες και τώρα το μόνο που απομένει είναι να τις ζωντανέψετε 🙂 Μπορείτε να παρακολουθήσετε την εξέλιξη των γεγονότων και να δείτε πώς εκφράζεται η ελευθερία της σκέψης στη δράση - απλώς εγγραφείτε στο blog, σας διαβεβαιώνω - δεν θα πάρει πολύ χρόνο .

Σήμερα έθεσα την αποστολή να μάθω εάν ο σωστός πηγαίος κώδικας που πέρασε το τεστ επηρεάζει κάτι και αν ναι, πόσο. Και όπως πάντα, περιμένω τις απόψεις σας για αυτό το θέμα στα σχόλια.

Πέρυσι, στις δημοσιεύσεις μου, έδωσα μεγάλη προσοχή σε έναν τέτοιο όρο όπως η εγκυρότητα, ήρθε η ώρα να καταλάβω τι είναι πλεονεκτήματα έγκυρης HTML. Νωρίτερα, μαζί σας, συζητήσαμε πώς να ελέγξετε την εγκυρότητα, καθώς και κανάλια και μερικά ακόμη ενδιαφέροντα σημεία.

Τέσσερις κύριοι παράγοντες υπέρ μιας έγκυρης τοποθεσίας

Πρώτον, μπορούμε να πούμε με 100% βεβαιότητα ότι οι σελίδες που έχουν περάσει το τεστ ισχύος του εργαλείου επικύρωσης θα εμφανίζονται σωστά σε απολύτως όλα τα σύγχρονα προγράμματα περιήγησης - και αυτό δεν είναι λιγότερο σημαντικό από το . Συμφωνώ, δεν είναι πολύ ευχάριστο να βλέπεις μια διάταξη με λοξά στοιχεία μπροστά σου. Και ο επισκέπτης είναι απίθανο να επιστρέψει σε ένα τέτοιο ιστολόγιο, στο οποίο ο συγγραφέας του παραμελεί την εμφάνιση και.

Δεύτερον, ακόμα κι αν το σκέφτεστε λογικά, αφαιρώντας περιττές ετικέτες και άλλα "σκουπίδια", μειώνουμε το βάρος της σελίδας και έτσι μειώνουμε τον χρόνο φόρτωσης της σελίδας και τα προγράμματα περιήγησης αφιερώνουν λιγότερο χρόνο στην επεξεργασία τέτοιων σελίδων. Ξέρετε, υπάρχει ένα τέτοιο ρητό: "Λιγότερα λόγια, περισσότερες ενέργειες", αν το παραφράσετε και το εφαρμόσετε στη δημιουργία ιστοτόπων, θα αποδειχθεί σαν "Λιγότερες ετικέτες - περισσότερες λέξεις".

Και αυτά δεν είναι κενές λέξεις, όλοι όσοι αντιμετώπισαν προβλήματα με το Yandex έλαβαν μια απάντηση από την τεχνική υποστήριξη: βελτιώστε τον ιστότοπο και εργαστείτε σε αυτόν. Για παράδειγμα, στη γραμμή εργαλείων Yandex Webmaster, μπορείτε να βρείτε βοήθεια για μια ενότητα που περιέχει συστάσεις για τη δημιουργία τοποθεσιών.

Εάν μελετήσετε προσεκτικά αυτό το έγγραφο, τότε στην παράγραφο 3 "Διάταξη" αναφέρονται τα εξής:

Βεβαιωθείτε ότι η διάταξη της σελίδας σας είναι σύμφωνη με τα πρότυπα.

Τρίτον, εάν δημιουργείτε ιστότοπους για να τους παραγγείλετε ή να τους προωθήσετε, τότε πρέπει να γνωρίζετε HTML και CSS, και αν ναι, γιατί να δημιουργείτε σκόπιμα σφάλματα; Επιπλέον, οι πελάτες ορίζουν μερικές φορές ένα καθήκον για τον ανάδοχο: να χρησιμοποιήσει έναν έγκυρο κωδικό, αντίστοιχα, και οι τιμές θα είναι πολύ υψηλότερες για την εργασία που εκτελείται.

Και, τέλος, τέταρτον, δεν παίζει τον τελευταίο ρόλο ο ψυχολογικός παράγοντας. Είναι ωραίο να γνωρίζουμε ότι η δουλειά που γίνεται πληροί ορισμένα κριτήρια και πρότυπα, στην περίπτωσή μας, τα πρότυπα της Κοινοπραξίας του Παγκόσμιου Ιστού. Και ως γνωστόν, η ψυχολογία είναι σπουδαίο πράγμα! Μην το αγνοήσεις λοιπόν.

Ω, είναι τόσο ωραίο να βλέπεις μια τέτοια επιγραφή 😉

Σε ένα από τα προηγούμενα άρθρα μου, μίλησα για . Ωστόσο, δεν γνωρίζουν όλοι ότι εκτός από επικυρωτή για HTML, υπάρχει επικυρωτή και για CSS.

Εννοια Εγκυρότητα CSSίδιο με το HTML: σχεδόν άσχετο. Παρόμοιο με HTMLαν γράφεις μη έγκυρο CSS, τότε δεν θα υπάρξουν προβλήματα (εκτός, φυσικά, αν υπάρχουν μεγάλα λάθη), ωστόσο, ένας έγκυρος κωδικός είναι πάντα καλός. Ένας τέτοιος κώδικας είναι σαφής και δομημένος, είναι εύκολο να κατανοηθεί, κάτι που είναι επίσης σημαντικό, ειδικά όταν διορθώνεται, και ειδικά από άλλα άτομα. Επίσης Εγκυρότητα CSSεπιταχύνει τη διαδικασία επεξεργασίας και, κατά συνέπεια, την ταχύτητα φόρτωσης της σελίδας.

Και, τέλος, εν όψει της γενικά σπάνιας τήρησης της εγκυρότητας, ένας έγκυρος κωδικός απαιτεί πάντα σεβασμό, κάτι που είναι σημαντικό αν το κάνετε αυτό επαγγελματικά.

Προς το ελέγξτε την εγκυρότητα CSS, πρέπει να το χρησιμοποιήσετε Υπηρεσία W3: http://jigsaw.w3.org/css-validator/.

Θα πω αμέσως ότι, σε αντίθεση HTML, κάνω Ισχύει CSSπολύ πιο εύκολο, δεδομένου ότι υπάρχουν ως επί το πλείστον μόνο χονδροειδή λάθη, με εξαίρεση τα οποία είναι καλύτερο να αποφεύγονται εντελώς.

Επιτρέψτε μου να συνοψίσω. Το να κάνετε τον κωδικό έγκυρο δεν είναι καθόλου απαραίτητο, αλλά συνιστώ ανεπιφύλακτα να το κάνετε αυτό, καθώς ένας τέτοιος ιστότοπος θα είναι ευκολότερο να ευρετηριαστεί από τις μηχανές αναζήτησης ( Εγκυρότητα HTML), εργαστείτε πιο γρήγορα, πιο εύκολα στην επεξεργασία και κερδίστε τον σεβασμό από τους επαγγελματίες.

Καλώς ήρθατε στο Δωρεάν Ιστολόγιο Webmaster! Την τελευταία φορά σας είπα πώς να ελέγξετε και σήμερα προτείνω να συνεχίσετε το θέμα της επικύρωσης ιστοσελίδας. Ας ελέγξουμε τα Cascading Style Sheets (CSS) και τα έγγραφα HTML με φύλλα στυλ για συμμόρφωση με τα γενικά αποδεκτά πρότυπα Διαδικτύου.

Ο προγραμματιστής της γλώσσας στυλ CSS είναι η Κοινοπραξία του Παγκόσμιου Ιστού (W3C για συντομία) είναι ένας οργανισμός που αναπτύσσει και εφαρμόζει τεχνολογικά πρότυπα στο Διαδίκτυο.

Η CSS (από τα Αγγλικά Cascading Style Sheets - cascading style sheets) είναι μια επίσημη γλώσσα που έχει σχεδιαστεί για να περιγράφει την εμφάνιση ενός εγγράφου χρησιμοποιώντας μια γλώσσα σήμανσης.

Για τον έλεγχο των στυλ, υπάρχει μια πολύ χρήσιμη υπηρεσία που προσφέρεται από το W3C. Ας πάμε στην κεντρική σελίδα της υπηρεσίας επικύρωσης CSS και ας ελέγξουμε την εγκυρότητα του CSS.

Ως συνήθως, θα κοιτάξω το blog μου ως παράδειγμα. Ακολουθούμε τον σύνδεσμο, ανοίγει ένα νέο παράθυρο, το οποίο μοιάζει με αυτό:

Εδώ έχουμε μια ευχάριστη έκπληξη, όλα είναι στα ρωσικά! Επιπλέον, είναι δυνατή η επιλογή οποιασδήποτε άλλης γλώσσας από περισσότερες από 20 διαθέσιμες. Υπάρχουν καρτέλες στη σελίδα που σας προσφέρουν να επιλέξετε μια επιλογή επαλήθευσης:

1. Έλεγχος με URI - απλώς καθορίστε τη διεύθυνση της σελίδας.
2. Ελέγξτε το μεταφορτωμένο αρχείο - πρέπει να επιλέξετε ένα τοπικό αρχείο CSS.
3. Ελέγξτε το πληκτρολογημένο κείμενο - πρέπει να εισαγάγετε τον κωδικό CSS για να ελέγξετε την ορθότητα.

Πρόσθετες λειτουργίες σάς επιτρέπουν να ορίσετε εκτεταμένες επιλογές σάρωσης. Ακολουθεί μια σύντομη περίληψη καθενός από αυτά:

• Προφίλ − Εμφανίζει όλες τις δυνατότητες και τις δυνατότητες υλοποίησης σε μια συγκεκριμένη πλατφόρμα. Η προεπιλεγμένη επιλογή ακολουθεί το πιο συχνά χρησιμοποιούμενο πρότυπο τρίτου επιπέδου CSS3.
• Προειδοποιήσεις — ρύθμιση λεπτομερειών αναφοράς: όλες ή οι πιο σημαντικές προειδοποιήσεις, κανονική αναφορά, χωρίς εμφάνιση προειδοποιήσεων. Η υπηρεσία μπορεί να εκδώσει δύο τύπους μηνυμάτων: σφάλματα και προειδοποιήσεις. Εάν το CSS που ελέγχεται δεν ταιριάζει με τη σύσταση, πρόκειται για σφάλμα. Οι προειδοποιήσεις διαφέρουν από τα σφάλματα στο ότι δεν αναφέρονται σε προβλήματα με την εκτέλεση προδιαγραφών.
• Περιβάλλον - Καθορίστε πού εφαρμόζονται τα στυλ, όπως σε φορητή συσκευή, οθόνη, τηλεόραση ή σελίδα εκτύπωσης. Συνιστάται να ελέγχετε όλα τα περιβάλλοντα styling.
• Επεκτάσεις παρόχου - είναι επιθυμητό να το αφήσετε από προεπιλογή, είναι δυνατή η εμφάνιση μόνο σφαλμάτων ή μόνο προειδοποιήσεων. Οι προμηθευτές προγραμμάτων περιήγησης μερικές φορές εφαρμόζουν πειραματικές ιδιότητες CSS που υποστηρίζονται από προθέματα: -moz- (για Firefox), -webkit- (για Chrome), -ms- (για Internet Explorer), -o- (για Opera) και άλλα.

Καθορίζω τη διεύθυνση URL, διαμορφώνω πρόσθετες παραμέτρους επαλήθευσης και κάνω κλικ στο κουμπί "Έλεγχος" για να ξεκινήσει. Ζήτω! Αποτέλεσμα ελέγχου CSS: δεν βρέθηκαν σφάλματα!

Δυστυχώς, οι προειδοποιήσεις που σχετίζονται με επέκταση άγνωστου παρόχου δεν ήταν δυνατό να αποφευχθούν. Δεν πειράζει, το CSS checker είναι ένα δωρεάν, αξιόπιστο και χρήσιμο βοηθητικό πρόγραμμα, αλλά όπως κάθε λογισμικό, μπορεί να έχει ελαττώματα.

Το κύριο πράγμα είναι ότι τα στυλ δεν περιέχουν σφάλματα και οι επεκτάσεις του προμηθευτή πιθανότατα απλώς δεν περιλαμβάνονται στην προδιαγραφή και προκαλούν προειδοποιήσεις, αλλά το πρόγραμμα περιήγησης επεξεργάζεται τα δεδομένα σωστά.

Σημειώστε ότι η λίστα προειδοποιήσεων εμφανίζει τον αριθμό γραμμής όπου βρέθηκε η άγνωστη ιδιότητα. Εάν εντοπιστούν σφάλματα, θα δείτε έναν πίνακα με την ιδιότητα και μια περιγραφή του προβλήματος. Για παράδειγμα, η κύρια σελίδα του Yandex έχει το ακόλουθο αποτέλεσμα ελέγχου:

Ακολουθούν πληροφορίες σχετικά με το σωστό επικυρωμένο CSS. Μην βιαστείτε να το αντιγράψετε και να το χρησιμοποιήσετε στον ιστότοπό σας! Ναι, στη δεδομένη έκδοση του σωστού CSS δεν υπάρχουν σφάλματα και ιδιότητες, η χρήση των οποίων προκαλεί προειδοποιήσεις, ο κωδικός θα περάσει 100% τον πλήρη έλεγχο. Ωστόσο, το αποτέλεσμα επιτυγχάνεται με την κατάργηση αυτών των ιδιοτήτων, επομένως ο ιστότοπος μπορεί να έχει προβλήματα προβολής ή οι προσδοκίες να μην ταιριάζουν με την πραγματικότητα.

Αυτή η υπηρεσία φιλοξενείται και διατηρείται από τον διακομιστή W3C, αλλά ταυτόχρονα δεν είναι επίσημος επικυρωτής CSS.

Προαιρετικά, χρησιμοποιήστε το συνδυασμένο εργαλείο επικύρωσης - ελέγχει ολόκληρο το έγγραφο, συνδυάζοντας τα αποτελέσματα των επικυρωτών HTML και CSS, καθώς και άλλα χρήσιμα εργαλεία, σε μία σελίδα.

Κατά την ανάπτυξη τοποθεσιών web, ανατρέξτε στις πιο πρόσφατες προδιαγραφές και αναφορές φύλλων στυλ σε σειρά. Συνιστώ να χρησιμοποιήσετε το εργαλείο επικύρωσης CSS και να ελέγξετε τον ιστότοπό σας, να μοιραστείτε τα αποτελέσματα στα σχόλια!

2016-12-29

Κάνουμε κίνηση στα κουμπιά και ελέγχουμε τον ιστότοπο για την εγκυρότητα του κώδικα HTML και CSS

Γεια σου αγαπητέ επισκέπτη!

Σήμερα, χρησιμοποιώντας το παράδειγμα μιας ιστοσελίδας που δημιουργήθηκε, θα εξετάσουμε πώς μπορείτε να ελέγξετε τον ιστότοπο για εγκυρότητα, συγκεκριμένα, για συμμόρφωση με τις καθιερωμένες προδιαγραφές των γλωσσών HTML και CSS.

Επιπλέον, πριν κάνουμε έλεγχο, θα κάνουμε κάποια βελτίωση του φύλλου στυλ CSS σχετικά με την "κινούμενη εικόνα" των κουμπιών της πλαϊνής γραμμής, όπου θα κάνουμε διαδραστικά κουμπιά από στατικά κουμπιά που αλλάζουν την εμφάνισή τους ανάλογα με την κατάστασή τους - παθητικά, ενεργά και πατημένα.

• Κάνοντας τα κουμπιά ογκώδη
• Κάνοντας τα κουμπιά διαδραστικά
• Χρειάζεται επικύρωση;
• Πώς να επικυρώσετε τον κώδικα HTML
• Πώς να επικυρώσετε τον κώδικα CSS
• Αρχεία προέλευσης ιστότοπου

Κάνοντας τα κουμπιά ογκώδη

Στο προηγούμενο άρθρο, σχεδιάσαμε την κύρια περιοχή περιεχομένου ώστε να ταιριάζει με τη διάταξη της κύριας σελίδας. Ταυτόχρονα, αυτή τη στιγμή υπάρχουν κουμπιά στην πλαϊνή μπάρα που είναι στατικά και μοιάζουν με ένα κανονικό επίπεδο καφέ ορθογώνιο με στρογγυλεμένες γωνίες.

Παρακάτω είναι ένα τμήμα μιας πλαϊνής γραμμής με τέτοια κουμπιά.

Για να "κινούμε" τα κουμπιά, πρώτα τους δίνουμε λίγο όγκο χρησιμοποιώντας στυλ CSS. Και θα το κάνουμε αυτό χρησιμοποιώντας την ιδιότητα γραμμικής κλίσης, η οποία έχει ήδη χρησιμοποιηθεί στη σχεδίαση των μπλοκ περιστροφής, αναζήτησης και συνδρομής.

Ορίζουμε τις τιμές της γραμμικής κλίσης ως εξής:

1. Οι αποχρώσεις των χρωμάτων θα οριστούν από κάτω προς τα πάνω, ξεκινώντας με πιο σκούρο χρώμα σε σύγκριση με το κύριο χρώμα του κουμπιού. Για να καθορίσουμε ποιο χρώμα θα χρησιμοποιήσουμε στην αρχή του ντεγκραντέ, χρησιμοποιούμε ένα εργαλείο επεξεργασίας γραφικών, σε αυτήν την περίπτωση το Photoshop.

Για να το κάνετε αυτό, με το έγγραφο της διάταξης σχεδίασης ανοιχτό, πρέπει να επιλέξετε το "Color Picker", να τοποθετήσετε το δείκτη του ποντικιού στην απαιτούμενη περιοχή του κουμπιού, να καθορίσετε το κύριο χρώμα και στη συνέχεια να χρησιμοποιήσετε τα εργαλεία "Color Pickers" για να επιλέξετε ένα πιο σκούρο χρώμα της ίδιας καφέ απόχρωσης. Στην περίπτωσή μας, ας πάρουμε το χρώμα με την τιμή "653939". Σαφώς, πώς μπορεί να γίνει αυτό φαίνεται στο στιγμιότυπο οθόνης παρακάτω.

2. Στη συνέχεια, ορίστε τη θέση διακοπής της διαβάθμισης όπου το αρχικό, πιο σκούρο χρώμα θα πάει στο κύριο. Η θέση στάσης θα τοποθετηθεί περίπου στη μέση. Ταυτόχρονα, για να κάνουμε το χρώμα πιο κορεσμένο, ας μετακινήσουμε τη θέση στοπ λίγο προς τα πάνω, και ας ορίσουμε την τιμή του, ας πούμε, το 70% του ύψους.

3. Και το τελευταίο πράγμα που πρέπει να κάνετε για να ορίσετε τις ιδιότητες της διαβάθμισης είναι να ορίσετε ένα πιο ανοιχτό χρώμα σε σύγκριση με το κύριο, το οποίο θα χρωματίσει τα κουμπιά στο επάνω μέρος. Αυτό γίνεται με τον ίδιο τρόπο όπως κατά τον προσδιορισμό του αρχικού χρώματος της διαβάθμισης. Σε αυτήν την περίπτωση, η τιμή αυτού του χρώματος θα ληφθεί ως "b88686".

3. Με βάση τα δεδομένα που λάβαμε, θα προσθέσουμε μια γραμμική διαβάθμιση στις ιδιότητες CSS που σχηματίστηκαν προηγουμένως των κουμπιών.

εισαγωγή: {

ύψος :30 px;

περιθώριο-κάτω :10px;

συνοριακή ακτίνα :5 px;

Ιστορικό :#a76d6d;

στοίχιση κειμένου :κέντρο;

βάρος γραμματοσειράς :τολμηρός;

χρώμα :#fff;

φλοτέρ :σωστά;

εικόνα φόντου

Μπορεί να σημειωθεί ότι κατά τον προσδιορισμό των ακραίων χρωμάτων, οι θέσεις στάσης δεν καθορίζονται εδώ, καθώς δεν είναι απαραίτητο να το κάνετε αυτό με τιμές 0% και 100%.

Τώρα, ας ανανεώσουμε το πρόγραμμα περιήγησης και ας δούμε το αποτέλεσμα.

Όπως μπορείτε να δείτε, τα κουμπιά έχουν αποκτήσει μια μικρή διόγκωση. Τώρα μπορείτε να αρχίσετε να τα «ζωντανεύετε».

Κάνοντας τα κουμπιά διαδραστικά

Για να εργαστούμε πλήρως με τα κουμπιά, θα τα κάνουμε διαδραστικά, τα οποία θα αντικατοπτρίζουν οπτικά τις τρεις κύριες καταστάσεις τους, παθητικό (το κουμπί είναι στην αρχική του κατάσταση), ενεργό (ο κέρσορας βρίσκεται πάνω από το κουμπί) και πατημένο (το ποντίκι το κουμπί πατιέται και κρατιέται ενώ ο κέρσορας αιωρείται).

Και θα το κάνουμε αυτό χρησιμοποιώντας έναν συνδυασμό ιδιοτήτων σκιάς και περιγράμματος. Η ουσία αυτής της τεχνικής είναι ότι αλλάζοντας το χρώμα της σκιάς και των περιγραμμάτων από διαφορετικές πλευρές, μπορείτε να επιτύχετε μια απομίμηση μιας αλλαγής στην κατάσταση των κουμπιών.

Αρχικά, ας το κάνουμε αυτό για την παθητική κατάσταση και ας προσπαθήσουμε να το σχεδιάσουμε έτσι ώστε το κουμπί να ανέβει πάνω από την επιφάνεια.

Επιλέγουμε τα χρώματα των περιγραμμάτων και των σκιών με τον ίδιο τρόπο όπως στις προηγούμενες περιπτώσεις.

Ο κωδικός CSS μετά τις κατάλληλες προσθήκες θα λάβει τη μορφή.

εισαγωγή: {

ύψος :30 px;

περιθώριο-κάτω :10px;

συνοριακή ακτίνα :5 px;

Ιστορικό :#a76d6d;

στοίχιση κειμένου :κέντρο;

βάρος γραμματοσειράς :τολμηρός;

χρώμα :#fff;

φλοτέρ :σωστά;

εικόνα φόντου :linear-gradient(to top, #653939, #a76d6d 50%, #b88686);

σκιά κουτιού :2px 2px 4px 0px #422a2a;

πλάτος συνόρων :2px;

στυλ περιγράμματος :στερεός;

χρώμα πλαισίου :#ddbebe #241616 #241616 #ddbebe;

Εδώ μπορείτε να παρατηρήσετε ότι τα περιγράμματα αντιπροσωπεύονται από έναν συνδυασμό ιδιοτήτων που καθορίζουν το πάχος (πλάτος περιγράμματος με την τιμή 2 εικονοστοιχεία), ένα στυλ ( border-style ) με μια τιμή που καθορίζει ένα συμπαγές περίγραμμα και χρώματα ( border-color ) σε καθεμία από τις τέσσερις πλευρές.

Ας ανανεώσουμε το πρόγραμμα περιήγησης και ας δούμε πώς θα φαίνονται τα κουμπιά τώρα.

Όπως μπορείτε να δείτε, τα κουμπιά σε αυτήν την κατάσταση φαίνεται να έχουν ανέβει.

Τώρα ας προσπαθήσουμε να δώσουμε στα κουμπιά την εμφάνιση μιας πατημένης κατάστασης. Για να το κάνετε αυτό, αφαιρέστε τη σκιά και αλλάξτε το χρώμα των περιγραμμάτων. Σε αυτήν την περίπτωση, θα χρησιμοποιήσουμε έναν ειδικό επιλογέα ψευδο-κλάσης :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 με την τιμή "ru"επειδή η σελίδα χρησιμοποιεί ρωσικά.

Το χαρακτηριστικό lang προορίζεται να κάνει τα προγράμματα περιήγησης να εμφανίζουν σωστά ορισμένους χαρακτήρες, όπως εισαγωγικά, ανάλογα με τη γλώσσα που χρησιμοποιείται. Επομένως, θα είναι χρήσιμο για εμάς να το συμπεριλάβουμε στον κώδικα HTML. Και θα το κάνουμε αυτό στην ετικέτα html, έτσι ώστε αυτό το χαρακτηριστικό να μπορεί να ενεργεί σε ολόκληρο το έγγραφο.

Πώς να κάνετε αυτή την προσθήκη φαίνεται στον παρακάτω πίνακα.

"ru" >

. . .

Και τώρα, αν κάνουμε έναν δεύτερο έλεγχο, μπορούμε να δούμε ότι ο κωδικός έχει γίνει πλήρως έγκυρος χωρίς κανένα σχόλιο.

Με αυτόν τον τρόπο, ελέγξαμε το αρχείο που δημοσιεύτηκε στο Διαδίκτυο. Ωστόσο, όταν η σελίδα δεν έχει ακόμη αναρτηθεί στον Ιστό, μπορείτε να ελέγξετε την εγκυρότητά της με άλλους τρόπους, είτε ανεβάζοντας ένα αρχείο χρησιμοποιώντας το κουμπί περιήγησης είτε χρησιμοποιώντας τη φόρμα για να αντιγράψετε απευθείας τον κώδικα HTML.

Το στιγμιότυπο οθόνης δείχνει την τελευταία επιλογή, όταν ο κώδικας της ιστοσελίδας αντιγράφεται απευθείας στη φόρμα για επαλήθευση.

Αφού εκτελέσουμε τον έλεγχο, έχουμε ένα παρόμοιο αποτέλεσμα και ο κωδικός που ελέγχεται θα εμφανίζεται επίσης εδώ. Σε περίπτωση που εντοπιστούν σφάλματα, θα επισημανθούν για να απλοποιηθεί η αναζήτηση, γεγονός που απλοποιεί σημαντικά το έργο της εξάλειψής τους.

Πώς να επικυρώσετε τον κώδικα CSS

Καλύψαμε την επικύρωση κώδικα HTML. Ο κωδικός CSS ελέγχεται με την ίδια ακριβώς σειρά. Μόνο σε αυτήν την περίπτωση, πρέπει να χρησιμοποιήσετε μια άλλη σελίδα επικύρωσης, η οποία για αυτήν την περίπτωση βρίσκεται στη διεύθυνση http://jigsaw.w3.org/css-validator/ .

Ας το ανοίξουμε και, όπως και την προηγούμενη φορά, πληκτρολογούμε τη διεύθυνση της σελίδας που θα ελεγχθεί και μετά πατάμε το κουμπί «Έλεγχος».

Το αποτέλεσμα αυτού του ελέγχου φαίνεται στο στιγμιότυπο οθόνης.

Όπως μπορείτε να δείτε, ο κώδικας CSS μας συμμορφώνεται πλήρως με τις προδιαγραφές χωρίς σφάλματα, κάτι που είναι ένα καλό αποτέλεσμα.

Η σειρά άλλων μεθόδων επικύρωσης για αυτήν την περίπτωση συμπίπτει πλήρως με παρόμοιους ελέγχους για κώδικα HTML. Επομένως, δεν θα επαναλάβουμε τους εαυτούς μας εδώ και θα ολοκληρώσουμε την αναθεώρηση των ελέγχων επικύρωσης.

Μετά από αυτό, θα ελέγξουμε τη σελίδα μας για διασταυρούμενη εικόνα και βεβαιώνοντας ότι εμφανίζεται το ίδιο σε όλα τα προγράμματα περιήγησης, αυτό θα ολοκληρώσει τη διάταξη της κύριας σελίδας του ιστότοπου.

Και, θα το κάνουμε αμέσως μετά τις διακοπές της Πρωτοχρονιάς.

Και εν κατακλείδι, μπορούμε να δώσουμε συγχαρητήρια σε όλους για την επερχόμενη Πρωτοχρονιά! Και εύχομαι το νέο έτος υγεία, αγάπη, χαρά, ευημερία και, φυσικά, μεγάλη επιτυχία στη δημιουργία της δικής σας ιστοσελίδας για τη δυνατότητα επιτυχημένης εργασίας στο Διαδίκτυο!

Αρχεία προέλευσης ιστότοπου

Μπορείτε να κατεβάσετε τα αρχεία προέλευσης του ιστότοπου με τις ενημερώσεις που έγιναν σε αυτό το άρθρο από το συνημμένο πρόσθετα υλικά.

Μετά τη δημιουργία του ιστότοπου και τη συμπλήρωσή του με όλα τα απαραίτητα, ο ιστότοπος πρέπει να ελεγχθεί για σφάλματα. Για να βρείτε ορθογραφικά λάθη σε html και css, θα σας βοηθήσει το πρόγραμμα επικύρωσης W3 - World Wide Web Consortium, το οποίο σε μετάφραση: World Wide Web Consortium. Βρίσκει όλα τα σφάλματα και υποδεικνύει πού βρίσκονται, καθώς και προσφέρει επιλογές για την εξάλειψή τους.

Γιατί να διορθώσετε τον κώδικα με το W3C Validator

Στην πραγματικότητα, δεν υπάρχουν πολλά πλεονεκτήματα από αυτό και είναι όλα υπό όρους, αλλά δυστυχώς κάθε τοποθεσία θα πρέπει να έχει έναν ελάχιστο αριθμό σφαλμάτων, ιδανικά κανένα. Τι θα αποφασίσατε αν το χρειάζεστε, εδώ είναι τα πλεονεκτήματά του:

• Η ταχύτητα φόρτωσης της σελίδας θα αυξηθεί, αλλά λίγο, δεν θα είναι καν αισθητή.
• Ο ιστότοπος θα εμφανίζει το ίδιο σε κάθε πρόγραμμα περιήγησης.
• Όταν προσθέτετε έναν ιστότοπο στον κατάλογο, δώστε προσοχή στον αλφαβητισμό της γραφής html και css.

Όχι πολλά πλεονεκτήματα, αλλά διορθώστε σφάλματα html και cssΗ χρήση του εργαλείου επικύρωσης W3C αξίζει τον κόπο!

Πώς να διορθώσετε σφάλματα με το Validator

Η αρχή της διόρθωσης σφαλμάτων με έναν επικυρωτή δεν είναι περίπλοκη και όλοι μπορούν να το χειριστούν! Ακολουθούμε τους συνδέσμους για, εάν είναι δύσκολο να καταλάβετε αγγλικά, σας συμβουλεύω να χρησιμοποιήσετε μεταφραστή ή να χρησιμοποιήσετε Αυτό, το οποίο θα δείχνει τον τύπο των σφαλμάτων στα ρωσικά. Εξετάστε ένα παράδειγμα επιδιόρθωσης από έναν επικυρωτή:

1. Πληκτρολογήστε πλήρως το όνομα του ιστότοπού σας.


2. Στη λίστα, αρχίζουμε να εξετάζουμε πού και τι είδους σφάλμα και τι χρειάζεται για να το διορθώσετε.


Όπως μπορείτε να δείτε στις εικόνες, το λάθος μου είναι στο σύνδεσμο, βρήκα αυτό το πρόβλημα στο πρόσθετο κουμπιών κοινής χρήσης. Συχνά πρέπει να ψάξετε σε όλα τα αρχεία για να βρείτε ένα σφάλμα.

3. Προσθέστε ένα στοιχείο στη γραμμή όπου βρέθηκε το σφάλμα και ελέγξτε ξανά με τον επικυρωτή.
Εάν το σφάλμα διορθωθεί, τότε αυτό είναι καλό. Εάν όχι, τότε θα πρέπει να ψάξετε περισσότερο.