Comment insérer une ligne en HTML

Vous pouvez utiliser une ligne horizontale pour délimiter le contenu de votre site internet. Le code pour afficher une ligne est très simple. Cependant, si vous pouvez modifier les styles de votre ligne directement dans le code avec le HTML 4.01, il n’en est pas de même avec le HTML5. Pour ce dernier, vous devrez utiliser les composants CSS pour modifier les styles ^{[1]
X
Source de recherche} .

Méthode 1

Méthode 1 sur 2:

Insérer une ligne en utilisant un fichier CSS et le HTML5

Télécharger l'article

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1b\/658928-9-1.jpg\/v4-460px-658928-9-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1b\/658928-9-1.jpg\/v4-728px-658928-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

1
Créez un nouveau document. Ouvrez ou créez un nouveau document HTML. Les documents HTML peuvent être modifiés à l’aide d’un éditeur de texte comme Notepad . Vous pouvez aussi utiliser un éditeur de code comme Adobe Dreamweaver . Suivez ces étapes pour ouvrir un document HTML dans le programme de votre choix :
- ouvrez Notepad ou un éditeur de texte ou de code de votre choix ;
- cliquez sur Fichier ;
- cliquez sur Ouvrir ;
- sélectionnez un fichier HTML ;
- cliquez sur Ouvrir .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/04\/658928-10-1.jpg\/v4-460px-658928-10-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/04\/658928-10-1.jpg\/v4-728px-658928-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

2
Ajoutez la balise head . Si votre fichier HTML n’a pas encore de partie head , suivez les étapes ci-après pour l’ajouter. La partie head se situe entre les balises <html> et <body>.
- Tapez <head> en haut de votre document.
- Appuyez deux fois sur Entrée pour ajouter deux nouvelles lignes.
- Tapez </head> pour refermer la partie head .
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ca\/658928-11-1.jpg\/v4-460px-658928-11-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ca\/658928-11-1.jpg\/v4-728px-658928-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

3
Tapez <style type="text/css"> dans le head . La balise style doit se trouver entre les balises <head> et </head>. Cela va créer un espace où vous pourrez insérer votre code CSS pour appliquer un style à votre HTML.
- Vous pouvez aussi utiliser une feuille de style externe. Pour cela, vous devrez lier la feuille de style à votre fichier HTML.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1a\/658928-12-1.jpg\/v4-460px-658928-12-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1a\/658928-12-1.jpg\/v4-728px-658928-12-1.jpg","smallWidth":460,"smallHeight":344,"bigWidth":728,"bigHeight":545,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Ceci est la balise CSS pour définir un style pour votre ligne horizontale. Ajoutez ceci après la balise de style dans votre partie head ou dans votre CSS externe.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/70\/658928-13-1.jpg\/v4-460px-658928-13-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/70\/658928-13-1.jpg\/v4-728px-658928-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

5
Ajoutez des styles. Ajoutez des styles CSS à votre balise "<hr>". Les styles doivent se trouver après "hr {". Il existe de nombreux styles que vous pouvez appliquer à une ligne horizontale. Les styles qui suivent ne sont que quelques exemples.
- Tapez width: ##px; pour déterminer la largeur de la ligne. Remplacez ## par le nombre de pixels utilisés pour la largeur de la ligne. Vous pouvez aussi utiliser un pourcentage (%) à la place de pixels (px).
- Tapez height: ##px; pour paramétrer l’épaisseur de la ligne. Remplacez ## par le nombre de pixels à occuper pour l’épaisseur.
- Tapez background-color: ##; pour définir la couleur de la ligne. Remplacez ## par le nom de la couleur ou par un croisillon (#) suivi d’un code couleur au format hexadécimal.
- Tapez margin-right: ##px; pour indiquer le nombre de pixels à partir du bord droit. Remplacez ## par le nombre de pixels ou auto . Tapez auto pour aligner la ligne à gauche ou pour la centrer.
- Tapez margin-left: ##px; pour indiquer le nombre de pixels à partir du bord gauche. Remplacez ## par le nombre de pixels ou auto . Tapez auto pour aligner la ligne à droite ou pour la centrer.
- Tapez margin-top: ##px; pour créer une marge supérieure pour votre ligne. Remplacez ## par le nombre de pixels définissant l’épaisseur de cette marge.
- Tapez margin-bottom: ##px; pour créer une marge inférieure pour votre ligne. Remplacez ## par le nombre de pixels définissant l’épaisseur de cette marge.
- Tapez border-width: ##px; pour créer une bordure autour de votre ligne (facultatif). Remplacez ## par le nombre de pixels définissant l’épaisseur de la ligne.
- Tapez border-color: ##; pour définir la couleur de la bordure de la ligne. Remplacez ## par le nom de la couleur ou par un croisillon (#) suivi d’un code couleur au format hexadécimal.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/11\/658928-14-1.jpg\/v4-460px-658928-14-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/11\/658928-14-1.jpg\/v4-728px-658928-14-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

Tapez } après avoir entré les attributs de styles. Cela fermera les attributs de style pour la balise <hr>.
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/23\/658928-15-1.jpg\/v4-460px-658928-15-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/23\/658928-15-1.jpg\/v4-728px-658928-15-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
Positionnez votre ligne. Tapez <hr> n’importe où dans la partie « body » de votre document HTML. Cela ajoutera une ligne horizontale dans votre document HTML. Les attributs de style CSS seront appliqués chaque fois que vous utiliserez la balise <hr> dans votre code HTML ^{[2]
X
Source de recherche} . Votre code devrait ressembler à ceci :
```
 <!DOCTYPE html> 
 < 
 html 
 > 
 < 
 head 
 > 
 < 
 style 
 type 
 = 
 "text/css" 
 > 
 hr 
 { 
 width 
 : 
 50 
 % 
 ; 
 height 
 : 
 20 
 px 
 ; 
 background-color 
 : 
 red 
 ; 
 margin-right 
 : 
 auto 
 ; 
 margin-left 
 : 
 auto 
 ; 
 margin-top 
 : 
 5 
 px 
 ; 
 margin-bottom 
 : 
 5 
 px 
 ; 
 border-width 
 : 
 2 
 px 
 ; 
 border-color 
 : 
 green 
 ; 
 } 
 </ 
 style 
 > 
 </ 
 head 
 > 
 < 
 body 
 > 
 < 
 h1 
 > 
Ceci est un titre </ 
 h1 
 > 
 < 
 hr 
 > 
 < 
 p1 
 > 
Ceci est un paragraphe séparé par une ligne horizontale </ 
 p1 
 > 
 </ 
 body 
 > 
 </ 
 html 
 > 
```
Publicité