Cet article de wikiHow vous apprend à créer une ligne horizontale en HTML. La ligne horizontale peut être utilisée pour séparer le contenu de votre site Web. Le code pour créer une ligne est assez simple. Il est également possible d'ajouter du code en ligne pour styliser la ligne en HTML 4.01. En HTML5, vous devez utiliser CSS pour le styler.
Pas
Méthode 1 sur 2: Utilisation de HTML 4.01
Étape 1. Ouvrez 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 tel qu'Adobe Dreamweaver. Suivez les étapes ci-dessous pour ouvrir un document HTML dans votre programme préféré:
- Ouvrez le Bloc-notes ou un éditeur de texte/code de votre choix.
- Cliquez sur le menu "Fichier".
- Cliquez sur "Ouvrir".
- Sélectionnez un fichier HTML.
- Cliquez sur "Ouvrir".
Étape 2. Sélectionnez l'endroit où vous allez insérer la ligne
Balayez vers le bas jusqu'à ce que vous trouviez la ligne sur laquelle vous souhaitez insérer la nouvelle ligne et cliquez sur son côté gauche pour placer le curseur avant le début de la ligne.
Étape 3. Créez un espace vide
Appuyez deux fois sur Entrée pour déplacer vers le bas le texte sur lequel vous allez insérer la ligne et déplacez le curseur sur l'espace blanc.
Étape 4. Ajoutez la balise ("tag") ""
Tapez l'espace avant le début de la ligne. La balise "" est responsable de la création d'une ligne horizontale sur toute la page.
Étape 5. Déplacez la ligne devant la balise "hr" vers la nouvelle ligne
Pour ce faire, appuyez sur ↵ Entrée. A partir de maintenant, la marque "" doit être sur une ligne séparée.
Étape 6. Ajoutez des attributs à la ligne horizontale (facultatif)
Vous pouvez ajouter des attributs à la ligne horizontale, tels que la longueur, la largeur, la couleur et l'alignement. Utilisez les codes suivants après le « hr », entre les crochets (signes « inférieur à » et « supérieur à ») du code. Vous pouvez ajouter plusieurs attributs à un crochet en séparant chacun d'eux par un espace.
- Tapez pour modifier l'épaisseur de la ligne. Remplacez le "#" par le numéro d'épaisseur (par exemple, size="10").
- Tapez pour modifier la largeur. Remplacez le "#" par le nombre de pixels ou le pourcentage correspondant à la largeur de la page (par exemple, ou).
- Tapez pour changer la couleur de la ligne. Remplacez le "#" par le nom d'une couleur ou son code hexadécimal (par exemple, color="red" ou color="#FF0000").
- Tapez pour aligner la ligne. Remplacez le "#" par "right", "left" ou "center" (par exemple,).
Étape 7. Enregistrez votre fichier HTML
Pour enregistrer un document texte, vous devez remplacer l'extension de fichier (.txt,.docx) par ".html". Suivez les étapes ci-dessous pour enregistrer le document au format HTML:
- Cliquez sur le menu "Fichier".
- Cliquez sur "Enregistrer sous".
- Entrez le nom du fichier à côté de "Nom".
- Tapez.html après le nom du fichier.
- Cliquez sur "Enregistrer".
Étape 8. Testez le HTML
Pour tester le fichier HTML, faites un clic droit sur le fichier et sélectionnez "Ouvrir avec". Sélectionnez un navigateur. Une ligne continue devrait apparaître à l'endroit où vous placez la balise "hr". Le code HTML ressemblera à ceci:
Ceci est un en-tête
Il s'agit du texte du paragraphe qui a été séparé de l'en-tête par la ligne.
Méthode 2 sur 2: Utilisation de CSS/HTML5
Étape 1. Ouvrez ou créez un nouveau document HTML
Les documents HTML peuvent être modifiés à l'aide d'un éditeur de texte tel que le Bloc-notes. Une autre possibilité est d'utiliser un éditeur de code tel qu'Adobe Dreamweaver. Suivez les étapes ci-dessous pour ouvrir un document HTML dans le programme de votre choix:
- Ouvrez le Bloc-notes ou un éditeur de texte/code de votre choix.
- Cliquez sur le menu "Fichier".
- Cliquez sur "Ouvrir".
- Sélectionnez un fichier HTML.
- Cliquez sur "Ouvrir".
Étape 2. Ajoutez un en-tête au document HTML
Si votre document HTML n'a pas encore d'en-tête, suivez les étapes ci-dessous pour en ajouter un. L'en-tête est après la balise "" et avant la balise "".
- Tapez en haut du document.
- Appuyez deux fois sur ↵ Entrée pour ajouter deux nouvelles lignes.
- Tapez pour fermer l'en-tête.
Étape 3. Tapez l'en-tête
La balise de style se trouve entre les deux balises d'en-tête. Un endroit sera créé où vous pourrez insérer du code CSS pour styliser votre HTML.
Une autre option consiste à utiliser une feuille de style externe. Lisez "Comment ajouter un fichier CSS à HTML" et découvrez comment lier un fichier CSS externe à votre fichier HTML
Étape 4. Tapez hr {
Il s'agit d'un balisage CSS pour styliser la ligne horizontale. Ajoutez-le après la balise de style dans l'en-tête ou le fichier CSS externe.
Étape 5. Ajoutez des styles CSS pour la balise ""
Ils vont après la balise "hr {". Il existe plusieurs façons de styliser la ligne horizontale. Voici quelques exemples.
- Largeur du type: ## px; pour régler la largeur. Remplacez "##" par le nombre de pixels dans la ligne ou le pourcentage (%) au lieu des pixels (px).
- Hauteur de saisie: ## px; pour définir l'épaisseur de la ligne. Remplacez "##" par le nombre d'épaisseur de ligne en pixels.
- Tapez background-color: ##; pour définir la couleur de la ligne. Remplacez "##" par un nom de couleur ou un signe dièse (#) suivi d'un code de couleur hexadécimal.
- Tapez margin-right: ##px; pour définir le nombre de pixels de la marge de droite. Remplacez "##" par un nombre, un nombre de pixels ou "auto". Tapez "auto" pour aligner la ligne à gauche ou au centre.
- Tapez margin-left: ##px; pour définir le nombre de pixels de la marge gauche. Remplacez "##" par le nombre, le nombre de pixels ou "auto". Tapez "auto" pour aligner la ligne à droite ou au centre.
- Tapez margin-top: ##px; pour définir la marge supérieure de la ligne. Remplacez "##" par un nombre ou par l'épaisseur en pixels de la marge.
- Tapez margin-bottom: ##px; pour définir la marge inférieure de la ligne. Remplacez "##" par le nombre de pixels d'épaisseur de la marge.
- Tapez border-width: ##px; pour créer une bordure autour de la ligne (facultatif). Remplacez "##" par le numéro d'épaisseur de pixel de la bordure.
- Tapez border-color: ##; pour définir la couleur de la bordure (facultatif). Remplacez "##" par un nom de couleur ou un signe dièse (#) suivi d'un code de couleur hexadécimal.
Étape 6. Tapez } après les définitions de style
Les définitions de style seront fermées au balisage.
Étape 7. Tapez n'importe où dans le corps du document HTML
Une ligne horizontale sera ajoutée au document HTML. Les définitions de style CSS seront appliquées chaque fois que vous utiliserez un balisage dans votre document HTML. Votre code devrait ressembler à ceci:
Ceci est un en-tête
Il s'agit d'un paragraphe séparé par une ligne horizontale.