Les Séparateurs et les Paragraphes en HTML


1. Introduction

Objectif

L'objectif de cette séquence est que vous soyez capable de faire une mise en page de vos documents en utilisant des retours à la ligne, des doubles retour, des lignes et aussi en faisant des paragraphes, que vous puissiez signer vos pages, faire des paragraphes et écrire du texte pré-formatté.

Prérequis

IIl n'y pas de prérequis particulier pour cette séquence, à part savoir gérer des fichiers, avoir à disposition et savoir utiliser un éditeur de texte et un browser.

A quoi cela sert?

L'utilisation des ces différents marqueurs vous permettra de réaliser, organiser votre document HTML à travers une structure logique de votre document. La mise en page d'un document est important, elle permet de mettre en évidence les différentes parties du texte. Il est difficile de lire un texte écrit en un seul bloc, mettre des espaces, des lignes, des paragraphes, etc permet de mieux le structurer et de le rendre plus lisible. L'utilisation des marqueurs abordés dans cette séquence vous permettront d'indiquer une structure au browser qui fera lui la mise en page physique de vos documents.


Les Séparateurs et les Paragraphes:

Le language HTML possède des marqueurs permettant de faire soit un retour à la ligne, soit un double retour de ligne, ou encore de faire une ligne de séparation, mettre un paragraphe en retrait, afficher du texte avec des caractères non-proportionnels, et aussi donner des indications concernant l'auteur, la date de création, etc. Nous allons voir ces deux différents types de marqueurs:

Les Séparateurs

Définition

Un séparateur permet de séparer différentes parties du texte, de faire une mise en page plus "aérée" en mettant de l'espace. Les marqueurs HTML permettent soit de faire un retour à la ligne ce qui permettra à la phrase suivante de commencer tout à gauche, soit faire un double retour à la ligne, une ligne vierge sera insérée dans le texte.

Principe

Il existe trois marqueurs séparateurs, <p>, <br>, et <hr>. Mis à part le premier qui peut, selon la version du language HTML utilisé, être un marqueur vide ou conteneur, ils sont tous des marqueurs vides. Ceci veut dire qu'ils n'entourent pas un texte ou une partie du document, mais qu'ils se placent à un endroit précis pour faire de l'espace ou une ligne. Regardons plus précisément chacun des ces marqueurs ainsi que leurs paramètres:


Les Paragraphes

Dans la mise en page d'un texte, il est préférable de ne pas mettre tout le texte en un seul bloc, mais plutôt de le séparer en plusieurs parties, en paragraphe. Un espace blanc sépare les paragraphes entre eux, de même que le début d'un paragraphe commence légèrement décalé, en retrait sur la droite.

Définition

Les paragraphes dans le language HTML regroupent trois marqueurs qui permettent de faire des paragraphes soit des parties de texte en retrait par rapport au reste du texte, d'afficher du texte en format pré-formatté, et d'afficher des indications sur l'auteur et la création du document, etc.

Principe:

Les trois marqueurs sont : <blockquote>, <:pre>, <address> . Ils sont tous les trois des marqueurs conteneurs. Nous allons voir le principe de chaque marqueur:

Exercice:

L'exercice que nous vous proposons consiste à créer un fichier nommé sépexercice.html. Essayez de faire en sorte que le contenu de ce fichier une fois browsé soit identique à celui proposé ci-dessous.

capture d'un fichier html

Erreurs fréquentes:

Il n'y a pas d'erreurs fréquentes typiquement lié aux marqueurs cités précédemment. Nous rappellerons donc ici quelques erreurs générales.

Corrigé

Voici le corrigé de l'exercice:
Code source: fichier sépexercice.html
<html>
<head>
</head>
<body>
Il lui semblait qu’il pourrait aller plus loin, qu’il percerait de nombreux secrets, et les couleurs offertes à
lui, en regardant à travers son objectif.
<p>
<hr noshade size=2 width=30 align=left>
Ce qu’il aimait avant tout c’était la photographie.
<blockquote>L’idée de capturer des instants volés au temps
<blockquote>était pour lui autant de pouvoirs,
</blockquote> une sorte de revanche sur la nature,
</blockquote>sur la vie décidément trop courte.
<p><p>
<pre> Chaque 
    photo                                             représentait 
            une nouvelle                     liberté, 
                         un autre       monde 
                                  que 

                    lui seul pouvait contempler. 

</pre>
Cependant son bonheur n’était de loin pas total, il s’était récemment fixé un nouveau but, celui de la photo parfaite,
<hr size=3 align=center width=25%>
<address>Extrait d'une nouvelle de P. Kumquatte <br>
<a href="http://www.planet.des.fleurs/or_ki_dé/Litteul_ap.html">Zi Creatrice</a>
</addres>
</body>
</html>


3. Conclusion

En conclusion voici ce que vous devez retenir.
Les marqueurs Séparateurs sont : Les marqueurs Paragraphes sont:


4. Les références

Il existe différents manuels HTML on-line sur le Web traitant du même sujet:


Y.P.S