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.

Afin de pouvoir agir sur les éléments du blog, il est indispensable de savoir les repérer et visualiser la manière dont il sont définis (identifiant, nom, classe...).

Pour visualiser comment est construit une page internet, vous pouvez afficher la source en cliquant avec le bouton droit sur la page et en cliquant « Afficher le code source de la page », « Code source de la page » ou « Afficher la source » en fonction du navigateur.

Il peut être difficile de répérer un élément dans ce code complexe.

Utilisez alors les outils de développement, accessible sur tous les navigateurs récents avec le raccourci clavier « F12 ».

Chercher l'icône de l'inspecteur d'élément : c'est une loupe ou une petite flèche.
Cliquez sur cette icône puis sur un élément de la page pour visualiser son emplacement et son code.

Chrome
Firefox
Internet exlorer (IE8)
Internet explorer (IE11)

Voici le découpage d'un blog :

Chacun des éléments suivant est défini par un identifiant unique (header, content...).

 1 : Le menu d'administration :
On y trouvera notamment le pseudo de connexion.

<div id="menubar" style="display: block;">...</div>

2, 3, 4, 5 et 6 sont regroupés dans un élément background :

<div id="background">...</div>

2 : l'en-tête du blog :
Affiche le titre et le slogan du blog, ainsi qu'un menu.

<div id="header">...</div>

3 : Le contenu du blog :
Pour l'affichage des articles et des pages.

<div id="content">...</div>

4 et 5 : les menus du blog :
Le nombre et le positionnement des menus sont fonctions du thème du blog.
Ils contiennent les modules.

<div id="menu1_float">...</div>
<div id="menu2_float">...</div>

6 : Le pied de page du blog :
Pour l'affichage d'informations diverses.

<div id="footer">...</div>

Connaissant ces identifiants, on peut alors agir en Javascript ou avec du CSS :

Exemple de code Javascript pour modifier la couleur de fond du contenu (notez que vous pouvez la modifier dans le thème du blog).

document.getElementById('content').style.backgroundColor="PowderBlue";

Exemple de code CSS pour modifier l'apparence de l'en-tête (bords arrondis) :

#header {
border:1px solid #eebb80;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; box-shadow:0px 3px 12px #777;-moz-box-shadow: 0px 3px 12px #777;-webkit-box-shadow: 0px 3px 12px #777;
margin-left:5px;
margin-right:5px;
}

 Zoom sur l'en-tête :

 1 : Le titre du blog :
Affiche le titre défini dans la configuration du blog.

<div id="titre_header">...</div>

 2 : Le slogan du blog :
Affiche le slogan défini dans la configuration du blog.

<div id="slogan_header">...</div>

 3 : Le menu du blog :
Affiche le menu défini dans « Apparence » => « Menu de l'en-tête ».

<div id="menu">...</div>

 Zoom sur le contenu:

Le contenu affiche les articles et pages du blog.
Ici pour l'exemple ce sont des articles.

Chaque élement de ce contenu est inséré dans un élément de liste (<li>).
Le code de la liste (<ul>) est :

<ul class="ulmodules" id="ulmodules">...</ul>

 1 : Le bloc d'édition :
Visible uniquement par les administrateurs du blog.

<li class="edition_block" id="module_articlesrecent" >...</li>

 2 : Un premier article.

<li id="module_article106837064">...</li>

 3 : Un deuxième article.

<li id="module_article106837060">...</li>

 Zoom sur un article :

L'article se décompose en un titre et un contenu.

 1 : Le titre.

<div class="module_titre">...</div>

Ce bloc titre se décompose en un bloc de menu (les boutons Editer et Supprimer) et un bloc de texte (de tag h1):

<div class="module_tools">...</div>
<h1 class="module_titre_contenu" id="module_titre_article106837064">

 2 : Le contenu.

<div class="module_contenu" id="module_contenu_article106837064"<>...</div>

Ce bloc contenu se décompose notamment en un bloc d'information et un bloc de texte :

<div class="article_info">...</div>
<div class="article_text">...</div>

 Zoom sur les menus :

Chaque élement d'un menu (c'est-à-dire un module) est inséré dans un élément de liste (<li>).
Le code de la liste (<ul>) est (le numéro de menu varie de 1 à 2):

<ul class="ulmodule_menu" id="ulmenu2">...</ul>

 1 et 2 : Des modules standards.
Le contenu de ces modules est défini par Eklablog.
Ils ont une classe particulière : module_menu_type_stats, module_menu_type_links...

<li class="module_menu_type_stats" id="module_menu140021266">...</li>
<li class="module_menu_type_links" id="module_menu140021268">...</li>

 3 et 4 : Des modules simples.
Le contenu de ces modules est défini par l'administrateur du blog (vous).
Ils ont tous la même classe : module_menu_type_html.

<li class="module_menu_type_html" id="module_menu140021314">...</li>
<li class="module_menu_type_html" id="module_menu140021546">...</li>

 Zoom sur un module :

Comme pour un article, un module se décompose en un titre et un contenu.

 1 : Le titre.

<div class="module_menu_titre">...</div>

Ce bloc titre se décompose en un bloc de menu (les boutons Editer et Supprimer) et un bloc de texte :

<div class="module_tools">...</div>
<span id="module_menu_titre140021266">...</span>

 2 : Le contenu.

<div class="module_menu_contenu" id="module_menu_contenu140021268">...</div>

Si vous cherchez un élément non cité ci-dessous, utilisez les outils de développement du navigateur (F12)