2. Éléments de mise en page en HTML

420-183
Programmation 1
2. Éléments de
mise en page
en HTML
Les paragraphes
Nous avons vu que, par défaut, le texte présent dans le fichier de la page était affiché sous la forme
de paragraphes, alignés à gauche et séparés par des balises <br>. Une alternative est d'inclure le texte
de chacun des paragraphes entre des balises <p> et </p>. Cette méthode a l'avantage de permettre
d'aligner le texte de ces paragraphes soit à la marge de droite ou au centre ou de justifier le texte entre
les marges. De plus, elle nous permettra plus tard d'utiliser des feuilles de style afin de modifier de
façon globale l'apparence de sections complètes de texte dans une page. En utilisant les balises <p>
et </p>, il n'est plus nécessaire de séparer les paragraphes au moyen de balises <br>.
Dans l'exemple du chapitre précédent, au lieu d'utiliser la notation suivante:
Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla
ainsi que bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.
<br><br>
Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla
ainsi que bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.
nous aurions pu écrire:
<p>Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla
ainsi que bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.</p>
<p>Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla
ainsi que bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.</p>
Il est possible de modifier l'alignement du texte du paragraphe au moyen du paramètre align= de la
balise <p>. Pour justifier le texte, par exemple, il suffit d'écrire:
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-1
<p align="justify">Bla bla blabla bla blablabla bla bla.
bla blablabla bla ainsi que bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla bla,
blablabla bla et bla blabla bla blablabla bla.</p>
<p align="justify">Bla bla blabla bla blablabla bla bla.
bla blablabla bla ainsi que bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla bla,
blablabla bla et bla blabla bla blablabla bla.</p>
De plus, bla blabla
et bla blabla bla
bla blabla bla
De plus, bla blabla
et bla blabla bla
bla blabla bla
ce qui aurait donné à l'affichage dans la fenêtre du navigateur:
Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla ainsi que bla blabla bla blablabla
bla et bla blabla bla blablabla bla. Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et
bla blabla bla blablabla bla.
Bla bla blabla bla blablabla bla bla. De plus, bla blabla bla blablabla bla ainsi que bla blabla bla blablabla
bla et bla blabla bla blablabla bla. Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et
bla blabla bla blablabla bla.
Les valeurs permises pour le paramètre align= sont: left, center, right et justify.
Les lignes horizontales
Pour séparer deux paragraphes ou deux sections de page au moyen d'une ligne horizontale, on utilise
la balise <hr> («horizontal ruler»). Si elle est utilisée sans paramètre, un filet sera inséré sur toute la
largeur de la fenêtre. Dans l'exemple précédent, en écrivant:
<p align="justify">Bla bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla
blablabla bla et bla blabla bla blablabla bla.</p>
<hr>
<p align="justify">Bla bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla
blablabla bla et bla blabla bla blablabla bla.</p>
bla. De plus, bla blabla
bla, bla blabla bla
bla. De plus, bla blabla
bla, bla blabla bla
on obtient dans la fenêtre du navigateur:
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla. Finalement, bla blabla bla blablabla
bla, bla blabla bla blablabla bla et bla blabla bla blablabla bla.
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla. Finalement, bla blabla bla blablabla
bla, bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Les paramètres de la balise <hr> sont size= qui permet de fixer l'épaisseur du trait en pixels, et
width= qui détermine la longueur du trait, en pourcentage de la longueur de la page. Ainsi:
<p align="justify">Bla bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla
blablabla bla et bla blabla bla blablabla bla.</p>
<hr size="4" width="50%">
<p align="justify">Bla bla blabla bla blablabla bla
blablabla bla. Finalement, bla blabla bla blablabla
blablabla bla et bla blabla bla blablabla bla.</p>
bla. De plus, bla blabla
bla, bla blabla bla
bla. De plus, bla blabla
bla, bla blabla bla
nous donnera:
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-2
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla. Finalement, bla blabla bla blablabla
bla, bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla. Finalement, bla blabla bla blablabla
bla, bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Les attributs des caractères
Trois attributs principaux sont utilisés en HTML: les caractères gras au moyen des balises <b>
(«bold») et </b>, l'italique au moyen des balises <i> et </i> et le souligné au moyen des balises
<u> et </u> («underscore»). Dans les trois cas, la première balise indique le début et le balise ayant
une barre oblique la fin du texte où appliquer l'attribut. Le code HTML suivant, par exemple:
<p align="justify">Bla bla blabla bla blablabla bla bla. <b>De plus</b>, bla
blabla blablabla bla. <i>Finalement</i>, bla blabla bla blablabla bla, bla
blabla bla blablabla bla et <u>bla blabla bla blablabla bla</u>.</p>
donnera, dans la fenêtre du navigateur:
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla. Finalement, bla blabla bla blablabla
bla, bla blabla bla blablabla bla et bla blabla bla blablabla bla.
Attention: il est préférable de ne pas utiliser de souligné dans le texte d'une page web, car cet attribut est traditionnellement réservé aux hyperliens.
Les attributs de police de caractères
Trois autres attributs des caractères sont contrôlés au moyen des balises <font> et </font>. Il
s'agit de la couleur des caractères (paramètre color=), de la police (paramètre face=) et de la taille
(paramètre size=). Les couleurs doivent être spécifiées comme au chapitre précédent. Les polices
de caractères les plus courantes sont: Arial, Courier, Helvetica, Palatino, Symbol et Times. La taille
s'exprime soit en valeur absolue (1 est la plus petite, 7 la plus grande), soit en valeur relative par
rapport à la taille par défaut (+1, +2, -1, -2, etc.). Par exemple, pour qu'un mot apparaisse en rouge
et en plus gros caractères dans une phrase, il suffit d'écrire:
Le petit charepon <font color="red" size="+1">rouge</font>.
Notez cependant qu'à partir de la version 4.0 du standard HTML, la balise <font> est identifié
comme «périmée». Elle continuera à être interprétée correctement par les navigateurs pour quelques
années, afin d'être compatible avec les millions de pages web qui les utilisent. Le standard HTML
recommande cependant d'utiliser désormais les feuilles de style pour obtenir les mêmes effets.
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-3
Les listes non ordonnées
Pour créer une liste d'éléments précédés de symboles de séparation (bullets), on doit enchasser la liste
entre les balises <ul> (unordered list) et </ul> et faire précéder chaque élément de la balise <li> (list
element). Par exemple, le code HTML suivant:
Le rhinocéros est caractérisé par:
<ul>
<li>Son poids;
<li>Sa peau;
<li>Ses cornes.
</ul>
donnera, dans la fenêtre du navigateur:
Le rhinocéros est caractérisé par:
• Son poids;
• Sa peau;
• Ses cornes.
Notez que la balise <ul> a généré automatiquement un <br> afin de commencer au début d'une
ligne et que chaque élément de la liste a été affiché avec un retrait par rapport à la marge de gauche.
Il est possible d'avoir plusieurs niveaux de listes non ordonnées. Le code HTML suivant:
Le rhinocéros est caractérisé par:
<ul>
<li>Son poids;
<li>Sa peau;
<ul>
<li>couleur
<li>épaisseur
</ul>
<li>Ses cornes.
</ul>
donnera, dans la fenêtre du navigateur:
Le rhinocéros est caractérisé par:
• Son poids;
• Sa peau;
ο couleur
ο épaisseur
• Ses cornes.
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-4
Les listes ordonnées
Une liste ordonnée, c'est-à-dire dont chaque élément est automatiquement précédé d'un nombre ou
d'une lettre comme identificateur, s'effectue exactement comme une liste non ordonnée mais au
moyen des balises <ol> (ordered list) et </ol>:
Le rhinocéros est caractérisé par:
<ol>
<li>Son poids;
<li>Sa peau;
<li>Ses cornes.
</ol>
donnera, dans la fenêtre du navigateur:
Le rhinocéros est caractérisé par:
1. Son poids;
2. Sa peau;
3. Ses cornes.
Il est possible de modifier l'apparence du nombre identificateur au moyen du paramètre type= du
balise <ol>:
Marqueur de début de liste
<ol type="1">
<ol type="i">
<ol type="I">
<ol type="a">
<ol type="A">
Identificateurs d'éléments
1., 2., 3., 4., etc.
i., ii., iii., iv., etc.
I., II., III., IV., etc.
a., b., c., d., etc.
A., B., C., D., etc.
Les images
Une image est insérée dans une page au moyen de la balise <img>. Le paramètre src= doit être
utilisé pour indiquer où se trouve le fichier contenant l'image. Le paramètre align= indiquera quant
à lui si l'image sera positionnée à gauche ou à droite du texte. Les principaux types de fichiers
d'images utilisés par tous les navigateurs sont .gif et .jpg .
Pour afficher ma photo à droite d'un texte, il suffit donc d'écrire:
<img src="Maphoto.jpg" align="right">
<p>Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.</p>
pour obtenir:
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-5
Bla bla blabla bla blablabla bla bla. De plus, bla blabla blablabla bla.
Finalement, bla blabla bla blablabla bla, bla blabla bla blablabla bla et bla
blabla bla blablabla bla.
Dans cet exemple, si j'écris un autre paragraphe à la suite du premier, il viendra se placer sous celuici, à gauche de l'image. Si je veux que le prochain paragraphe s'affiche plutôt plus bas que la fin de
l'image, il suffit d'insérer la balise <br clear="all">.
Dans l'exemple, seul le nom du fichier a été spécifié, ce qui impliquait que le fichier de l'image devait
se trouver dans le même répertoire que le fichier HTML. Il est cependant possible de spécifier une
URL complète comme paramètre src=. Par exemple:
<img src="http://www.monserveur.com/site-xyz/photo.jpg" align="left">
Les hyperliens
Tel que déjà mentionné au chapitre précédent, un hyperlien est une section de texte, un élément
multimédia ou une combinaison des deux sur lesquels on peut cliquer pour aller à une autre page,
déterminée par cet élément. Un hyperlien se définit au moyen des balises <a> et </a>. L'adresse
de la page où nous aboutirons en cliquant sur l'hyperlien est donnée par le paramètre href=. Le code
HTML suivant, par exemple:
<p>Je suis un étudiant au <a href="http://www.cmaisonneuve.qc.ca">Collège de
Maisonneuve</a> dans le programme de gestion de réseaux informatiques.</p>
nous donnera:
Je suis un étudiant au Collège de Maisonneuve dans le programme de gestion de réseaux informatiques.
où un clic sur les mots «Collège de Maisonneuve» nous amènera à la page d'accueil du collège.
Un hyperlien peut être une URL complète, comme ici, ou simplement le nom du fichier d'une autre
page HTML située dans le même répertoire que le fichier HTML actuel.
Session A-2008
© 2008, Marc-Gabriel Vallières
page 2-6