Le formatage du texte en HTML
Pour formater le texte d'une page html, la méthode la plus simple consiste à attribuer à chaque paragraphe, à chaque ligne de texte ou à chaque mot une couleur, une taille, une police de caractère et un style particulier à l'aide de balises html spécifiques... Il est évident qu'il vaut mieux utiliser un éditeur html pour réaliser aisément ces manoeuvres. Une seconde méthode consiste à éditer une feuille de style externe qui va régir le format du texte de toutes les pages html d'un même site, pour les sites composés de nombreuses pages...
Dans un premier temps, voyons les balises que l'on peut attribuer directement au texte dans une page html :
--------------------------------------------------------------------------------------------
La balise : <b>Texte en Gras</b>
Résultat : Texte en Gras
--------------------------------------------------------------------------------------------
La balise : <font size =+3>Texte en grand<font>
Résultat : Texte en grand
--------------------------------------------------------------------------------------------
La balise : <i>Texte en Italique</i>
Résultat : Texte en Italique
--------------------------------------------------------------------------------------------
La balise : <u>Texte Souligné</u>
Résultat : Texte Souligné
--------------------------------------------------------------------------------------------
La balise : Texte <sub>en indice </sub>
Dans un premier temps, voyons les balises que l'on peut attribuer directement au texte dans une page html :
--------------------------------------------------------------------------------------------
- Formater un texte en GRAS :
La balise : <b>Texte en Gras</b>
Résultat : Texte en Gras
--------------------------------------------------------------------------------------------
- Gérer la taille du texte :
La balise : <font size =+3>Texte en grand<font>
Résultat : Texte en grand
--------------------------------------------------------------------------------------------
- Formater un texte en italique :
La balise : <i>Texte en Italique</i>
Résultat : Texte en Italique
--------------------------------------------------------------------------------------------
- Formater un texte souligné :
La balise : <u>Texte Souligné</u>
Résultat : Texte Souligné
--------------------------------------------------------------------------------------------
- Formater un indice :
La balise : Texte <sub>en indice </sub>
Résultat : Texte en indice
--------------------------------------------------------------------------------------------
La balise : Texte <sup>en exposant</sup>
- Formater un exposant :
La balise : Texte <sup>en exposant</sup>
Résultat : Texte en exposant>
--------------------------------------------------------------------------------------------
La balise : <s>Texte Rayé</s>
- Formater un texte rayé :
La balise : <s>Texte Rayé</s>
Résultat : Texte Rayé
--------------------------------------------------------------------------------------------
Pour les codes de couleurs HTML, voir le chapitre -> Les couleurs RVB
La balise : <font color="#FF0000">Texte en Couleur</font>
- Formater un texte en couleur :
Pour les codes de couleurs HTML, voir le chapitre -> Les couleurs RVB
La balise : <font color="#FF0000">Texte en Couleur</font>
Résultat : Texte en Couleur
--------------------------------------------------------------------------------------------
La balise : <font face="Arial Narrow">Texte en police Arial Narrow</font>
- Formater une police:
La balise : <font face="Arial Narrow">Texte en police Arial Narrow</font>
Résultat : Texte en police Arial Narrow
Attention, il est important de rester uniforme dans les pages html de son site. Notamment, il n'est pas nécessaire d'utiliser plus de deux polices de caractère. De plus, il est important d'utiliser des polices de caractères fréquemment utilisées et installées sur la plupart des ordinateurs.
Voir les polices de caractères les plus utilisées sur internet : http://www.guycuvelier.net/police.html
--------------------------------------------------------------------------------------------
Exemple : Texte de la première ligne<br>Texte de la seconde ligne
Résultat :
Texte de la première ligne
Texte de la seconde ligne
--------------------------------------------------------------------------------------------
Exemple : <hr width="500" size="4" align=center color ="#00ff00">
Résultat : une ligne de longueur = 500 pixels, de largeur = 4 pixels, alignée au centre et de couleur verte.
Voir les polices de caractères les plus utilisées sur internet : http://www.guycuvelier.net/police.html
--------------------------------------------------------------------------------------------
- Le retour à la ligne :
Exemple : Texte de la première ligne<br>Texte de la seconde ligne
Résultat :
Texte de la première ligne
Texte de la seconde ligne
--------------------------------------------------------------------------------------------
- Formater une ligne:
Exemple : <hr width="500" size="4" align=center color ="#00ff00">
Résultat : une ligne de longueur = 500 pixels, de largeur = 4 pixels, alignée au centre et de couleur verte.
Width et Size peuvent être exprimé en % de la page, la balise devient par exemple "width = 10%"
--------------------------------------------------------------------------------------------
La balise : <p align="right">Alignement du paragraphe</p>
Résultat : Alignement du Paragraphe à gauche
--------------------------------------------------------------------------------------------
- Formater un paragraphe :
La balise : <p align="right">Alignement du paragraphe</p>
Résultat : Alignement du Paragraphe à gauche
Alignement du Paragraphe au centre
Alignement du Paragraphe à droite
--------------------------------------------------------------------------------------------
Exemple :
<b><i><u><font color="#FF6600">Ecrire en gras, en italique, en souligné et en orange</font></u></i></b>
- Les balises de formats peuvent se cumuler :
Exemple :
<b><i><u><font color="#FF6600">Ecrire en gras, en italique, en souligné et en orange</font></u></i></b>
Ecrire en gras en italique en souligné et en orange
--------------------------------------------------------------------------------------------
Lorsqu'une feuille de style (CSS) est liée à une page html, c'est dans celle-ci que sont définis les 6 différents formats de titre (comme dans l'exemple ci-dessous).
Balise :
<h1>Titre H1</h1>
- Les titres avec l'attribut H :
Lorsqu'une feuille de style (CSS) est liée à une page html, c'est dans celle-ci que sont définis les 6 différents formats de titre (comme dans l'exemple ci-dessous).
Balise :
<h1>Titre H1</h1>
Résultat :
Titre H1>
Balise :
<h2>Titre H2</h2>
<h2>Titre H2</h2>
Résultat :
Titre H2
Balise :
<h3>Titre H3</h3>
<h3>Titre H3</h3>
Résultat :
Titre H3
Balise :
<h4>Titre H4</h4>
<h4>Titre H4</h4>
Résultat :
Titre H4
Balise :
<h5>Titre H5</h5>
<h5>Titre H5</h5>
Résultat :
Titre H5
Balise :
<h6>Titre H6</h6>
<h6>Titre H6</h6>
Résultat :
Titre H6
--------------------------------------------------------------------------------------------
Tout comme dans un logiciel de traitement de texte, il est possible d'éditer des listes à puces ou des listes numérotées dans le langage HTML.
Remarque : <UL> peut prendre d'autres arguments, que voici:
<UL type=disc>
<UL type=circle>
<UL type=square>
Ce qui change le type de puce devant chaque item...
Tout comme dans un logiciel de traitement de texte, il est possible d'éditer des listes à puces ou des listes numérotées dans le langage HTML.
- Listes à puces:
- texte 1
- texte 2
Remarque : <UL> peut prendre d'autres arguments, que voici:
<UL type=disc>
<UL type=circle>
<UL type=square>
Ce qui change le type de puce devant chaque item...
--------------------------------------------------------------------------------------------
Balises : <OL><LI>texte 1</LI><LI>texte 2</LI></OL>
Remarque: <OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numérotation du type i,ii,iii...
<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...
--------------------------------------------------------------------------------------------
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2
Balises :
<DL>
<DT>Terme 1 à définir</DT>
<DD>Définition du terme 1</DD>
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
L'imbrication de ces listes est bien sûr possible...
--------------------------------------------------------------------------------------------
Balise :
<MARQUEE></MARQUEE>
Attribut :
LOOP
<marquee loop="100">Un texte défile 100 fois </marquee>
- Listes numérotées :
- Texte 1
- Texte 2
Balises : <OL><LI>texte 1</LI><LI>texte 2</LI></OL>
Remarque: <OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numérotation du type i,ii,iii...
<OL TYPE=I> Numérotation du type I, II, III, IV...
<OL TYPE=A> Numérotation du type A, B, C, D...
<OL TYPE=a> Numérotation du type a, b, c, d...
<OL START=5> Numérotation du type 5, 6, 7, 8...
--------------------------------------------------------------------------------------------
- Listes de définition :
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
suite du terme 2
Balises :
<DL>
<DT>Terme 1 à définir</DT>
<DD>Définition du terme 1</DD>
<DT>Terme 2 à définir</DT>
<DD>Définition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
L'imbrication de ces listes est bien sûr possible...
--------------------------------------------------------------------------------------------
- Les textes défilants :
Balise :
<MARQUEE></MARQUEE>
Attribut :
LOOP
<marquee loop="100">Un texte défile 100 fois </marquee>
Résultat :
------------------
Attribut :
BEHAVIOR
définit le comportement du mouvement du texte
Valeur d'attribut :
ALTERNATE
<marquee behavior="alternate">Un texte défile d'avant en arrière</marquee>
Attribut :
BEHAVIOR
définit le comportement du mouvement du texte
Valeur d'attribut :
ALTERNATE
<marquee behavior="alternate">Un texte défile d'avant en arrière</marquee>
Résultat :
Valeur d'attribut :
SLIDE
<marquee behavior="slide">Un texte défile une fois puis s'arrête</marquee>
SLIDE
<marquee behavior="slide">Un texte défile une fois puis s'arrête</marquee>
Résultat :
------------------
Attribut :
DIRECTION
indique la direction que doit prendre le texte défilant
Valeur d'attribut :
LEFT
<marquee direction="left">Un texte défile vers la gauche</marquee>
Attribut :
DIRECTION
indique la direction que doit prendre le texte défilant
Valeur d'attribut :
LEFT
<marquee direction="left">Un texte défile vers la gauche</marquee>
Résultat :
Valeur d'attribut :
RIGHT
<marquee direction="right">Un texte défile vers la droite</marquee>
RIGHT
<marquee direction="right">Un texte défile vers la droite</marquee>
Résultat :
Valeur d'attribut :
DOWN
<marquee direction="down">Un texte défile vers le bas</marquee>
DOWN
<marquee direction="down">Un texte défile vers le bas</marquee>
Résultat :
Valeur d'attribut :
UP
<marquee direction="up">Un texte défile vers le haut</marquee>
UP
<marquee direction="up">Un texte défile vers le haut</marquee>
Résultat :
------------------
Attribut :
BG COLOR
Définit la couleur de l'arrière plan du texte défilant (valeur hexadécimale ou nom anglais de la couleur)
<marquee bgcolor="red">Le langage html</marquee>
Attribut :
BG COLOR
Définit la couleur de l'arrière plan du texte défilant (valeur hexadécimale ou nom anglais de la couleur)
<marquee bgcolor="red">Le langage html</marquee>
Résultat :
------------------
Attribut :
HEIGHT
Hauteur de l'arrière plan du texte défilant (valeur en pixel ou en pourcent)
<marquee height="40" bgcolor="yellow">Le langage html</marquee>
Attribut :
HEIGHT
Hauteur de l'arrière plan du texte défilant (valeur en pixel ou en pourcent)
<marquee height="40" bgcolor="yellow">Le langage html</marquee>
Résultat :
------------------
Attribut :
WIDTH
Largeur de l'arrière plan du texte défilant (valeur en pixel ou en pourcent)
<marquee width="300" bgcolor="green">Le langage html</marquee>
Attribut :
WIDTH
Largeur de l'arrière plan du texte défilant (valeur en pixel ou en pourcent)
<marquee width="300" bgcolor="green">Le langage html</marquee>
Résultat :
------------------
Attribut :
SCROLLAMOUNT
Définit la distance entre chaque étape de l'animation, donc la vitesse de celle-ci (valeur en pixel)
<marquee scrollamount="20">Ce texte défile très vite !!!</marquee>
Attribut :
SCROLLAMOUNT
Définit la distance entre chaque étape de l'animation, donc la vitesse de celle-ci (valeur en pixel)
<marquee scrollamount="20">Ce texte défile très vite !!!</marquee>
Résultat :
<marquee scrollamount="1">Ce texte défile très lentement !!!</marquee>
Résultat :
------------------
Attribut :
SCROLLDELAY
Définit la durée de la pause entre chaque étape de l'animation, donc la fluidité de celle-ci (valeur en millisecondes)
<marquee scrolldelay="300">Ce texte défile de façon saccadée...</marquee>
Attribut :
SCROLLDELAY
Définit la durée de la pause entre chaque étape de l'animation, donc la fluidité de celle-ci (valeur en millisecondes)
<marquee scrolldelay="300">Ce texte défile de façon saccadée...</marquee>
Résultat :
------------------
Tous ces attributs peuvent se cumuler bien entendu :
Exemple :
<marquee behavior="alternate" direction="right" bgcolor="cccc00"><b><font color="red">Le langage html</font></b></marquee>
Tous ces attributs peuvent se cumuler bien entendu :
Exemple :
<marquee behavior="alternate" direction="right" bgcolor="cccc00"><b><font color="red">Le langage html</font></b></marquee>
Résultat :