LE GUIDE DU CODE HTML


HTML, balise, attribut, code et language, tag, tableau, liste, formulaire, lien,...

image
Source code HTML
image



Fotolia


FORMATAGE DE TEXTE EN HTML

SOMMAIRE
  • <b>
  • <big>
  • <blink>
  • <center>
  • <font>
  • De <h1> à <h6>
  • <i>
  • <marquee>
  • <p>
  • <pre>
  • <small>
  • <strike>
  • <strong>
  • <sub>
  • <sup>
  • <u>


  • <b>...</b> : Bold ou gras
    Ex :
    Texte mis en <b>gras</b>
    Résultat :
    Texte mis en gras
    Compatibilité : IE Firefox
    Attribut : aucun
    Top of Page
    <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
    Top of Page
    <blink>...</blink> : Force le texte à clignoter
    Ex :
    Texte mis en <blink>plus grand</blink>
    Résultat :
    Le texte clignote
    Compatibilité : Firefox
    Attribut : aucun
    Top of Page
    <center>...</center> : centre le texte
    Ex :
    <center>Texte centré</center>
    Résultat :
    Texte centré
    Compatibilité : IE Firefox
    Attribut : aucun
    Top of Page
    <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
    Top of Page
    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
    Top of Page
    <i>...</i> : force le texte en italique
    Ex :
    Texte en <i>italique</i>
    Résultat :
    Texte en italique
    Compatibilité : IE Firefox
    Attribut : aucun
    Top of Page
    <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édenteTexte en défilementLigne 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édenteTexte en défilementLigne 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édenteTexte en défilementLigne 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édenteTexte en défilementLigne 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éfilementLigne suivante
    Compatibilité : IE Firefox
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    Top of Page
    <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
    image

    image
    Accueil - Code HTML - Littératures - Liens utils - Sites partenaires - Référencés par... - Contact - Plan du site
    image
      © Copyright 2007© VDC
      Tout droits réservés
      Date de création : 26/12/2007
      Dernière mise à jour : 28/12/2007
         image