Il est possible d’insérer des lignes horizontales afin de différencier certaines sections d’une page à l’aide de la balise <hr>.
Cette balise ne possède pas de balise de fin, il s’agit donc d’une balise orpheline.
Par défaut, une ligne horizontale grise de 100 % est affichée.
Formater des lignes de différentes longueurs
On peut contrôler la longueur d’une ligne à l’aide de l’attribut width, et indiquer indifféremment une longueur en pixels ou en pourcentage (préférable car la ligne s’adaptera automatiquement à l’écran de l’internaute).
<hr width=”500″> Longueur en pixels
<hr width=”95%”> Longueur en pourcentage
Aligner une ligne horizontale
L’attribut align de la balise <hr> possède trois valeurs : left, center et right afin d’aligner la ligne horizontale par rapport à la page.
<hr align=”left” width=”50%”>
<hr align=”center” width=”50%”>
<hr align=”right” width=”50%”>
Formater des lignes de différentes épaisseurs
L’attribut size de la balise <hr> permet de contrôler l’épaisseur de la ligne :
<hr size=”1″>
<hr size=”3″>
<hr size=”5″>
<hr size=”10″>
<hr size=”25″>
Attribuer une couleur à une ligne
L’attribut color de la balise <hr> permet de donner une couleur à la ligne.
Cet attribut peut prendre pour valeur un nom de couleur ou le code hexadécimal* de la couleur (plus précis)
Combiner plusieurs attributs entre eux
Permet de créer des lignes horizontales de tailles, épaisseurs, couleurs et alignements différents.
Exercice 5 : créer des lignes horizontales de tailles, épaisseurs, couleurs et alignements différents
- Ouvrir le Bloc-Notes
- Le texte ci-contre est un exemple, chacun choisira les lignes qu’il veut dessiner…
Saisir tout le texte
soi-même
pour bien s’entraîner,
on n’apprend rien avec
un copier-coller !
<html>
<head>
<title>Page 5</title>
<meta name="description" content="creer des lignes horizontales">
<meta name="keywords" content="internet, html, lignes">
</head>
<body>
<h1>Voici des lignes</h1>
<hr size="1" color="black">
<hr align="left" width="50%" size="2" color="red">
<hr align="center" width="50%" size="3" color="purple">
<hr align="right" width="50%" size="4" color="green">
<hr align="left" width="75%" size="5" color="blue">
<hr align="center" width="75%" size="10" color="grey">
<hr align="right" width="75%" size="25" color="brown">
</body>
</html>
Enregistrer au format exercice-5.html
puis ouvrir dans le navigateur.
* Dans le prochain article, il sera question des valeurs hexadécimales.