<< Retour au sommaire

 

 

Les principales balises de présentation de texte

 

 

 

Le sommaire :

  1. Gras et italique avec les balises <em> et <strong>.
  2. Exposant et indice avec les balises <sup> et <sub>.
  3. Les citations avec les balises <q> et <blockquote>.
  4. Les acronymes avec la balise <acronym>.
  5. Saisir du texte dans la balise <pre>
  6. Afficher un trait horizontal avec la balise <hr />.
  7. Les balises <del> et <ins>, indication d’insertion et de suppression.
  8. <dfn> noter une définition.
  9. Afficher un code à saisir avec la balise <kbd>.

 

 

Gras et italique avec les balises <em> et <strong>

 

Ces balises de type inline permettent de valoriser à l’écran un texte de façon à attirer l’attention du lecteur.

 

La balise <em> permet de mettre en évidence un texte mais de façon plus discrète que la balise <strong>.

En quelque sorte, on peut dire que la balise <em> équivaut à l’italique, tandis que la balise <strong> équivaut au gras.

 

Dans l’exemple qui suit, nous allons utiliser ces 2 balises :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>

Salut jeunesse !<br />

Je me présente, je suis <em>Philippe BOULANGER</em>.<br />

Ok, je ne suis "<strong>pas un cadeau"</strong>.</p>

</body>

</html>

 

 


Exposant et indice avec les balises <sup> et <sub>

 

Les 2 balises que nous allons étudier sont des balises de type inline.

Mettre en exposant, c’est écrire un ou plusieurs caractères en petites lettres en haut de la ligne, c’est la balise <sup>.

Par exemple :

<p>

Jules VERNE a écrit son premier roman au milieu du XIX<sup>ème</sup> siècle.</p>

 

Mettre en indice, c’est écrire des caractères en petites lettres en bas de la ligne, c’est la balise <sub>.

Par exemple :

<p>x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub></p> 

 

 


Les citations avec les balises <q> et <blockquote>

 

Pour une citation courte, on utilise la balise inline <q> à l’intérieur d’un paragraphe, et rien ne vous empêche d’associer la citation aux autres balises de style de type <em>, <strong> etc..

 

Par exemple :

 

<p>Ecoutez bien ce conseil, <q>rien ne sert de courir, il faut partir à point…</q></p>

 

La balise <blockquote> quant à elle, ne doit pas être placée dans un bloc paragraphe mais au

contraire, c’est elle qui doit contenir le paragraphe :

Elle est donc une balise de type bloc, j’ai presque envie de dire « super block » ! Puisqu’elle peut contenir une balise de type block,…

 

Par exemple :

<blockquote>

<p>

Rien ne sert de courir, il faut partir à point…<br>

C’est ben vrai ça…</p>

</blockquote>

 

 


Les acronymes avec la balise <acronym>

 

Dans un texte, il vous arrive parfois d’être obligés d’écrire des acronymes du genre « XHTML », « FBI », « CAF » etc.

La balise <acronym> vous permet d’associer à un acronyme une bulle d’informations contenant l’affichage en toute lettre de ce que représente l’acronyme.

Toutefois, l’information ne sera affichée uniquement lorsque le pointeur de la souris survolera l‘acronyme…

La balise <acronym> est de type inline, et elle utilise l’attribut « title » qui permet la saisie de

la signification de l’acronyme.

Voici un exemple :

 

<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p> 

 

 


Saisir du texte dans la balise <pre>

 

La balise <pre> permet d’afficher dans la page le texte tel que vous l’avez saisi dans votre fichier source.

Elle est une balise de type block…

Les espaces et les retours à la ligne seront respectés !

 

Voici un exemple :

(Enfin, j’ai plutôt envie de dire, un super exemple…)

 

<h1>Un petit poème</h1>

<pre>

Rien ne sert d'apprendre, il vaut mieux prendre !

Rien ne sert de construire, il vaut mieux fuir !

Rien ne sert de bosser, il vaut mieux se barrer !

Alors mon poème ?

Philippe BOULANGER

</pre>

 

 


Afficher un trait horizontal avec la balise <hr />

 

La balise de block <hr /> permet de tirer un trait horizontal à l’endroit précis où elle es située dans la page.

Etant une balise de block, elle doit être employée hors d’un block.

 

Voici un exemple :

 

<h1>Premier chapitre</h1>

<p>

Il était une fois un homme trop sympa qui s'appelait Philippe.

</p>

<hr />

<h1>Deuxième chapitre</h1>

<p>

Mais finalement, quand on le connaît bien, il n'est pas si terrible que cela !

</p>

 

 


Les balises <del> et <ins>, indication d’insertion et de suppression

 

La balise <del> permet de spécifier qu’une chaîne de caractères a été supprimée.

C’est une balise inline, vous devez l’utiliser dans un block…

A l’inverse, la balise <ins> permet de spécifier une chaîne de caractères qui a été insérée !

Le texte intégré dans la balise <del> est barré, tandis que le texte intégré dans la balise <ins> est souligné.

 

Voici un exemple :

 

<p>

Bonjour cher rédacteur, vous venez de supprimer le texte suivant :<br />

<del>aucune information n'est disponible concernant la réunion du 14 juillet</del><br />

Vous insérer le texte suivant :<br />

<ins>Pour connaître le sujet qui sera abordé lors de la réunion qui aura lieue le 14 juillet, veuillez vous en reporter à l'article approprié du journal</ins>

</p>

 

 


<dfn> noter une définition

 

<dfn> est une balise de type inline qui permet de noter une définition.

Vous devez l’utiliser dans une balise block !

 

Voici un exemple :

 

<pre>

Voici la définition de <em>abaissement</em> :

<dfn>nom masculin

1. Action d'abaisser ; baisse, diminution.

2. Fait de s'abaisser.</dfn>

</pre>

 

 


Afficher un code à saisir avec la balise <kbd>

 

Vous connaissez la sécurité des inscriptions sur le net ?

Pour éviter que les robots mal intentionnés s’inscrivent à certaines activités, il est demandé à l’utilisateur de saisir un code qui est affiché dans un graphique.

 

Vous pouvez afficher le code en question dans la balise <kbd> qui est d’ailleurs une balise inline à intégrer dans un block.

 

Voici un exemple :

 

<h1>Formulaire d'inscription</h1>

<pre>

Bonjour,

Afin de débuter les étapes de l'inscription,

nous vous demandons de bien vouloir saisir le code affiché ici :

<kbd>7240139</kbd>

Merci de votre compréhension.

</pre>

 

Faire clignoter le texte avec la balise <blink>

 

La balise « de ligne » <blinck> permet de faire clignoter le texte qu’elle encadre. 

Par exemple :

Ici nous allons faire clignoter le mot XHTML

 

<p>

J’adore le langage <blink>XHTML</blink>, c’est mon langage préféré !</p>

 

Philippe BOULANGER