css-html blogger, commentez votre code

Lancé que je suis dans une "série" d'articles sur le css, je vais un peu ouvrir le sujet dans ce post, en vous proposant de commenter votre code "html". Mais avant je vais repréciser certains termes, cela vous aidera dans vos recherche sur le net et sur la compréhension globale du fonctionnement de votre blog.

html: (syntaxe sur wikipédia)
html est toujours le code qui permet à votre navigateur (Internet Explorer, Firefox, etc...) d'afficher une page web. Le code originel de la page n'est pas forcément en html, mais le code envoyé au navigateur est toujours dans ce langage de programation.
Pour visualiser le code html d'une page (celle ci par exemple) dans votre navigateur aller à:
Page (Internet Explorer) ou affichage (Firefox), puis
Afficher source (IE) ou code source de la page (Ff).
Par "extension" et pour vous simplifier la vie, blogger regroupe tout son code sous cette appellation (ndlr. code html).

css: (détails wikipédia)
le css n'est pas vraiment du html, ni un véritable code de programation d'ailleurs, le css c'est ce qui donne à votre navigateur les indications sur l'apparence de votre page. Si vous souhaitez qu'un texte apparaisse en rouge, il vous faudra le stipuler dans le code css. Auparavant ces indications étaient intégrées aux balises html, grâce à un attribut appelé "style". On en retrouve encore dans les codes html, mais on essaie au maximum d'éviter. L'idée est de séparer grâce au css, les indications de style du code html proprement dit. Voici comment se présente un style intégré à une balise html:
<div style="color: red;">
Pour repèrer la partie css de votre blog, consultez la page css blogger sur gpooo.


XML: (explications wikipédia)
le xml est le code originel de nos blogs blogger (et d'autres bien sûr), un peu moins facile à lire, il n'en est pas moins très explicite. C'est d'ailleurs son fondement, pouvoir décrire chaque section dans le balisage même, puis l'interpétrer et le convertir en html avant l'envoi au navigateur. En voici un exemple:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>


Dans l'exemple ci dessus vous retrouvez des balises html (h3, a) et à l'intérieur des parties style b:if ou b:else qui sont du codage xml. Vous aurez surement remarqué que la section le titre du post (post.title).

Donc résumons, nos blogs sont codés en xml, leur apparence est définie par les styles css, puis le code est traduit en html et envoyé au navigateur.

Pour les profanes les plongées dans le code "html" des blogs a souvent un parfum d'aventure, on se sent comme le petit poucet. et bien comme le petit poucet nous allons apprendre à baliser le code avec des "petits cailloux blancs" pour nous y retrouver facilement et identifier les différentes parties.

Commentez votre code "html" blogger.

Je vais commencer par la partie css (c'est un peu la partie haute de la page du code). Dans cette section les commentaires s'écrivent:

/* Ici_Votre_Commentaire*/

Pour un exemple précis ce pourrait donner:

/*liens barre latérale*/
a .sidebar{
text-decoration: underline;
text-color: blue;
}

En commentant une partie bien particulière vous retrouverez plus facilement vos modifications, pour corriger ou remodifier l'apparence de votre blog et vous comprendrez plus facilement votre code. N'abusez pas des commentaires quand même, ils valent surtout si ils sont rares et explicites.

Passons maintenant aux commentaires html et xml. Dans cette partie (entre les balises body et /body) les commentaires s'écrivent sous cette forme:

<!--Ici_Votre_Commentaire-->

Dans l'exemple de code xml au dessus ce pourrait être:

<!--Titre du post-->
<h3 class='post-title'>
etc...

Voilà, n'abusez pas des commentaires mais utilisez cette possibilité, qui vous fera gagner beaucoup de temps, de manière précise et concise.