Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

5. Le Faire Avec Style

Exactement comme un traitement de texte, le HTML peut dire à un navigateur d'afficher certaines portions de texte en styles Italique, Gras ou même une combinaison des deux.

Objectifs

Après cette leçon, vous pourrez :

Leçon

Tags HTML De Style

Le HTML intègre plusieurs tags pour ajouter du style à votre texte. Souvenez-vous simplement d'être judicieux et logique dans votre utilisation des styles ; un texte trop chargé peut être inconfortable à lire...

Tags de Style
HTML Résultat 

<b>Ceci est en Gras...</b>  

<i>Ceci est en Italique...</i>
 
<tt>Ceci est en Machine à écrire...</tt>
page web exemple
Ceci est en Gras

Ceci est en Italique

Ceci est en Machine à écrire

Notez comment combiner les tags de style à partir du moment où ils sont correctement imbriqués. Les tags italiques sont tous les deux à l'intérieur des tags gras. Notez également que l'ordre n'a pas d'importance.
HTML Résultat 

<i><b>Ceci est en Gras ET en
Italique</b></i>

<b><i>Et ça aussi</i></b>
page web exemple
Ceci est en Gras ET en Italique

Et ça aussi

De plus, vous pouvez ajouter du style au texte qui apparaît dans les tags de titres. Remarquez comment les différents tags de style sont ouverts et fermés autour des mots qu'ils stylisent et comment les tags de titres entourent tout le texte de titre.
HTML Résultat 
bla bla bla

<h2><i>Nouveau</i> et 
<tt>Amélioré !</tt></h2>

bla bla bla
page web exemple
bla bla bla

Nouveau et Amélioré !

blah blah blah

Entrer du Texte Stylisé Dans Votre Document HTML

Note : Si vous n'avez pas le document de la leçon précédente, téléchargez une copie maintenant.

Suivez ces étapes pour ajouter des tags de style dans votre document HTML.

  1. Réouvrez votre espace de travail (si ce n'est déjà fait).
  2. Retournez à votre document HTML, volc.html, dans l'éditeur de texte.
  3. Trouvez le mot "volcan" de la première phrase de la section Introduction. Nous allons le mettre en gras pour emphaser un mot important.
  4. Insérez les tags pour faire apparaître ce mot en gras : 
             <b>volcan</b>
  5. Maintenant, nous allons modifier le second paragraphe avec les tags gras et italique pour faire ressortir un mot. Entrez les tags <b>...</b> et <i>...</i> autour du mot milliards afin que la section ressemble à : 
              <p>
          Les volcans faisaient partie de l'histoire de la Terre bien avant
          les humains. Comparez l'histoire des êtres humains,
          quelques millions d'années, avec celle de la Terre,
          plus de quatre <b><i>milliards</i></b> d'années.
  6. Enfin, nous allons utiliser le tag machine à écrire pour emphaser un mot spécial. Sous le titre Terminologie des Volcans, entrez ce qui suit : 
              L'étude des volcans, ou <tt>Volcanologie</tt>,
          comprend plusieurs termes particuliers.
  7. Sauvegardez dans l'éditeur de texte et Rechargez dans votre navigateur.

Vérifiez Votre Travail

Regardez cet exemple qui montre les changements. Il est important, quand vous utilisez des tags de style, de correctement inclure les tags de fin avec le bon tag </>. Sinon, tout le texte suivant héritera du style. Ca peut paraître bizarre.

Révision

  1. Qu'est-ce que les tags de style HTML ?
  2. Quels sont les différents tags utilisés pour les différents styles de texte ?
  3. Quelles étapes avez-vous réalisées pour entrer du texte stylisé dans votre document HTML ?
  4. *Points Supplémentaires : En quoi ces styles peuvent-ils être utiles pour créer une page web ou une leçon ?

Travail Indépendant

Essayez d'utiliser les tags de style gras, italique et machine à écrire pour le texte de votre propre page web. Regardez si vous arrivez à combiner des styles... agréables à lire.

A Suivre....

Comment construire des listes d'éléments, numérotées et avec des puces.

ALLER A.... | Index des Leçons | précédent : "Paragraphes" | suivant : "Listes" |

Ecrire le HTML : Leçon 5 : Le Faire Avec Style
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut5.html