Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Comprendre le code HTML

- Auteur : Si tu suis mon regard

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.

Comprendre le code HTML
  • 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.

Comprendre le code HTML
  • 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é.


Comprendre le code HTML
  • 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>

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Dominique 20/08/2012 09:42

Superbe merci pour tout cela ..ne manquera plus qu' à oser franchir le pas

Alice 19/08/2012 23:22

Magnifique ! Merci Iv-oam pour ce partage de savoir ...

Ce blog de support prend un essor qui me rend très optimiste pour la suite !

Bonne soirée !

Iv-oam 19/08/2012 14:34

Je proposera un nouvel article demain soir. En attendant, toutes les questions sont les bienvenues.

Bruno admin créateur de ce blog 19/08/2012 12:07

Merci à Arnaud pour cette première contribution, claire, concise etdétaillée mais surtout très simple à appréhender.
Continues à publier des posts de la même qualité :)

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...