Les trois principes de l'optimisation de code de HTML

Juste comme le ressort nettoyant une maison, le code de HTML de vos pages Web devrait obtenir le nettoyage périodique aussi bien. Avec le temps, en tant que des changements et mises à jour sont faits à une page Web, le code peut devenir sali avec l'image de fond inutile, ralentissant les moments de chargement de page et blessant l'efficacité de votre page Web. Le HTML encombré peut également sérieusement effectuer votre rang de Search Engine.

C'est particulièrement vrai si vous employez un paquet de conception de Web d'IMPRESSION CONFORME À LA VISUALISATION (ce que vous voyez est ce qui obtenez vous) tel que le Frontpage ou le Dreamweaver. Ces programmes accéléreront votre création de site Web, mais ils ne sont pas celui efficace au code propre de HTML d'écriture.

Nous concentrerons cette discussion sur le codage réel de HTML, ignorant d'autres langages de programmation qui peuvent être employés dans une page telle que le Javascript. Dans les exemples de code j'emploierai (et) des caractères au lieu du HTML correct de sorte que les exemples de code montrent correctement en ce bulletin.

Jusque récemment en codant une page dans le HTML nous épuiserions des étiquettes telles que l'étiquette (de police) et (p) des étiquettes de paragraphe. Entre ces étiquettes être notre contenu, texte, images et liens de page. Chaque fois que un changement de formatage a été fait sur la page que de nouvelles étiquettes étaient nécessaires avec le formatage complet pour le nouveau sectionnent. Plus récemment nous avons gagné la capacité d'employer les feuilles de cascade de modèle, nous permettant d'écrire le formatage une fois et de nous référer alors à ce formatage plusieurs fois dans une page Web.

Afin d'accélérer les moments de chargement de page nous devons avoir peu de caractères à la page une fois vus dans un rédacteur de HTML. Puisque nous vraiment ne voulons enlever aucun de notre contenu évident nous devons regarder au code de HTML. En nettoyant ce code nous pouvons enlever des caractères, créant de ce fait une plus petite page Web qui chargera plus rapidement.

Le HTML fini de temps a changé et nous avons maintenant beaucoup de différentes manières de faire la même chose. Un exemple serait le code employé pour montrer un oeil d'un caractère audacieux. Dans le HTML nous avons deux choix principaux, l'étiquette (forte) et (b) l'étiquette. Comme vous pouvez voir que l'étiquette (forte) emploie 5 caractères supplémentaires que (b) l'étiquette, et si nous considérons les étiquettes de fermeture aussi bien nous voyons cela employer (fort) des utilisations de paire de l'étiquette (/strong) 10 caractères supplémentaires que (b) (/b) la paire plus propre d'étiquette.

C'est notre premier principe de code propre de HTML : Employer la méthode de codage la plus simple disponible.

Le HTML a la capacité du code d'emboîtement dans l'autre code. Par exemple nous pourrions avoir une ligne avec trois mots où le mot moyen était dans audacieux. Ceci pourrait être accompli en changeant le formatage complètement chaque fois que le formatage évident change. Considérer ce code : (le face= de police » chronomètre ») ceci (/font) (le face= de police » chronomètre ») (fort) AUDACIEUX (/strong) (/font) (le face= de police » chronomètre ») le Word (/font) ceci prend 90 caractères.

C'est HTML très mal écrit et est ce qui obtiendrez vous de temps en temps quand en utilisant un rédacteur d'IMPRESSION CONFORME À LA VISUALISATION. Depuis les étiquettes (de police) répètent la même information que nous pouvons simplement nicher les étiquettes (fortes) à l'intérieur des étiquettes (de police), et meilleur pourtant employer (b) l'étiquette au lieu de l'étiquette (forte). Ceci nous donnerait ce code (temps de face= de police des ») ce (b) Word (/b) AUDACIEUX (/font), prenant seulement 46 caractères.

C'est notre deuxième principe de code propre de HTML : Employer les étiquettes nichées si possible. Se rendre compte que les rédacteurs d'IMPRESSION CONFORME À LA VISUALISATION mettront à jour fréquemment le formatage en ajoutant la couche après couche de code niché. Ainsi tandis que vous nettoyez le code rechercher le code niché superflu placé là par votre IMPRESSION CONFORME À LA VISUALISATION éditant le programme.

Un grand problème avec employer des étiquettes de HTML est que nous devons répéter le codage d'étiquette toutes les fois que nous changeons le formatage. L'arrivée du CSS nous permet un grand avantage dans le codage propre en nous permettant à la disposition le formatage une fois dans un document, se rapportent alors simplement à lui à plusieurs reprises encore.

Si nous avions six paragraphes dans une page qui commutent entre deux types différents de formatage, tels que des titres dans bleu, audacieux, Ariel, classent 4 et divisent en paragraphes le texte dans le noir, périodes, la taille 2, en utilisant des étiquettes que nous devrions énumérer ce formatage complet chaque fois que nous faisons un changement.

size= » noir 2 » » chronomètre (color= » de face= de police de color= size= » de » (Ariel » de face= de police bleu » » 4 ») (b) notre titre (/b) (/font) le ») notre paragraphe (/font) color= size= » » bleu » 4 » d'Ariel » (de face= » de police) (b) notre prochain titre (/b) (/font) (face= de police » chronomètre le size= » noir » » 2 » de color=) notre prochain paragraphe (/font)

Nous répéterions alors ceci pour chaque titre et paragraphe, un bon nombre de code de HTML.

Avec le CSS que nous pourrions créer des modèles de CSS pour chaque type de formatage, énumérons les modèles une fois dans l'en-tête de la page, et référons-nous alors simplement au modèle chaque fois que nous faisons un changement.

(tête) (type= \" texte/CSS \" de modèle) (! -- .style1 {

police-famille : Arial, helvetica, caractères sans obit et sans empattement ;

police-poids : audacieux ;

police-taille : 24px ; } .style2 {

police-famille : « Nouveau romain de périodes », périodes, empattement ;

police-taille : 12px ; } --) (/style) (/head) (corps) (class= \" style1 \" de p) texte de paragraphe du titre (/p) (class= \" style2 \" de p) (/p) (/body)

Noter que les modèles sont créés dans la section principale de la page et simplement puis mis en référence dans la section de corps. Car nous ajoutons plus de formatage nous continuerions simplement à nous référer aux modèles précédemment créés.

C'est notre troisième principe de code propre de HTML : Employer les modèles de CSS si toujours possible. Le CSS a plusieurs autres avantages, tels que pouvoir placer les modèles de CSS dans un dossier externe, réduisant de ce fait la taille de page encore plus, et la capacité de mettre à jour rapidement le formatage emplacement-large en mettant simplement le dossier externe de modèle de CSS.

Ainsi avec du nettoyage simple de votre code de HTML vous pouvez facilement réduire le volume de fichier et faire un chargement rapide, un maigre et une page Web moyenne.