Maîtriser les retours à la ligne HTML

Introduction

Dans ce laboratoire, vous allez apprendre à utiliser la balise HTML <br> pour créer des retours à la ligne sur une page web.

Note: Vous pouvez pratiquer la programmation dans index.html et apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau débutant avec un taux de réussite de 100%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Créer un fichier HTML

Créez un nouveau fichier nommé index.html et ajoutez la structure HTML de base.

<!doctype html>
<html>
  <head>
    <title>Retours à la ligne avec HTML</title>
  </head>
  <body></body>
</html>

Ajouter du texte à la page web

Ajoutez du texte dans le corps de votre document HTML.

<body>
  <h1>Bienvenue sur ma page web!</h1>
  <p>Voici du texte sur ma page web. Je veux créer un retour à la ligne ici:</p>
  <p>Mais comment le faire?</p>
</body>

Utiliser la balise
pour les retours à la ligne

Pour ajouter un retour à la ligne entre les deux paragraphes de texte, ajoutez la balise <br> après la première balise de paragraphe.

<body>
  <h1>Bienvenue sur ma page web!</h1>
  <p>Voici du texte sur ma page web. Je veux créer un retour à la ligne ici:</p>
  <br />
  <p>Mais comment le faire?</p>
</body>

Personnaliser l'espacement des retours à la ligne avec la marge CSS

Pour personnaliser la quantité d'espace créée par un retour à la ligne, vous pouvez utiliser la marge CSS. Ajoutez le code CSS suivant à votre fichier HTML pour créer 30 pixels d'espace au-dessus et en-dessous de chaque retour à la ligne.

<head>
  <title>Retours à la ligne avec HTML</title>
  <style>
    br {
      margin-top: 30px;
      margin-bottom: 30px;
    }
  </style>
</head>

Enregistrez votre fichier index.html et ouvrez-le dans un navigateur web pour voir le retour à la ligne que vous avez créé.

Résumé

La balise HTML <br> est un moyen simple de créer des retours à la ligne sur votre page web. Utilisez-la pour ajouter de l'espace entre les paragraphes de texte, ou n'importe où ailleurs où vous avez besoin de casser une ligne. Il est facile de personnaliser la quantité d'espace créé par un retour à la ligne avec la marge CSS.

Retour à la ligne HTML