hr
Les lignes horizontales
15/06/2008
2593 lectures
0 commentaire
4/5 (3 votes)
Nous allons voir ici quelque chose de très simple mais qui peut s'avérer utile pour séparer clairement du cotenu dans un site, je veux bien évidemment parler des lignes horizontales. La balise servant à faire ce genre de séparation se nomme hr. C'est une balise unique, il ne faut donc pas une balise ouvrante et fermante, il suffit juste de finir la balise par / > pour la fermer. Créez donc une page web et tapez :
L'affichage de cette page donnera le résultat suivant :
Bien entendu, il est possible de définir plusieurs attributs pour cette balise.
Il est évidemment possible de définir la largeur de cette ligne. Bien qu'il soit possible de déterminer celle-ci en pixel, c'est généralement en pourcentage que cette largeur est déterminée. Effectivement, vous voulez peut être une ligne centrée ayant comme largeur les 3/4 de la largeur de la page. Etant donné que les visiteurs n'auront pas tous la même résolution d'écran, il vous faut régler cette largeur en pourcentage pour être sûr que la ligne prendra toujours 75% de la largeur de la page. Tapez par exemple le code suivant :
Pour voir apparaître ceci :
Si vous redimensionnez la largeur de votre page, la ligne horizontale se redimensionnera également pour toujours occuper 75% de la page. Cela n'aurait pas été le cas si vous aviez fait ceci :
Cela aurait donné :
La ligne ne sera jamais redimensionné et occupera toujours 500 pixels sur votre page.
Il est également possible de contrôler l'alignement de la ligne horizontale grâce à l'attribut align. Cet attribut peut prendre 3 valeurs différentes :
left : Alignement à gauche.
center : Alignement au centre.
right : Alignement à droite.
Tapez donc ceci :
Ce code donnerait le résultat suivant :
L'attribut size permet également de modifier l'épaisseur de la ligne. Sa valeur est un nombre déterminant l'épaisseur de la ligne. Ainsi, si vous tapez :
Vous obtiendrez :
Je vous l'accorde, ce n'est pas beau. En partie à cause de l'effet 3D de la ligne, nous allons voir comment l'enlever grâce à l'attribut noshade.
Pour supprimer l'ombre de la ligne horizontale, il faut utiliser l'attribut noshade. A la base, cet attribut ne prenait pas de valeur, mais avec XHTML, il est maintenant interdit de préciser des attributs sans valeur. Autrement dit, si vous désirez appliquer cet attribut, il faudra lui assigner la valeur noshade. Regardez plutôt l'exemple suivant :
Ce code donnerait une ligne horizontale avec l'aspect suivant :
Pour modifier la couleur de la ligne, il vous faut passer par le CSS.
L'affichage de cette page donnera le résultat suivant :
Bien entendu, il est possible de définir plusieurs attributs pour cette balise.
Largeur
Il est évidemment possible de définir la largeur de cette ligne. Bien qu'il soit possible de déterminer celle-ci en pixel, c'est généralement en pourcentage que cette largeur est déterminée. Effectivement, vous voulez peut être une ligne centrée ayant comme largeur les 3/4 de la largeur de la page. Etant donné que les visiteurs n'auront pas tous la même résolution d'écran, il vous faut régler cette largeur en pourcentage pour être sûr que la ligne prendra toujours 75% de la largeur de la page. Tapez par exemple le code suivant :
Pour voir apparaître ceci :
Si vous redimensionnez la largeur de votre page, la ligne horizontale se redimensionnera également pour toujours occuper 75% de la page. Cela n'aurait pas été le cas si vous aviez fait ceci :
Cela aurait donné :
La ligne ne sera jamais redimensionné et occupera toujours 500 pixels sur votre page.
Alignement
Il est également possible de contrôler l'alignement de la ligne horizontale grâce à l'attribut align. Cet attribut peut prendre 3 valeurs différentes :
left : Alignement à gauche.
center : Alignement au centre.
right : Alignement à droite.
Tapez donc ceci :
Ce code donnerait le résultat suivant :
Epaisseur
L'attribut size permet également de modifier l'épaisseur de la ligne. Sa valeur est un nombre déterminant l'épaisseur de la ligne. Ainsi, si vous tapez :
Vous obtiendrez :
Je vous l'accorde, ce n'est pas beau. En partie à cause de l'effet 3D de la ligne, nous allons voir comment l'enlever grâce à l'attribut noshade.
Ombre
Pour supprimer l'ombre de la ligne horizontale, il faut utiliser l'attribut noshade. A la base, cet attribut ne prenait pas de valeur, mais avec XHTML, il est maintenant interdit de préciser des attributs sans valeur. Autrement dit, si vous désirez appliquer cet attribut, il faudra lui assigner la valeur noshade. Regardez plutôt l'exemple suivant :
Ce code donnerait une ligne horizontale avec l'aspect suivant :
Pour modifier la couleur de la ligne, il vous faut passer par le CSS.
0 commentaires
Ajouter un commentaire