Les paragraphes
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.
Code : HTML
<p>Bonjour et bienvenue sur mon site !</p> |
Comme je vous l'ai dit au chapitre précédent, on écrit le contenu du site web entre les balises <body></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 !
Je reprends donc exactement le même code qu'au chapitre précédent et j'y ajoute mon paragraphe :
Code : HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Paragraphes</title> </head> <body> <p>Bonjour et bienvenue sur mon site !</p> </body> </html> |
Essayez, vous allez voir le résultat !
Bon, ok, ce n'est pas encore le nirvana mais c'est un bon début.
Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant quelque chose d'un peu particulier en HTML : le saut de ligne. Cela paraît simple et pourtant, cela ne fonctionne pas vraiment comme dans un traitement de texte habituel…
En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code :
Code : HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Essais de sauts de ligne</title> </head> <body> <p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche. Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p> </body> </html> |
Tout le texte s'affiche sur la même ligne alors qu'on est bien allé à la ligne dans le code ! Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement à 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>.
Votre code HTML devrait donc être au final rempli de balises de paragraphe !
Un exemple :
Code : HTML
<html> <head> <meta charset="utf-8" /> <title>Paragraphes</title> </head> <body> <p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.</p>
<p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p> </body> </html> |
Le résultat se trouve à la figure suivante.
Deux paragraphes avec 2 balises <p>
Oui, mais si je veux juste aller à la ligne dans un paragraphe et non pas sauter une ligne ?
Eh bien devinez quoi : 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.
Voici comment l'utiliser dans un code :
Code : HTML
<html> <head> <meta charset="utf-8" /> <title>Sauts de ligne</title> </head> <body> <p>Bonjour et bienvenue sur mon site !<br /> Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela marche.</p> <p>Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p> </body> </html> |
Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de lignes, mais on considère que c'est une mauvaise pratique qui rend le code délicat à maintenir. Pour décaler un texte avec plus de précision, on utilisera le CSS, ce langage qui vient compléter le HTML et dont je vous parlerai un peu plus loin.
Donc c'est compris ?
Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des titres.
Créé avec HelpNDoc Personal Edition: Générateur d'aide complet