menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list




Sauts de Ligne en HTML - Tutoriel

Introduction

La balise `<br>` en HTML est utilisée pour insérer des sauts de ligne, permettant de forcer le texte suivant à commencer sur une nouvelle ligne. Ce tutoriel explore comment utiliser la balise `<br>` de manière efficace.

Exemples

Exemple 1 : Utilisation Basique de la Balise `<br>`</h3>

Insérer un saut de ligne entre deux lignes de texte :

       <p>Première ligne de texte<br>Deuxième ligne de texte</p>

Exemple 2 : Saut de Ligne dans un Texte Préformaté

Utilisation de la balise `<br>` dans un texte préformaté (balise `<pre>`) :

       <pre>
            Ligne 1<br>
            Ligne 2
        </pre>

Exercices avec Corrections

Exercice 1 : Ajouter des Sauts de Ligne

Ajoutez des sauts de ligne pour améliorer la lisibilité du texte :

       <p>Ceci est un paragraphe de texte.<br>Nouvelle ligne ajoutée ici.<br>Encore une nouvelle ligne.</p>

Questions à Choix Multiple (QCM)

  1. Quelle balise HTML est utilisée pour insérer des sauts de ligne?
    • A. <lb>
    • B. <newline>
    • C. <br>

    Réponse correcte : C

Questions & Réponses

Question : Peut-on utiliser la balise `<br>` à l'intérieur de n'importe quelle balise HTML?

Réponse : Oui, la balise `<br>` peut être utilisée à l'intérieur de la plupart des balises pour forcer un saut de ligne.

Études de Cas

Cas d'utilisation : Formatage d'une Adresse

Utilisez la balise `<br>` pour formater une adresse sur plusieurs lignes :

       <p>Nom de la rue, Ville<br>Code postal, Pays</p>

Éléments à Retenir

  • La balise `<br>` est utilisée pour insérer des sauts de ligne en HTML.
  • Elle peut être utilisée à l'intérieur de la plupart des balises pour forcer un saut de ligne.
  • Les sauts de ligne sont utiles pour améliorer la lisibilité du texte.

Proposition d'un Examen avec Correction

  1. Quelle balise HTML est utilisée pour insérer des sauts de ligne?
    • A. <lb>
    • B. <newline>
    • C. <br>

    Correction : C

Sauts de ligne en HTML

Les sauts de ligne en HTML sont utilisés pour créer des sauts de ligne dans le texte. Ils peuvent être utilisés pour organiser le texte de manière plus naturelle, ou pour créer des effets visuels.

La balise <br>

Les sauts de ligne en HTML sont définis par la balise <br>. La balise <br> est toujours définie en paire, avec une balise ouvrante <br> et une balise fermante </br>.

L'affichage des sauts de ligne

Les sauts de ligne sont généralement affichés comme des sauts de ligne réels, mais leur apparence peut être définie à l'aide des propriétés CSS.

Exemples d'utilisation des sauts de ligne

Voici quelques exemples d'utilisation des sauts de ligne :

  • Pour créer un simple saut de ligne
<p>Ce paragraphe contient deux lignes.</p>

Ce code crée un paragraphe avec deux lignes.

  • Pour créer un saut de ligne avec une couleur personnalisée
<p style="color: red;">Ce paragraphe contient deux lignes.</p>

Ce code crée un paragraphe avec deux lignes, dont la première ligne est rouge.

  • Pour créer un saut de ligne avec une taille de police personnalisée
<p style="font-size: 20px;">Ce paragraphe contient deux lignes.</p>

Ce code crée un paragraphe avec deux lignes, dont la police est de taille 20 pixels.

  • Pour créer un saut de ligne avec un style personnalisé
<p style="font-size: 20px; color: red;">Ce paragraphe contient deux lignes.</p>

Ce code crée un paragraphe avec deux lignes, dont la police est de taille 20 pixels et la couleur est rouge.

Remarques

  • Les sauts de ligne ne sont pas obligatoires pour les pages web.
  • Les sauts de ligne doivent être utilisés de manière cohérente.
  • Les sauts de ligne ne doivent pas être utilisés pour créer un effet visuel trop important.

Exemples supplémentaires

Voici quelques exemples supplémentaires d'utilisation des sauts de ligne :

  • Pour créer un saut de ligne entre deux mots
<p>Ce pa<br>ragraphe contient deux mots.</p>

Ce code crée un paragraphe avec deux mots, séparés par un saut de ligne.

  • Pour créer un saut de ligne pour ajouter une touche de style
<div style="background-color: #ccc;">
  <p>Ce paragraphe est dans une boîte avec un saut de ligne en bas.</p>
</div>

Ce code crée un saut de ligne en bas d'une boîte.

En comprenant comment utiliser les sauts de ligne, vous pouvez créer des pages web plus structurées et plus attrayantes.

Conclusion

Les sauts de ligne sont un outil simple mais puissant qui peut être utilisé pour améliorer la lisibilité du texte de vos pages web. En comprenant comment les utiliser, vous pouvez créer des pages web plus faciles à lire et à comprendre.