Les paragraphes
1 <p>Bonjour et bienvenue sur mon site !</p>
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> signifie « Début du paragraphe » ;
- </p> signifie « Fin du paragraphe ».
Pour avoir du texte dans la page web, il suffit de mettre le paragraphe entre les balises <body> et nous aurons enfin notre première vraie page web avec du texte !
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Paragraphes</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !</p>
10 </body>
11 </html>
Sauter une ligne
En HTML, si on appuie sur la touche Entrée, cela ne crée pas une nouvelle ligne.
Il y a donc 2 solutions:
- utiliser une deuxième balise <p>:
- utiliser une balise orpheline qui sert juste à indiquer qu'on doit aller à la ligne: <br/>. On doit obligatoirement la mettre à l'intérieur d'un paragraphe.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Essais de sauts de ligne</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !
10 Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>
11
12 <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>
13 </body>
14 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Essais de sauts de ligne</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !<br />
10 Ceci est mon premier test alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment cela
marche.</p>
11
12 <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>
13 </body>
14 </html>
Les titres
En HTML, on a le droit d'utiliser six niveaux de titres différents:
- <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 » si vous voulez).
- <h4> </h4>: titre encore moins important.
- <h5> </h5>: titre pas important.
- <h6> </h6>: titre vraiment, mais alors là vraiment pas important du tout.
Attention:
- Les titres <h1> et compagnie servent à créer des titres qui seront affichés dans la page web.
- Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte ! Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis un titre de niveau 2 (<h2>), etc...
Pour tout ce qui est mise en page, ça se fait en CSS.
La mise en valeur
Mettre un peu en valeur
Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Emphase</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !<br />
10 Ceci est mon premier test alors <em>soyez indulgents</em> s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>
11 </body>
12 </html>
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.
Mettre bien en valeur
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>:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Forte emphase</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !<br />
10 Ceci est mon premier test alors <strong>soyez indulgents</strong> s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>
11 </body>
12 </html>
Le texte s'affiche en gras, 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.
Marquer le texte
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.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Marquage du texte</title>
6 </head>
7
8 <body>
9 <p>Bonjour et bienvenue sur mon site !<br />
10 Ceci est mon premier test alors <mark>soyez indulgents</mark> s'il vous plaît, j'apprends petit à petit comment
cela marche.</p>
11 </body>
12 </html>
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.
N'oubliez pas : HTML pour le fond, CSS pour la forme
Le rôle des balises est d'indiquer le sens du texte. Ainsi, <strong> indique à l'ordinateur « Ce texte est important ». C'est tout.
Et pour montrer que le texte est important, l'ordinateur décide de le mettre en gras (mais il pourrait aussi bien l'écrire en rouge !). La plupart des navigateurs affichent les textes importants en gras, mais rien ne les y oblige.
Que l'ordinateur sache qu'un texte est important. En effet, de nombreux programmes analysent le code source des pages web, à commencer par les robots de moteurs de recherche.
Ces robots parcourent le Web en lisant le code HTML de tous les sites. C'est le cas des robots de Google et de Bing, par exemple.
Les mots-clés « importants » ont tendance à avoir plus de valeur à leurs yeux, donc si quelqu'un fait une recherche sur ces mots, il a plus de chances de tomber sur votre site.
Bien entendu, c'est une explication grossière et il ne faut pas croire qu'utiliser la balise <strong> à tout-va améliorera votre référencement. Il faut simplement faire confiance aux ordinateurs : ils comprennent ce qu'un texte « important » veut dire et peuvent se servir de cette information.
Pour mettre spécifiquement en gras, pour écrire en rouge, etc, on va utiliser le CSS, que nous verrons plus loin, pour l'instant nous nous concentrons sur le HTML et ses balises, qui ont chacune un sens particulier.
Les listes
Il existe 2 types de listes:
- les listes non ordonnées: les listes à puces,
- les listes ordonnées: les listes numérotées / les énumérations.
Liste non ordonnée
Ça consiste à créer une liste d'éléments sans notion d'ordre (il n'y a pas de « premier » ni de « dernier »).
Pour se faire, au sein de la balise body, il suffit d'utiliser la balise ul que l'on referme un peu plus loin avec /ul, puis d'incorporer entre les 2 les balises li et /li autant de fois que l'on a de points:
1 <ul>
2 <li>Fraises</li>
3 <li>Framboises</li>
4 <li>Cerises</li>
5 </ul>
Si on souhaite incorporer une liste à puces à une première puce, il suffit de suivre le même procédé, à la différence qu'on part de la puce d'origine, pour démarrer un nouveau ul.
Liste ordonnée
Pour ce type de liste, le procédé est le même que pour la liste non ordonnée, à part:
- il faut remplacer ul par ol,
- la numérotation se fera dans l'ordre dans lequel vous avez listé (le premier li sera numéroté 1, le deuxième sera le 2, etc...).
Par exemple, on pourrait trouver:
1 <h1>Ma journée</h1>
2
3 <ol>
4 <li>Je me lève.</li>
5 <li>Je mange et je bois.</li>
6 <li>Je retourne me coucher.</li>
7 </ol>
Liste de définitions
Cette liste comporte:
- dl pour délimiter la liste,
- dt pour délimiter un terme,
- dd pour délimiter la définition de ce terme.