Lignes Horizontales en HTML - Tutoriel

Introduction

La balise `<hr>` en HTML est utilisée pour insérer des lignes horizontales dans votre contenu, permettant de séparer visuellement différentes sections. Ce tutoriel explore comment utiliser la balise `<hr>` de manière efficace.

Exemples

Exemple 1 : Ligne Horizontale Simple

Utilisation basique de la balise `<hr>` pour créer une ligne horizontale :

       <p>Contenu avant la ligne horizontale</p>
        <hr>
        <p>Contenu après la ligne horizontale</p>

Exemple 2 : Personnalisation de la Ligne Horizontale

Personnalisation de la balise `<hr>` avec des attributs de style :

       <hr style="color: #ff0000; background-color: #ff0000; height: 2px;">

Exercices avec Corrections

Exercice 1 : Ajouter une Ligne Horizontale Personnalisée

Ajoutez une ligne horizontale entre deux paragraphes avec une couleur rouge et une hauteur de 3 pixels :

       <p>Premier paragraphe</p>
        <hr style="color: #ff0000; background-color: #ff0000; height: 3px;">
        <p>Deuxième paragraphe</p>

Questions à Choix Multiple (QCM)

Quelle balise est utilisée pour insérer une ligne horizontale en HTML?
- A. <br>
- B. <line>
- C. <hr>
Réponse correcte : C

Questions & Réponses

Question : Peut-on personnaliser la couleur d'une ligne horizontale en HTML?

Réponse : Oui, vous pouvez personnaliser la couleur de la ligne horizontale en utilisant la propriété de style `color` sur la balise `<hr>`. Par exemple :

       <hr style="color: #008000;">

Études de Cas

Cas d'utilisation : Séparation de Sections

Utilisez la balise `<hr>` pour séparer visuellement différentes sections d'une page web :

       <h2>Section 1</h2>
        <p>Contenu de la section 1</p>
        <hr>
        <h2>Section 2</h2>
        <p>Contenu de la section 2</p>

Éléments à Retenir

La balise `<hr>` est utilisée pour insérer des lignes horizontales en HTML.
Elle peut être personnalisée avec des attributs de style pour ajuster la couleur, la hauteur, etc.
Les lignes horizontales sont utiles pour séparer visuellement différentes parties d'une page.

Proposition d'un Examen avec Correction

Quelle balise est utilisée pour insérer une ligne horizontale en HTML?
- A. <br>
- B. <line>
- C. <hr>
Correction : C

Lignes horizontales en HTML

Les lignes horizontales en HTML sont des éléments utilisés pour créer des lignes horizontales dans le texte. Elles peuvent être utilisées pour séparer des sections de texte, pour créer des effets visuels ou pour ajouter une touche de style.

La balise <hr>

Les lignes horizontales en HTML sont définies par la balise <hr>. La balise <hr> est toujours définie en paire, avec une balise ouvrante <hr> et une balise fermante </hr>.

L'affichage des lignes horizontales

Les lignes horizontales sont généralement affichées comme des lignes horizontales solides, mais leur apparence peut être définie à l'aide des propriétés CSS.

Exemples d'utilisation des lignes horizontales

Voici quelques exemples d'utilisation des lignes horizontales :

Pour créer une simple ligne horizontale

<hr>

Ce code crée une simple ligne horizontale.

S'ouvre dans une nouvelle fenêtre www.pierre-giraud.com

Ligne horizontale simple en HTML

Pour créer une ligne horizontale avec une couleur personnalisée

<hr style="color: red;">

Ce code crée une ligne horizontale rouge.

S'ouvre dans une nouvelle fenêtre openclassrooms.com

Ligne horizontale rouge en HTML

Pour créer une ligne horizontale avec une épaisseur personnalisée

<hr style="height: 5px;">

Ce code crée une ligne horizontale de 5 pixels d'épaisseur.

Pour créer une ligne horizontale avec un style personnalisé

<hr style="width: 50%; border-top: 5px solid red; border-bottom: 5px solid blue;">

Ce code crée une ligne horizontale de 50 % de la largeur de la fenêtre, avec une bordure supérieure rouge de 5 pixels et une bordure inférieure bleue de 5 pixels.

Remarques

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

Exemples supplémentaires

Voici quelques exemples supplémentaires d'utilisation des lignes horizontales :

Pour créer une ligne horizontale entre deux paragraphes

<p>Ce paragraphe est en haut.</p>
<hr>
<p>Ce paragraphe est en bas.</p>

Ce code crée une ligne horizontale entre deux paragraphes.

Pour créer une ligne horizontale pour séparer des sections de contenu

<h2>Section 1</h2>
<p>Ce paragraphe est dans la section 1.</p>
<hr>
<h2>Section 2</h2>
<p>Ce paragraphe est dans la section 2.</p>

Ce code crée une ligne horizontale pour séparer deux sections de contenu.

Pour créer une ligne horizontale pour ajouter une touche de style

<div style="background-color: #ccc;">
  <p>Ce paragraphe est dans une boîte avec une ligne horizontale en haut.</p>
</div>

Ce code crée une ligne horizontale en haut d'une boîte.

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