Pages

vendredi 9 avril 2010

Souligner un texte dans une page web et autres propriétés de formatage de texte

Une petite astuce toute simple aujourd'hui pour souligner du texte dans un article quand l'éditeur de blog ne le propose pas directement (comme c'est le cas pour celui de Blogger).

Après avoir saisi son texte, il suffit d'aller dans l'onglet "Modifier le code HTML" et d'entourer le texte à souligner par les balises <u> et </u> (où le "u" signifie "underline").

Par exemple, le code HTML correspondant à la partie soulignée dans la 1ère ligne de cet article est :
<u>souligner du texte</u>
De la même manière le texte en gras est encadré des balises <b> et </b> et le texte en italique par les balises <i> et </i>. Il est également possible de barrer un texte en utilisant les balises <s> et </s> ou <strike> et </strike> (balises générées automatiquement par Blogger lorsque l'on utilise les boutons de mise en forme de l'éditeur).

Edit du 10/04 : le bouton ABC qui permet de barrer un texte n'apparaît à côté du bouton B (pour le gras) et du bouton I (pour l'italique) que lorsqu'on est passé au nouvel éditeur de Blogger.

Pour des balises blink blink, c'est là qu'il faut aller voir.

On trouve d'autres balises de style sur www.commentcamarche.net

♦ ♦ ♦

Pour aller plus loin...

Les puristes recommandent d'éviter l'utilisation de ces balises (pourtant pratiques) au profit des propriétés de style CSS.

Edit du 10/04 :  Tout en continuant d'utiliser par facilité les balises <u> <b> ou <i>, il faut savoir que les propriétés de style - cf lien ci-dessous vers le Site du Zéro pour la liste complète - permettent des possibilités plus importantes de mise en forme (police, taille et couleur du texte, arrière-plan, texte en petites capitales, en majuscules, etc)

► pour modifier l'apparence d'une partie de texte il suffit de l'encadrer par les balises <span> et </span> et d'ajouter les éléments de style (css) à l'intérieur de la balise.

Exemple correspondant au texte souligné en début de cet article :
<span style="text-decoration: underline;">souligner du texte</span>
<span style="text-decoration: underline;"> remplace le <u> et </span> remplace le </u>.

→ évidemment le résultat est le même : souligner du texte

► il est possible de grouper plusieurs propriétés, par exemple pour afficher un texte en gras et en italique :
<span style="font-weight: bold; font-style: italic;">écrire un texte en gras et en italique</span>
→ résultat : écrire un texte en gras et en italique

Edit du 10/04 : On peut modifier la présentation d'un paragraphe en ajoutant les propriétés de style à l'intérieur de balises <div> et </div> (à la place des balises <span> et </span>)

► on trouve une liste de toutes les propriétés de formatage de texte par exemple sur le Site du Zéro (un site qui m'a beaucoup servi pour mes débuts dans le HTML et le CSS, ou comme je le disais au début de ce blog "une bonne référence pour le webmaster débutant").

(tous mes tutoriels sont dans l'index "informatique")

4 commentaires:

  1. Merci pour ces indications techniques!!!!

    RépondreSupprimer
  2. Encore de la technique qui fait du bien...et très instructif!!

    RépondreSupprimer
  3. Mais pourquoi on s'embêterait à mettre des balises span avec tout ce qu'il faut mettre dedans, au lieu de mettre juste un <u ou un <b ?

    En ce moment, j'ai des petits couacs dans le nouvel éditeur de blogger. Régulièrement, je n'arrive à changer la mise en forme du texte (justif, centrer ou autre) alors je passe dans le html et je place mes bonnes vieilles balises <div align=.
    Je ne les ai pas oubliées ! ;-)

    C'est bien devenu blanc chez toi ? Ce n'est pas mon ordi qui me joue des tours ? ;-)

    RépondreSupprimer
  4. @Céline☼ : J'utilise aussi les balises < u > < b > et < i >, mais lis cet article et tu en sauras autant que moi sur pourquoi on ne devrait pas.

    Sinon les balises < span > permettent beaucoup plus de possibilités de mise en forme (cf la liste des propriétés) et c'est donc intéressant de les garder en mémoire.

    PS. Tu en penses quoi, du blanc? Un peu bizarre, non? Mais j'en avais marre du vert, trop foncé, là au moins j'ai l'impression de respirer ;-)

    RépondreSupprimer