Tout texte technique ou scientifique est habituellement divisé selon des paragraphes subissant une numérotation hiérarchique du type ci-après : 1. 1. 1, 1. 1. 2, 1. 1. 3, 1. 2. 1, etc. La plupart des traitements de texte gèrent ces formats de numérotations automatiques, en affectant la taille des caractères d'un titre, en fonction de son niveau dans la hiérarchie.
Dans le langage HTML, encore une fois, tout est à la charge de l'auteur. Celui-ci dispose de six grosseurs de titre vont lui permettre de diviser son document ou ses pages HTML et d'un système de liste que nous verrons par la suite dans nos études.
<Hn> :
C'est la balise affectant la taille des caractères dans laquelle n varie de 1 à 6. Les plus gros ont la valeur 1 et les plus petits la valeur 6. Le texte entre ces balises est traité en caractère gras.
La balise de début et la balise de fin génèrent automatiquement un espace de type nouveau paragraphe, (passage à la ligne avec espace correspondant environ au saut d'une ligne).
Exemple :
<h1> Poèmes de Jean-Claude </h1>
<h2> Les Tulipes </h2>
Quand je vais chez le fleuriste <br>
Je n'achète que des Tulipes <br>
. . . .
<h4> Auteur : Jean-Claude </h4>
Pour visualiser l'aperçu, en cliquant ici. (N'oubliez pas de cliquer sur le bouton droit de votre souris afin d'ouvrir le menu contextuel, puis de pointer sur affichage "code source").
Image correspondante au code source :
Jusqu'à présent, rien de compliqué concernant le code source HTML. Il suffit de bien retenir les mots clés.
<BR> :
Lorsqu'on exécute du code HTML, les browsers traitent le texte au kilomètre dans la largeur de leur fenêtre et ignorent le découpage en ligne tel qu'il existe dans le fichier source. La longueur des lignes sera donc fonction de la taille que fixe le lecteur en dimensionnant la fenêtre de son browser. Il appartient à l'auteur du document de provoquer, lorsqu'il le souhaite, un passage à la ligne. La balise <BR> qui génère ce passage est une balise vide, c'est-à-dire qu'il n'y a pas de balise de fin (</BR> ne s'utilise pas).
Exemple :
Quand je vais chez le fleuriste, <br> je m'achète que des Tulipes que j'adore ! <br>
Si ma chanson
chante triste. <br> C'est que l'amour n'est plus là !!!
Le retour à la ligne derrière la phrase « Si ma chanson », sera ignoré par le browser. En revanche, l'absence de balise <BR> derrière la phrase « C'est que l'amour n'est plus là. » n'est pas gênante car la balise <H4> va provoquer un retour à la ligne et un espacement inter-paragraphe.
<P> :
La balise <P> provoque le passage au paragraphe suivant. Nous verrons par la suite que cette balise peut être comptée ou complétée par de nombreux attribus. Tout comme <BR>, cette balise est généralement considérée comme une balise vide, bien qu'il soit tout à fait valide de terminer un paragraphe par </P>.
<P> est différent de <BR> : elle provoque un passage à la ligne et décale la ligne suivante d'un espace d'environ une ligne (espacement inter-paragraphe).
N.B. : C'est préférable de mettre une balise de fin </P> afin de rendre le code plus agréable et plus compréhensible de façon, en cas de maintenance, cela rendra plus facile de mettre de l'ordre dans son code source.
Dans le cas où l'on spécifie une longueur du trait inférieure à 100%, cela permet de positionner le trait horizontalement dans la fenêtre du browser <HR ALIGN=valeur>. Les valeurs possibles sont LEFT (positionnement à gauche), RIGHT (positionnement à droite), CENTER (positionnement au centre, valeur prise par défaut).
Cette balise <PRE> permet de respecter la mise en page précise d'un texte ou d'une portion de texte, de la façon dont elle a été définie dans le fichier HTML.
Le browser interprète ce texte préformaté à l'aide d'une police de caractères non proportionnelle, ce qui autorise des alignements de type tableau.
Exemple :
<HTML>
<HEAD>
<TITLE> Tableau préformaté </TITLE>
</HEAD>
<BODY>
<H2> Exemple de tableau en texte préformaté (< pre>) </H2>
Les espaces consécutifs sont préservés à l'inverse du texte situé en dehors de ces balises où plusieurs espaces sont compactés en un seul.
On utilisera pas de balise de mise en page dans un bloc préformaté (<BR>, <P> <H>, etc.) et on évitera le caractère de tabulation. En revanche, il est tout à fait permis d'inscrire des liens vers d'autres documents ou pages HTML. (Concernant les liens, on verra cela par la suite de nos études).
La balise <PRE> admet l'attribut WIDTH qui permet de fixer le nombre de colonnes dans lesquelles se situe le texte non formaté (<PRE WIDTH=40> par exemple). Si cet attribut est absent, la valeur prise par défaut est 80 colonnes.Cet attribut n'est pas interprété par tous les browsers.
RÉSUMÉ DE CETTE TROISIÈME LEÇON :
Les balises suivantes permettent de structurer le document par l'adjonction de titres de diverses tailles et le réglage de la longueur des lignes et des paragraphes :
<Hn>
Avec n = 1 à 6 où 1 est la taille maximale des caractères. Un espacement vertical de type paragraphe est généré par ces balises.
<BR>
Force un retour à la ligne.
<P>
Déclenche le passage au paragraphe suivant.
<HR>
Permet de tracer un trait horizontal en travers de la page, avec différents réglages rendus possibles par les attributs :
<SIZE>
Règle l'épaisseur du trait (en pixels).
<WIDTH>
Règle la longueur du trait horizontal soit relativement à la largeur de la page (%), soit en valeur absolue (pixels).
<ALIGN>
Positionne le trait à droite, à gauche ou au centre (RIGHT, LEFT, CENTER) dans le cas où il est inférieur à la largeur de la page.
<NOSHADE>
Supprime l'effet 3D du trait.
<PRE>
Permet de conserver le formatage du texte délimité par cette balise tel qu'il a été saisi dans le fichier source HTML.
Fin de cette troisième leçon, la prochaine sera consacrée aux Listes concernant le langage HTML.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page