Le texte, ses caractéristiques et ses balises

Convention

Dans le texte qui suit, il faudra systématiquement comparer ce qu'on obtient à l'écran et la façon dont il faut utiliser les balises pour y arriver. Afin de ne pas continuellement répéter "Pour obtenir ceci à l'écran ... il faut taper cela dans le bloc-notes ..." nous utiliserons la convention suivante:

Ce qui doit apparaître à l'écran sera repris dans un cadre dont la couleur de fond est cyan (comme ceci)

Ce qu'il faut taper pour cela dans le bloc-notes sera repris dans un cadre dont la couleur de fond est gris clair (comme ceci)

Gérer les séparateurs

Passer à la ligne

Ce n'est pas parce que vous allez à la ligne dans le bloc-notes que le texte ira à la ligne dans votre page HTML.

Il faut signaler explicitement par un code que vous désirez un passage à la ligne.

Ces passages peuvent être de deux types:

1. nouveau paragraphe (double interligne par rapport au paragraphe précédent) <P> et </P>
2. simple passage à la ligne (avec simple interligne) <BR>

Voici les différences tant à l'écran que dans le bloc-notes.

Remarque: l'orthodoxie veut que l'on place la balise </P> à la fin de chaque paragraphe mais, techniquement, cette balise est facultative.

Les espaces

Le fait de passer plusieurs espaces d'affilée dans le bloc-notes ne se répercutera pas dans votre page HTML, un seul espace sera affiché.

Il faut pour cela utiliser un caractère spécial qui est &nbsp;

Le fait de passer dans le bloc-notes plusieurs espaces entre les mots "Un" et "Deux" ne sert à rien, un seul espace subsiste à l'écran.

En revanche, l'insertion des caractères spéciaux a fait s'écarter les mot "Trois" et "Quatre".

Remarques: ces espaces sont bien à utiliser quand on veut éloigner deux éléments l'un de l'autre (deux images au même niveau par exemple) mais ne servent en aucun cas à centrer ou aligner à droite des éléments de la page. Pour cela, il faut utiliser les balises d'alignement.
Il est à noter que, assez bizarrement, l'utilisation de majuscules rend inoppérants ces espacements.

Les titres

La "force" des titres

Des balises permettent de mettre automatiquement du texte sous forme de titre, ce sont les balises <H...>.

Il existe 6 forces différentes de titres, mais seules les plus élevées sont généralement utilisées. En voici la liste.

Qui sont obtenues grâce aux balises suivantes

Essayez pour voir ce que cela donne

La disposition des titres

Il y a moyen d'inclure dans la balise de titre une information stipulant si le titre doit se trouver (exemple pris avec la balise H1):

• à gauche de la page (par défaut) <H1 align=left>
• au centre de la page <H1 align=center>
• à droite de la page <H1 align=right>

Il suffira de fermer la balise en mentionnant simplement </H1>, le type d'alignement ne doit plus être signalé, il s'éteindra avec la balise.

Pas besoin de montrer un exemple, un minimum de réflexion permet d'imaginer comment cela va se présenter. Vous pouvez également essayer afin de voir ce que cela produit.

Remarque: ces mêmes commandes d'alignement peuvent également être placées dans la balise <P>, elles donneront le même effet avec l'entièreté du texte du paragraphe. Ici aussi, plus besoin de signaler le type d'alignement lors de la fermeture de la balise </P>.

Présentation du texte

Les attributs de caractères

A partir de petites balises toutes simples, on peut obtenir les effets suivants:

1. Le texte en gras grâce aux balises <B> et </B>
2. Le texte en italique grâce aux balises <I> et </I>
3. Le texte en souligné grâce aux balises <U> et </U>
4. Le texte en barré grâce aux balises <STRIKE> et </STRIKE>
5. Le texte en ^exposant grâce aux balises <SUP> et </SUP>
6. Le texte en _indice grâce aux balises <SUB> et </SUB>
7. Le texte en agrandi grâce aux balises <BIG> et </BIG>
8. Le texte en rétréci grâce aux balises <SMALL> et </SMALL>
9. Le texte en Times New Roman grâce aux balises <FONT FACE="Times New Roman"> et </FONT>
10. Le texte en taille 1 grâce aux balises <FONT SIZE="1"> et </FONT>
11. Le texte en en bleu grâce aux balises <FONT COLOR=BLUE> et </FONT>
12. Ces trois dernières commandes de texte peuvent être rassemblées dans une même balise. Essayez et voyez comment clôturer cette balise multiple.

Les attributs de paragraphes

Contrairement aux balises de caractères, qui peuvent s'appliquer à un ou quelques caractères seulement d'un paragraphe, les balises qui suivent doivent nécessairement s'appliquer à l'ensemble complet d'un paragraphe, d'où leur nom.

Les listes à puces

Voici un exemple de liste à puces

• Elles commencent par la balise <UL>
• Chaque paragraphe doit être précédé par la balise <LI>
• Et se terminent par la balise </UL>

Les listes numérotées

Voici un exemple de liste numérotée

1. Elles commencent par la balise <OL>
2. Chaque paragraphe doit être précédé par la balise <LI>
3. Et se terminent par la balise </OL>

Les listes imbriquées

Vous pouvez imbriquer entre elles ces deux types de listes autant que vous le voulez.

Faites un essai d'imbrication en mélangeant listes à puces et listes numérotées comme l'exemple ci-dessous.

• Fleurs de printemps
  1. Tulipes
     • Couleurs unies
     • Couleurs variées
  2. Jonquilles
     • Généralement jaunes
  3. Narcisses
     • Généralement blancs
  4. Croccus
     • Blancs
     • Jaunes
     • Mauves
• Fleurs d'été
  1. etc...

Bon apprentissage.

◊ ◊ ◊

© Rupert Meurice de Dormale 2003