2. Structurer son texte

Pour rappel, le texte affiché sur votre page web est ce qui est compris entre les balises ouvrante <body> et fermante </body>.

Dans ce chapitre, nous allons voir des balises supplémentaires afin de pouvoir afficher des titres, des listes, du texte plus important, etc. En un mot : structurer et embellir son texte.

Les paragraphes et sauts de ligne

Rappel

Les balises <p> permettent de délimiter des paragraphes.

N’est-il pas possible d’ajouter un saut de ligne sans forcément faire un nouveau paragraphe et ainsi éviter que la ligne ne disparaisse hors de l'écran ?

<body> ...
<p>Voici mon premier paragraphe...
Celui-ci traite de façon extrêmement détaillée d'un sujet particulièrement intéressant sur lequel je n'ai, ma foi, pas grand chose à raconter si ce n'est que j'essaie d'étendre ma phrase le plus possible afin de bien illustrer mon propos. Parler pour ne rien dire en somme ? hé bien oui tout-à-fait ! Mais c'est hélas ce que font beaucoup de personnes autour de nous. Auriez-vous des exemples me direz-vous, oh non, je n'oserais pas en citer ici en ligne. Rappelez-vous tout ce qui est dit en ligne, reste à jamais.
Je me contenterai donc d'essayer de ne pas faire de fautes d'orthographe, ce qui serait mortifiant !</p> 
<p>Ah, voici enfin mon second paragraphe.</p>
Réponse

Si ! La balise orpheline <br> (pour break) permet d’insérer un saut de ligne. Une autre possibilité est d'adapter le texte à la largeur de la page... mais c'est de la musique d'avenir. Patience, patience...

Vous voulez faire un grand espace entre 2 textes, est-ce une bonne idée selon vous d’empiler les <br> pour faire plein de sauts de ligne ?

Réponse

Assurément pas. Même si cela fonctionne, c’est une mauvaise pratique qui rend le code compliqué à maintenir. Pour décaler du texte correctement, nous utiliserons un langage de mise en forme : le CSS. C'est cela la musique d'avenir ...

Les titres

Les balises de titre vont de <h1> (pour le titre principal) jusqu’à <h6> (pour le plus petit titre).

Remarque

Ne confondez pas la balise <h1> avec la balise <title> qui, elle, n’affiche rien sur la page mais uniquement le titre de la page dans l’onglet du navigateur.

Créez un nouveau fichier .html avec la structure de texte ci-dessous. Ajoutez les balises de titres (<h1>, <h2>, etc.) et les balises de paragraphes (<p>) aux endroits appropriés :

Solution 
<!DOCTYPE html>
<html lang="fr">
< head>
    <meta charset="utf-8">
    Le titre de ma page
< /head>
< body>
    <h1>Histoire de la matière</h1>
    <h2>1. Introduction</h2>
    <p>Petit paragraphe introductif</p>
    <p>Second petit paragraphe introductif</p>
    <h2>2. La conception de la matière selon les grecs</h2>
    <h3>2.1 Les élémentistes</h3>
    <h4>2.1.1 Empédocle</h4>
    <p>Petit blabla</p>
    <h4>2.1.2 Aristote</h4>
    <p>Encore du blabla</p>
    <h3>2.2 Les atomistes</h3>
    <h4>2.2.1 Leucippe</h4>
    <p>Toujours du blabla</p>
    <h4>2.2.2 Démocrite</h4>
    <p>Dernier blabla</p>
    <h2>3. Conclusion</h2>
    <p>Paragraphe de conclusion</p>
< /body>

Les listes

Voici un exemple de code permettant d’afficher 2 listes.

<h1>Ma liste de course</h1>
<ul>
<li>Pain</li></li>
<li>Céréales</li>
<li>Café</li>
<li>Oranges</li>
</ul>
<h1>Ma recette de pâtes</h1>
<ol>
<li>Je fais chauffer de l'eau.</li>
<li>Je mets les pâtes dans l'eau.</li>
<li>J'attends.</li>
<li>Je mets du sel parce que j'ai oublié avant.</li>
<li>Je lance une pâte contre le mur pour voir si elle est cuite.</li>
<li>Je sors les pâtes.</li>
<li>Je mets du beurre.</li>
<li>Bon appétit !
</ol>

Testez l’exemple précédent et devinez à quoi servent les balises suivantes :

Solution
  • La balise <ul> sert à définir une liste non-ordonnée (liste à puces).
  • La balise <ol> sert à définir une liste ordonnée (numérotée).
  • La balise <li> sert à définir un élément d’une liste.

Mettre en valeur du texte

Vous aimeriez faire ressortir certains mots dans le texte. La balise la plus utilisée est <strong>, mais HTML propose différents moyens :

Reprenez le fichier .html contenant les listes et mettez :

Solution 
<h1>Ma liste de courses</h1>
<ul>
    <li>Pain</li>
    <li>Céréales</li>
    <li>Café</li>
    <li>Oranges</li>
</ul>

<h1>Ma recette de pâtes</h1>
<ol>
    <li>Je fais chauffer de l'eau.</li>
    <li>Je mets les pâtes dans l'eau.</li>
    <li>J'attends.</li>
    <li>Je mets du sel.</li>
    <li>Je lance une pâte contre le mur.</li>
    <li>Je sors les pâtes.</li>
    <li>Je mets du beurre.</li>
    <li>Bon appétit !</li>
</ol>

Insérer une autre page dans sa page ?

Pour insérer une vidéo YouTube ou une carte Google Maps, utilisez la balise <iframe>.

Le plus simple est d’obtenir le code d’intégration directement sur YouTube ou Google Maps.

Comment faire ?

Pour YouTube : clic droit → “Copier le code d’intégration”.

Pour Google Maps : menu → “Partager ou intégrer la carte” → “Intégrer une carte”.

Ajoutez 2 iframes sur votre page : une vidéo et une carte.

Réponse 

<iframe width="613" height="383" src="https://www.youtube.com/embed/8n2AhUYk2WA" title="La dissolution du sel par l'eau" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>



<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d1632.458353780154!2d6.587522971164904!3d46.51886278094501!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sch!4v1693984746042!5m2!1sfr!2sch" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

Vous êtes le gérant d’une agence de voyage et voulez créer une page listant les destinations.

Ecrivez la page web principale du site mesvoyages.ch dans un fichier nommé voyages.html. La page doit contenir :