Quelques balises HTML pour blogueurs [fr]

[en] A few HTML tags for bloggers. Don't use the visual editor is my recommendation. It sometimes creates hairy problems.

Je recommande en général de ne pas utiliser “l’éditeur visuel” lorsqu’on écrit des billets dans WordPress. L’éditeur visuel vous montre directement, dans le texte que vous écrivez, le gras en gras, les listes sous forme de liste avec des petits points devant, les liens en bleu souligné, etc. Malheureusement les éditeurs visuels sont imparfaits et génèrent souvent plus de problèmes qu’ils n’en résolvent.

Pour désactiver l’éditeur visuel, allez sous “Users/Utilisateurs” et puis sous “Your Profile/Votre Profil”. Tout en bas de cette page, il y a une case à cocher. Vérifiez qu’elle soit décochée, et mettez à jour les réglages.

Votre éditeur de billets est maintenant décoré d’une rangée de boutons un peu différente d’avant: sélectionnez du texte, cliquez sur le bouton approprié, et des caractères étranges apparaîtront de part et d’autre du texte que vous aviez sélectionné. C’est du HTML. HTML?! Pas de panique, c’est pas si compliqué. Voici ce que vous avez besoin de savoir:

  • le HTML, c’est en fait des petits “codes secrets” qui disent au navigateur de formatter d’une façon particulière le texte qu’ils entourent (par exemple: mettre en gras, faire une liste, faire un paragraphe, faire un lien).
  • ces codes secrets se nomment “balises”. Les balises vont toujours par deux: une qui ouvre, une qui ferme.

Exemple:

<em>du texte mis en italiques (emphasis)</em>

Ce qui est entre parenthèses angulaires < et > ne va pas s’afficher dans votre texte. Ce sont juste des indications que va interpréter le navigateur web. En l’occurence, il mettra le texte ci-dessus en italiques.

Voici quelques balises que vous rencontrerez en utilisant les boutons de WordPress:

  • <em> ... </em> met le texte qu’elles délimitent en italiques
  • <strong> ... </strong> en gras
  • <a href="http://quelquechose.com"> ... </a> crée un lien qui nous enverra sur http://quelquechose.com si on clique dessus
  • <ul> ... </ul>, <ol> ... </ol> et <li> ... </li> sont utilisés pour faire des listes (explications ultérieures).

10 thoughts on “Quelques balises HTML pour blogueurs [fr]

  1. Personnellement, je suis fan de Markdown. La syntaxe est complète, inspirée de l’écriture des e-mails et très lisible, d’autant plus que les liens ‘Reference-style’ permettent de placer l’URL en dehors du texte, par exemple après le paragraphe où elle est utilisée ou carrément à la fin de l’article.

  2. eumh?

    Et moi qui cherche des solutions dans le sens contraire… afin de permettre à tout en chacun de mettre un peu en valeur son texte dans des wikis entre autres sans devoir se taper de turoriel sur les balises avant de saisir un quelconque ajout. Aujourd’hui, les gens n’ont plus à faire l’effort de mettre des balises, c’est mon avis perso, mais partagé par les gens qui aiment taper un texte sur un ordinateur sans se prendre la tête. On a autre chose à faire de plus intelligent sur cette planète.

    Ou alors on va vers le Web0.5? 😉

    Voilà on verra ce que ça donne, ce commentaire a été édité à l’aide de xinhahere. On verra se ce que cela donne.

  3. Je suis une totale fan de markdown. Malheureusement, tout ce qu’offre wordpress.com est

    • soit l’éditeur visuel, qui a tendance à mettre mes pauvres clients dans des problèmes sans nom quand les liens se mélange (allez voir le HTML derrière la scène, ça fait pas rire, parfois)
    • soit l’éditeur HTML simplifié, avec des boutons qui insèrent les balises — le moindre mal.

    Le jour où WordPress.com aura markdown… c’est clair que ce billet n’est plus utile.

  4. Je suis aussi pour l’allègement des codes. Vous rappelez-vous des premières pages html générées par les wysiwyg d’il y a à peine dix ans? Pour peu que l’auteur procède par itérations dans sa mise en page et qu’il revienne sur ses pas une fois ou deux, ses traces restaient en page source même si les balises étaient brisées… Pas de souci pour une page statique, une jeune petite peut bien nettoyer l’html de temps en temps à la main.

    Mais quand on parle de contenu généré rapidement sans contrôle éditorial en quantité massive, comme dans le cas du blogging, c’est peut-être pas plus mal d’avoir un code propre à la base, non? Les éditeurs visuels cachent parfois plus qu’ils ne montrent.

  5. I recently turned off the visual editor which is ok as long as you don’t do anything specail or play around with the HTML.
    I’m looking into solutions composing posts offline such as BlogDesk, Zoundry, Quuma and LiveWriter with some success and a little more comfort than the WP editor even when in HTML mode.

  6. C’est vrai que celui de WordPress est vraiment mal fichu selon les mise en page.

    Est-il possible d’en intégrer un autre???

    Ce qui est vraiment agaçant c’est que sur Apple avec Safari les boutons n’apparaissent pas…

  7. Pour ma part, je suis retournée à l’éditeur champ texte classique, plus les petits boutons au dessus : avec la preview en dessous, c’était beaucoup trop long à charger;

  8. Pingback: Un BleuBlog
  9. salut,
    je viens d’adopter Markdown (super syntaxe)…le problème c’est que quand je veux rentrer une liste dans les commentaires, ça ne marche pas…quelqu’un sait ici d’où peut venir le problème ??? Merci d’avance ! (je suis sous WordPress)

  10. Merci pour ce post, je ne savais pas comment désactiver cette m?*de d'éditeur visuel de WordPress. Tu as sauvé ma journée 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *