Séparateur de ligne horizontale HTML. Lignes horizontales. Exemples de lignes horizontales en HTML

Tâche

Tracez une ligne horizontale sur la page.

Solution

Les lignes horizontales sont utiles pour séparer un bloc de texte d'un autre. Un petit texte avec des lignes horizontales en haut et en bas attire l'attention. plus d'attention lecteur que le texte ordinaire.

Utiliser une balise

vous pouvez tracer une ligne horizontale dont l'apparence dépend des attributs utilisés, ainsi que du navigateur. L'étiquette fait référence à éléments de bloc, donc 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 balise

la ligne créée via cette balise est facile à gérer. Si vous associez également la puissance des styles, l’ajout d’une ligne à un document devient une tâche simple.

Ligne par défaut

affiché en couleur grise et avec un effet de volume. Ce type de ligne ne convient pas toujours à la conception du site, le désir des développeurs de modifier la couleur et d'autres paramètres de la ligne à travers les styles est donc compréhensible. Cependant, les navigateurs ont des approches mixtes face à ce problème, c'est pourquoi vous devrez utiliser plusieurs propriétés de style à la fois. En particulier, les anciennes versions navigateur Internet L'Explorateur utilise la propriété color pour la couleur des lignes et d'autres navigateurs utilisent background-color . Mais ce n'est pas tout, vous devez spécifier l'épaisseur de la ligne (propriété height) pour qu'elle soit différente de zéro et supprimer le cadre 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 (exemple 1).

Exemple 1 : ligne horizontale

HTML5 CSS 2.1 IE Cr Op Sa Fx

Couleur de la ligne horizontale

Chaîne de texte

Résultat cet exemple montré sur la fig. 1.

Riz. 1. Ligne horizontale colorée

Salutations à tous les lecteurs. De temps en temps, les artisans sont confrontés au problème de savoir comment créer une ligne horizontale ou verticale en utilisant HTML ou CSS. C'est ce dont je vais vous parler aujourd'hui.

Lignes en CSS

Il existe plusieurs façons de créer des lignes. L'une de ces façons est en utilisant CSS. Ou plutôt, en utilisant Border. Regardons un exemple.

Et c’est ce qui va se passer en conséquence.

Ligne horizontale et verticale avec en utilisant CSS.

Les lignes peuvent être tracées en CSS à l'aide de l'opérateur Border. Si vous avez juste besoin d'un rectangle avec une largeur de cadre fixe, vous pouvez simplement utiliser cet opérateur et lui donner une valeur. Par exemple border:5px solid #000000; cela signifiera que les bordures des blocs ont une largeur égale à 5 pixels de couleur noire.

Cependant, si vous devez définir non pas toutes les limites, mais seulement certaines, vous devez alors spécifier quelles limites sont nécessaires et quelle valeur aura chacune d'elles. Voici les opérateurs :

border-top – définit la valeur de la bordure supérieure
border-bottom – définit la valeur de la bordure inférieure
border-left – définit la valeur de la bordure gauche
border-right – définit la valeur de la bordure droite.

Ligne verticale et horizontale en HTML

Vous pouvez créer des lignes dans le HTML lui-même. Pour ce faire, vous pouvez utiliser la balise hr.

Dans ce cas, une ligne horizontale sera tracée, d'une hauteur d'un pixel et sur toute la largeur.

Mais cette balise peut également recevoir certaines valeurs.

Largeur– définit la valeur de la largeur de ligne.
Couleur– définit la couleur de la ligne.
Aligner– définit l'alignement à gauche, au centre, à droite
Taille– définit la valeur de l'épaisseur de ligne en pixels.

À l'aide de la balise hr, vous pouvez également définir une ligne verticale. Mais dans ce cas, vous devrez à nouveau recourir aux styles.

Dans ce cas, une ligne verticale sera tracée d'une centaine de pixels de haut, d'un pixel d'épaisseur et de cinq pixels en retrait.

Conclusion.

Eh bien, vous savez maintenant comment définir une ligne verticale et horizontale. Les lignes peuvent être définies comme sur les sites classiques, avec en utilisant HTML, et paramétrez-le sur un site qui utilise un CMS, par exemple WordPress, mais dans ce cas, vous devrez passer en mode HTML.

Eh bien, si vous avez d'autres questions, posez-les dans les commentaires.

Il semblerait, pourquoi quatre méthodes seraient-elles nécessaires ? Après tout, presque tout le monde utilise une méthode à laquelle il est habitué. Par exemple, j'ai appuyé plusieurs fois sur Shift et sur la touche tiret, et j'ai donc obtenu une ligne horizontale.

Mais que se passe-t-il si cela aboutit à une ligne pointillée, mais que vous en avez besoin d’une solide ?
- Très probablement, la touche Shift du clavier est défectueuse. D'autres méthodes viendront ici à la rescousse.

3.
4.
5.

La manière la plus courante de créer une ligne dans Word consiste peut-être à utiliser quelques touches du clavier.

I Ligne fine, épaisse, double et pointillée à l'aide du clavier

Ci-dessous, une image d'un clavier avec une disposition anglaise, mais sans disposition russe, mais cela n'a pas d'importance, car seules trois touches nous intéressent : Maj, tiret et Entrée.

Riz. 1. Trois touches du clavier : Maj, tiret et Entrée pour une ligne horizontale continue dans Word

Avec ces trois touches, vous pouvez tracer une ligne horizontale continue dans Word : pointillée ou pleine, fine ou épaisse, longue ou courte.

1) Lorsque vous appuyez plusieurs fois sur la touche « - » (tiret) Éditeur de mots nous obtenons une ligne pointillée de n'importe quelle longueur.

Faire mince longue ligne largeur pleine page :

On retrouve la touche « tiret » sur le clavier (à droite de la touche « zéro », dans le cadre vert de la Fig. 1).
Depuis une nouvelle (!) ligne dans Word, appuyez plusieurs fois sur cette touche : -
Et puis appuyez sur la touche « Entrée » (). Quelques tirets imprimés se transformeront soudainement en une fine ligne horizontale continue sur toute la largeur de la page.

2) Lorsque vous appuyez simultanément sur Shift et « - » (tiret), PAS un tiret n'est imprimé, mais un trait de soulignement _________. De cette façon, vous pouvez créer une ligne continue de longueur arbitraire n’importe où dans le document.

Riz. 2. Ligne horizontale fine et épaisse dans Word

Maintenant, imprimons graisse ligne horizontale sur toute la largeur de la page :

On retrouve à nouveau la même touche « tiret », ainsi que la touche Shift (à gauche ou à droite, selon vos envies). Appuyez sur Shift, maintenez et ne lâchez pas.
Et maintenant, à partir d'une nouvelle (!) ligne, cliquez plusieurs fois sur le tiret (par exemple 3-4 fois) (sans relâcher Shift) : ___. Relâchez Shift.
Appuyez maintenant sur la touche Entrée. Vous verrez une ligne continue horizontale épaisse.

Résumons quelques résultats sous forme de tableau :

(Cliquez pour agrandir) Lignes dans Word à l'aide du clavier

II Ligne dans Word à l'aide d'un tableau

Une ligne horizontale peut être obtenue en utilisant un tableau d'une cellule (1x1), dans lequel seule la bordure supérieure ou inférieure est colorée (sera visible), et les trois autres côtés du tableau auront des bordures non colorées (elles seront invisibles). .

Placez le curseur à l'endroit où doit se trouver la ligne. Dans le menu supérieur de Word, cliquez sur :

Insérer (1 sur la Fig. 3),
Tableau (2 sur la figure 3),
Une cellule (3 sur la figure 3).

Riz. 3. Comment insérer un tableau 1x1 (à partir d'une cellule) dans Word

Le résultat sera un tableau d'une grande cellule (1x1) :

Il ne reste plus qu'à supprimer les bordures de trois côtés du tableau 1x1. Pour ça

allez dans l'onglet « Accueil » (1 sur la Fig. 4),
puis à côté de « Police » nous trouvons « Paragraphe » et les bordures (2 sur la Fig. 4),
supprimez toutes les bordures en cliquant sur « Aucune bordure » (3 sur la Fig. 4),
sélectionnez « Bordure supérieure » ou « Bordure inférieure » (4 sur la Fig. 4).

Riz. 4. Comment supprimer la sélection de bordure d'un tableau Word (rendre les bordures invisibles)

Je le montre clairement dans la vidéo (à la fin de l'article).

D’ailleurs, sur la Fig. 3, il est clair qu’il existe un moyen plus simple. Vous pouvez placer le curseur au début de la ligne dans Word et cliquer sur « Ligne horizontale » (5 sur la Fig. 4) :

III Ligne dans Word en utilisant le dessin

Insérer (1 sur la figure 5) - Formes (2 sur la figure 5) - c'est une autre façon d'obtenir une ligne horizontale dans Word.

Pour garder la ligne strictement horizontale, maintenez la touche Maj enfoncée et tracez la ligne en même temps.

Riz. 5. Comment tracer une ligne dans Word

Ligne IV dans Word à l'aide du clavier à l'écran

Pour trouver le clavier à l'écran, saisissez l'expression « clavier à l'écran » dans la recherche, plus de détails pour Windows 7 et pour Windows 8.

Pour Windows 10, vous pouvez également trouver le clavier à l'écran en tapant « clavier à l'écran » dans la barre de recherche.

Riz. 6. Clavier à l'écran

Nous allons créer une ligne horizontale de la même manière que dans la première option avec un clavier ordinaire. Sur sur le clavier de l'écran Vous aurez besoin de trois boutons : tiret, Shift et Enter.

1 Tirez et entrez

À partir d'une nouvelle ligne dans Word, cliquez plusieurs fois sur le tiret (1 sur la figure 6) et appuyez sur Entrée. Vous obtiendrez une fine ligne horizontale.

2 Maj, tiret et Entrée

À partir d'une nouvelle ligne dans Word, cliquez d'abord sur Shift (2 sur la Fig. 6), puis sur Dash (1 sur la Fig. 6). Vous obtiendrez un soulignement. Nous allons répéter cela encore 2 fois, puis appuyer sur Entrée. En conséquence, nous verrons une ligne horizontale épaisse.

En créant Pages HTML le design joue un rôle important. Surtout quand il s'agit de divers symboles et de designs décoratifs : ces petites choses contribuent à rendre le « langage » de votre page plus accessible et plus clair, et changent également considérablement sa perception et apparence en général. L'un des éléments les plus importants pour la conception est la ligne horizontale, puis nous apprendrons plus en détail comment travailler avec elle et comment créer une ligne horizontale en HTML.

Qu'est-ce qu'une ligne horizontale et à quoi sert-elle ?

Une ligne horizontale en HTML est un élément de conception de page qui remplit un certain nombre de fonctions :

Décoratif. Aide à ajouter de l’attractivité à la page.
Partage. Favorise la séparation efficace des informations de significations différentes.
Mettre en évidence ou souligner. Attire l'attention des invités de la page sur les informations nécessaires et les plus importantes.

C'est la ligne horizontale qui est considérée comme le moyen le plus accessible de mettre en œuvre un certain nombre de fonctions. C'est très simple à créer et, de l'extérieur, cela semble très avantageux. Par de simples modifications du code HTML, vous pouvez ajuster :

longueur;
largeur;
caractéristiques de couleur;
alignement le long d’un bord ou de l’autre.

Il convient de noter que la ligne horizontale fait référence aux éléments de bloc. Cela signifie qu'elle prend nouvelle ligne sur la page, et le texte qui le suit ira ci-dessous.

Créer une ligne horizontale en HTML

Vous pouvez définir une ligne à l’aide d’une simple balise – hr entre parenthèses triangulaires. C'est l'abréviation de « Horizontal Rule » et définit les paramètres externes classiques. Il diffère de beaucoup d’autres en ce sens qu’il n’a pas besoin de balise de fermeture et qu’il peut exister de manière indépendante. Changement caractéristiques externesélément utilisant des valeurs supplémentaires dans la balise :

Longueur. Si vous ne souhaitez pas que la longueur de la ligne s'étende sur toute la page, vous pouvez définir la taille souhaitée en pixels ou en pourcentages. Ceci est fait pour obtenir de l'aide mot supplémentaire"largeur" dans la balise et une longueur numérique indiquée après le signe "=" entre guillemets.

Cela ressemble à ceci. Par exemple, si nous avons besoin d'une longueur de 100 pixels, nous définissons la balise suivante : hr width=”100″

Alignement. L'alignement est possible sur les bords gauche ou droit, ainsi qu'au centre. Cette caractéristique ne s'applique que si vous avez déjà précisé le paramètre largeur, puisqu'il est impossible d'aligner une ligne qui s'étend sur toute la page. Pour l'alignement, nous définissons un attribut supplémentaire dans la balise « align » et y ajoutons une direction : center – pour le centre, left – pour la gauche et right – pour l'alignement à droite.

Dans ce cas, la balise terminée ressemblera à ceci. Par exemple, si nous devons définir l'alignement central d'une ligne horizontale de 150 pixels de long, alors la balise terminée ressemblera à ceci : hr align=”center” width=”150″.

Notez que "align", la métrique d'alignement, est placé en 1ère place, même si l'attribut dépend de la métrique de largeur.

Largeur. Vous pouvez également choisir de spécifier la largeur, en créant un soulignement gras ou fin. Ce critère ne dépend de rien et peut être utilisé comme critère indépendant sans précision de longueur ni d'alignement. Pour cela, nous utilisons l'attribut size dans la balise et une valeur numérique égale à la largeur souhaitée en pixels. Le numéro est indiqué entre guillemets après l'attribut size et le symbole « = ».

Ainsi, si nous devons créer une ligne d'une largeur de 15 pixels, nous devons créer la balise suivante : hr size=”15″.

Couleur. Il est également spécifié comme indicateur indépendant. Pour le modifier, utilisez l'attribut color en combinaison avec le nom de la couleur sous forme de code ou langue anglaise. La couleur est indiquée entre guillemets après le symbole « = ».

Ainsi, la balise d'une ligne blanche standard peut être écrite de deux manières : hr color=”#FFFFFF” ou hr color=”white”

Le noir peut être créé en utilisant le code #000000.

Ranger ombre. Si vous avez besoin d'un élément qui ne contient pas d'ombre, vous devez utiliser l'attribut noshade dans la balise. Il peut être utilisé seul ou en combinaison avec d'autres éléments. Une balise pour une ligne standard l'utilisant ressemblera à ceci : hr noshade

Création d'une ligne horizontale à l'aide de la vidéo

Et si vous souhaitez recevoir des informations dans un format plus visuel, alors référez-vous à la vidéo suivante, qui décrit en détail les possibilités de travailler avec une ligne horizontale.

Après avoir déterminé les dimensions requises de la ligne horizontale, vous pouvez concevoir les pages du site Web de manière à ce que les informations soient structurées et visuellement compétentes. Cela aide les visiteurs à percevoir plus facilement les informations présentées et permet à votre site de se démarquer des autres.

Salut tout le monde! Aujourd'hui, je vais vous expliquer comment créer une ligne horizontale en utilisant HTML.

En fait, le besoin de tracer une ligne horizontale se pose assez souvent, par exemple lorsqu'il faut séparer une partie du texte d'une autre.

Lignes horizontales et verticales en CSS

Cela peut être fait en utilisant CSS. Pour ce faire, je joins la section de texte requise dans un bloc à l'aide d'une balise div, puis dans le fichier style.css ou directement dans le code html nous écrivons les propriétés de ce bloc pour la bordure supérieure ou inférieure en utilisant border-top et Bordure du bas. Voici un exemple :

Ligne HTML verticale

Ligne horizontale en utilisant CSS.

Dans ce cas, j'ai défini le style en utilisant CSS directement à partir du code HTML et j'ai rendu la bordure supérieure pleine et la bordure inférieure en pointillés.

Voici à quoi cela ressemblera sur la page :

Ligne horizontale en utilisant CSS.

Cette méthode a ses avantages :

Une large gamme de paramètres qui vous permettent de définir presque n'importe quel type de ligne ;
Vous pouvez créer à la fois horizontalement et lignes verticales. Pour créer des lignes verticales, vous devez remplacer la bordure supérieure par la bordure gauche et la bordure inférieure par la bordure droite.

Les inconvénients incluent la relative lourdeur du code.

Cependant, il s'est avéré que vous pouvez insérer une ligne horizontale dans le texte en utilisant HTML. En même temps, vous n’avez même pas besoin d’entrer dans le CSS. La balise est utilisée pour cela

Ligne horizontale utilisant la balise HTML

La première caractéristique de cette balise est qu’elle n’a pas de balise de fermeture appariée. Il peut être utilisé n'importe où dans le code HTML entre les balises Et.

Cette balise possède les attributs suivants :

Largeur– détermine la longueur de notre ligne horizontale en pixels ou en pourcentages ;
Couleur– définit la couleur du trait ;
Aligner– définit l'alignement de la ligne sur le bord droit – droite, sur le bord gauche – gauche, au centre – centre ;
Taille– épaisseur de trait en pixels.

Ici exemple HTML– coder.