Οι τρεις αρχές της βελτιστοποίησης κώδικα HTML
Ακριβώς όπως την άνοιξη που καθαρίζει ένα σπίτι, ο κώδικας HTML ιστοσελίδας σας πρέπει να πάρει τον περιοδικό καθαρισμό επίσης. Κατά τη διάρκεια του χρόνου, όπως αλλάζουν και οι αναπροσαρμογές γίνονται ιστοσελίδας, ο κώδικας μπορεί να γίνει ρυπαμένος με τον περιττό σωρό, που επιβραδύνει τους χρόνους φορτίων σελίδων και που βλάπτει την αποδοτικότητα ιστοσελίδας σας. Το σωριασμένο HTML μπορεί επίσης σοβαρά να προσκρούσει στην ταξινόμηση μηχανών αναζήτησής σας.
Αυτό ισχύει ιδιαίτερα εάν χρησιμοποιείτε wysiwyg (τι Βλέπετε είστε αυτό που παίρνετε) συσκευασία σχεδίου Ιστού όπως FrontPage ή Dreamweaver. Αυτά τα προγράμματα θα επιταχύνουν τη δημιουργία ιστοχώρων σας, αλλά δεν είναι αυτά αποδοτικά στο γράψιμο του καθαρού κώδικα HTML.
Θα στρέφουμε αυτήν την συζήτηση σχετικά με την πραγματική κωδικοποίηση HTML, που αγνοεί άλλες γλώσσες προγραμματισμού που μπορούν να χρησιμοποιηθούν σε μια σελίδα όπως JavaScript. Στα παραδείγματα κώδικα θα χρησιμοποιώ (και) τους χαρακτήρες αντί του σωστού HTML έτσι ώστε τα παραδείγματα κώδικα θα επιδείξουν κατάλληλα σε αυτό το ενημερωτικό δελτίο.
Επάνω μέχρι σήμερα κατά κωδικοποίηση μιας σελίδας στο HTML τη θα χρησιμοποιούσαμε τις ετικέττες όπως η ετικέττα (πηγών) και (P) ετικέττες παραγράφου. Μεταξύ αυτών των ετικεττών θα ήταν το περιεχόμενο, το κείμενο, οι εικόνες και οι συνδέσεις σελίδων μας. Κάθε φορά που έγινε μια αλλαγή μορφοποίησης στη σελίδα που οι νέες ετικέττες απαιτήθηκαν με την πλήρη μορφοποίηση για το νέο τμήμα. Πιό πρόσφατα έχουμε κερδίσει τη δυνατότητα να χρησιμοποιήσουμε τα πέφτοντας απότομα φύλλα ύφους, επιτρέποντας σε μας για να γράψουμε τη μορφοποίηση μιά φορά και να αναφερθούμε έπειτα σε αυτό που σχηματοποιεί αρκετές φορές μέσα ιστοσελίδας.
Προκειμένου να επιταχυνθούν οι χρόνοι φορτίων σελίδων πρέπει να έχουμε λιγότερους χαρακτήρες στη σελίδα όταν αντιμετωπίζεται σε έναν συντάκτη HTML. Δεδομένου ότι πραγματικά δεν θέλουμε να αφαιρέσουμε οποια δήποτε από το ορατό περιεχόμενό μας πρέπει να κοιτάξουμε στον κώδικα HTML. Με να καθαρίσουμε επάνω αυτόν τον κώδικα μπορούμε να αφαιρέσουμε τους χαρακτήρες, με αυτόν τον τρόπο δημιουργώντας μικρότερη ιστοσελίδας που θα φορτώσει γρηγορότερα.
Κατά τη διάρκεια του χρόνου το HTML έχει αλλάξει και έχουμε τώρα πολλούς διαφορετικούς τρόπους να κάνουμε το ίδιο πράγμα. Ένα παράδειγμα θα ήταν ο κώδικας που χρησιμοποιείται για να παρουσιάσει πρόσωπο χοντρών τυπογραφικών χαρακτήρων. Στο HTML έχουμε δύο κύριες επιλογές, τη (ισχυρή) ετικέττα και τη (β) ετικέττα. Δεδομένου ότι μπορείτε να δείτε (η ισχυρή) ετικέττα χρησιμοποιεί 5 περισσότερους χαρακτήρες από τη (β) ετικέττα, και εάν εξετάζουμε τις κλείνοντας ετικέττες επίσης εμείς βλέπει ότι η χρησιμοποίηση του (strong)(/jshyro's) ζευγαριού ετικεττών χρησιμοποιεί 10 περισσότερους χαρακτήρες από καθαρότερους (β) (/b) ζευγάρι ετικεττών.
Αυτό είναι η πρώτη αρχή μας καθαρού κώδικα HTML: Χρησιμοποιήστε την απλούστερη μέθοδο κωδικοποίησης διαθέσιμη.
Το HTML έχει τη δυνατότητα να τοποθετηθεί του κώδικα μέσα σε άλλο κώδικα. Παραδείγματος χάριν θα μπορούσαμε να έχουμε μια γραμμή με τρεις λέξεις όπου η μέση λέξη ήταν στο άρθρο σε εφημερίδα με μαύρους χαρακτήρες. Αυτό θα μπορούσε να ολοκληρωθεί με την αλλαγή της μορφοποίησης εντελώς κάθε φορά που αλλάζει η ορατή μορφοποίηση. Εξετάστε αυτόν τον κώδικα:
(πηγή face=?times?)This (/πηγή)
(πηγή face=?times?) (strong)BOLD (/strong) (/font)
(πηγή face=?times?)Word (/πηγή)
Αυτό λαμβάνει 90 χαρακτήρες.
Αυτό είναι πολύ κακώς γραπτό HTML και είναι αυτό που περιστασιακά θα πάρετε κατά το χρησιμοποίηση ενός wysiwyg συντάκτη. Δεδομένου ότι οι ετικέττες (πηγών) επαναλαμβάνουν τις ίδιες πληροφορίες μπορούμε απλά να τοποθετηθούμε τις (ισχυρές) ετικέττες μέσα στις ετικέττες (πηγών), και καλύτερα ακόμα να χρησιμοποιήσουμε τη (β) ετικέττα αντί της (ισχυρής) ετικέττας. Αυτό θα μας έδινε αυτόν τον κώδικα (πηγή face=?times)This (b)BOLD (/b) Word (/πηγή), που λαμβάνει μόνο 46 χαρακτήρες.
Αυτό είναι η δεύτερη αρχή μας καθαρού κώδικα HTML: Που τοποθετείται η χρήση κολλά όταν πιθανός. Γνωρίστε ότι wysiwyg οι συντάκτες θα ενημερώσουν συχνά τη μορφοποίηση με την προσθήκη του στρώματος μετά από το στρώμα του τοποθετημένου κώδικα. Έτσι ενώ καθαρίζετε επάνω τον κώδικα ψάξτε τον περιττό τοποθετημένο κώδικα που τοποθετείται εκεί από wysiwyg σας το πρόγραμμα έκδοσης.
Ένα μεγάλο πρόβλημα με τη χρησιμοποίηση των ετικεττών HTML είναι ότι πρέπει να επαναλάβουμε την κωδικοποίηση ετικεττών όποτε αλλάζουμε τη μορφοποίηση. Η εμφάνιση css μας επιτρέπει ένα μεγάλο πλεονέκτημα στην καθαρή κωδικοποίηση με την άδεια μας στο σχεδιάγραμμα η μορφοποίηση μόλις σε ένα έγγραφο, κατόπιν απλά αναφερθείτε σε το επανειλημμένως.
Εάν είχαμε έξι παραγράφους σε μια σελίδα που μεταστρέφουν μεταξύ δύο διαφορετικών τύπων μορφοποιήσεων, όπως οι τίτλοι στο μπλε, του άρθρου σε εφημερίδα με μαύρους χαρακτήρες, Ariel, ταξινομεί 4 και το κείμενο παραγράφου στο Μαύρο, χρόνοι, μέγεθος 2, χρησιμοποιώντας τις ετικέττες που θα πρέπει να απαριθμήσουμε εκείνη την πλήρη μορφοποίηση κάθε φορά που κάνουμε μια αλλαγή.
(πηγή face=?Ariel; color=?blue; size=?4?)(b)Our τίτλος (/b) (/font)
(πηγή face=?Times color=?black; size=?2?)Our παράγραφος (/πηγή)
(πηγή face=?Ariel; color=?blue; size=?4?)(b)Our επόμενος τίτλος (/b) (/font)
(πηγή face=?Times color=?black; size=?2?)Our επόμενη παράγραφος (/πηγή)
Θα επαναλαμβάναμε έπειτα αυτό για κάθε τίτλο και την παράγραφο, μέρη του κώδικα HTML.
Με css θα μπορούσαμε να δημιουργήσουμε css τις μορφές για κάθε σχηματοποιώντας τύπο, να απαριθμήσουν τις μορφές μιά φορά στην επιγραφή της σελίδας, και έπειτα απλά αναφερόμαστε στο ύφος κάθε φορά που κάνουμε μια αλλαγή.
(κεφάλι)
(type="text ύφους/css")
(! - -
στυλε1 {
πηγή-οικογένεια: Arial, helvetica, χωρίς-πατούρα
πηγή-βάρος: τολμηρός
πηγή-μέγεθος: 24px
}
στυλε2 {
πηγή-οικογένεια: "TIMES NEW ROMAN", χρόνοι, πατούρα
πηγή-μέγεθος: 12px
}
)
(/ύφος)
(/κεφάλι)
(σώμα)
(π class="style1")Heading (/π)
(κείμενο π class="style2")Paragraph (/π)
(/σώμα)
Ειδοποίηση ότι οι μορφές δημιουργούνται στο επικεφαλής τμήμα της σελίδας και έπειτα απλά παραπέμπονται στο τμήμα σώματος. Δεδομένου ότι προσθέτουμε την περισσότερη μορφοποίηση θα συνεχίζαμε απλά να αναφερόμαστε στις προηγουμένως δημιουργημένες μορφές.
Αυτό είναι η τρίτη αρχή μας καθαρού κώδικα HTML: Css χρήσης μορφές όποτε πιθανός. Css έχει διάφορα άλλα οφέλη, όπως να είσαι σε θέση να τοποθετηθούν οι css μορφές σε ένα εξωτερικό αρχείο, με αυτόν τον τρόπο μειώνοντας τη σελίδα ταξινομήστε ακόμη και περισσότερων, και τη δυνατότητα να ενημερωθεί γρήγορα να σχηματοποιήσει περιοχή-ευρέως με απλά να ενημερώσει το εξωτερικό css αρχείο ύφους.
Έτσι με κάποιο απλό καθαρισμό του κώδικα HTML σας μπορείτε εύκολα να μειώσετε το μέγεθος αρχείων και να κάνετε μια γρήγορη φόρτωση, άπαχο κρέας και να σημάνετε ιστοσελίδας.
Περίπου ο συντάκτης:
Θ*Γεοργε Peirson είναι επιτυχείς επιχειρηματίας και εκπαιδευτής Διαδικτύου. Είναι ο συντάκτης πάνω από 30 πολυμέσων βάσισε τους διδακτικούς τίτλους κατάρτισης που καλύπτουν τέτοια θέματα όπως Photoshop, λάμψη και Dreamweaver. Να δει την κατάρτισή του θέτει την επίσκεψη www.howtogurus.com
Αρθρο Πηγη: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster παίρνει τον κώδικα HTML
Προσθεστε αυτο το αρθρο στον ιστοτοπο σας τωρα!
Webmaster υποβάλλει τα άρθρα σας
Εγγραφή που απαιτείται καμία! Συμπληρώστε τη μορφή και το άρθρο σας είναι στον κατάλογο Messaggiamo.Com
