Ma galère avec les balises html et les feuilles de sytle css :/

J’ai commencé ce blog sans avoir jamais écrit une vraie ligne html et sans savoir ce qu’étaient les feuilles de style css.
De plus, WordPress interprète le code html que l’on écrit, ce qui ne simplifie pas la tâche…
Voici un petit résumé de ce que j’ai glané sur internet. Ça me servira de pense-bête, et aussi à faire rire les experts. Je n’ai pas mis de liens, j’ai consulté tellement de pages, de tutos, c’est une compil d’infos bien éparpillées. La documentation WordPress m’a aussi aidée.

1- Les balises pre

Pour styliser les balises <pre></pre>, il faut inclure un code de ce type dans le fichier style.css du thème WordPress :

pre {border: solid 1px silver;
color:000000 ;
margin: 10px;
padding:10px;
background: #e5e8d9}

Je l’ai mis tout en haut, après la définition des polices. Je ne sais pas si c’est la bonne place. Il vous faudra ajuster bien sûr les couleurs, la bordure et les espacements à vos goûts. Par défaut, la police est monospace. Vous pouvez la changer ici. Sur internet, on trouve souvent des exemples avec des tailles de police différentes du corps du texte. Quelques essais m’ont fait garder la même taille ;-)

Le problème avec les balises pre, c’est qu’il n’y a pas de retour à la ligne automatique. Si vous voulez insérer un long texte avec le ce formatage, il faut introduire des <br /> là où il faut (ce qui n’est pas le cas dans l’exemple affiché) pour passer à la ligne suivante et ne pas déborder du cadre de la fenêtre de l’article. Par contre, un copier/coller de votre code sera correct, même avec ces retours à la ligne forcés.

2- Les balises code

C’est bien pratique pour insérer une commande dans une phrase, sans forcément utiliser les balises pre. J’ai laissé le formatage par défaut. Donc en incluant votre texte entre des balises <code></code> vous obtiendrez ceci : voici mon code.

3- Afficher à l’écran des caractères inteprétés

Sans savoir si c’est le cas de toutes les applications gérant les blogs, afficher certains caractères étant interprétés comme du code html n’est pas trivial. Par exemple ,",«,». Pour ceci, il faut inclure entre balises code quelques suites bien sympathiques :

&lt pour <
&gt pour >
&laquo pour «
&raquo pour »
&#34 pour "

Pour d’autres caractères, voir ici. [I ? Bobby], je ne vous raconte pas la prise de tête pour écrire tout ça ;-)