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. Mais vous le savez déjà !
Code : HTML
<p>Bonjour et bienvenue sur mon site !</p> |
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.
A ce stade, vote code doit ressembler à ça :
et votre page à ça ;
Créé avec HelpNDoc Personal Edition: Créer des livres électroniques EPub facilement