La plupart du temps, lorsqu'on écrit du texte dans une page web, on le fait à l'intérieur de paragraphes.
Le langage HTML propose justement la balise <p> pour délimiter les paragraphes.
<p>Bonjour et bienvenue sur mon site !</p>
==> <p> signifie « Début du paragraphe » ;
==> </p> signifie « Fin du paragraphe ».
Comme je vous l'ai dit au chapitre précédent, on écrit le contenu du site web entre les balises <body> et </body>.
Il nous suffit donc de mettre notre paragraphe entre ces deux balises et nous aurons enfin notre première vraie page web avec du texte !
En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous en avez l'habitude.
Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code.
Taper plusieurs fois sur la touche Entrée ne sert donc à rien.
Comme vous devez vous en douter, il y a pourtant bien un moyen de faire des sauts de ligne en HTML.
En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p>.
Si je veux juste aller à la ligne dans un paragraphe et non pas sauter une ligne,
il existe une balise "Aller à la ligne".
C'est une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne : <br> .
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe.
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos visiteurs de se repérer.
C'est là que les titres deviennent utiles.
En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents.
Je veux dire par là qu'on peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins important", "Ceci est un titre encore moins important", etc. On a donc six balises de titres différentes :
==> <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
==> <h2> </h2> : signifie « titre important ».
==> <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre").
==> <h4> </h4> : titre encore moins important.
==> <h5> </h5> : titre pas important.
==> <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.
Attention : ne confondez pas avec la balise <title> !
La balise <title> affiche le titre de la page dans la barre de titre du navigateur comme nous l'avons vu.
Les titres <h1> et compagnie, eux, servent à créer des titres qui seront affichés dans la page web.
Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir.
HTML vous propose différents moyens de mettre en valeur le texte de votre page.
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>.
Son utilisation est très simple : encadrez les mots à mettre en valeur avec ces balises et c'est bon !
Comme vous pouvez le voir, utiliser la balise <em> a pour conséquence de mettre le texte en italique.
En fait, c'est le navigateur qui choisit comment afficher les mots.
On lui dit que les mots sont assez importants et, pour faire ressortir cette information, il change l'apparence du texte en utilisant l'italique.
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort", ou "important"si vous préférez.
Elle s'utilise exactement de la même manière que <em>
Vous voyez sûrement le texte s'afficher en gras. Là encore, le gras n'est qu'une conséquence.
Le navigateur a choisi d'afficher en gras les mots importants pour les faire ressortir davantage.
La balise <strong> ne signifie pas "mettre en gras" mais "important".
On pourra décider plus tard, en CSS, d'afficher les mots "importants" d'une autre façon que le gras si on le souhaite.
La balise <mark> permet de faire ressortir visuellement une portion de texte.
L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte.
Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple.
Par défaut, <mark> a pour effet de surligner le texte.
On pourra changer l'affichage en CSS (décider de surligner dans une autre couleur, d'encadrer le texte, etc.).
C'est le même principe que ce que je vous disais pour les balises précédentes :
elles indiquent le sens des mots et non pas comment ceux-ci doivent s'afficher.
Pour souligner le text, il suffit simplement de mettre la balise <u> et </u>