Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

19. Simples Règles Horizontales

Embarrassé ? C'est juste une option de plus pour créer de jolis

séparateurs entre différentes sections d'une page web.

Objectifs

Après cette leçon, vous pourrez :

Créer des lignes horizontales de différentes épaisseurs
Créer des règles horizontales de différentes largeurs
Créer des lignes horizontales sans relief 3D

Leçon

Note : Nous n'allons pas modifier nos pages web dans cette leçon -- vous pouvez donc simplement étudier l'information et décider ensuite si vous voulez l'essayer. Vous voudrez peut-être d'abord consulter la page de test pour voir si votre navigateur supporte les tags utilisés dans cette leçon.

Les premières "extensions" HTML de Netscape (ou "déviations des standards") apportèrent quelques nouvelles options de formatage pour le tag <hr> (Horizontal Rule -- Règle Horizontale -- voir la leçon 4). Par défaut, le navigateur Netscape affichait la ligne de séparation pleine avec un aspect ombré, en trois dimensions, plutôt que la ligne pleine implémentée dans les anciens navigateurs web.

Epaisseur de Ligne

La première option permet de faire des lignes de différentes épaisseurs en utilisant l'attribut :

  <hr size=N>

où N est l'épaisseur de la ligne en pixels. Regardons quelques exemples pour illustrer cet effet.

<hr size=2> est égal à <hr> :

<hr size=8> :

<hr size=20> :

Largeur de Ligne

Une autre option de formatage pour la balise <hr> vous permet d'ajuster la largeur de la ligne -- elle ne doit pas nécessairement s'étirer sur toute la largeur de la page. Vous pouvez réaliser cela en utilisant ce format :

  <hr width=X>
  <hr width=Z%>

où X est un nombre de pixels pour la largeur et Z le pourcentage de la page web actuelle. En général, nous recommandons d'utiliser le pourcentage car il s'ajuste par rapport à la largeur de la fenêtre du navigateur utilisée par la personne lisant vos pages (certains utilisent des écrans double-page haute résolution et d'autres louchent sur des écrans de 13 pouces).

Voici quelques exemples (remarquez également comment on inclut le tag size) :

<hr width=80 size=10> :

<hr width=80% size=10> :

NOTE : Essayez d'agrandir et/ou de réduire la taille de votre fenêtre de navigateur web pour voir la différence entre la largeur en pixels absolus (width=80) et la largeur en pourcentage de la page web (width=80%).

<hr width=40% size=10> :

<hr width=5% size=10> :

Sans Ombre 3D

Enfin, il peut arriver que vous ne vouliez pas d'effet relief 3D dans le tag <hr>. C'est aussi simple que :

<hr width=60% size=6 noshade> :

<hr width=60% size=1 noshade> :

Révision

Revoyons les grandes lignes de cette leçon :

Comment changer l'épaisseur d'une règle horizontale ?
Comment changer la largeur d'une règle horizontale ?
Que fait l'attribut noshade à l'intérieur du tag <hr> ?

Travail Indépendant

Testez quelques options du tag <hr> dans vos pages web.

A Suivre....

Mettez-le à gauche... non ! à droite... non ! au centre...

ALLER A.... | Index des Leçons | précédent : "Perfectionner le texte" | suivant : "Alignement Supplémentaire" |

Ecrire le HTML : Leçon 19 : Simples Règles Horizontales
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut19.html