Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les balises de paragraphes et en-têtes

Les balises de paragraphes et en-têtes

On va apprendre à manipuler les deux balises les plus utilisées dans un document XHTML Au même titre que n'importe quel ouvrage. Les fameux paragraphes et en-têtes. Vous en aurez fort besoin

Dans ce chapitre nous allons débuter avec deux balises qui sont très essentielles en structuration de texte, comme vous le connaissez une page quelque soit sa nature est composée essentiellement de titres, sous-titre et paragraphes, c'est à ces éléments qu'on va se livrer dans ce petit tuto, pour parvenir à créer une page élémentaire qui comporte des en-têtes et paragraphes, trêve de bavardage, mettons nous au travail.

Les paragraphes en XHTML

Pour insérer un paragraphe en XHTML on l'entoure par ces deux balises : <p> votre paragraphe </p>, ces balises ont pour effet de créer un retour à la ligne avant et après le paragraphe. Pour aller à la ligne suivante au sein d'un paragraphe utilisez la balise unique <br />, vous pouvez l'insérer autant de fois que vous voulez sauf que si elle est introduite deux fois successives "<br /><br />", elle va engendrer un saut de ligne, si trois fois, elle va entraîner deux sauts de ligne et ainsi de suite. Exemple :

<p> Le html est un langage de balisage.<br /><!--retour à la ligne-->
Il permet de créer des pages web. </p>

Le nom de la balise "p" veut dire "paragraph" (en français paragraphe). La balise <p> est de type bloc (différence entre balises "bloc" et "en-ligne"), ceci dit que le contenu de cet élément débute sur une nouvelle ligne et que le contenu qui suit le paragraphe débute lui aussi sur une nouvelle ligne.

La balise <p> ne peut pas contenir un autre élément de niveau bloc : par exemple une citation ou un tableau dans un paragraphe balises En revanche il peut contenir toute sorte de balises de type "en-ligne" comme une image, un lien etc.

Parmi les blocs les plus importants où vous pouvez imbriquer les en-têtes sont : <blockquote> (bloc de citation), <dd> (description de définition), <div>, <li> (élément de liste), <td> et <th>, del, ins, <form> et <fieldset>, <address> etc.

Si vous codez en HTML vous pouvez omettre la balise de fermeture, le paragraphe se termine avec la balise de type bloc qui le suit immédiatement.

La balise <p> ignore les espaces, les tabulations, les sauts de lignes avec la touche "entrée" etc. qui sont insérés dans le code source, si vous voulez que le texte soit restitué de la même manière qu'il a été tapé dans le code xhtml, vous devez utiliser la balise <pre> qui permet d'insérer un texte pré-formaté.

La balise <p> est une balise trop importante, vous devez l'utiliser à chaque fois que vous voulez insérer un paragraphe même s'il y'en d'autres alternatives comme <div>. Ceci va vous permettre une meilleure structuration de texte et un bon respect de la sémantique.

Les en-tête (titres) en XHTML

Il existe 6 niveaux d'en-têtes : <h1><h2><h3><h4><h5><h6>, "h" veut dire heading (en-tête), mais à ne pas confondre avec la balise <title> qui introduit un titre non au sein du document mais dans la barre de titre qui se trouve tout en haut, au fur et à mesure que vous éloignez de <h1> et que vous approchez de <h6> le titre devient de plus en plus petit et moins important. Pour introduire un grand titre procédez ainsi : <h1> langage XHTML </h1>.

A l'instar de la balise <p>, les balises de titres créent aussi des retours à la ligne avant et après.
Parmi les blocs les plus importants où vous pouvez imbriquer les en-têtes sont : <blockquote> (bloc de citation), <dd> (description de définition), <div>, <li> (élément de liste), <td> et <th>, <form> et <fieldset>, del, ins etc.

Les balises <h1>..<h6> ne doivent pas comporter d'autres blocs comme un tableau, une citation, les listes de citation et de définition (<ul>, <ol>, <dl>), une adresse (<adresse>) etc. par contre elle peut englober n'importe quel élément "en-ligne" comme une image, un lien etc.

Un navigateur tel qu'Opera peut extraire tous les en-têtes d'une page Web, pour en faire un sommaire : Menu Afficher (View) / Style / Table des matières (Table of contents).

Exemple (en-têtes et paragraphes)

Code xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Les langages de balisage</title>
</head>
<body>
<h1>Les langages de balisage</h1>
<h2>Le HTML</h2>
<p>C'est l'abréviation de : HyperText Markup Language... Ceci n'est qu'un exemple :-)</p>
<h2>Le XHTML</h2>
<p>C'est l'abréviation de : Extensible HyperText Markup Language... Ceci n'est qu'un exemple :-)</p>
</body>
</html>

Rendu visuel

Les langages de balisage

Le HTML

C'est l'abréviation de : HyperText Markup Language... Ceci n'est qu'un exemple :-)

Le XHTML

C'est l'abréviation de : Extensible HyperText Markup Language... Ceci n'est qu'un exemple :-)

Vous pouvez extraire la table des matières, si vous naviguez sous Opera :

Extraire la table des matières avec Opera

Notez que dans cet exemple le repère de fermeture </p> est devenu obligatoire car j'ai déclaré un DTD (doctype) basé sur le xhtml :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Si vous avez déclarez un DTD html vous aurez la possibilité d'omettre la balise de fermeture, par exemple :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Bon voilà, j'espère que je vous ai rien caché. Le chapitre suivant sera dédié à la classification des balises. Une notion que beaucoup de gens ignorent totalement

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau