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]XSource 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

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.
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.
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.
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.
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.
Tapez } après avoir entré les attributs de styles. Cela fermera les attributs de style pour la balise <hr>.
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]XSource de recherche}. Votre code devrait ressembler à ceci :
```
<!DOCTYPE html><html><head><style type="text/css">hr {width: 50%;height: 20px;background-color: red;margin-right: auto;margin-left: auto;margin-top: 5px;margin-bottom: 5px;border-width: 2px ;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é

Méthode 2

Méthode 2 sur 2:

Insérer une ligne en HTML 4.01

Télécharger l'article

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.
Sélectionnez l’endroit où vous désirez insérer la ligne. Faites défiler le code jusqu’à trouver la ligne de code au-dessus de laquelle vous voulez insérer votre ligne. Cliquez alors à l’extrême gauche de la ligne pour positionner votre curseur juste au début de la ligne.
Appuyez deux fois sur Entrée pour faire descendre le texte sur la ligne située au-dessus de laquelle vous voulez placer votre ligne horizontale. Après cela, positionnez votre curseur en haut de l’espace que vous venez de créer.
Tapez <hr> avant le début de la ligne. La balise <hr> sert à créer une ligne horizontale à travers la page.
Déplacez la ligne qui se trouve devant la balise hr sur une nouvelle ligne. Pour cela, appuyez sur Entrée. Ainsi, la balise <hr> devrait être isolée sur sa propre ligne.
6
Ajoutez des attributs. Vous pouvez (si vous le souhaitez) ajouter des attributs à votre ligne horizontale tels que des attributs de longueur, de largeur, de couleur et d’alignement. Utilisez les codes suivants après la balise hr à l’intérieur des chevrons. Vous pouvez ajouter plus d’un attribut à l’intérieur d’un chevron en les séparant par une espace ^{[3]XSource de recherche}.
- Tapez <hr size="#"> pour modifier l’épaisseur de la ligne. Remplacez # par la valeur souhaitée pour l’épaisseur (exemple : size="10").
- Tapez <hr width="#"> pour modifier la largeur de la ligne. Remplacez # par le nombre de pixels pour la largeur ou en pourcentage par rapport à la largeur de la page (exemple : width="200" ou width="75%").
- Tapez <hr color="#"> pour modifier la couleur de la ligne. Remplacez # par un nom de couleur ou un code hexadécimal (exemple : color="red" or color="#FF0000")
- Tapez <hr align="#"> pour gérer l’alignement de la ligne. Remplacez # par "right", "left" ou "center" (exemple : <hr width="50%" align="center">).
7
Sauvegardez votre fichier HTML. Pour enregistrer un fichier texte en tant que document HTML, vous devez remplacer l’extension du fichier (.txt, .docx) par .html. Suivez ces étapes pour enregistrer votre document HTML :
- cliquez sur le menu Fichier ;
- sélectionnez Enregistrer sous… ;
- entrez un nom pour le fichier, à côté de Nom du fichier ;
- tapez .html après le nom du fichier ;
- cliquez sur Enregistrer.
8
Testez votre code. Pour tester votre fichier HTML, faites un clic droit sur le fichier et sélectionnez Ouvrir avec. Puis, sélectionner un navigateur internet. Une ligne devrait s’afficher à l’endroit où vous avez placé la balise hr. Votre code HMTL devrait ressembler à ceci ^{[4]XSource de recherche} :
```
<!DOCTYPE html><html><body><h1>Ceci est un titre</h1><hr size="6" width="50%" align="left" color="green"><p1>Ceci est un paragraphe séparé du titre par une ligne horizontale.</p1></body></html>
```
Publicité