Bienvenue à ce nouveau tuto 🙂 . Dans cette partie , nous allons apprendre des balises de mise en forme d’un texte dans HTML.
accès rapide
- La démo
- Les balises <b> et <strong>
- La balise <small>
- Les balises <br> et <hr>
- Les balises <i> et <em>
- La balise <mark>
- La balise <pre>
- Les balises <del> et <s>
- Les balises <ins> et <u>
- Les balises <sub> et <sup>
La démo
mettre ici la vidéo de la démonstration
Les balises <b> et <strong>
Les deux balises <strong> et <b> sont utiles en html pour mettre en gras un élément du texte.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <strong> et <b> qui est la suivante :
- La balise <B> permet de mette simplement un bout de texte en gras (<B> est utilisée pour le style)
- la balise <STRONG> a pour but de mettre en avant un bout de texte. (<STRONG>est utilisée pour donner du sens à un texte)
Ci-dessous un exemple contenant les balises <STRONG> et <B> :
<!DOCTYPE html>
<html>
<head>
<title>Les titres et les paragraphes en HTML</title>
<meta charset="utf-8" />
</head>
<body>
<h1>Les titres dans HTML </h1>
<p>
Les éléments de titre permettent de <b>définir un texte</b> comme étant un titre ou sous-titre.
</p>
<h2>Les paragraphes dans HTML </h2>
<p>
Après avoir défini les titres , nous pouvons commencer à écrire <strong> paragraphes </strong> dedans.
</p>
</body>
</html>
Résultat du code :
La balise <small>
La balise <small> réduit la taille du texte, sauf lorsqu’elle est inséré dans un est a été écrit avec une police plus petite. En général la balise <small> est utilisée pour donner des d’informations sur les droits d’auteur.
Ci-dessous un exemple contenant la balise <SMALL> :
<!DOCTYPE html>
<html>
<head>
<title>utiliser la balise SMALL</title>
</head>
<body>
<p>Ce site a été créé par </p>
<small>la société XXXXX </small>
</body>
</html>Résultat du code :
Les balises <br> et <hr>
La balise <br> est responsable au retour à la ligne, c’est-à-dire que tout ce qui est écrit après sera déplacé vers une nouvelle ligne.
La balise <hr> est utilisée pour créer une ligne horizontale dans la page.
Ci-dessous un exemple contenant les balises <br> et <hr> :
<!DOCTYPE html>
<html>
<head>
<title>balises HR et BR</title>
</head>
<body>
<h1>Exemple avec br</h1>
<p> ceci est un paragraphe avec <br /> <br /> pour retourner à la ligne.</p>
<h1>Exemple avec hr</h1>
<p> ceci est un paragraphe qui contient <hr /> <br /></p>
<hr>
<p>utilisée pour créer une ligne horizontale.</p>
</body>
</html>
Les balises <i> et <em>
Les balises <i> et <em> permettent de rendre la police du texte italique.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <i> et <em> qui est la suivante :
- La balise <i> est un élément de balisage physique. C’est à dire, le texte situé dans cette balise est différent au autre texte en dehors juste visuellement et n’est pas détecté comme étant important par les moteurs de recherche et les navigateurs.
- La balise <em> met en valeur un morceau de texte c’est à dire il est considéré comme étant important pour les moteurs de recherche et les navigateurs.
Ci-dessous un exemple contenant les balises <i> et <em> :
<!DOCTYPE html>
<html>
<head>
<title>texte en italique </title>
</head>
<body>
<h1>Exemple avec <i></h1>
<p> texte italique avec <i> : <i> mon texte </i></p>
<h1>Exemple avec <em></h1>
<p> texte italique avec <em> : <em> mon texte </em></p>
</body>
</html>Résultat du code :
La balise <mark>
La balise <mark> met en évidence une partie d’un texte. Visuellement, le contenu ressemble à un marqueur marqué ( un effet fluo) .
Ci-dessous un exemple contenant la balise <mark> :
<!DOCTYPE html>
<html>
<head>
<title>utiliser la balise SMALL</title>
</head>
<body>
<p>Ce texte contient une balise < mark : > </p>
<small>effect marqueur </small>
</body>
</html>Résultat du code :
La balise <pre>
La balise <pre> est utilisé pour insérer du texte formaté comme nous le souhaitons présenté dans un document HTML.
Par défaut , les navigateurs conservent un nombre limité d’espaces consécutifs. si nous voulons que le navigateur prend en considération tous les espaces qui figurent dans dans le texte, nous devons mettre notre texte dans la balise <pre>
Ci-dessous un exemple contenant la balise <pre> :
<!DOCTYPE html>
<html>
<head>
<title>Utiliser la balise pre</title>
</head>
<body>
<pre>Tous les espaces saisis
dans ce document
sont affichés comme tapés.
</pre>
</body>
</html>Résultat du code :
Les balises <del> et <s>
Les navigateurs affichent le contenu des deux balises<del> et <s> sous forme d’un texte barré.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <del> et <s> qui est la suivante :
- La balise <del> est utilisée pour indiquer des éditions dans un document c’est à dire pour dire qu’une portion de texte à été supprimée ( barré) et a été remplacée par une autre portion (cette partie doit être mise dans la balise <ins> qu’on va la détaillée plus bas dans notre cours). Plus simplement, le code que nous voulons faire un DELETE , on l’insere dans le balise<del> et le code que nous voulons faire un INSERT , on le met dans une balise <ins>
- La balise <s> permet d’afficher un texte barré tout court. Elle n’est pas présente pour indiquer des éditions dans un document.
Ci-dessous un exemple contenant les balises <del> et <s> :
<!DOCTYPE html>
<html>
<head>
<title>exemples de texte barré </title>
</head>
<body>
<h1>Exemple avec <del></h1>
<p> La version de ce document est <del>1.0</del> <ins> 2.0 </ins></p>
<h1>Exemple avec <s></h1>
<p> La version de ce document est <del>1.0</del> 2.0 </p>
</body>
</html>Résultat du code :
Les balises <ins> et <u>
Les navigateurs affichent le contenu des deux balises<ins> et <u> sous forme d’un texte souligné.
Bien que ces deux balises donnent pratiquement la même finalité , il existe une différence entre <ins> et <u> qui est la suivante :
- La balise <ins> est utilisée pour indiquer des éditions dans un document c’est à dire pour dire qu’une portion de texte à été inséré qui remplace par une autre portion.
- La balise <u>(u veut dire Underlined) permet d’afficher un texte souligné tout court. Elle n’est pas présente pour indiquer des éditions dans un document.
Ci-dessous un exemple contenant les balises <ins> et <u> :
<!DOCTYPE html>
<html>
<head>
<title>exemples de texte souligné </title>
</head>
<body>
<h1>Exemple avec <ins></h1>
<p> La version de ce document est <del>1.0</del> <ins> 2.0 </ins></p>
<h1>Exemple avec <u></h1>
<p> La version de ce document est <s>1.0</s> <u>2.0 </u></p>
</body>
</html>Résultat du code :
Les balises <sub> et <sup>
- La balise <sub> définit le texte qui apparaît au-dessous de la ligne de base(la taille du texte est réduite de moitié et le texte apparaît avec un décalage vers le bas).
- La balise <sub> définit le texte qui apparaît au-dessus de la ligne de base(la taille du texte est réduite de moitié et le texte apparaît avec un décalage vers le haut).
Ces deux balises sont fortement utilisées pour écrire des formules mathématiques physiques ou chimiques.
Ci-dessous un exemple contenant les balises <sub> et <sup> :
<!DOCTYPE html>
<html>
<head>
<title>exemples de sub et sup </title>
</head>
<body>
<h1>Exemple avec <sub></h1>
<p> La formule chimique de l'eau est H<sub>2</sub>O</p>
<h1>Exemple avec <sup></h1>
<p>Le nombre 100 peut aussi s'écrire: 10<sup>2</sup></p>
</body>
</html> Résultat du code :
Dans cette partie , nous avons appris comment insérer des liens dans HTML.
Espérons bien que ce tuto vous a plu. Dans le tuto suivant , Nous allons commencer à ajouter des éléments pour la mise en forme du texte à notre fichier HTML.