Mise en forme du texte

Note : Un certain nombre de balises (font, basefont, center, s, u, b, i, ...) et propriétés (align, width & height (associées à certaines balises), size, color, border, background, bgcolor, face, name, target, ...) sont dépréciées. Il est fortement recommandé de ne pas les utiliser car elles pourraient devenir obsolètes dans un futur proche. En fait, ils ne sont plus pris en charge par les normes actuelles du langage HTML (W3C) donc plus sous garantie. L'objectif des Standards est de séparer le contenu de la mise en forme dans les sites Web en utilisant les feuilles de style CSS. Il est donc recommandé de les utiliser au maximum.

Le paragraphe

Comme son nom l'indique ceci permet de séparer un texte en différents paragraphes à l'aide de la balise <p>. Vous devez placer votre texte entre <p> et </p>. Cette balise possède un attribut align qui permet d'aligner le texte suivant la valeur qu'on lui donne :
- left : aligne le texte sur la marge de gauche du visualiseur.
- center : centre le texte entre les marges du visualiseur.
- right : aligne le texte sur la marge de droite du visualiseur.

Le retour à la ligne

Pour mettre fin à une ligne, il faut utiliser la balise <br> qui vous permet de revenir à la ligne. On peut remarquer que que <br><br> (2 fois la balise à la suite) permet un saut de ligne, ce qui est presque comme si vous définissiez un nouveau paragraphe. Dans certains cas cette double balise sera utile. Faites attention : pensez que tous les internautes n'ont pas la même configuration d'affichage, ne sont pas toujours en plein écran : leur fenêtre de navigation peut prendre n'importe quelle taille.

Tout texte compris entre les balises <nobr> et </nobr> ne contiendra aucun passage à la ligne. Utile pour les adresses mais cela peut faire bizarre dans certains cas sur un texte. Si vous avez absolument besoin de créer un retour à la ligne entre ces deux balises, utilisez <wbr>.

Les titres

Ils permettent de mette en forme le texte. Un titre accroit la lisibilité de votre document, permet de le structurer et de rendre le texte plus intéressant, plus utilisable pour l'internaute. Il existe 6 niveaux de titres : h1 (le plus important), h2, h3, h4, h5, h6 (le moins important). Un titre est toujours compris entre les balises <hx> et <hx> où x prend une valeur entre 1 et 6. Les titres possèdent aussi l'attribut align qui peut prendre comme il a été vu juste avant, les valeurs left, center, right.

Les lignes horizontales

Elles permettent de séparer vos paragraphes avec une ligne horizontale. Ceci est très pratique pour séparer différentes idées ou thèmes d'un document. Cependant il ne faut pas non plus en abuser! (une ligne horizontale crée une rupture importante de votre texte)
La balise qui permet de faire cela est <hr>, elle crée un saut de paragraphe au dessus et en dessous d'elle. Cette balises possède différents attributs :
- align : peut être égal à left, center, right.
- width : c'est la longueur de la ligne horizontale. Elle peut être en pixels ou en pourcentage, dans ce cas il faut ajouter le signe %.
- size : cet attribut définit la hauteur de la ligne en pixels.
- noshade : si cet attribut est présent, le visualiseur n'utilise pas d'effets tridimensionnel.
- color : précise la couleur de la ligne. Un valeur RGB hexadécimale ou un nom de couleur standard peut être utilisé.

Le texte préformaté

Cela vous permet de contrôler la façon dont le visualiseur va afficher votre document mais vous perdez en flexibilité. La balise la plus commune est : <pre>...</pre>. A l'intérieur de ces deux balises, le texte est libre : vous pouvez passer des lignes, créer des tableaux, des listes, ... vous pouvez aussi mettre votre texte en italique, en gras, utiliser des titres. Cependant une police est définie par défaut et vous ne pouvez pas la changer. Ce texte préformaté est souvent utilisé pour écrire le code source de langages de programmation comme le C++. Une dernière chose : évitez d'utiliser les tabulations, préférez les espacements.

<pre><i>
Produits     Date        Prix</i>
--------------------------------
Livres       10/02/01    163.24&euro;
Logiciels    21/05/01    458.61&euro;
--------------------------------
Total :                  <b>621.85&euro;</b>
</pre>

Produits     Date        Prix
--------------------------------
Livres       10/02/01    163.24€
Logiciels    21/05/01    458.61€
--------------------------------
Total :                  621.85€

La balise <div>

On peut définir l'alignement d'un bloc entier d'éléments à l'aide des balises <div> et </div> en utilisant l'attribut align, ce qui permet de centrer le texte, le mettre à gauche ou à droite.

Cette balise peut aussi servir pour les styles comme vous pouvez le voir dans l'exemple suivant : <div style="color: blue"> ... bloc d'éléments ... </div>.

Astuces

- Gardez le même espacement entre chaque élément : le même espacement au-dessus et en-dessous de chaque paragraphe. Pour l'internaute, un espacement différent de votre part est voulu!
- Ne centrez pas ou n'alignez pas à droite le corps principal de votre texte. Il est plus facile de lire un texte aligné à gauche.
- Pensez à garder des proportions de retraits entre les titres et les paragraphes proportionnels à la taille des caracères utilisés.
- Contolez les passages à la ligne, ni trop, ni pas assez.
- N'abusez pas de la balises <hr> lorsque vous voulez séparez des paragraphes très différents. Créer différentes pages est parfois mieux.
- Les images et les tableaux doivent disposer de suffisament d'espace pour être bien séparés du texte.
- Les titres donnent un plan au lecteur qui lui permet de mieux se repérer à travers votre site. Il trouvera ainsi les informations qu'il recherche plus rapidement.
- Une bonne utilisation des tableaux permet des mises en pages sophistiquées, professionnelles, sympatiques, efficaces, ... mais quelques notions importantes sont à connaître pour éviter des erreurs plus ou moins graves.

[ Plan] [ A Propos] [ 661180 ]
Copyright ©2002-2009 Prog-info Tous droits réservés.