Illustration
1: Les titres dans une page.
Un document HTML est structuré par les définitions de titres, paragraphes et listes.
Les titres sont une des premières approches permettant la structuration de documents. Ils permettent de distinguer plusieurs parties qui composeront le document suivant une hiérarchie.
En html on associe à chaque définition de titre, une valeur entière comprise entre 1 et 6. Cette valeur, qui peut être comparée à un rang ou niveau, permet
de définir « l’importance » d’un titre.
Les balises <h1> et </h1> définissent
le titre de plus grande importance
et <h6> associée à
</h6> définissent le titre de plus petite
importance.
L’exemple suivant permet de visualiser le résultat obtenu en utilisant les différents éléments de formatage de titres.
<html> <head>
Illustration
1: Les titres dans une page.
<title> T i t r e s en HTML </title> </head> <body> <h1>Du</h1> <h2>plus</h2> <h3>gros</h3> <h4>au</h4> <h5>plus</h5> <h6>petit</h6> </body> </html>
Le résultat obtenu est présenté à l' Illustration 1: Les titres dans une page.
Les paragraphes permettent de structurer les informations ayant une relation directe entre elles.
En HTML la définition d’un paragraphe permet également l’indentation1 du texte, ainsi que les passages à la ligne avant et après le paragraphe.
Un paragraphe se définit à l’aide des balises <p> et </p>.
Le texte contenu entre :
la balise de début de paragraphe <p> et la balise de fin du paragraphe </p>
définit le contenu du paragraphe.
<html> <head> <title> Paragraphes </title> </head> <body> <h1> Les paragraphes </h1> <h2> Une première série de paragraphes </h2> <p> Voici donc un premier paragraphe. </p> <p> Voici donc un second paragraphe. </p> <h2> Une seconde série de paragraphes </h2> <p> Voici un nouveau paragraphe. </p> <p> Voici un dernier paragraphe. </p> </body> </html>
Le résultat obtenu est présenté à l'Illustration 2: Les paragraphes en HTML.
À l’aide de la balise <br />, Il est possible de demander explicitement un saut de lignes au sein d’un paragraphe, sans pour autant souhaiter terminer le paragraphe.
Au même titre que les sauts de lignes, il est possible d’insérer des lignes horizontales dans le document HTML avec la balise <hr>. Nous verrons par la suite qu’il est possible de modifier l’aspect de ces lignes de séparation.
<html> <head> <title> Lignes et sauts de lignes </title> </head> <body> <h1> Lignes </h1> <p> Un paragraphe avant la ligne horizontale. </p> <hr> <p> Voici un paragraphe <br> dans lequel on a <br> inséré des sauts de lignes. </p> </body> </html>
Le résultat obtenu est présenté à l'Illustration 3: Saut de ligne et ligne horizontale.
Illustration
3: Saut de ligne et ligne horizontale.
Les commentaires permettent d’insérer du texte dans une page, sans que ce texte soit interprété par la suite,
c’est à dire sans qu’il apparaisse lors de l’affichage par un navigateur.
Les commentaires sont principalement destinés
aux webmestres du site.
Ils permettent d’expliquer le code
HTML
produit, et donc une maintenance plus aisée.
<html> <head> <title> Des commentaires </title> </head> <body> <h1> Une page en construction ! </h1> <!−− ici ~ bientôt ~ lapage la plus chouette de tout le WEB !!! −−> <p> Voici donc un paragraphe. </p> </body> </html>
Le résultat obtenu est présenté à l'Illustration 4: Utilisation de commentaires.
Illustration
4: Utilisation de commentaires.
Dans de nombreux cas, il est nécessaire de mettre en forme des listes d’éléments. Les listes permettent d’énumérer des informations en les regroupant.
Le langage HTML offre un ensemble de balises permettant la mise en forme de ces listes. Celles-ci peuvent être descriptives, «à puces» ou numérotées.
Les listes descriptives permettent de présenter
un ensemble d’informations dans une forme proche de celle
adoptée par les dictionnaires :
le mot clé est placé
sur la première ligne et la définition
correspondante est placée sur les lignes suivantes.
Il existe donc une balise d’ouverture de la
liste <dl> (pour Definition
List),
à laquelle correspond
naturellement une balise de fermeture de la liste </dl>.
Le mot clé est placé entre les balises <dt> et </dt>.
Enfin, la définition associée est placée entre les balises <dd> et </dd>.
<html> <head> <title> Descriptions </title> </head> <body> <h1> Glossaire </h1> <dl> <dt> Premier terme : </dt> <dd> la description du premier terme.</dd> <dt> Second terme : </dt> <dd> la description du second terme. </dd> </dl> </body> </html>
Le résultat obtenu est présenté à l'Illustration 5: Liste descriptive.
Illustration
5: Liste descriptive.
Les listes non ordonnées sont généralement
appelées des listes à puces.
Elles permettent de
faire des énumérations.
La balise d’ouverture de la liste <ul>,
introduit une nouvelle liste à puces.
La liste est
naturellement terminée par la balise de fermeture </ul>.
Chaque nouvelle information de la liste (qui sera précédée par défaut par une puce) est placée entre les balises <li> et </li>.
<html> <head> <title> Liste non ordonnée </title> </head> <body> <h1> Liste </h1> <ul> <li> première entrée ; </li> <li> seconde entrée ; </li> <li> troisième entrée. </li> </ul> </body> </html>
Le résultat obtenu est présenté à l'Illustration 6: Une liste non ordonnée (ou à puces).
Illustration
6: Une liste non ordonnée (ou à puces).
Les liste ordonnées permettent de définir une hiérarchie dans la liste en numérotant chacun des éléments.
Il existe donc une balise d’ouverture de la liste ordonnée <ol>, à laquelle correspond naturellement une balise de fermeture de la liste </ol>.
<html> <head> <title> Liste ordonnée </title> </head> <body> <h1> Liste </h1> <ol> <li> Première entrée. </li> <li> Seconde entrée. </li> <li> Troisième entrée. </li> </ol> </body> </html>
Le résultat obtenu est présenté à l'Illustration 7: Liste ordonnée.
Illustration
7: Liste ordonnée.
1L’indentation
est l’action qui permet d’ajouter des caractères
de tabulations ou d’espaces dans un fichier texte.
Très
souvent utilisée en programmation, elle rend le code source
plus clair et plus lisible.
En CSS, ceci se signale généralement par p {text-indent:mesure}.
Erreur : source de la référence non trouvée Page