2. Structurer son texte

Pour rappel, le texte affiché sur votre page web est ce qui est compris entre les balises votre texte

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

Les balises < p> < /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 ?

< !DOCTYPE html>
< html lang="fr">
    < head>
        < meta charset="utf-8">
        < title>Le titre de ma page
        < link rel="stylesheet" type="text/css" href="styles.css">
    < /head>
    < 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> Ah, vici enfin mon second paragraphe. 

    < /body>

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 ?

Les titres

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

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.

Exercice 1

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 :

• Histoire de la matière

• 1. Introduction

• Petit paragraphe introductif

• Second petit paragraphe introductif

• 2. La conception de la matière selon les grecs

• 2.1 Les élémentistes

• 2.1.1 Empédocle

• Petit blabla

• 2.1.2 Aristote

• Encore du blabla

• 2.2 Les atomistes

• 2.2.1 Leucippe

• Toujours du blabla

• 2.2.2 Démocrite

• Dernier blabla

• …

• 3. Conclusion

• Paragraphe de conclusion

< !DOCTYPE html>
< html lang="fr">
    < head>
        < meta charset="utf-8">
        < title>Le titre de ma page< /title>
 
    < /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>
        < p>Petit 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>
< /html>

Vous noterez que les tailles de chaque titre sont prédéfinies par le navigateur. Nous pourrons les modifier à notre guise lors que nous verrons le langage CSS.

Les listes

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

< !DOCTYPE html>
< html lang="fr">
    < head>
        < meta charset="utf-8">
        < title>Ma page< /title>
    < /head>
    < body>
        < 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 pates< /h1>
        < ol>
            <li>Je fais chauffer de l'eau.< /li>
            <li>Je mets les pates dans l'eau.< /li>
            <li>J'attends.< /li>
            <li>Je mets du sel parce que j'ai oublié avant.< /li>
            <li>Je lance une pate contre le mur pour voir si elle est cuite.< /li>
            <li>Je sors les pates.< /li>
            <li>Je mets du beurre.< /li>
            <li>Bon appétit !< /li>
        < /ol>
    < /body>
< /html>

Exercice 2

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

• < ul>< /ul>
• < ol>< /ol>
• < li>< /li>

Mettre en valeur du texte

Vous aimeriez faire ressortir certains mots en particulier dans le texte qui s’affiche sur une page web.

La balise la plus utilisée pour cela est < strong> mais HTML vous propose différents moyens de mettre en valeur le texte de votre page :

• < strong>< /strong>: mets le texte en gras ;
• < em>< /em>: mets le texte en italique ;
• < mark>< /mark>: mets le texte en surligné.

Exercice 3

Reprenez le fichier .html contenant les listes et mettez

• le café de la liste de course en gras ;
• la titre de la recette en surligné ;
• bon appétit en italique.

< !DOCTYPE html>
< html lang="fr">
    < head>
        < meta charset="utf-8">
        < title>Ma page< /title>
    < /head>
    < body>
< h1>< mark>Ma liste de courses< /mark>< /h1>
        < ul>
            < li>Pain< /li>
            < li>Céréales< /li>
            <li>< strong>Café< /strong>li>
            < li>Céréales< /li>
            < li>Café< /li>
            < li>Oranges< /li>
        < /ul>

        < h1>Ma recette de pates< /h1>
        < ol>
            <li>Je fais chauffer de l'eau.< /li>
            <li>Je mets les pates dans l'eau.< /li>
            <li>J'attends.< /li>
            <li>Je mets du sel parce que j'ai oublié avant.< /li>
            <li>Je lance une pate contre le mur pour voir si elle est cuite.< /li>
            <li>Je sors les pates.< /li>
            <li>Je mets du beurre.< /li>
            <li>< em>Bon appétit !< /em>li>
        ol>
    body>
html>

Insérer une autre page dans sa page ?

Vous vous demandez comment insérer une vidéo YouTube ou une carte Google Maps sur votre site ? La balise < iframe> peut vous permettre de le faire !

Exercice 4

Reprenez votre page de l'exercice récapitulatif 1 (.html) et ajoutez 2 iframe. Une comportant une vidéo et une seconde affichant une carte.

< /iframe width="1257" height="707" src="https://www.youtube.com/embed/l7udttS73b4" title="Les champignons nous gouvernent-ils ? | 42, la réponse à presque tout | ARTE" 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>

Exercice récapitulatif 2 à rendre sur Moodle

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

Ecrivez la page web principale du site mesvoyages.ch dans un fichier nommé voyages.html.
Vous êtes libre sur le contenu mais la page doit contenir les éléments suivants:

• Le titre “Mes voyages” qui doit apparaître dans l’onglet du navigateur.

• Le titre principal “Mes voyages” qui doit apparaître en haut de la page.

• Un petit paragraphe expliquant à quoi sert le site.

• Un sous-titre “Destinations”.

• Une liste non-ordonnée de destinations (au moins 3) avec images à l’appui (donc chaque item de la liste contient le nom de la destination ainsi qu’une image).

• Au moins 1 mot important (gras, italique ou surligné) sur votre page.

• Un iframe Google maps pointant vers une de vos destinations.

• Previous 1. Quelques notion de base en HTML
• Next 3. Faire des liens