Aller au menu - Aller au contenu

Icône Organiser son texte

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 01/11/2011
Difficulté : Facile Facile Creative Commons BY-NC-SA
311 502 visites depuis 7 jours, dont 19 036 sur ce chapitre, classé 1/795
Bon, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça. :p

Nous allons voir comment rédiger le contenu de notre page web dans ce chapitre. Comme nous l'avons vu, il ne faudra pas faire ça n'importe comment : il ne faut pas oublier qu'une page HTML est composée de balises. Ces balises indiquent à l'ordinateur le sens du texte : ceci est un paragraphe, ceci est un titre, etc.

Nous allons découvrir de nombreuses balises HTML dans ce chapitre. Certaines existent depuis la toute première version de HTML, d'autres ont été introduites plus récemment dans HTML5.

Nous allons voir successivement dans ce chapitre :
  • Comment rédiger des paragraphes.
  • Comment structurer sa page avec les titres.
  • Comment donner de l'importance à certains mots de son texte.
  • Comment organiser les informations sous forme de liste à puces.


Motivés ? Allez, vous allez voir, ce n'est pas compliqué. ^^
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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
1
<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 dans le chapitre précédent, on écrit le contenu de notre 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 que dans le chapitre précédent, et j'y ajoute mon paragraphe :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Paragraphes</title>
    </head>

    <body>
        <p>Bonjour et bienvenue sur mon site !</p>
    </body>
</html>

Essayer !


Essayez, vous allez voir le résultat !
Bon, ok c'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 lignes. Ça a l'air simple, mais pourtant ça ne fonctionne pas vraiment comme dans un traitement de texte habituel...

Sauter une ligne



En HTML, si vous appuyez sur la touche Entrée, ça ne crée pas une nouvelle ligne comme vous en avez l'habitude. Essayez donc ce code :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!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 ça 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>

Essayer !


Tout est sur la même ligne alors qu'on est pourtant allé à la ligne dans notre code ! Taper frénétiquement sur la touche Entrée dans l'éditeur de texte ne sert donc strictement à rien. :p

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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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 ça 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>

Essayer !


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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<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 ça 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>

Essayer !


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 ?
  • <p> </p> : pour organiser son texte en paragraphes.
  • <br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des titres. :)
Retour en haut

Les titres

Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, cela 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 6 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 6 balises de titre 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" 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 : 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.


Ne vous laissez pas impressionner par toutes ces balises. En fait, 6 niveaux de titres, c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises <h1>, <h2> et <h3>, et très rarement les autres (je n'ai pas souvent besoin de 6 niveaux de titres différents ^^ ). Votre navigateur affiche le titre très important en très gros, le titre un peu moins important en un peu moins gros, etc.

Ne choisissez pas votre balise de titre en fonction de la taille qu'elle procure 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. Il ne devrait pas y avoir de sous-titre sans titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire ceci en CSS un peu plus tard.


Essayez de faire une page web avec des titres pour voir ce que ça donne :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<html>
    <head>
        <meta charset="utf-8" />
        <title>Niveaux de titres</title>
    </head>

    <body>
        <h1>Titre super important</h1>
        <h2>Titre important</h2>
        <h3>Titre un peu moins important (sous-titre)</h3>

        <h4>Titre pas trop important</h4>
        <h5>Titre pas important</h5>
        <h6>Titre vraiment pas important du tout</h6>
    </body>
</html>

Essayer !


Allez, je vous donne un exemple d'utilisation des titres dans une page web (vous allez voir que je ne me sers pas de toutes les balises) :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
    <meta charset="utf-8" />
    <title>Présentation du Site du Zéro</title>
</head>

<body>
    <h1>Bienvenue sur le Site du Zéro !</h1>

    <p>
        Bonjour et bienvenue sur mon site : le Site du Zéro.<br />
        Le Site du Zéro, qu'est-ce que c'est ?
    </p>

    <h2>Des cours pour débutants</h2>
    
    <p>
        Le Site du Zéro vous propose des cours (tutoriels) destinés aux débutants : aucune connaissance n'est requise pour lire ces cours !
    </p>
    <p>
        Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un site web, à programmer, à construire des mondes en 3D !
    </p>

    <h2>Une communauté active</h2>
    
    <p>
        Vous avez un problème, un élément du cours que vous ne comprenez pas ? Vous avez besoin d'aide pour créer votre site ?<br />
        Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul dans ce cas, et vous trouverez très certainement quelqu'un qui vous aidera aimablement à résoudre votre problème.
    </p>
</body>
</html>

Essayer !


Voilà une page web qui prend forme ! :D

Oui mais moi je veux centrer mon titre, l'écrire en rouge et le souligner !


Nous ferons tout cela lorsque nous apprendrons le CSS (dès la deuxième partie du cours). Il faut savoir que <h1> ne signifie pas "Times New Roman, taille 16 pt", mais "Titre important".

Grâce au langage CSS, vous pourrez dire "Je veux que mes titres importants soient centrés, rouges et soulignés". Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous rédigeons le contenu avant de nous amuser à le mettre en forme.
Retour en haut

La mise en valeur

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.

Mettre un peu en valeur



Pour mettre un peu en valeur votre texte, vous devez utiliser la balise <em> </em>.
Son utilisation est très simple : entourez les mots à mettre en valeur par ces balises, et c'est bon ! Je reprends un peu l'exemple de tout à l'heure, et j'y mets quelques mots en évidence :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
    <meta charset="utf-8" />
    <title>Emphase</title>
</head>

<body>
    <p>
        Bonjour et bienvenue sur mon site !<br />

        Ceci est mon premier test, alors <em>soyez indulgents</em> s'il vous plaît, j'apprends petit à petit comment ça marche.
    </p>
</body>
</html>

Essayer !


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.

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> :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
    <meta charset="utf-8" />
    <title>Forte emphase</title>
</head>

<body>
    <p>
        Bonjour et bienvenue sur mon site !<br />

        Ceci est mon premier test, alors <strong>soyez indulgents</strong> s'il vous plaît, j'apprends petit à petit comment ça marche.
    </p>
</body>
</html>

Essayer !


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 plus ressortir.

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. Le texte 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.


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<html>
<head>
    <meta charset="utf-8" />
    <title>Marquage du texte</title>
</head>

<body>
    <p>
        Bonjour et bienvenue sur mon site !<br />

        Ceci est mon premier test, alors <mark>soyez indulgents</mark> s'il vous plaît, j'apprends petit à petit comment ça marche.
    </p>
</body>
</html>

Essayer !


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écider 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



Je vais peut-être vous sembler un peu lourd mais il est très important qu'on se comprenne bien, car les débutants font souvent la même grosse erreur à ce stade. Ils ont vu les balises <em>, <strong>, <mark>... et ils se disent : "Chouette, j'ai découvert comment mettre en italique, en gras et comment surligner du texte en HTML !".

Et pourtant... ce n'est pas à ça que servent ces balises ! Je sais, je sais, vous allez me dire "Oui mais quand j'utilise <strong> le texte apparaît en gras, donc c'est pour mettre en gras.", et pourtant, c'est une erreur de croire que cette balise sert à ça.

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.

Je ne comprends pas. À quoi ça sert que l'ordinateur sache qu'un texte est important ? :euh:
Il n'est pas si intelligent pour comprendre !


Détrompez-vous ! De nombreux programmes analysent les codes 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.

Mais alors, comment on fait pour mettre spécifiquement en gras, pour écrire en rouge, et tout et tout ?


Tout cela se fait en CSS. Souvenez-vous :

  • Le HTML définit le fond (contenu, logique des éléments)
  • Le CSS définit la forme (apparence)

Nous verrons le CSS plus loin, pour l'instant nous nous concentrons sur le HTML et ses balises, qui ont chacune un sens particulier. ;)
Retour en haut

Les listes à puces

Les listes à puces nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations.
Nous allons découvrir ici deux types de listes à puces :

  • Les listes non ordonnées
  • Les listes ordonnées


Liste non ordonnée



Une liste non ordonnée ressemble à ceci :

  • Fraises
  • Framboises
  • Cerises

C'est un système qui nous permet de faire une liste d'éléments, sans notion d'ordre (il n'y a pas de "premier" ni de "dernier"). Créer une liste à puces non ordonnée est très simple. Il suffit d'utiliser la balise <ul> que l'on referme un peu plus loin avec un </ul>.
Commencez donc à taper ceci :

Code : HTML
1
<ul></ul>


Et maintenant, voilà ce qu'on va faire : on va écrire chacun des éléments de la liste entre 2 balises <li></li>. Toutes ces balises doivent se trouver entre <ul> et </ul>. Vous allez comprendre de suite avec cet exemple :

Code : HTML
1
2
3
4
5
<ul>
    <li>Fraises</li>
    <li>Framboises</li>
    <li>Cerises</li>
</ul>

Notez que la liste doit être placée à l'intérieur de <body></body>. Je ne mets pas tout le code de la page à partir de maintenant pour rester lisible.

Essayer !


Retenez donc ces deux balises :
  • <ul></ul> délimite toute la liste.
  • <li></li> délimite un élément de la liste (une puce).


Vous pouvez mettre autant d'éléments que vous voulez dans la liste à puces, vous n'êtes pas limités à 3 éléments bien entendu.

Et voilà, vous savez créer une liste à puce non ordonnée ! Pas si dur une fois qu'on a compris comment imbriquer les balises. ;)

Pour ceux qui ont besoin de faire des listes complexes, sachez que vous pouvez imbriquer des listes à puces (créer une liste à puces dans une liste à puces). Si vous voulez faire ça, ouvrez une seconde balise <ul> à l'intérieur d'un élément <li></li>.
Si vous fermez les balises dans le bon ordre, vous n'aurez pas de problème. Attention néanmoins, cette technique est un peu compliquée à maîtriser.


Liste ordonnée



Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer <ul></ul> par <ol></ol>.
À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter les éléments.

L'ordre dans lequel vous mettez les éléments de la liste est important. Le premier <li></li> sera l'élément n°1, le second sera le n°2 etc...


Comme c'est particulièrement intuitif, je vous laisse admirer la simplicité de cet exemple :

Code : HTML
1
2
3
4
5
6
7
<h1>Ma journée</h1>

<ol>
    <li>Je me lève</li>
    <li>Je mange et je bois</li>
    <li>Je retourne me coucher</li>
</ol>

Essayer !


Par rapport à l'exemple précédent, tout ce qu'on a eu à changer est donc la balise <ol>.


Pour information, il existe un troisième type de liste, beaucoup plus rare : la liste de définitions. Elle fait intervenir les balises <dl> (pour délimiter la liste), <dd> (pour délimiter un terme) et <dt> (pour délimiter la définition de ce terme).
Retour en haut

Q.C.M.

Un paragraphe doit être entouré des balises...
Quelle balise permet d'aller à la ligne à l'intérieur d'un paragraphe ?
Lequel de ces titres est le plus important ?
La balise <strong> indique...
Quelle balise délimite une puce au sein d'une liste ?

Statistiques de réponses au QCM

Retour en haut
Ce chapitre était un peu plus conséquent que les précédents mais il fallait bien rentrer dans le vif du sujet !
Je sais qu'il y a beaucoup de nouvelles balises à retenir, mais cela est nécessaire. En pratiquant un peu, ça viendra tout seul et vous n'aurez plus à faire le moindre effort pour vous souvenir d'une balise. ;)

Si vous trouvez que cela fait beaucoup pour vous d'un coup, n'ayez crainte. Personne ne vous oblige à retenir les balises par cœur. Vous pourrez toujours revenir sur cette page pour vous souvenir comment il faut faire.
Mêmes les webmasters expérimentés ne connaissent pas par cœur toutes les balises du langage HTML. Cependant, vous verrez, à force d'utiliser certaines balises tout le temps, cela rentrera naturellement dans votre tête. ;)
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Lire aussi

Icône
Votre première page web en HTML
Icône
Prêts pour notre mégadiaporama ?
Icône
Mémento des balises HTML
Icône
Comment fait-on pour créer des sites web ?
Retour en haut
128 commentaires pour "Organiser son texte"
Note moyenne : 3.86 / 4 (2970 votes)
Pseudo Commentaire
Hors ligne Bvic # Posté le 04/11/2011 à 00:22:52
Avatar

 Je lis la nouvelle version du tuto, et il manque quelque chose à mes yeux pour aider à mémoriser : les significations des balises.

Par exemple :
<ul> : unordered list
<ol> : ordered list
<li> : list item
<tr> : Table row
<td> : Table data

Les noms de balises sont parfois assez surprenants, et mettre un nom dessus aide à s'en souvenir.
Ça pourrait être bien d'indiquer le sens anglais dont la balise est l'abréviation.
Les maths, il n'y a que ça de vrai !
 
Hors ligne benjidestroy # Posté le 19/11/2011 à 12:52:39

mai les sites sécurisé on pa pa afficher le code source
Hors ligne grophies # Posté le 05/12/2011 à 14:14:25

pour les listes de définitions vous avez écrit l'inverse !

c'est <dt></dt> pour les termes ("t" = "terme") et <dd></dd> pour les définitions ("d" = "définition")
Hors ligne ToXiC_FM7 # Posté le 28/01/2012 à 23:02:34
Cogito Ergo Sum

Avis : Très bon

Ouaw, pas mal de balises à retenir là, mais ça va aller !
Je fais une pause, le temps de revoir tout ça et j'enchaîne sur la suite,
super tuto' !

Note : 20/20
ToXiC_FM7
 
Hors ligne marc-antoine777 # Posté le 29/01/2012 à 04:45:43

Lorsque j'ouvre mon code son internet explorer, les accents n'apparaissent pas et la lettre devient un carré. Quelqu'un pourrais m'aider s.v.p?

Voir tous les commentaires