9 λάθη που δεν πρέπει να κάνετε κατά τη δημιουργία ιστοσελίδας

Διαφήμιση

Η δημιουργία ιστοσελίδας με HTML και CSS είναι αρκετά απλή Πώς να δημιουργήσετε έναν ιστότοπο: Για αρχάριουςΣήμερα θα σας καθοδηγήσω στη διαδικασία δημιουργίας ενός πλήρους ιστότοπου από το μηδέν. Μην ανησυχείτε αν αυτό ακούγεται δύσκολο. Θα σας καθοδηγήσω σε αυτό κάθε βήμα. Διαβάστε περισσότερα . Αλλά είναι εύκολο να κάνετε λάθη και υπάρχουν αρκετά πράγματα που ίσως να μην σκεφτείτε. Τις περισσότερες φορές, αυτά τα μικρά λάθη δεν θα κάνουν μεγάλη διαφορά.

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

1. Ενσωματωμένο στυλ

Ένα από τα σπουδαία πράγματα για το HTML και το CSS είναι ότι μπορείτε να μορφοποιήσετε οποιαδήποτε γραμμή κειμένου - οποιαδήποτε λέξη, πραγματικά - όποτε θέλετε. Αλλά αυτό δεν σημαίνει ότι πρέπει να εκμεταλλευτείτε αυτήν την ικανότητα.

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

Το κείμενό σας εδώ.

Αυτό δίνει την παράγραφο α Στυλ CSS Μάθετε HTML και CSS με αυτά τα βήματα βήμα προς βήμαΕίστε περίεργοι για HTML, CSS και JavaScript; Εάν πιστεύετε ότι έχετε την ικανότητα να μάθετε πώς να δημιουργείτε ιστότοπους από το μηδέν - εδώ είναι μερικά σπουδαία βήματα βήμα προς βήμα που αξίζει να δοκιμάσετε. Διαβάστε περισσότερα που τελειώνει με το συμπέρασμα της παραγράφου. Φαίνεται αρκετά αποτελεσματικό, έτσι;

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

Αντ 'αυτού, χρησιμοποιήστε ένα φύλλο στυλ CSS. Εδώ είναι το στυλ που θα χρησιμοποιούσατε για την παραπάνω παράγραφο:

Σημαντικό {μέγεθος: 120%; χρώμα: μπλε; }

Τώρα, αντί να χρησιμοποιήσετε το ενσωματωμένο στυλ, μπορείτε απλά να χρησιμοποιήσετε αυτήν τη γραμμή:

Το κείμενό σας εδώ.

Και η παράγραφος σας θα είναι μεγάλη και μπλε. Και όταν κάνετε μια αλλαγή στην "σημαντική" τάξη στο CSS σας, όλα θα αλλάξουν.

2. Πίνακες για διάταξη

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

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

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

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

3. Καταργημένο HTML

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

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

, , , , και άλλοι καταργούνται επίσης.

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

4. Ενσωματωμένη JavaScript

Ορισμένες ιστοσελίδες χρησιμοποιούν JavaScript για προσθέστε επιπλέον λειτουργικότητα JavaScript και ανάπτυξη ιστού: Χρήση του μοντέλου αντικειμένου εγγράφουΑυτό το άρθρο θα σας παρουσιάσει στο σκελετό του εγγράφου με το οποίο λειτουργεί το JavaScript. Έχοντας μια καλή γνώση αυτού του αφηρημένου μοντέλου αντικειμένου εγγράφου, μπορείτε να γράψετε JavaScript που λειτουργεί σε οποιαδήποτε ιστοσελίδα. Διαβάστε περισσότερα . Μπορεί να κάνει τις ιστοσελίδες διαδραστικές, να επικυρώσει το κείμενο καθώς εισάγεται, να προσθέσει κινούμενα σχέδια, να δώσει απαντήσεις σε ενέργειες χρήστη και ούτω καθεξής. Εν ολίγοις, μπορεί να κάνει μια σελίδα πιο χρήσιμη παρέχοντας πρόσθετη συμπεριφορά.

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

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

Όλα αυτά τα πράγματα καθιστούν την ενσωματωμένη JavaScript πιο εντατική στο εύρος ζώνης.

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

5. Πολλαπλές ετικέτες H1

Οι ετικέτες επικεφαλίδας είναι εξαιρετικές. Διευκολύνουν τις σελίδες στην απομάκρυνση, μπορούν να σας δώσουν ώθηση SEO και μπορούν να χρησιμοποιηθούν για να τονίσετε ορισμένα σημεία.

Υπάρχουν όμως έξι επίπεδα ετικετών επικεφαλίδας για έναν λόγο. Πρέπει να υπάρχει μόνο μία ετικέτα H1 στη σελίδα σας. Και αυτός είναι συχνά ο τίτλος της σελίδας (ειδικά σε ιστολόγια και παρόμοιους ιστότοπους). Ίσως πιστεύετε ότι η τοποθέτηση πολλών λέξεων-κλειδιών σε ετικέτες H1 θα κάνει την Google πιο πιθανό να τις πάρει και να κατατάξει τον ιστότοπό σας υψηλότερα στα αποτελέσματα.

Αλλά αυτό που κάνει είναι πραγματικά να κάνει τη σελίδα σας πιο συγκεχυμένη και πιο δύσκολη στην ανάγνωση. Που θα αναιρέσει τυχόν οφέλη SEO που μπορεί να δείτε ούτως ή άλλως.

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

6. Παράλειψη εικόνας Alts

Σε κάθε εικόνα μπορεί να δοθεί ένα χαρακτηριστικό "alt" που εμφανίζει μια συγκεκριμένη γραμμή κειμένου εάν η εικόνα δεν μπορεί να εμφανιστεί. Αυτό μπορεί να μην φαίνεται μεγάλη υπόθεση, ειδικά με σύγχρονα προγράμματα περιήγησης (τόσο επιτραπέζια όσο και κινητά) που μπορούν να εμφανίζουν σχεδόν οτιδήποτε.

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

Και αν κάποιος χρησιμοποιεί ένα αναγνώστη οθόνης Το VoiceOver κάνει τις συσκευές Apple πιο προσβάσιμες από ποτέΟ Πρόεδρος του Αμερικανικού Ιδρύματος των Τυφλών εκτιμά ότι "η Apple έχει κάνει περισσότερα για προσβασιμότητα από οποιαδήποτε άλλη εταιρεία μέχρι σήμερα" - και η VoiceOver έπαιξε μεγάλο ρόλο σε αυτό. Διαβάστε περισσότερα ή άλλη δυνατότητα προσβασιμότητας, αυτό το χαρακτηριστικό alt μπορεί να είναι το μόνο που βγαίνουν από την εικόνα.

Φυσικά, υπάρχουν και πιθανά οφέλη SEO. Οι μηχανές αναζήτησης ενδέχεται να ευρετηριάσουν σύντομα, περιγραφικά χαρακτηριστικά alt. Αλλά το μεγαλύτερο όφελος εδώ είναι να βοηθήσετε τους αναγνώστες σας.

7. Δεν κλείνουν ετικέτες

Υπάρχουν ορισμένες ετικέτες HTML που μπορείτε να ξεφύγετε χωρίς να κλείσετε, όπως

και

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

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

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

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

8. Δεν περιλαμβάνεται DOCTYPE

Στην αρχή των εγγράφων HTML, συνήθως θα δείτε μια δήλωση DOCTYPE, όπως αυτή:

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

Εάν παραλείψετε τη δήλωση DOCTYPE, η σελίδα θα εμφανιστεί σε "quirks mode". Αυτή είναι η άμυνα του σύγχρονου προγράμματος περιήγησης ενάντια στις αρχαίες ιστοσελίδες. Και αλλάζει τον τρόπο εμφάνισης της σελίδας σας. Μια γρήγορη ματιά Λειτουργία ιδιορρυθμίας του Firefox δείχνει ότι αλλάζει η ευαισθησία των περιπτώσεων, οι ιδιότητες γραμματοσειράς δεν κληρονομούνται σε πίνακες, τα μεγέθη γραμματοσειράς υπολογίζονται διαφορετικά και οι εικόνες χωρίς χαρακτηριστικά alt εμφανίζονται μερικές φορές λανθασμένα.

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

Και για να το κάνετε αυτό, χρειάζεστε ένα DOCTYPE. (Εάν δεν είστε σίγουροι τι να χρησιμοποιήσετε, απλώς χρησιμοποιήστε το .)

9. Παράβλεψη σήμανσης σχήματος

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

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

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

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

Και με το εργαλείο σήμανσης σχήματος της Google, η διαδικασία είναι πραγματικά πολύ εύκολη.

Εξοικειωθείτε με τις Βέλτιστες Πρακτικές HTML

Η συνήθεια αυτών των βέλτιστων πρακτικών μπορεί να διαρκέσει λίγο. Και μερικές φορές μπορεί να αισθάνεστε ότι χρειάζεστε πολύ περισσότερο χρόνο για κάτι που δεν σας παίρνει πολύ. Αλλά βεβαιωθείτε ότι σας HTML και CSS Μάθετε HTML και CSS με αυτά τα βήματα βήμα προς βήμαΕίστε περίεργοι για HTML, CSS και JavaScript; Εάν πιστεύετε ότι έχετε την ικανότητα να μάθετε πώς να δημιουργείτε ιστότοπους από το μηδέν - εδώ είναι μερικά σπουδαία βήματα βήμα προς βήμα που αξίζει να δοκιμάσετε. Διαβάστε περισσότερα είναι καλά διαρρυθμισμένα, εύχρηστα και διατηρήσιμα θα σας εξοικονομήσουν πολύ χρόνο μακροπρόθεσμα.

Ποιες άλλες καλές συνήθειες έχετε βρει χρήσιμες κατά τη δημιουργία ιστοσελίδων; Διαφωνείτε με οποιαδήποτε από τις παραπάνω πρακτικές; Μοιραστείτε τις σκέψεις σας στα παρακάτω σχόλια!