Lignes horizontales
Publié: 2021-09-01Il existe de nombreuses façons de rendre vos pages HTML plus attrayantes et mieux structurées. Plus précisément, une ligne horizontale peut jouer un rôle particulier en rendant le contenu de votre site bien équilibré, plus clair et plus facile à parcourir. Chaque fois que nous décidons d'apporter de grands changements à nos sites Web, de petites choses comme les lignes peuvent faire la différence. Ces petites choses rendent le message de votre site plus complet. En outre, ils peuvent modifier l'attrait visuel de votre ressource Web et la façon dont votre public perçoit vos données.
Mais vous pouvez également créer des lignes personnalisées pour s'adapter à votre page Web et vous donner une meilleure maîtrise de l'espace que vous manipulez sur votre page. Cela dit, examinons de plus près comment personnaliser les lignes horizontales dans vos pages HTML.Une ligne horizontale est un élément HTML utilisé comme décoration de votre page Web. Cependant, il peut également être utile à de nombreuses autres fins, telles que :
- Un séparateur qui divise visuellement différentes parties de votre contenu et met l'accent là où une idée se termine et une autre commence.
- Un surligneur qui met l'accent sur certaines sections significatives d'une page Web.
- Une ligne horizontale est considérée comme l'un des moyens les plus populaires et les plus simples d'atteindre un large éventail d'objectifs sur un site Web. Bien qu'il puisse sembler simple à première vue, il s'agit d'un élément multifonctionnel que vous pouvez ajuster en fonction de vos besoins spécifiques. En modifiant simplement le code HTML de votre page Web, vous pouvez ajuster les spécifications suivantes de la ligne horizontale :
Longueur;
Largeur;
Couleur;
Alignement.
Il convient également de souligner que la ligne horizontale fait référence aux éléments de bloc. Cela signifie qu'il est placé sur une ligne distincte sur une page Web et que le texte que vous ajoutez à côté de la ligne sera placé en dessous.
Les lignes horizontales sont très utiles pour séparer votre page en différentes sections, pour ajouter une simple ligne horizontale tapez simplement < hr >, et vous obtiendrez ceci :
Comment créer une ligne horizontale
Vous pouvez définir une ligne à l'aide d'une simple balise <hr>. Il est l'abréviation de "Horizontal Rule" et définit les paramètres externes classiques. Ce qui le différencie de beaucoup d'autres, c'est qu'il n'a pas besoin de balise de fin et peut exister seul. Vous pouvez modifier les caractéristiques externes d'un élément en utilisant des valeurs supplémentaires dans la balise :
Cela ressemble à ceci. Par exemple, si nous voulons une longueur de 100 pixels, nous définirions une balise comme celle-ci : hr width = "100.
Alignement.
Vous pouvez aligner la ligne sur les bords gauche ou droit, ainsi qu'au centre. Cette fonctionnalité n'est valide que si vous avez déjà spécifié le paramètre de largeur car une ligne pleine page ne peut pas être alignée. Pour l'alignement, définissez un attribut supplémentaire dans la balise "align" et ajoutez-lui une direction : centre - pour le centre, gauche - pour la gauche et droite - pour l'alignement à droite. La balise finie, dans ce cas, ressemblera à ceci : si nous devons définir l'alignement central pour une ligne horizontale d'une longueur de 150 pixels, alors la balise finie ressemblera à ceci : hr align = "center" width = " 150". Notez que "align", la mesure d'alignement, est mis en position 1, même si l'attribut dépend de la longueur de la mesure largeur.Largeur.
En option, vous pouvez également spécifier la largeur, en créant un soulignement gras ou fin. Ce critère ne dépend de rien et peut être utilisé indépendamment sans préciser la longueur ou l'alignement. Pour cela, nous utilisons l'attribut size dans la balise et une valeur numérique égale à la largeur souhaitée en pixels. Le nombre est indiqué entre guillemets après l'attribut de taille et le symbole "=".
Ainsi, si nous devons créer une ligne de 15 pixels de large, nous devons créer la balise suivante : hr size = "15".
Couleur.
Il est également défini comme un indicateur indépendant. Pour le changer, utilisez l'attribut de couleur en combinaison avec le nom de la couleur sous la forme d'un code ou en anglais. La couleur est indiquée entre guillemets après le symbole "=".
Ainsi, le tag d'une ligne blanche standard peut s'écrire de deux manières : hr color = "#FFFFFF" ou hr color = "white"
Le noir peut être créé en utilisant le code # 000000.
Comment faire une ligne horizontale colorée ?
Les lignes horizontales sont idéales pour séparer un bloc de texte d'un autre. Un petit texte avec des lignes horizontales en haut et en bas attire davantage l'attention du lecteur qu'un texte ordinaire.
A l'aide de la balise < hr >, vous pouvez tracer une ligne horizontale dont l'apparence dépend des attributs utilisés ainsi que du navigateur. La balise fait référence aux éléments de bloc, de sorte que la ligne commence toujours sur une nouvelle ligne, et après cela, tous les éléments sont affichés sur la ligne suivante. Grâce aux nombreux attributs de la balise < hr >, la ligne créée grâce à cette balise est facile à manipuler. Combiné à la puissance des styles, ajouter une ligne à votre document est un jeu d'enfant.
Par défaut, la ligne est affichée en gris et avec un effet de volume. Ce type de ligne ne correspond pas toujours à la conception du site, de sorte que le désir des développeurs de modifier la couleur et d'autres paramètres de la ligne à travers les styles est compréhensible. Cependant, les navigateurs sont ambigus à ce sujet, c'est pourquoi vous devrez utiliser plusieurs propriétés de style à la fois. En particulier, les anciennes versions d'Internet Explorer utilisent la propriété color pour la couleur de ligne, tandis que d'autres navigateurs utilisent une couleur d'arrière-plan. Mais ce n'est pas tout, dans ce cas, veillez à spécifier une épaisseur de ligne (propriété hauteur) autre que zéro et supprimez la bordure autour de la ligne en définissant la propriété border sur none. En rassemblant toutes les propriétés du sélecteur hr, nous obtenons une solution universelle pour les navigateurs populaires.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Couleur de ligne horizontale < /title > < style > hr { border: none; / * Supprimer la bordure * / background-color : rouge ; / * Couleur de trait * / couleur : rouge ; / * Couleur de ligne pour IE6-7 * / hauteur : 2px ; / * Largeur de ligne * / } < /style > < /head > < body > < hr > < p > Chaîne de texte < /p > < hr > < /body > < /html >Exemples:
Cette:
< hr color="#c7c34c" size="2" width="50%" >donne ceci :
Couleur : couleur de la ligne :
< hr color="#c7c34c" size="2" width="50%" >Taille : Hauteur de Ligne exprimée en pixels :
< hr size="x" >Largeur : Largeur du trait exprimée soit en pourcentage (%) soit en pixels (dans mon exemple c'est 50% de la taille d'origine) :
< hr width="x%"> ou < hr width="x" >Plus avancé:
Cette:
< hr width="400" color="#000000" size="4" >donne :
Dans ce cas, nous avons utilisé le style :
La largeur de la bordure est de 3 pixels (3 px)
Il est pointillé
La couleur de base est le noir : #000000
Points colorés en bleu : #0099CC
Un dernier exemple pour expliquer plus, si encore besoin ;) :
Cette
< hr width="400" color="#FFFFFF" size="6" >donne :
Dans ce cas juste au dessus :
La largeur de la bordure est de 2 pixels (2 px)
Il est en pointillé
La couleur de base est le blanc : #FFFFFF
Tirets colorés en argent : #C0C0C0
Les styles possibles sont :
-pointé
-en pointillé
-solide
-double
-rainure
-début
-encart
-crête
C'est tout ce que j'ai à dire sur les lignes horizontales !