Formatage de texte HTML : Structurez votre contenu web

Introduction

Bienvenue dans le laboratoire de mise en forme de texte HTML ! Au cours de cette session pratique, vous apprendrez à structurer et à formater le texte sur une page web à l'aide de balises HTML fondamentales. Un texte correctement formaté est crucial pour créer un contenu web lisible, accessible et bien organisé.

Vous travaillerez avec un seul fichier HTML, index.html, et apprendrez à utiliser les balises suivantes :

<h1> : Pour les titres principaux.
<p> : Pour les paragraphes.
<strong> : Pour donner une forte importance au texte, généralement affiché en gras.
<em> : Pour mettre l'accent sur le texte, généralement affiché en italique.
<br> : Pour insérer un saut de ligne.

Tout au long du laboratoire, vous pourrez voir vos modifications en direct en enregistrant le fichier et en le visualisant dans l'onglet "Web 8080" de votre espace de travail.

Ajouter la balise h1 pour le titre principal

Dans cette étape, vous allez ajouter un titre principal à votre page web. En HTML, les titres sont définis avec les balises <h1> à <h6>. <h1> définit le titre le plus important et est généralement utilisé pour le titre principal d'une page.

Tout d'abord, ouvrez le fichier index.html situé dans le répertoire ~/project à l'aide de l'explorateur de fichiers situé sur le côté gauche du WebIDE.

Maintenant, ajoutez une balise <h1> à l'intérieur de la section <body> de votre fichier index.html. Remplacez le commentaire  par la ligne de code suivante :

<h1>Welcome to My Web Page</h1>

Votre section <body> devrait maintenant ressembler à ceci :

<body>
  <h1>Welcome to My Web Page</h1>
</body>

Après avoir ajouté le code, enregistrez le fichier (Ctrl+S ou Cmd+S). Pour voir le résultat, cliquez sur l'onglet "Web 8080" en haut de l'interface. Vous devriez voir votre titre affiché sur la page.

Insérer la balise p pour le texte du paragraphe

Dans cette étape, vous allez ajouter un paragraphe de texte sous votre titre. La balise <p> est utilisée pour définir un paragraphe en HTML. Les navigateurs ajoutent automatiquement un espace blanc (une marge) avant et après un paragraphe.

Dans le fichier index.html, ajoutez une nouvelle ligne après votre balise <h1> et insérez la balise <p> suivante :

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some important information.
</p>

Votre section <body> devrait maintenant contenir à la fois le titre et le nouveau paragraphe :

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some important information.
  </p>
</body>

Enregistrez le fichier index.html et actualisez l'onglet "Web 8080" pour voir le paragraphe nouvellement ajouté s'afficher sous le titre.

Utiliser la balise strong pour le texte en gras

Dans cette étape, vous apprendrez comment rendre le texte en gras. La balise <strong> est utilisée pour indiquer que le texte a une importance, une gravité ou une urgence forte. Les navigateurs affichent généralement le contenu à l'intérieur d'une balise <strong> en gras.

Modifions le paragraphe que vous avez ajouté à l'étape précédente pour mettre en évidence la phrase "important information". Encadrez cette phrase avec les balises <strong> et </strong>.

Modifiez la balise <p> dans votre fichier index.html pour qu'elle ressemble à ceci :

<p>
  This is a paragraph of text. It contains some introductory information about
  this page. HTML is great for structuring content, and this paragraph is an
  example of that. It also contains some <strong>important information</strong>.
</p>

Le <body> complet de votre fichier devrait maintenant être :

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
</body>

Enregistrez le fichier et vérifiez l'onglet "Web 8080". Vous remarquerez que le texte "important information" est maintenant en gras.

Appliquer la balise em pour le texte en italique

Dans cette étape, vous apprendrez comment mettre en évidence du texte, qui est généralement affiché en italique. La balise <em> (abréviation de "emphasis") est utilisée à cette fin. Elle indique que le texte qu'elle contient doit être accentué ou mis en évidence.

Ajoutons un nouveau paragraphe qui inclut du texte mis en évidence. Ajoutez le code suivant sous votre paragraphe existant dans index.html :

<p>
  You can also use other tags to format text. For example, the em tag is used
  for <em>emphasized</em> text.
</p>

Votre section <body> devrait maintenant ressembler à ceci :

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. For example, the em tag is used
    for <em>emphasized</em> text.
  </p>
</body>

Enregistrez le fichier et visualisez l'onglet "Web 8080". Vous verrez un nouveau paragraphe, et le mot "emphasized" sera en italique.

Insérer la balise br pour les sauts de ligne

Dans cette étape, vous apprendrez comment forcer un saut de ligne dans un bloc de texte. La balise <br> insère un seul saut de ligne. C'est une balise vide, ce qui signifie qu'elle n'a pas de balise de fermeture.

Ajoutons un saut de ligne au milieu du deuxième paragraphe que vous avez créé. Ceci est utile lorsque vous souhaitez commencer une nouvelle ligne sans commencer un nouveau paragraphe.

Modifiez la deuxième balise <p> dans votre fichier index.html pour inclure une balise <br> :

<p>
  You can also use other tags to format text. <br />For example, the em tag is
  used for <em>emphasized</em> text.
</p>

Le contenu final de votre <body> devrait être :

<body>
  <h1>Welcome to My Web Page</h1>
  <p>
    This is a paragraph of text. It contains some introductory information about
    this page. HTML is great for structuring content, and this paragraph is an
    example of that. It also contains some
    <strong>important information</strong>.
  </p>
  <p>
    You can also use other tags to format text. <br />For example, the em tag is
    used for <em>emphasized</em> text.
  </p>
</body>

Enregistrez le fichier et actualisez l'onglet "Web 8080". Vous verrez que le deuxième paragraphe est maintenant divisé en deux lignes.

Résumé

Félicitations pour avoir terminé le laboratoire ! Vous avez acquis avec succès les bases du formatage de texte en HTML.

Dans ce laboratoire, vous avez pratiqué l'utilisation de :

<h1> pour créer un titre principal.
<p> pour structurer le contenu en paragraphes.
<strong> pour donner une importance forte au texte (gras).
<em> pour mettre en évidence du texte (italique).
<br> pour insérer des sauts de ligne.

Ces balises sont les éléments fondamentaux pour créer un contenu bien structuré et lisible sur n'importe quelle page web. Continuez à pratiquer et à explorer d'autres balises HTML pour améliorer vos compétences en développement web.