Apprendre le langage HTML (HyperText Markup Language)

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre le langage HTML (HyperText Markup Language) Niveau recommandé pour le cours de Apprendre le langage HTML (HyperText Markup Language) Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 5: Balises de formatage du texte - Partie 1

Toutes les pages

Balises de formatage de texte sans attributs

Il existe d'innombrables balises qui permettent de mettre en page un texte en HTML. Nous nous intéresserons aux balises les plus utilisées (Après tout, ce cours est destiné aux débutants, alors il ne faut pas trop corser les choses). Mais soyez sûr qu'avec les balises que nous allons voir, vous pouvez réussir une bonne page Web.

Nous allons d'abord commencer par les balises qui ne nécessitent pas d'attributs. A elles seules, elles peuvent formater un texte.

Balise <b> et <strong>

La balise <b> met le texte qu'elle contient en gras (bold). C'est utile pour les textes importants ou les titres.

Par exemple:
<b>Ce texte est écrit en gras</b>
Ce qui donne:
Ce texte est écrit en gras
La balise <strong> met aussi le texte en gras, elle peut remplacer la balise <b>, bien que celle ci est plus populaire.

Balise <u>

La balise <u> (pour underline) souligne le texte qu'elle entoure. C'est utile pour attirer l'attention à un mot ou une phrase.

Par exemple:
<u>Texte souligné</u>
Ce qui donne:
Texte souligné

Balise <i>

La balise <i> (pour italic) met le texte en italique. C'est pratique pour les citations ou les notes.

Par exemple:
<i>Texte en italique</i>
Ce qui donne:
Texte en italique

Balise <s>

La balise <s> (pour strike) barre le texte. C'est pratique pour marquer un contenu obsolète ou invalide (par exemple: sur les sites E-commerce, on barre généralement les anciens prix d'articles en promotion, pour mettre en valeur le nouveau prix).

Par exemple:
<s>Texte barré</s>
Ce qui donne:
Texte barré

Exemple pour récapituler

Supposons que je veux écrire la phrase suivante "HTML est un langage de description de pages Web et non pas un langage de programmation", de telle sorte que "HTML" soit en gras et souligné, "est un langage de description de pages Web" souligné, et "et non pas un langage de" italique et "de programmation" italique et barré.

Le code qui fait ceci peut s'écrire ainsi:
<u><b>HTML</b> est un langage de description de pages Web</u>
<i>et non pas un langage de <s>programmation</s></i>
Le résultat est:
HTML est un langage de description de pages Web et non pas un langage de programmation
Vous avez certainement vu en pratique le principe d'imbrication de balises "Première balise ouverte, dernière balise fermée". Au début du code j'ai ouvert la balise <u> puis la balise <b>. Quand j'ai fermé, j'ai commencé par </b> puis </u>.
Cependant, il existe de nombreuse façons qui permettent d'avoir le même résultat, mais vous devriez probablement mettre un peu plus de balises. Le principe d'imbrication permet donc (en plus de rendre le code conforme) d'économiser les balises et rendre le code plus court.
Remarquez aussi que le code source contient un retour à la ligne (après la balise </u>), mais le résultat eu sur le navigateur n'en contient pas! C'est tout à fait normal, le fait d’appuyer sur "entrer" dans le code n'est pas pris en compte par le navigateur. Même les tabulations et les espaces répétés ne sont pas considérés.
Mais il existe une solution, nous la verrons quand ça sera le moment.

Balises <h1>, <h2>...<h6>

La balise <h1> (heading) désigne un titre de premier niveau. Le texte qu'elle entoure est de grande taille et mis en gras. Il est utile pour créer les grands titres d'une pages. La balise <h2> désigne un titre de deuxième niveau, elle applique le même effet que la balise précédente mais avec une taille de caractères légèrement plus petite. C'est pratique pour les sous-titres. Il existe aussi <h3>, <h4>, <h5> et <h6> avec une taille de caractères de plus en plus petite.

Par exemple:
<h1>Titre de premier niveau</h1>
<h2>Titre de deuxième niveau</h2>
<h3>Titre de troisième niveau</h3>
<h4>Titre de quatrième niveau</h4>
<h5>Titre de cinquième niveau</h5>
<h6>Titre de sixième niveau</h6>
Ce qui donne:

Titre de premier niveau

Titre de deuxième niveau

Titre de troisième niveau

Titre de quatrième niveau

Titre de cinquième niveau
Titre de sixième niveau
Vous avez remarqué un retour à la ligne après chaque balise <h>? C'est normal. En effet, les balise <h> sont de type block. Il y a deux types de balises en HTML block et inline. Les balises block occupent toute la ligne où elles sont déclarées, même si le contenu (comme du texte) n'est pas assez long. C'est le cas par exemple de la balise <h1>. Par conséquent un retour à la ligne est automatiquement appliqué après la balise. Les balises inline occupent juste assez d'espace pour afficher le contenu qu'ils entourent. Il n'y a donc pas de retour à la ligne automatique après ces balises.

Balises <sup> et <sub>

La balise <sup> met un texte en exposant et la balise <sub> le met en indice.

Par exemple, le code suivant:
x<sup>2</sup>
donne:
x2
et ce code
H<sub>2</sub>O
donne
H2O

Retour à la ligne: Balise<br>

Pour retourner à la ligne à n'importe quel moment, il suffit de déclarer la balise <br>. Il s'agit d'une balise orpheline (donc pas de </br>).

Exemple:
Ligne 1 <br>
Ligne 2 <br>
Et ligne 3
Ce qui donne le résultat suivant:
Ligne 1
Ligne 2
Et ligne 3

Commentaire HTML <!-- -->

Un commentaire HTML est déclaré comme ceci: <-- Commentaire -->. Il est visible dans le code source mais ignoré par le navigateur. Il sert à marquer un bloc de code pour que celui-ci soit facilement trouvé et compris lors de sa prochaine manipulation.

Exemple:
<!-- Ceci est un commentaire -->
<i>Le commentaire n'est pas visible sur le navigateur.</i>
Le résultat eu sur le navigateur est:
Le commentaire n'est pas visible sur le navigateur.

Balise <pre>

Nous avons vu précédemment que pour intégrer un retour à la ligne il faut déclarer la balise <br>, et pour mettre plusieurs espaces ou tabulations il faut passer par le caractère spécial &nbsp;. Cependant, il existe une méthode très simple pour afficher un contenu tel qu'il a été édité dans le code. C'est à dire, si vous mettez une tabulation dans le code, celle ci sera automatiquement reprise dans le navigateur, et si vous sautez une ligne, ce saut de ligne sera aussi visible sur le navigateur. La solution magique s'appelle la balise <pre>.

Exemple:
<pre>
   Là-haut sur la montagne, l'était un vieux chalet.
   Murs blancs, toit de bardeaux,
   Devant la porte un vieux bouleau.
   Là-haut sur la montagne, l'était un vieux chalet.
</pre>
Le résultat du code est le suivant:
    Là-haut sur la montagne, l'était un vieux chalet.
    Murs blancs, toit de bardeaux,
    Devant la porte un vieux bouleau.
    Là-haut sur la montagne, l'était un vieux chalet.