Comprendre le code HTML

20/08/2012 09:42

Bruno m'a invité sur ce blog et je suis heureux d'y publier mon premier article sur la nouvelle plateforme. J'ai découvert cette dernière il y a un mois et elle présente de nombreuses insuffisances... Par exemple, pour vraiment personnaliser son blog, il faut passer par une modification du code HTML, ce qui n'est pas à la portée de tout le monde. Mais le langage HTML se révèle vite assez simple, comparé à d'autres langages (PHP, script).

Pour les débutants, petit cours rapide avec la construction d'un code simplifié.

A l'origine

Si on part de presque 0, le code HTML se compose ainsi :

<html>
      
<head>
     <style type="text/css">

    </style>
</head>

<body>

</body>

</html>

Entre les lignes 4 et 6, doit se trouver la feuille de style en langage CSS. Il s'agit de la mise en forme du blog : tailles, bordures, couleur, police, etc.

Entre les lignes 9 et 11 sont inclus tous les éléments qui composent le blog : titre du blog, articles, modules divers.

Avec ce code initial, le blog est vide.

Premier élément

Ajoutons un élément : le cadre qui contient le blog appelé arbitrairement global. Entre les lignes 9 et 10 ci-dessus, est ajouté cet élement avec une balise ouvrant et une balise fermante div.

<div id="global"></div>

Côté CSS, nous ajoutons pour la mise en forme globale (body) et celle du cadre (global) :

/*----body--------*/
body {width: 100%; font-family: 'Arial', Verdana, Helvetica;color:black; font-size: 15px; }
/*----cadre du blog----*/
#global {width: 800px; height: 800px; margin:auto; background-color:blue;}

Ce qui donne en affichage sur le blog un simple cadre bleu de 800 x 800 px. Avec encore rien dedans.

Deuxième élément : liste des articles

Un blog est composé d'articles. Ajoutons donc les articles. Bien sûr, ils ne sont pas écrits dans le code mais dans l'éditeur d'articles de la plateforme. Dans le code, chaque article est "récupéré" avec un méta langage. Le titre d'un article s'écrit simplement {{ Post.Title }} et le corps de l'article {{ Post.Body }}. La liste des articles s'écrit commence par {% list Posts %} et finit par {% end list %}.

Dans notre exemple simplifié, la liste des articles est comprise dans un élément appelé arbitrairement cadre-articles. Selon le principe des poupées russes, la liste est comprise dans cet élément cadre-articles... lui même compris dans l'élément global... lui même compris dans le body.

Dans le CSS, une ligne est ajoutée pour le nouvel élément : #cadre-articles {color:white;}

<body>
 <div id="global">
    <div id="cadre-articles">
        {% list Posts %}
            {{ Post.Title }}
            {{ Post.Body }}  
        {% endlist %}
    </div>
 </div>
</body>

Sur le blog, est ainsi affiché une simple liste des articles en blanc sur fond bleu. On remarque que la section lien du premier article a une mise en forme par défaut.

Colonne droite

Généralement, le blog comprend une ou deux colonne sur le côté. On peut y mettre par exemple la liste des 5 derniers articles notée list Blog.Posts(5) (chaque élément étant compris entre <li> et </li>).

<body>

<div id="global">
    <div id="cadre-articles">
        {% list Posts %}
            {{ Post.Title }}
            {{ Post.Body }}  
        {% endlist %}
    </div>
    <div id="colonne-droite">
        </ul>
        {% list Blog.Posts(5) %}
             <li>
            {{ Post.Title }}
            </li>
        {% endlist %}
        <ul>
    </div>
    
</div>

</body>

Le CSS est modifié pour définir la position et la taille des colonnes.

#cadre-articles {float:left;width:600px;}
#colonne-droite {float:right;width:200px;}

Le blog comprend alors deux colonnes, l'une positionnée à gauche l'autre à doite avec une petite liste d'articles. Le fond bleu a été enlévé.

A vous de "jouer"

Ceci était pour expliquer comment fonctionne le code HTML et le CSS.

Partir de zéro, pour un débutant, serait fastidieux. Mais le code du thème choisi peut être modifié par petites touches... jusqu'à ne plus ressembler à celui d'origine. En regardant un peu le code, on découvre vite comment est inséré tel ou tel élément, comment se construit un lien, un titre ou un paragraphe ou comment s'ajoute une image.

Il existe sur le web des tutoriels complets sur le HTML tel celui-ci qui me paraît assez simple : Tutoriel HTML

Voici le code complet de l'exemple :

<html>
      
<head>
     <style type="text/css">
body {width: 100%; font-family: 'book antiqua', 'Tahoma', 'Arial', Verdana, Helvetica; font-size: 15px; color:#1F2A36; }

/*----cadre du blog----*/
#global {width: 800px; margin: auto;background-color:blue;}
#cadre-articles {float:left;width:600px;}
#colonne-droite {float:right;width:200px;}
    </style>
</head>

<body>

<div id="global">
    <div id="cadre-articles">
        {% list Posts %}
            {{ Post.Title }}
            {{ Post.Body }}  
        {% endlist %}
    </div>
    <div id="colonne-droite">
        </ul>
        {% list Blog.Posts(5) %}
             <li>
            {{ Post.Title }}
            </li>
        {% endlist %}
        <ul>
    </div>
    
</div>

</body>

</html>