SUITE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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 <!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>
Essayer !
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"
--------------------------------------------------------------------------------
Mettre en valeur le texte
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>
Essayer !
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>
Essayer !
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
--------------------------------------------------------------------------------
Quelques balises plus rares (mais utiles !)
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>
Essayer !
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 : HTML
1
2
3 <p>
x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
</p>
Essayer !
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 : HTML
1 <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>
Essayer !
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>
Essayer !
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 : HTML
1 <p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p>
Essayer !
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
Merci au site du zero mais les petit extrait
![Chapître 2 [Organiser son texte] Icon_minitime](https://2img.net/i/fa/icon_minitime.gif){kind=icon}
Lun 20 Oct - 21:21
