Les balises de titres

Notions théoriques

Le HTML permet de structurer le contenu d'une page Web à l'aide de balises spécifiques. Parmi ces balises, certaines sont spécialement conçues pour le texte. Elles permettent de définir les titres, les paragraphes, les sauts de ligne, les séparations, etc.

Les balises de titres

En HTML, il existe six niveaux de titres, de <h1> à <h6>. <h1> est le plus important et <h6> le moins important. Ces balises sont utilisées pour structurer le contenu et aider les moteurs de recherche à comprendre l'organisation de votre page.

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

Les balises `<br/>` et `<hr/>`

La balise <br/> est utilisée pour insérer un saut de ligne. Elle est souvent utilisée dans des paragraphes de texte lorsque vous voulez créer une nouvelle ligne sans commencer un nouveau paragraphe.

La balise <hr/> est utilisée pour insérer une ligne horizontale, qui peut servir de séparation entre des sections de contenu.

<p>Ceci est un paragraphe avec un <br/> saut de ligne.</p>
<hr/>
<p>Ceci est un autre paragraphe séparé par une ligne horizontale.</p>

Exemple pratique

Imaginons que vous voulez rédiger un article sur votre jeu vidéo préféré. Vous pouvez utiliser les balises de titres pour structurer votre article, et les balises <br/> et <hr/> pour organiser votre texte.

<h1>Mon jeu vidéo préféré : The Legend of Zelda</h1>
<h2>Introduction</h2>
<p>The Legend of Zelda est un jeu d'aventure fantastique.<br/> Il a été développé par Nintendo.</p>
<hr/>
<h2>Pourquoi j'aime ce jeu</h2>
<p>J'aime ce jeu pour sa liberté d'exploration et sa richesse de contenu. <br/> De plus, les graphismes sont magnifiques.</p>

Les balises à connaître

<h1> à <h6> : Définissent les titres. <h1> est le plus important et <h6> le moins important.
<br/> : Insère un saut de ligne.
<hr/> : Insère une ligne horizontale.

Test de mémorisation/compréhension

TP pour réfléchir et résoudre des problèmes

Votre mission consiste à créer une page HTML qui présente votre parcours scolaire.

Dans votre répertoire "Documents", créez le répertoire tp_parcours_scolaire
Dans le répertoire tp_parcours_scolaire, créez le fichier index.html
Pour ce TP, votre défi sera de créer une page HTML qui présente votre parcours scolaire :
- Un titre principal <h1> qui donne votre nom :
```
<h1>Mon parcours scolaire : Jean Dupont</h1>
```
- Plusieurs sous-titres <h2> pour chaque étape de votre parcours (par exemple, "École primaire", "Collège", "Lycée", "Université", etc.) :
```
<h2>École primaire</h2>
<h2>Collège</h2>
<h2>Lycée</h2>
<h2>Université</h2>
```
- Pour chaque étape, vous pouvez ajouter des sous-parties <h3> pour les années spécifiques ou les événements marquants :
```
<h2>Lycée</h2>
<h3>Seconde</h3>
```
- Des paragraphes de texte <p> pour chaque section, avec des sauts de ligne <br/> pour séparer les idées :
```
<h3>Seconde</h3>
<p>J'ai choisi de suivre l'option sciences de l'ingénieur.<br/> 
   J'ai découvert le monde de la programmation.</p>
```
- Des lignes horizontales <hr/> pour séparer les parties de votre parcours :
```
<hr/>
<h2>Lycée</h2>
```
- N'oubliez pas de structurer votre page avec les balises <html>, <head> et <body>, et de donner un titre à votre page avec la balise <title> :
```
<head>
    <title>Mon parcours scolaire</title>
</head>
```

Une solution

<!DOCTYPE html>
<html>
<head>
    <title>Mon parcours scolaire</title>
</head>
<body>
    <h1>Mon parcours scolaire : Jean Dupont</h1>
    <h2>École primaire</h2>
    <p>J'ai commencé ma scolarité à l'école du village.<br/> J'ai beaucoup aimé apprendre à lire et à écrire.</p>
    <hr/>
    <h2>Collège</h2>
    <h3>6ème et 5ème</h3>
    <p>J'ai découvert les mathématiques et la physique.<br/> J'ai également commencé à apprendre l'anglais.</p>
    <h3>4ème et 3ème</h3>
    <p>J'ai choisi de suivre l'option latin.<br/> J'ai beaucoup aimé étudier les langues anciennes.</p>
    <hr/>
    <h2>Lycée</h2>
    <h3>Seconde</h3>
    <p>J'ai choisi de suivre l'option sciences de l'ingénieur.<br/> J'ai découvert le monde de la programmation.</p>
    <h3>Première et Terminale</h3>
    <p>J'ai préparé le baccalauréat scientifique.<br/> J'ai réussi avec mention très bien.</p>
    <hr/>
    <h2>Université</h2>
    <p>J'ai étudié l'informatique à l'université de Paris.<br/> J'ai obtenu mon diplôme avec mention.</p>
</body>
</html>

Dans cette solution, nous avons utilisé les balises <h1>, <h2> et <h3> pour structurer le parcours, la balise <p> pour définir les paragraphes, la balise <br/> pour insérer des sauts de ligne, et la balise <hr/> pour insérer une ligne horizontale.

Les balises de titres

Notions théoriques