Tout comme une maison de nettoyage du printemps, le code html de vos pages web devrait obtenir ainsi de nettoyage périodique. Au fil du temps, comme des changements et des mises à jour sont apportées à une page web, le code peut devenir jonché d'objets superflus, ralentir le temps de chargement de page et de nuire à l'efficacité de votre page web. Html encombré peut affecter sérieusement votre rang de moteur de recherche.
Cela est particulièrement vrai si vous utilisez un package de conception de web WYSIWYG (What You voir est What You Get) comme FrontPage ou Dreamweaver. Ces programmes d'accélérer la création de votre site web, mais ils ne sont pas efficaces qu'à écrire du code html pur.
On se concentrera cette discussion sur la réelle html coding, ignorant les autres langages de programmation qui peuvent être utilisés dans une page comme JavaScript. Dans les exemples de code je serai en utilisant (et) caractères au lieu de html correct pour que les exemples de code seront affichent correctement dans ce bulletin.
Jusqu'à tout récemment lors du codage d'une page en HTML nous allait utiliser des balises comme la balise (police) et les balises de paragraphe (p). Entre ces balises serait notre contenu de la page, le texte, les images et les liens. Chaque fois qu'un changement de mise en forme a été fait sur la page nouvelles balises ont été nécessaires avec un formatage complet pour la nouvelle section. Plus récemment, nous avons acquis la capacité d'utiliser les feuilles de Style CSS, ce qui nous permet d'écrire une fois le formatage et ensuite désigner que plusieurs fois dans une page web de mise en forme.
Afin d'accélérer les temps de chargement de page, nous avons besoin d'avoir le moins de caractères sur la page dans un éditeur html. Étant donné que nous ne voulons vraiment pas enlever nos visible contenu nous devons examiner le code html. Par nettoyage de ce code, nous pouvons supprimer les caractères, créant ainsi une page web plus petits qui se chargera plus rapidement.
Au fil du temps, HTML a changé et nous avons maintenant plusieurs façons de faire la même chose. Un exemple serait le code utilisé pour montrer un visage gras. En HTML, nous avons deux choix principaux, la balise (forte) et la balise (b). Comme vous pouvez le voir que la balise (forte) utilise plus de 5 caractères de la balise (b), et si nous considérons les balises de fermeture ainsi nous voyons qu'en utilisant le (strong)(/strong) balise paire utilise 10 plus caractères que le nettoyeur (paire de balise b)(/b).
C'est notre premier principe du propre code HTML: Utilisez la méthode de codage plus simple disponible.
HTML a la capacité de nidification code dans un autre code. Nous pourrions par exemple avoir une ligne avec trois mots où le mot moyen était en caractères gras. Cela peut être accompli en modifiant la mise en forme complètement chaque fois que les modifications de mise en forme visibles. Examinons ce code :
(font face = « times »)This(/font)
(font face = « times »)(fort)Bold(/Strong)(/font)
(font face = « times »)Word(/font)
Cela prend 90 caractères.
Cela est très mal écrit html et que vous parfois vont obtenir lors de l'utilisation d'un éditeur WYSIWYG. Étant donné que les balises (police) sont de répéter les mêmes informations, nous pouvons simplement imbriquer les balises (forts) à l'intérieur des balises (police) et mieux encore utiliser la balise (b) au lieu de la balise (forte). Cela nous donnerait ce code (font face = "times) ce (b)BOLD(/b) Word(/font), prenant seulement 46 caractères.
C'est notre deuxième principe de la propre code HTML: Utilisez les balises imbriquées lorsque cela est possible. Sachez que les éditeurs WYSIWYG mettra à jour fréquemment mise en forme en ajoutant la couche après couche de code imbriqué. Si bien que vous sont nettoyer le look du code pour le code imbriqué redondant, placé là par votre programme d'édition WYSIWYG.
Un gros problème avec l'utilisation de balises HTML est que nous avons besoin de répéter le codage de balise chaque fois que nous avons changer la mise en forme. L'avènement des CSS nous permet un grand avantage en propre de codage en nous autorisant à disposition la mise en forme une fois dans un document, puis simplement désigner il maintes et maintes fois.
Si nous avons eu six paragraphes dans une page qui passent entre les deux différents types de mise en forme, telles que les rubriques en bleu, gras, Ariel, taille 4 et le texte de paragraphe en noir, fois, taille 2, à l'aide de balises nous devront ce formatage complet chaque fois que nous faisons un changement de la liste.
(font face = « Ariel » couleur = taille « bleu » = « 4 »)(b)Notre heading(/b)(/font)
(font face = taille noir » « Temps couleur = » = « 2 »)Notre paragraph(/font)
(font face = « Ariel » couleur = taille « bleu » = « 4 »)(b)Notre prochaine heading(/b)(/font)
(font face = taille noir » « Temps couleur = » = « 2 »)Notre prochaine paragraph(/font)
Nous aurait ensuite répéter pour chaque titre et paragraphe, beaucoup de code html.
Avec CSS nous pourrions créer des Styles CSS pour chaque type de mise en forme, les Styles une fois dans l'en-tête de la page de la liste et ensuite simplement désigner le Style chaque fois que nous apportons un changement.
(chef)
(style type = « text/css »)
(!--
{.style1
font-family : Arial, Helvetica, sans-serif ;
font-weight : bold ;
font-size : 24px ;
}
{.style2
font-family: « Times New Roman », Times, serif ;
font-size : 12px ;
}
--)
(/ style)
(/)
(corps)
(classe de p = « style1 »)Heading(/p)
(classe de p = « style2 »)Paragraphe Text(/p)
(/)
Notez que les Styles sont créés dans la section Head de la page et ensuite simplement référencés dans la section de corps. Comme nous ajoutons plus de mise en forme, nous continuerions simplement désigner les Styles créés précédemment.
C'est notre troisième principe de pur HTML Code : Utiliser les styles CSS lorsque cela est toujours possible. CSS a plusieurs autres avantages, tels que d'être en mesure de placer les styles CSS dans un fichier externe, ce qui réduit la taille de la page encore plus et la capacité de mettre à jour rapidement l'échelle du site-mise en forme par simple mise à jour le fichier de Style CSS externe.
Avec un simple nettoyage de votre code HTML vous pouvez facilement réduire la taille du fichier et faire un chargement rapide, maigre et signifie la page web.
No comments:
Post a Comment