Les balises pour formater le texte






<b>...</b> : Bold ou gras
Ex :
Texte mis en <b>gras</b>
Résultat :
Texte mis en gras
Compatibilité : IE Firefox
Attribut : aucun
 
<big>...</big> : Pour une taille de police plus grande, équivalent à <font size="+1">
Ex :
Texte mis en <big>plus grand</big>
Résultat :
Texte mis en plus grand
Compatibilité : IE Firefox
Attribut : aucun
<blink>...</blink> : Force le texte à clignoter
Ex :
Texte mis en <blink>plus grand</blink>
Résultat :
Le texte clignote
Compatibilité : Firefox
Attribut : aucun
 
<center>...</center> : centre le texte
Ex :
<center>Texte centré</center>
Résultat :
Texte centré
Compatibilité : IE Firefox
Attribut : aucun
 
<font>...</font> : Affecte aux caractères une ou plusieurs propriétés (couleur, police, taille)
color="..." : Affecte la propriété couleur aux carctères
La valeur peut-être sous 2 formes :
  • Le nom de la couleur en anglais (ex : red pour rouge)
  • "#RRVVBB" où RR (rouge), VV (vert), BB (bleu) sont remplacés par une valeur hexadécimale comprise entre "00" et "FF"
  • Ex :
    Texte en <font color="red">rouge</font>
    Texte en <font color="#0000FF">"#0000FF" ou bleu</font>
    Résultat :
    Texte en rouge
    Texte en "#0000FF" ou bleu
    face="..." : Affecte la propriété police de caractère
    Vous avez la possibilité de placer le nom une police ou plusieurs séparé par une virgule. Dans ce cas, le navigateur utilisera la première police qu'il a à sa disposition sur la machine.
    Ex :
    Texte avec <font face="Comic sans MS">Comic sans MS</font>
    Texte avec <font face="sans-serif, arial, verdana">liste de polices</font>
    Résultat :
    Texte en Comic sans MS

    Texte avec liste de police
    size="..." : Affecte la propriété taille aux carctères
    La valeur peut-être sous 3 formes :
  • De 1 à 7 : Taille absolue, 1 étant la plus petite taille et 7 la plus grande. Par défaut, c'est la valeur 3 qui est affectée
  • De +1 à +3 : Taille relative plus grande
  • -1 et -2 : Taille relative plus petite
  • Ex :
    Texte en <font size="1">taille 1</font>
    Texte en <font size="2">taille 2</font>
    Texte en <font size="3">taille 3</font>
    Texte en <font size="4">taille 4</font>
    Texte en <font size="5">taille 5</font>
    Texte en <font size="6">taille 6</font>
    Texte en <font size="7">taille 7</font>
    Résultat :
    Texte en taille 1
    Texte en taille 2
    Texte en taille 3
    Texte en taille 4
    Texte en taille 5
    Texte en taille 6
    Texte en taille 7
    Ex :
    Texte en <font size="+1">taille +1</font>
    Texte en <font size="+2">taille +2</font>
    Texte en <font size="+3">taille +3</font>
    Résultat :
    Texte en taille +1
    Texte en taille +2
    Texte en taille +3
    Ex :
    Texte en <font size="-1">taille -1</font>
    Texte en <font size="-2">taille -2</font>
    Résultat :
    Texte en taille -1
    Texte en taille -2
    Compatibilité : IE Firefox
     
    De <h1>...</h1> à <h6>...</h6> : <hx> est un marqueur de titre, la taille du caractère décroit avec le chiffre.
    Ce type de balise affecte un espace au-dessus et en dessous du titre ainsi qu'elle force un retour ligne avant la balise ouvrante et après la balise fermante.
    Ex :
    <h1>Titre en taille 1</h1>
    <h2>Titre en taille 2</h2>
    <h3>Titre en taille 3</h3>
    <h4>Titre en taille 4</h4>
    <h5>Titre en taille 5</h5>
    <h6>Titre en taille 6</h6>
    Résultat :

    Titre en taille 1

    Titre en taille 2

    Titre en taille 3

    Titre en taille 4

    Titre en taille 5
    Titre en taille 6
    align="..." : Affecte la propriété d'alignement des caractères
    La valeur peut-être contenir "center", "left", "right" ou "justify". "left" étant la valeur par défaut
    Ex :
    <h4 align="center">Titre aligné au centre</h4>
    <h4 align="left">Titre aligné à gauche</h4>
    <h4 align="right">Titre aligné à droite</h4>
    <h4 align="justify">Ce titre sera par conséquent justifié sur les bords droit et gauche</h4>
    Résultat :

    Titre aligné au centre

    Titre aligné à gauche

    Titre aligné à droite

    Ce titre sera par conséquent justifié sur les bords droit et gauche

    Compatibilité : IE Firefox
     
    <i>...</i> : force le texte en italique
    Ex :
    Texte en <i>italique</i>
    Résultat :
    Texte en italique
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <marquee>...</marquee> : force le défilement d'un texte. La balise <marquee> force à la ligne suivante.
    Ex :
    <marquee>Texte en défilement</marquee>
    Résultat :
    Texte en défilement
    behavior="..." : Affecte comportement au défilement
    La valeur peut-être contenir "scroll", "slide" ou "alternate".
    Ex :
    <marquee behavior="scroll">Texte en défilement</marquee>
    <marquee behavior="slide">Texte en défilement une fois</marquee> (compatibilité : IE)
    <marquee behavior="alternate">Texte rebondi sur les bords</marquee>

    Résultat :
    Texte en défilement

    Texte en défilement une fois

    Texte rebondi sur les bords
    bgcolor="..." : Affecte une couleur de fond à la zone occupée par la "marquee".
    La valeur peut-être sous 2 formes :
  • Le nom de la couleur en anglais (ex : red pour rouge)
  • "#RRVVBB" où RR (rouge), VV (vert), BB (bleu) sont remplacés par une valeur hexadécimale comprise entre "00" et "FF"
  • Ex :
    Ligne précédente<marquee bgcolor="red">Texte en défilement</marquee>Ligne suivante
    Résultat :
    Ligne précédente Texte en défilement Ligne suivante
    direction="..." : Force la direction du défilement.
    La valeur peut-être contenir "left" ou "right".
    Ex :
    <marquee direction="left">Texte en défilement à gauche</marquee>
    <marquee direction="right">Texte en défilement à droite</marquee>
    Résultat :
    Texte en défilement à gauche

    Texte en défilement à droite
    height="..." : Fixe la hauteur la zone occupée par la "marquee".
    La valeur est exprimée en nombre de points
    Ex :
    Ligne précédente<marquee height="50" bgcolor="red">Texte en défilement</marquee>Ligne suivante
    Résultat (compatibilité : IE) :
    Ligne précédente Texte en défilement Ligne suivante
    hspace="..." : Réserve un espace vide à gauche et à droite de la "marquee".
    La valeur est exprimée en nombre de points.
    Ex :
    Ligne précédente<marquee hspace="50" bgcolor="red">Texte en défilement</marquee>Ligne suivante
    Résultat (compatibilité : IE) :
    Ligne précédente Texte en défilement Ligne suivante
    loop="..." : Défini le nombre de boucle que la "marquee" effectuera.
    La valeur est exprimée en nombre ou par "infinite" (valeur par défaut).
    Ex :
    <marquee loop="4">Le texte défilera 4 fois</marquee>
    Résultat (compatibilité : IE) :
    Le texte défilera 4 fois
    scrollamount="..." : Défini le pas de déplacement de la "marquee".
    La valeur est exprimée en nombre de points.
    Ex :
    <marquee scrollamount="50">Le texte défilera par pas de 50 points</marquee>
    Résultat :
    Le texte défilera par pas de 50 points
    scrolldelay="..." : Défini le temps entre 2 pas lors du déplacement de la "marquee".
    La valeur est exprimée en nombre de milisecondes.
    Ex :
    <marquee scrolldelay="50">Le texte défilera d'un pas par 500 ms</marquee>
    Résultat :
    Le texte défilera d'un pas par 500 ms
    vspace="..." : Réserve un espace vide en-dessous et et au-dessus de la "marquee".
    La valeur est exprimée en nombre de points.
    Ex :
    Ligne précédente<marquee vspace="20" bgcolor="red">Texte en défilement</marquee>Ligne suivante
    Résultat :
    Ligne précédente Texte en défilement Ligne suivante
    width="..." : Défini la largeur occupé par la "marquee".
    La valeur est exprimée en nombre de points.
    Ex :
    Ligne précédente
    <marquee widthe="150" bgcolor="red">
    Texte en défilement</marquee>Ligne suivante
    Résultat (compatibilité : IE) :
    Ligne précédente
    Texte en défilement Ligne suivante
    Compatibilité : IE Firefox
     
    <p> : <p> est un marqueur de paragraphe.
    Ce type de balise affecte un espace au-dessus du paragraphe ainsi qu'elle force un retour ligne avant la balise ouvrante et après la balise fermante.
    Ex :

    <p>Ce texte forme un paragraphe. Ce texte forme un paragraphe.<br>Ce texte forme un paragraphe.</p>
    Résultat :

    Ce texte forme un paragraphe. Ce texte forme un paragraphe.
    Ce texte forme un paragraphe.

    align="..." : Affecte la propriété d'alignement des caractères<br>La valeur peut-être contenir "center", "left", "right" ou "justify". "left" étant la valeur par défaut.
    Ex :
    <p align="center">Paragraphe aligné au centre. Paragraphe aligné au centre.<br>Paragraphe aligné au centre</p>

    <p align="left">Paragraphe aligné à gauche. Paragraphe aligné à gauche. Paragraphe aligné à gauche<br></p>

    <p align="right">Paragraphe aligné à droite. Paragraphe aligné à droite.
    Paragraphe aligné à droite.</p>

    <p align="justify">Ce titre sera par conséquent justifié sur les bords droit et gauche</p>
    Résultat :

    Titre aligné au centre. Titre aligné au centre
    Titre aligné au centre

    Titre aligné à gauche. Titre aligné à gauche
    Titre aligné à gauche

    Titre aligné à droite. Titre aligné à droite
    Titre aligné à droite


    Ce titre sera par conséquent justifié sur les bords droit et gauche

    Compatibilité : IE Firefox
     
    <pre>...</pre> : Defini un bloc texte préformaté, les cararactéres sont non-proportionnels, c'est à dire que quelque soit le caractère, il occupe le même espace. Les lignes vides sont également respectée. Un mode très intéressant pour respecter les alignements.
    Ex :
    <pre>
    Texte formaté

    Texte formaté
    Texte formaté
    </pre>
    Résultat :
              Texte formaté

    Texte formaté
    Texte formaté
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <small>...</small> : Pour une taille de police plus petite, équivalent à <font size="-1">.
    Ex :
    Texte mis en <small>plus petit</small>
    Résultat :
    Texte mis en plus petit
    Compatibilité : IE Firefox
    Attribut : aucun
    <strike>...</strike> : Le texte placé entre les balises apparaîtra biffé.
    Ex :
    Le texte est <strike>biffé</strike>
    Résultat :
    Le texte est biffé
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <strong>...</strong> : Balise équivalente à <b>, le texte placé entre les balises apparaîtra en bold ou gras.
    Ex :
    Texte mis en <strong>gras</strong>
    Résultat :
    Texte mis en gras
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <sub>...</sub> : Force le texte placé entre les balises en indice, particulièrement pratique dans les expressions mathématiques.
    Ex :
    Texte mis en <sub>indice</sub>
    Résultat :
    Texte mis en indice
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <sup>...</sup> : Force le texte placé entre les balises en exposant, particulièrement pratique dans les expressions mathématiques.
    Ex :
    Texte mis en <sup>exposant</sup>
    Résultat :
    Texte mis en exposant
    Compatibilité : IE Firefox
    Attribut : aucun
     
    <u>...</u> : Souligne le texte placé entre les balises.
    Ex :
    Le texte est <u>souligné</u>
    Résultat :
    Le texte est souligné
    Compatibilité : IE Firefox
    Attribut : aucun