[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Officiels
> Site Web
> Apprenez à créer votre site web ! > Les bases du XHTML > Organiser son texte
> Lecture du tutoriel
Organiser son texte
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
La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :
- Comment rédiger des paragraphes
- La façon dont fonctionnent les titres
- Comment donner de l'importance à certains mots de son texte
- Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en auriez besoin un jour.
Motivés ? Allez, vous allez voir c'est pas compliqué
Vous avez donc envie d'écrire du texte dans votre page web, mais vous ne savez pas comment procéder ?
En XHTML, les choses sont plutôt simples : ça fonctionne en paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p> (qui signifient "
paragraphe").
Regardez ce bout de code, c'est un petit paragraphe écrit en XHTML :
Code : HTML1 | <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 à l'aide des tutoriels du Site du Zér0. 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>
|
- <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 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0. 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>
|
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 un truc particulier en XHTML : comment sauter des lignes. Ca a l'air simple, mais pourtant ça ne fonctionne pas vraiment comme dans un traitement de texte habituel...
Sauter une ligne
En XHTML, si vous appuyez sur la touche "Entrée", ça ne va pas créer une nouvelle ligne comme vous avez l'habitude. Essayez donc ce code :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0.
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>
|
Eh oui, c'est pareil que tout à l'heure ! Rien n'a changé !
Mais, comme vous devez vous en douter, il y a bien un moyen de faire. En tout cas comme vous pouvez le voir, taper frénétiquement sur la touche "Entrée" ne sert strictement à rien
En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p>.
Votre code XHTML devrait donc être au final plein 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0.
</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>
|
Oui, mais si je veux juste aller à la ligne dans un paragraphe, et non pas sauter une ligne ?
Eh bah devinez quoi : il existe une balise "Aller à la ligne" !
C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous devez obligatoirement la mettre
à l'intérieur d'un paragraphe, donc je ne veux pas voir de <br /> à l'extérieur des balises <p></p>.Voici (enfin) le code source qui va donner la présentation qu'on voulait :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0.
</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 normalement vous n'aurez pas besoin de le faire quand vous connaîtrez le CSS.
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
Rédiger du texte c'est bien, mais donner un titre à votre texte c'est encore mieux.
En XHTML on est vernis, 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 que l'on peut utiliser :
- <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.
- <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.
- <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 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 parce qu'il y a le choix entre plein de balises. Dans la pratique, moi j'utilise 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...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
17 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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>
|
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Le Site du Zér0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Bienvenue sur le Site du Zér0 !</h1>
<p>
Bonjour et bienvenue sur mon site : le Site du Zér0.<br />
Le Site du Zér0, qu'est-ce que c'est ?
</p>
<h2>Des cours pour débutants</h2>
<p>
Le Site du Zér0 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, construire des cartes en 3D avec le logiciel Hammer etc...
</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>
|
Et voilà, vous avez votre première vraie page web !
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).Ce qui est très important, c'est de retenir que <h1> ne signifie pas "Times New Roman, taille 16 pt", mais "Titre important".
Grâce à CSS, vous pourrez dire "Je veux que mes titres importants soient centrés, rouges et soulignés"
Si, à l'intérieur de vos paragraphes, il y a plusieurs mots que vous aimeriez mettre en valeur, XHTML met à votre disposition 2 balises :
- La première permet de mettre "un peu" en valeur les mots de votre texte.
- La seconde permet de bien mettre en valeur les mots.
Nous allons voir quelles sont ces balises et comment les utiliser.
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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0.
</p>
</body>
</html>
|
Comme vous pouvez le voir, le texte avec la balise <em> est mis en
italique. Vous pouvez donc vous servir de cette balise pour mettre des mots en 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 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</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 à l'aide des tutoriels du Site du Zér0.
</p>
</body>
</html>
|
Quand est-ce que je dois utiliser <em>, et quand est-ce que je dois utiliser <strong> ?
C'est à vous de voir, ça dépend de l'importance du texte. Si c'est "un peu" important, utilisez <em>, et si les mots en question sont très importants, utilisez <strong>
C'est la même histoire qu'avec les titres : tout est une affaire d'importance, c'est à vous de décider
Je sais que vous avez appris pas mal de nouvelles balises dans ce chapitre, mais c'est nécessaire si vous voulez réussir votre site web.
Contrairement à ce qu'il paraît, c'est facile à retenir et ça vient très rapidement avec un peu de pratique
Si les balises que je vous ai montrées jusqu'ici sont très fréquemment utilisées (paragraphes, titres, mise en valeur...), celles que je vais vous présenter ci-dessous sont un peu plus rarement utilisées.
Comme elles sont plus rares, je ne vous oblige pas à les retenir par coeur (mais si vous le faites bien sûr c'est mieux :p)
Je ne vous présente pas toutes les balises qui existent dont on pourrait se servir sur notre texte, ça serait trop long, et des fois la différence est minime. Vous trouverez la liste complète des balises XHTML dans les annexes.
Nous allons voir les balises suivantes :
- Mettre en exposant ou en indice
- Les citations
- Les acronymes
Je trouve que c'est déjà amplement suffisant
Mettre en exposant ou en indice
Pour mettre en exposant certains mots ou caractères, on utilise la balise
<sup>.
Les mots seront alors affichés en hauteur. Par exemple :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Un peu d'histoire...</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Un peu d'histoire...</h1>
<p>
<em>Le saviez-vous ?</em><br />
Le langage XHTML est le langage qui nous permet de créer des sites web en ce début de XXI<sup>ème</sup> siècle.<br />
Avant, vers la fin du XX<sup>ème</sup>, on utilisait le langage HTML, qui disparaît aujourd'hui peu à peu au profit de XHTML
</p>
</body>
</html>
|
Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne en petit), on utilise cette fois la balise
<sub>.
Bon, à partir de maintenant je ne vous donnerai pas toujours le code entier de la page (c'est un peu lourd à chaque fois), là je vous donne juste la partie du code qui nous intéresse. Ici, j'utilise la mise en indice pour écrire une formule mathématique :
Code : HTML1
2
3 | <p>
x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
</p>
|
Bon, la mise en indice risque de servir surtout à ceux qui veulent taper des formules mathématiques, mais on sait jamais : y'a peut-être des Zér0s matheux après tout
Les citations
On peut faire 2 types de citations :
- Des citations courtes, dans un paragraphe : les citations courtes s'effectuent à l'intérieur d'un paragraphe. On encadre la citation par la balise <q>, qui fonctionne comme <em>, <strong>, <sup> etc...Voici un exemple de citation courte au milieu d'un paragraphe :
Code : HTML1 | <p>Vous souvenez-vous de la phrase célèbre qu'a prononcé Neil Armstrong en posant le premier pied sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q>. C'était un certain 20 Juillet 1969...</p>
|
La citation, sur un navigateur récent comme Mozilla Firefox, est entourée de guillemets. C'est logique me direz-vous, mais IE lui ne fait rien de particulier (essayez sur Firefox et IE, vous allez voir qu'il y a une différence !).Sous IE donc, la balise <q> n'a aucun effet particulier. Mais ne vous en faites pas, vous pourrez en CSS décider de la façon dont vous voulez afficher les citations courtes (en couleur, en italique etc...)
- Des citations longues, hors d'un paragraphe : si vous avez besoin d'effectuer une citation assez longue, vous devrez utiliser la balise <blockquote>. Vous devez mettre des balises de paragraphe <p> à l'intérieur du blockquote comme ceci :
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
32
33 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Le Corbeau et le Renard</h1>
<p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La Fontaine</em> :</p>
<blockquote>
<p>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
</p>
</blockquote>
</body>
</html>
|
Vous remarquez que les citations longues sont mises légèrement en décalé sur la droite.
Les balises <q> et <blockquote> servent toutes deux à effectuer une citation. Oui, mais quelle est la différence ?
En XHTML, on distingue 2 types de balises :
- Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe. C'est le cas notamment des balises <strong>, <em>, <q> etc...
- Les balises de type bloc : ces balises servent à structurer la page en plusieurs "blocs". La première qu'on a appris, c'est la balise <p>, mais il y a aussi les balises de titre <h1>, <h2>, <blockquote>...Vous ne devez PAS mettre de titre ou de citation longue à l'intérieur d'un paragraphe. Chacune de ces balises constitue un bloc séparé.
Les acronymes
Un acronyme est une suite d'initiales utilisée généralement pour raccourcir certains noms, comme par exemple XHTML, FBI, CSA etc...
Le problème des acronymes, c'est qu'on ne sait pas toujours ce qu'ils signifient. Pour que le visiteur sache de quoi il s'agit, vous devez entourer votre acronyme de la balise
<acronym>
La nouveauté ici, c'est que vous allez devoir utiliser un attribut (title) pour expliquer ce que signifie l'acronyme.
Comme un exemple vaut toujours mieux qu'un long discours :
Code : HTML1 | <p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p>
|
Comme vous pouvez le voir, si vous pointez la souris sur XHTML, la description de l'acronyme apparaît
Vous noterez encore une petite différence entre IE et Firefox : Firefox souligne en pointillés l'acronyme, tandis qu'IE... ne fait rien
Ce chapitre était un peu plus long que les précédents mais constitue vraiment une base solide et importante pour votre apprentissage du XHTML.
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, vous pouvez pour le moment ne pas retenir les balises de la dernière partie (
Quelques balises plus rares (mais utiles !)). Il est en revanche indispensable :
- D'avoir compris comment on structure la page en paragraphes, et comment on saute des lignes.
- Comment se servir des titres (selon leur importance, on utilise <h1>, ou <h2> etc...).
- De savoir mettre en valeur votre texte à l'aide de <em> (insistance faible) et <strong> (insistance forte).
Si tous ces points vous semblent clairs, alors vous pouvez passer au prochain chapitre sans crainte
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
345 Zéros connectés |
9 requêtes |
0.0292s (0.015s)
