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 ;-)

5 Réponses to “Ma galère avec les balises html et les feuilles de sytle css :/”

  1. cyrille Says:

    si tu as un soucis, n’hésite pas à demander aux glands. Par contre tu vas bientôt avoir des problèmes de spam

  2. bapoumba Says:

    Salut cyrille. Pas de prob, je n’oublie pas les glands ;-)
    J’ai juste pris un peu de temps pour mettre mon bb au monde. Prochaine étape : debian, si je trouve un installeur qui veuille bien de mon lecteur CD atapi :/

  3. bobbybionic Says:

    [I ? Bobby]

    :-D

    Tu n’as pas la possibilité d’écrire normalement sous wordpress ? Il ne oonnait que le html ?

  4. bapoumba Says:

    oui, on écrit normalement. L’interface présente quelques boutons de formatage auto, comme gras, italique, listes, lien, images etc … Plus un bouton html pour éditer directement le code. Tu peux écrire tes balises en respectant les contraintes expliquées plus haut. Mais après c’est interprété par wordpress.
    Si tu fais une erreur par ex, il remixe le tout à sa sauce en essayant de produire un code correct, enlève des balises, en remet d’autres …
    Pour du texte standard ça va.
    Pour des tutos, je vais explorer wikini, c’est peut-être plus simple ;-)

  5. Johne157 Says:

    Hey there! I realize this is somewhat offtopic but I had to ask. acbedgdkddbe


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :