Dans Eklablog, on écrit ses articles avec un éditeur (pour information c'est TinyMCE).
Cela permet, sans connaissance du langage HTML, d'écrire du texte formaté, d'ajouter des images...

Cependant il n'est pas possible de tout faire avec cet éditeur visuel.
Par exemple si j'ajoute une image puis du texte, j'obtiens :

Bouton pour afficher le code HTML.

Le code généré par l'éditeur (visible en cliquant sur le bouton « Code Source ») est le suivant :

<p><img class="undefined" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

• <p> est un paragraphe ;
• <img> est l'image.

L'image possède un attribut src qui contient le chemin de l'image à afficher.

Notez que le texte s'affiche à droite de l'image, aligné en bas.
Pour l'exemple, je souhaiterais qu'il s'affiche toujours à droite mais aligné au centre.

On trouve le code nécessaire par exemple ici : Comment aligner verticalement une image et une ligne de texte-texte.html

Le code nécessaire est : vertical-align:middle;
C'est en fait un style que l'on pourrait appliquer avec du code CSS mais qu'il est possible d'écrire pour un unique élément dans son attribut style.

Ajoutez le texte en bleu dans l'éditeur de code HTML :

<p><img class="undefined" style="vertical-align:middle" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

On obtient alors l'effet désiré :

Bouton pour afficher le code HTML.

Pour aller un peu plus loin, nous allons ajouter une bordure à l'image.
Ajoutez le texte en bleu dans l'éditeur de code HTML :

<p><img class="undefined" style="border: 2px solid DarkRed;vertical-align:middle" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

On demande une bordure de 2px, solid (c'est-à-dire un trait plein) et de couleur DarkRed (rouge sombre).

 Vous trouverez la liste des couleurs par exemple ici.

On obtient alors une bordure rouge :

Bouton pour afficher le code HTML.

 C'est très bien, mais si je souhaite utiliser ce style pour d'autres images ?

On peut alors utiliser du code CSS pour définir une classe réutilisable.
Cela évitera de devoir rechercher le style pour le copier-coller.

Pour un premier code CSS, voir cet article : Mon premier code CSS - images au coins arrondis avec ombrage.

Ajoutez ce code au CSS du blog ; c'est tout simplement le contenu de l'attribut « style » défini pour une classe « monimagecentre » :

.monimagecentre {border: 2px solid DarkRed; vertical-align: middle;}

Il suffit alors uniquement de préciser dans le code HTML la classe pour chaque image à laquelle on souhaite appliquer le style :

 <p><img class="monimagecentre" src="http://ekladata.com/6FMS6ihA1mrK63q3Fl2dmCOSkUA/html.jpg" alt="" width="177" height="99" />Bouton pour afficher le code HTML.</p>

Pour un style un peu complexe, il est alors plus simple de définir une classe que l'on a nommée de manière à la retenir facilement (on peut également retrouver son nom rapidement en regardant le CSS du blog) que de définir à chaque fois tous les attributs de style.

En fait on utilisera souvent le HTML conjointement avec du code CSS et/ou Javascript.