Comprendre le code HTML (suite)

22/08/2012 15:26

Petit supplément à mon article précédent pour ceux qui veulent se lancer dans la modification du code HTML.

Dans mon précédent article, j'expliquais le fonctionnement du code HTML sur la nouvelle plateforme avec un exemple simplifié. Un code complet peut tout de même difficile à comprendre... surtout s'il est n'est pas bien organisé... Et il faut que j'applique ce conseil pour mon propre code qui manque d'ordre.

L'ajout de ligne de commentaires permet de délimiter les parties du blog et de se répérer dans le code.


<!------------------MODULES DE DROITE---------------->

 <div class="sidebar">

</div>

Le code se complexifie aussi avec la possibilité de différencier les différentes pages.

Vous trouverez ainsi des conditions du type si : {% if isSingle %}

- Single, c'est pour l'article affiché seul. Tout ce qui suit le {% if isSingle %} ne concernera qu'une telle page... jusqu'à {% else %} (sinon) ou {% endif %} (fin).

A noter :

- Index, c'est la page d'accueil

- Tag, la page d'un tag

- Search, la page des résultats de recherche

- Page, la page... d'une page.

Il faut donc savoir où on se trouve avant d'écrire une ligne de code

- Dans quel bloc : à repérer le début <div class="nom-classe> ou <div id="nom-id> et la fin du bloc </div>

- Dans quelle condition entre {% if... %} et {% endif %} (avec aussi la possibilité d'un sinon traduit en else)

- Dans quelle liste qui commence par {% list.... %} et finit par {% endlist %}.

Exemples

Le code suivant est incomplet (je n'ai pas encore mis la liste)... et erroné :

<!---------------MODULES DE DROITE---------------------->

{% if isSingle %} 
<div class="sidebar">
    <!------module articles récents----->
    <div="list-post">
          <!-----titre--->
          <h2>Catégories</h2>   
            
    </div>
{% endif %}
</div>

Le {% end if %} devrait être à la ligne 13 pour inclure la fermeture </div> de la sidebar qui est dans ce cas seulement présente sur la page d'accueil (ce qui peut être un choix).

Je suis le premier à me rendre compte que c'est en faisant des erreurs qu'on apprend... toute erreur étant sans gravité dans un blog test (ou non).

En cas d'erreur, un message sur fond rouge s'affiche. Sinon, la modification est visible sur le blog. Si la liste, le lien ou l'image n'est pas au bon endroit... mais pas loin, c'est presque bon.

Un petit conseil : faire régulièrement lors de tests un copier-coller du code en entier dans un fichier texte... C'est plus facile en cas de grosse boulette de revenir en arrière en recopiant le code.

Après cette petite explication, le code suivant ne doit pas être difficile à "lire".

<div class="header">
 <div class="wrap">
   <div class="head">
     
     <!-- Titre du blog -->
     <div class="logo">
       <h1><a href="{{ Blog.Url }}">{{ Blog.Title }}</a></h1> 
     </div> <!-- fin class logo --> 

     
     <!-- barre haut -->               
     <div class="navigation">
       <ul>
       <li><a href="{{ Blog.Url }}">{{ Lang.Get('Accueil') }}</a></li>
       <li><a href="{{ Blog.Url }}/tag/musique" title="Aide over-blog">Musique</a></li>
       <li><a href="{{ Blog.Url }}/contact" title="{{ Lang.Get('Contact') }}">{{ Lang.Get('Contact') }}</a></li>
        </ul>
      </div> <!-- fin class navigation -->  
        
   </div> <!-- fin class head --> 
 </div>    <!-- fin class wrap -->  
</div>  <!-- fin class header -->

Entre les ligne 5 et 8 se trouve le bloc du titre du blog

Entre les lignes 10 et 18 se trouve la barre de menu avec le lien "accueil", un lien vers un tag défini (Musique) et le lien "contact" (dans une liste).

Ces deux blocs sont inclus dans le bloc head, inclus dans le bloc wrap, inclus lui-même dans le blog head. Ce qui donne ceci :

Si un code paraît trop compliqué, il n'est pas interdit de le simplifier.

Une petite remarque : chaque design a un code différent avec des noms de classe différents... ce qui ne facilite pas l'entraide entre blogueurs. Mais n'hésitez pas à poser des questions.