Balises et mise en forme d'un document HTML

Un article de Mangue.org, l'encyclopéde libre.

Après avoir vu comment est composé un document HTML, nous allons voir les méthodes disponibles sur le texte afin de le dynamiser, de le rendre parfaitement lisible, ce qui évite des textes en blocs qui sont très lourds et pénibles à lire. Pour cela, on utilise des balises dites de mise en forme. Celles ci permettent, entre autres, de centrer, aligner à gauche, aligner à droite des textes, mais aussi de changer la police, la couleur, la taille, etc ...

Les balises de style

Texte en gras

<b> et </b> sont les balises permettant de mettre des passages de texte en gras.

<html>
 
<head>
<title> Exemple 1 </title>
</head>
 
<!-- Arrière plan blanc et texte en noir -->
<body bgcolor="#FFFFFF" text="#000000">
 
<!-- Texte en gras -->
<b>Passage en gras</b>
 
</body>
 
</html>

Exemple : Passage en gras

Texte en italique

<i> et </i> permettent, elles, de mettre du texte en italique.

<html>
 
<head>
<title> Exemple 2 </title>
</head>
 
<body>
 
<!-- Texte en italique -->
<i>Passage en italique</i>
 
</body>
 
</html>

Exemple : Passage en italique

Texte souligné

Les balises <u> et </u> permettent de souligner des mots ou des passages de texte.

<html>
 
<head>
<title> Exemple 3 </title>
</head>
 
<!-- Texte noir -->
<body text="#FFFFFF">
 
<!-- Texte souligné -->
<u>Passage souligné</u>
 
</body>
 
</html>

Exemple : Passage souligné

Mise en forme de citation

Le conteneur <blockquote> </blockquote> permet, comme l'indique son nom (blockquote = "bloc de citations"), de mettre des passages de texte sous une forme de citation.

<html>
 
<head>
<title> Exemple 4 </title>
</head>
 
<!-- Texte bleu et arrière plan blanc -->
<body text="#0000FF" bgcolor="#FFFFFF">
 
<!-- Utilisation de la balise <blockquote> -->
<blockquote>
Comme promis, une nouvelle section ouvre ses portes :
la programmation sur GameBoy Advance. Au menu,
un cours vous présentant la console, son environnement
de développement et un premier programme 
qui affiche un pixel à l'écran.
</blockquote>
 
</body>
 
</html>

Exemple :

Comme promis, une nouvelle section ouvre ses portes :
la programmation sur GameBoy Advance. Au menu,
un cours vous présentant la console, son environnement
de développement et un premier programme
qui affiche un pixel à l'écran.

Texte préformaté

Ce style <pre> </pre> est utilisé pour des passages de programme tel que le Java ou le C# ... Ce conteneur possède également l'attribut width (exprimé en pixel) qui permet de fixer la largeur du texte.

<html>
 
<head>
<title> Exemple 5 </title>
</head>
 
<!-- Texte noir -->
<body text="000000">
 
<!-- Texte préformaté -->
class Hello{
    public static void main(String[] args){
        System.out.println("HelloWorld");
    }
}

 
</body>
 

</html>

Exemple :

class Hello{
  public static void main(String[] args) {
    System.out.println("HelloWorld");
  }
}

Texte Fort

<strong> et </strong> sont utilisés sur du texte pour donner une grande importance à celui-ci (ces balises ont le même effet que le texte en gras).

<html>
 
<head>
<title> Exemple 6 </title>
</head>
 
<!-- Texte vert -->
<body text="00FF00">
 
<!-- Exemple d'utilisation de la balise <strong> -->
<strong> Texte fort </strong>
 
</body>
 
</html>

Exemple : Texte fort

Texte sous la forme de "code machine"

Le conteneur <code> </code> agit sur le texte de façon à le mettre sous une forme appelée code machine.

<html>
 
<head>
<title> Exemple 7 </title>
</head>
 
<!-- Texte rose et arrière plan en blanc -->
<body text="FF00FF" bgcolor="FFFFFF">
 
<!-- Exemple d'utilisation de la balise <code> -->
<code> Texte code machine</code>
 
</body>
 
</html>

Exemple : Texte code machine

<var> </var>

Ces balises mettent le texte sous forme d'instances, d'arguments ou de variables d'un programme. Ce conteneur a les mêmes effets que le conteneur italique.

<html>
 
<head>
<title> Exemple 8 </title>
</head>
 
<!-- Texte gris et arrière plan blanc -->
<body text="999999" bgcolor="FFFFFF">
 
<!-- Exemple d'utilisation de la balise <var> -->
<var> Instances, variables ou argument d'un programme </var>
 
</body>
 
</html>

Exemple : Instances, variables ou arguments d'un programme

Texte "échantillon"

<samp> </samp> applique un style de telle sorte que le texte compris entre ces balises désigne des extraits de codes sources de programmes ou de scripts. Les balises <samp> </samp> et <code> </code> ont les mêmes effets.

<html>
 
<head>
<title> Exemple 9 </title>
</head>
 
<body>
 
<!-- Exemple d'utilisation de la balise <samp> -->
Extrait d'un programme Java :
<samp> System.out.println("Hello World"); </samp>
 
</body>
 
</html>

Exemple : Extrait d'un programme Java :

<samp> System.out.println("Hello World"); </samp>

<kbd> </kbd>

Ce conteneur applique sur du texte un style qui dénote le texte à entrer par un utilisateur. Ce conteneur produit le même effet que la balise <code> </code>.

<html>
 
<head>
<title> Exemple 10 </title>
</head>
 
<body>
 
<!-- Exemple d'utilisation de la balise <kbd> -->
<kbd> Texte </kbd>
 
</body>
 
</html>

Exemple : <kbd>Texte</kbd>

Texte de citation

<cite> et </cite> permettent de mettre du texte sous la forme de citation. Cette balise a le même rendu que <i> </i>.

<html>
 
<head>
<title> Exemple 11 </title>
</head>
 
<body text="000000">
 
<!-- Exemple d'utilisation de la balise <cite> -->
<cite> Citation </cite>
 
</body>
 
</html>

Exemple : Citation

Texte emphase

<em> et </em> permettent de souligner l'importance d'un passage de texte. <em> </em> et <i> </i> ont les mêmes effets.

<html>
 
<head>
<title> Exemple 12 </title>
</head>
 
<body text="000000">
 
<!-- Exemple d'utilisation de la balise <em> -->
<em> Texte emphase </em>
 
</body>
 
</html>

Exemple : Texte emphase

Texte télétypé

<tt> et </tt> sont les balises permettant de mettre des passages de façon télétypée. Cette balise a le même rendu que <code> </code>.

<html>
 
<head>
<title> Exemple 13 </title>
</head>
 
<body text="000000">
 
<!-- Exemple d'utilisation de la balise <tt> -->
<tt> Texte télétypé </tt>
 
</body>
 
</html>

Exemple : Texte télétypé

Abréviation

<abbr> </abbr> met du texte sous forme d'abrévation.

<html>
 
<head>
<title> Exemple 14 </title>
</head>
 
<body text="000000">
 
<!-- exemple d'utilisation de <abbr> -->
<abbr lang="fr" title="Programmation World"> PW </abbr>
 
</body>
 
</html>

Exemple : <abbr lang="fr" title="Mangue.Org"> M.O </abbr>

L'alignement

L'alignement consiste en la position des morceaux de textes sur une page HTML : ceux-ci peuvent être centrés, alignés à droite ou à gauche. Pour cela on utilise le conteneur <div> </div> ainsi que l'attribut align qui peut prendre plusieurs valeurs : Left, Right et Center.

<html>
 
<head>
<title> Exemple d'alignement du texte </title>
</head>
 
<body bgcolor="FFFFFF" text="000000">
 
<!--  Texte placé à gauche -->
<div align="left">Texte à gauche.</div>
 
<!-- Texte centré -->
<div align="center">Texte au milieu.</div>
 
<!-- Texte placé à droite -->
<div align="right">Texte à droite.</div>
 
</body>
 
</html>

Exemple :

Texte à gauche.

Texte au milieu.

Texte à droite.

Une autre façon de centrer du texte est d'utiliser la balise <center> </center>, qui a le même effet que l'attribut Align="center" dans une balise <div>.

<html>
 
<head>
<title> Centrer </title>
</head>
 
<body text="000000" bgcolor="FFFFFF">
 
<!-- Texte centré -->
<center>Texte centré</center>
 
</body>
 
</html>

Exemple :

Texte centré

La taille, police et couleur du texte

On a vu qu'on pouvait mettre en gras du texte, le centrer ..., mais on peut aussi changer sa taille ainsi que sa couleur. On utilise alors la balise <font> </font> qui agit sur le texte. Ce conteneur possède comme attribut la taille (size), la couleur (color), la police (face); mais ces 3 attributs ne sont pas indissociables, c'est à dire qu'on peut effectuer toutes combinaisons entre ceux-ci.

<html>
 
<head>
<title> Exemple <title>
</head>
 
<body bgcolor="FFFFFF" text="000000">
 
<!-- Texte de taille 4 -->
<font size="4">Texte 1</font>
 
<!-- Texte en rouge -->
<font color="#FF0000">Texte 2</font>
 
<!-- Texte de police Verdana -->
<font face="Verdana">Texte 3</font>
 
<!--Texte de taille 4 et vert -->
<font size="4" color="#00FF00">Texte 4</font>
 
<!-- Texte de police Verdana, bleu et de taille 4 -->
<font size="4" color="#0000FF" face="Verdana">Texte 5</font>
 
</body>
 
</html>

Exemple :

Texte 1

Texte 2

Texte 3

Texte 4

Texte 5

Remarque

On peut également utiliser la balise <basefont>, mais celle-ci agit sur l'ensemble du texte du document.

On peut également utiliser les balises <h#> </h#>. Celles-ci permettent de délimiter du texte qui aura une taille définie par un numéro compris entre 1 et 6 à la place du #, la plus grande taille étant 1, et par conséquent la plus petite étant 6. Ce conteneur accepte l'attribut align vu avec les balises <div> </div> et <p> </p>. Ces balises sont surtout utilisées pour définir facilement des titres de différents niveaux. On peut par exemple utiliser la balise <h1> pour les titres de chapitre, la balise <h2> pour les titres de section et <h3> pour les titres de sous-section

<html>
 
<head>
<title> Exemple de titres </title>
</head>
 
<body text="000000">
 
<!-- Exemple d'utilisation de la balise <hx> </hx> -->
<!-- Taille 1 -->
 
<h1> Texte 1 </h1>
 
<!-- Taille 3 -->
<h3> Texte 2 </h3>
 
<!-- Taille 6 + texte centré -->
<h6 align=center> Texte 2 </h6>
 
</body>
 
</html>

Exemple :

Texte 1

Texte 2

Texte 2

Les marqueurs

Certaines balises sont uniques. C'est le cas du marqueur <br> qui permet de faire un retour à la ligne. Cette balise est sûrement la plus utilisée du fait que les navigateurs (IE, Netscape, etc.) ne tiennent pas compte des espaces et des retours à la ligne dans le code HTML lorsque celui-ci est interprété.

<html>
 
<head>
<title> exemple d'utilisation du marqueur <br>
</head>
 
<body bgcolor="#FFFFFF">
 
<!-- Début du texte -->
Certaines balises sont uniques.<br>
<!-- Retour "simple" à la ligne -->
C'est le cas du marqueur < br > qui permet de faire un retour à la ligne.<br>
<!-- Ligne "vide" séparant 2 lignes -->
<br>
<!-- Fin du texte -->
Cette balise est surement la plus utilisée du fait que les navigateurs 
(IE, Netscape, etc.) ne tiennent pas compte des espaces et des retours à la 
ligne dans le code HTML lorsque celui-ci est interprété.<br>
 
</body>
 
</html>

Exemple :

Certaines balises sont uniques.

C'est le cas du marqueur <br> qui permet de faire un retour à la ligne.

Cette balise est surement la plus utilisée du fait que les navigateurs (IE, Netscape, etc.) ne tiennent pas compte des espaces et des retours à la
ligne dans le code HTML lorsque celui-ci est interprété.

<p> fait également partie de cette catégorie. Ce marqueur permet d'éxécuter un saut de ligne ou marque le début d'un nouveau paragraphe.

<html>
 
<head>
<title> Marqueur <p> </title>
</head>
 
<body bgcolor="#FFFFFF">
 
<!-- Premier paragraphe -->
<p> Texte1
<!-- Saut de ligne -->
<p>
<!-- Nouveau paragraphe -->
<p> Texte 2
 
</body>
 
</html>

Exemple :

Texte1

<p> Texte 2

Remarque

Le marqueur <p> peut toutefois se comporter comme une balise. En effet, les balises <p> </p> agissent de la même façon que le conteneur <div> </div>, mais <p> est d'une utilisation moins générique.

Il existe aussi un marqueur pour créer des barres horizontales qui pourront, par exemple, séparer différentes parties d'un texte. Ce marqueur est <hr>. Il possède 5 attributs (qui ne sont pas indissociables) : align, size, color, qui sont les mêmes que ceux vus précédemment. L'attribut noshade fait perdre à la barre l'aspect ombré qu'elle a par défaut et width définit sa taille en largueur en pixel ou en pourcentage de la largueur de la fenêtre.

<html>
 
<head>
<title> Barre horizontale </title>
</head>
 
<body text="#000000" bgcolor="#FFFFFF">
 
<!-- Barre horizontale centrée, de taille 2 et de largueur 100 pixels et de 
couleur rouge -->
<hr Align="center" size="2" width="100" color="#FF0000">
 
<!-- Barre horizontale droite, de taille 1 et de largueur représentant
60% de largueur de la fenêtre du navigateur et de couleur rose bonbon -->
<hr Align="right" size="1" width="60%" color="#FF9999">
 
</body>
 
</html>

Exemple :

Les listes

Les listes en HTML n'ont pas vraiment le même sens que dans des langages comme C ou Java. Celles-ci sont en fait utilisées le plus souvent pour constituer des menus tels que des sommaires. Il existe 3 sortes de listes : les listes à puces, numerotées et glossaires.

Listes à puces

Ce type de liste se caractérise par un style en paragraphe légèrement décalé vers la droite avec un signe topographique particulier : un point noir. Pour cela on utilise les balises <ul> </ul> (ul signifie unordered list) et le marqueur <li>. Cette balise possède des attributs qui modifient le type de puces de la liste :

compact, défini une liste compacte.
type=disc, la puce sera en forme de cercle plein.
type=circle, la puce sera en forme de cercle vide.
type=square, la puce sera en forme de carré.

<html>
 
<head>
<title> Exemple de listes 1 </title>
</head>
 
<body>
 
<!-- Exemple de listes à puces -->
<ul type=square>
  <li> Texte 1 </li>
  <li> Texte i </li>
  <li> Texte n </li>
</ul>
 
</body>
 
</html>

Exemple :

Texte 1
Texte i
Texte n

Liste numerotées

Ce type de liste part du même principe que les liste à puces, mais elle permet d'émumérer des suites d'objets dans un ordre bien précis (1, 2, etc. ), d'où l'utilisation du conteneur <ol> </ol> (ol signifie ordered list) et du conteneur <li> </li>. Ce conteneur possède les attributs suivant :

type=1, liste numérotée par défaut ;
type=I, liste numérotée avec des chiffres romains majuscules ;
type=i, liste numérotée avec des chiffres romains minuscules ;
type=A, liste numérotée avec des chiffres en majuscules ;
type=a, liste numérotée avec des chiffres en minuscules.

<html>
 
<head>
<title> Exemple de listes 2 </title>
</head>
 
<body>
 
<!-- Exemple de listes numérotées -->
<ol type=I>
  <li> Texte 1 </li>
  <li> Texte i </li>
  <li> Texte n </li>
</ol>
 
</body>
 
</html>

Exemple :

Texte 1
Texte i
Texte n

Liste glossaire

Ce type de liste est différent de celles vues précédemment. Les listes glossaires sont également appelées listes de définitions. Son utilisation principale consiste à un "couplage" entre des termes et leurs définitions. La construction de telles liste ce fait grâce au conteneur <dl> </dl> et aux marqueurs <dt> et <dd> de la façon suivante :

<html>
 
<head>
<title> Exemple de listes 3 </title>
</head>
 
<body>
 
<!-- Exemple d'utilisation de listes glossaires -->
<!-- Début de la liste -->
<dl>
 
<dt> Définition 1
<dd> Signification 1
 
<dt> Définition i
<dd> Signification i
 
<dt> Définition n
<dd> Signification n
 
</dl>
 
</body>
 
</html>

Exemple :

Définition 1: Signification 1
Définition i: Signification i
Définition n: Signification n

Remarque

On peut également mélanger ces différents types de listes (liste imbriquées) pour, par exemple, obtenir un véritable effet de sommaire avec des grands titres, des sous paragraphes, etc.

<html>
 
<head>
<title> Exemple de listes 3 </title>
</head>
 
<body>
 
<ol type=I>
<li>Grand titre
<dl>
<dt>Sous paragraphe1
<dd>Définition 1
</dl>
</ol> 
 
</dl>
 
</body>
</html>

Exemple :

Grand titre

Sous paragraphe1: Définition 1

Conclusion

Voici la fin du 2^ème article sur HTML. Nous en avons fini avec les différentes opérations portant sur le texte. Il ne faut surtout pas négliger toutes ces notions car la lisibilité d'un page en dépend. En effet, une page mal structurée avec un texte tout en bloc ou encore sans titre et paragraphes sera une corvée à lire, tandis qu'une page claire, bien établie et aérée sera un plaisir à lire.

Récupérée de "http://www.mangue.org/wiki/Balises_et_mise_en_forme_d%27un_document_HTML"

Catégories de la page: HTML

Views

Outils personels

Identification

Navigation

Rechercher

Boîte à outils