Comment ajouter une ligne horizontale au HTML

Contenu

Pas
Méthode 1 sur 2: Travailler en HTML 4.01
Méthode 2 sur 2: Travailler en CSS / HTML5

Cet article va vous montrer comment ajouter une ligne horizontale en HTML. La ligne horizontale peut être utilisée pour séparer le contenu sur le site. Le code pour créer la ligne est assez simple. Cependant, en HTML 4.01, il est possible de modifier le design d'une ligne à l'aide de commandes internes. En HTML5, vous devrez utiliser CSS pour styliser la ligne.

Pas

Méthode 1 sur 2: Travailler en HTML 4.01

1 Ouvrez un document HTML existant ou créez un nouveau document HTML. Les documents HTML peuvent être modifiés avec un éditeur de texte tel que le Bloc-notes ou un éditeur de code spécialisé tel qu'Adobe Dreamweaver. Suivez ces étapes pour ouvrir un document HTML dans le programme de votre choix :
- Ouvrez le Bloc-notes ou un autre éditeur de texte/code.
- Ouvrir le menu Fichier.
- Cliquer sur Ouvert.
- Sélectionnez le fichier HTML.
- Cliquer sur Ouvert
2 Sélectionnez l'emplacement où vous souhaitez insérer la ligne. Faites défiler jusqu'à ce que vous trouviez la ligne au-dessus de laquelle la ligne doit apparaître, puis déplacez le curseur directement au début de cette ligne en cliquant à l'extrême gauche de cette ligne.
3 Ajoutez une ligne vide. Tapez deux fois Entrezpour déplacer vers le bas le texte avant lequel vous souhaitez insérer une ligne, puis placez le curseur sur une ligne vide.
4 Ajoutez la balise hr>. Entrer h> à l'espace vide au début de la ligne. Étiqueter h> vous permet de tracer une ligne horizontale sur toute la page.
5 Déplacez le curseur après la balise "hr" sur une nouvelle ligne en appuyant sur Entrez. Maintenant la balise h> devrait être sur une ligne séparée.
6 Ajoutez des attributs à la ligne horizontale (facultatif). Ajoutez des attributs tels que la longueur, l'épaisseur, la couleur et l'alignement. Entourez-les d'accolades immédiatement après le "hr". Pour ajouter plusieurs attributs, séparez-les par un espace.
- Entrer taille hr = "#">pour modifier l'épaisseur de la ligne. Remplacez "#" par une valeur d'épaisseur numérique (par exemple, size = "10").
- Entrer hr largeur = "#">pour modifier la largeur de ligne. Remplacez "#" par le nombre de pixels ou un pourcentage de la largeur de la page (par exemple, width = "200" ou width = "75%").
- Entrer hr couleur = "#">pour changer la couleur de la ligne. Remplacez "#" par le nom de la couleur ou son code hexadécimal (par exemple, color = "red" ou color = "# FF0000").
- Entrer hr align = "#">pour aligner la ligne. Remplacez "#" par "right" (right), "left" (left) ou "center" (center) (par exemple, hr width = "50%" align = "center">).
7 Enregistrez le fichier HTML. Pour enregistrer un fichier texte en tant que document HTML, vous devez remplacer l'extension de fichier (.txt, .docx) par ".html". Suivez ces étapes pour enregistrer votre document HTML :
- Ouvrir le menu Fichier.
- Cliquer sur Enregistrer sous.
- Saisissez un nom pour le fichier dans le champ Nom de fichier.
- Ajouter .html après le nom du fichier.
- Cliquer sur sauver.
8 Vérifiez votre document HTML. Pour vérifier le fichier HTML, faites un clic droit dessus et choisissez Ouvrir avec. Sélectionnez ensuite votre navigateur Web. Une ligne continue devrait apparaître à l'endroit où vous avez inséré la balise "hr". Le code HTML ressemblera à ceci :

Méthode 2 sur 2: Travailler en CSS / HTML5

1 Ouvrez un document HTML existant ou créez un nouveau document. Les documents HTML peuvent être modifiés avec un éditeur de texte tel que le Bloc-notes ou un éditeur de code spécialisé tel qu'Adobe Dreamweaver. Suivez ces étapes pour ouvrir un document HTML dans le programme de votre choix :
- Ouvrez le Bloc-notes ou un autre éditeur de texte/code.
- Ouvrir le menu Fichier.
- Cliquer sur Ouvert.
- Sélectionnez le fichier HTML.
- Cliquer sur Ouvert
2 Ajoutez un titre à votre document HTML. Si votre document HTML n'a pas encore d'en-tête, procédez comme suit pour en ajouter un. Le titre doit être placé après la balise html> et avant la balise body>.
- Entrer tête> en haut du document.
- Tapez deux fois Entrezpour ajouter deux nouvelles lignes.
- Entrer / tête>pour fermer le titre.
3 Entrer type de style = "texte / css"> à l'intérieur de l'en-tête. La balise de style est placée entre les deux balises de titre pour créer un endroit où vous pouvez utiliser CSS pour modifier la conception HTML.
- Vous pouvez également utiliser une feuille de style externe. Lire l'article "Comment insérer un fichier CSS dans HTML»Pour apprendre à lier un fichier CSS externe à un fichier HTML.
4 Entrer h {. Il s'agit de la balise CSS pour le style de la ligne horizontale. Ajoutez-le après la balise "style" dans votre en-tête ou dans votre fichier CSS externe.
5 Ajoutez des styles CSS pour la balise hr>. Ils doivent venir après la balise "hr {". Une ligne horizontale peut être stylisée de différentes manières. Voici quelques-uns d'entre eux.
- Entrer largeur : ## px ;pour ajuster la largeur de la ligne. Remplacez "##" par la largeur de ligne en pixels. Au lieu de pixels (px), vous pouvez utiliser un pourcentage (%).
- Entrer hauteur : ## px ;pour ajuster l'épaisseur de la ligne. Remplacez "##" par la largeur de ligne en pixels.
- Entrer Couleur de l'arrière plan: ##;pour spécifier la couleur de la ligne. Remplacez « ## » par un nom de couleur ou un hachage (#) suivi d'un code de couleur hexadécimal.
- Entrer marge droite : ## px ;pour spécifier le nombre de pixels à partir du bord droit. Remplacez "##" par un nombre numérique de pixels ou le code "auto". Entrez "auto" pour aligner la ligne à gauche ou au centre.
- Entrer marge gauche : ## px ;pour spécifier le nombre de pixels à partir du bord gauche. Remplacez "##" par un nombre numérique de pixels ou le code "auto". Entrez "auto" pour aligner la ligne à droite ou au centre.
- Entrer marge supérieure : ## px ; pour spécifier le remplissage supérieur de la ligne. Remplacez "##" par un nombre correspondant au remplissage en pixels.
- Entrer marge inférieure : ## px ;pour spécifier le remplissage inférieur de la ligne. Remplacez "##" par un nombre correspondant au remplissage en pixels.
- Entrer largeur de bordure : ## px ;pour dessiner un cadre autour de la ligne (facultatif). Remplacez "##" par un nombre correspondant à la largeur de la bordure en pixels.
- Entrer couleur de la bordure: ##;pour spécifier la couleur de la bordure (facultatif). Remplacez « ## » par un nom de couleur ou un hachage (#) suivi d'un code de couleur hexadécimal.
6 Entrer } après les attributs de style pour terminer le style de la balise hr>.
7 Entrer h> n'importe où dans le corps du document HTML pour ajouter une ligne horizontale. Les paramètres de style CSS seront appliqués chaque fois que vous utiliserez la balise hr> dans votre document HTML. Votre code devrait ressembler à ceci :