Mise en forme avancée

Blogger, en mode ‘Modifier le code HTML’ autorise les possibilités offertes par ce langage et aussi l’insertion de scripts (Java par exemple). Il faut cependant une bonne maîtrise pour ‘coder dans le texte’ sans le support apporté par des logiciels spécialisés comme Dreamweaver. Il est intéressant d'avoir quelques rudiments de HTML pour contourner les petits tracas dus à la rusticité de l’éditeur mais cela n’est pas indispensable.

Il faut reconnaître que Blogger ne comporte que peu de limitations ce qui est assez remarquable et qu’une solution de contournement en cas de problèmes est généralement possible.

Décrire les possibilités du langage HTML sort du cadre de ce tutoriel mais voici, à titre d’exemple : Comment encadrer un texte pour un néophyte. Un encart est effectivement une ressource abondamment utilisée dans la publication d’articles et il est intéressant de connaître l’astuce :

• Passer en mode ‘Modifier le code HTML’
  
  
• Repérer le texte et avant le texte à encadrer copier les balises d’ouvertures suivantes :
  
  
  <table align="center" border="1" cellpadding="10" width="95%"> <tbody><tr><td>
  
  
  
• Après le texte à encadrer copier les balises de fins suivantes :
  
  
  </td ></tr ></tbody ></table >

La zone encadrée peut contenir texte et images mais il faut impérativement placer les balises de fermeture après la fin d’une zone de description d’image, ou plus simplement après un texte, pour éviter tout problème lors de la lecture du code HTML.

Un exemple sur nanoZine : Les systèmes récifaux naturels

Cette technique permet aussi la création de tableaux.
Voici le code HTML d'un tableau de 3 lignes et de 5 colonnes :

Après l'entête <TABLE> et <TBODY> vue précédemment, chaque ligne est identifiée par la commande <TR>. Chaque colonne est identifiée par la commande <TD> (ou <TH>; dans le cas de la premiere ligne si on souhaite la marquer par un titre de colonne).

<table table align="center" border="1" cellpadding="10" width="95%">
<tbody align="center">
<tr>
<th>COL 1</th> <th>COL 2</th> <th>COL 3</th> <th>COL 4</th> <th>COL 5</th>
</tr>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>
</tr>
<tr>
<td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td>
</tr>
</tbody>
</table border>

Il est conseillé de supprimer les sauts de ligne pour éviter qu'il soient également placés dans le tableau. Ceux-ci ont été ajoutés pour faciliter la lecture et la compréhension de la structure du tableau.

Voici le résultat affiché par le browser :

COL 1	COL 2	COL 3	COL 4	COL 5
1	2	3	4	5
A	B	C	D	E

Autre exemple l’insertion d’une vidéo hébergée sur un serveur spécialisé. Ici également il suffit ‘d’entrer dans le code HTML’ pour placer la vidéo au sein de l’article. Dans cet exemple l’image est hébergée avec Google vidéo :

<center><embed style='height:240px;width:320px' id=VideoPlayback type="application/x-shockwave-flash" src=http://video.google.com/googleplayer.swf?docId=4284532101948198181&hl=fr quality=best bgcolor="#000000" scale=noScale salign=TL flashvars="playerMode=embedded" align=middle></center>

Il est nécessaire d’entrer l’adresse http du serveur hébergeant le film et éventuellement ajuster la hauteur (height :) ainsi que la largeur (width :) de l’image en pixels.

Il faut également noter que le modèle du blog est basé sur une feuille de style CSS et qu’une utilisation avancée bénéficie de la connaissance de ce modèle. A charge aux administrateurs du blog de communiquer le code source du modèle aux auteurs le demandant et aptes à l’exploiter.

Pour info : Vue de la vidéo (merci à Richard Parisot) :



Il reste à tester le résultat en publiant le message blog après avoir recopier la chaîne de caractères de vérification (anti-spam). Comme le travail s’effectue sur un blog ‘caché’ il n’y a aucun inconvénient à publier le message. Je conseille de vérifier le résultat avec Internet Explorer et Modzilla Firefox qui sont les principaux browsers Internet utilisés.

Derniers conseils pour votre rédaction

• Essayez d’écrire des phrases courtes, sans double sens, faciles à lire et à comprendre.
• Relisez-vous à voix haute.
• Limitez l’emploi des acronymes et des mots complexes. Si cela est cependant nécessaire donnez-en le sens très simplement.
• Vérifiez l’orthographe.
  

Fin de la première partie

J’espère avoir éclairci les quelques points nécessaires pour participer en tant que rédacteur à un blog collaboratif, maintenant… à vous de jouer !

JLC (Jean-louis Cuquemelle)

Plus d’info ? : Contact

PS : Votez pour la suite (menu latéral en haut à droite)