On va enfin commencer à coder !! Essayez à chaque fois de recopier a la main le code que je vous donne ne faites pas bettement copier-coller !
Testez tous les codes !!
I) Afficher du texte
Pour afficher du texte il y a une balise bien spéciale : <p>
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>Afficher du texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Bonjour !!
Je suis un texte fait en XHTML !!!</p>
</body>
</html>
Comme vous le voyez <p> est une balise qui fonctionne par paire.
Attends ! Pourquoi l'ordinateur n'a pas sauté une ligne après "Bonjour " ?
Tout simplement par ce que en XHTML les entrées ne comptent pas comme des retours à la ligne il y a une balise spéciale pour cela : <br /> :
Cette balise est une balise unique il faut donc mettre un espace et un slash après le nom de la balise.
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>Afficher du texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Bonjour !!<br />
Je suis un texte fait en XHTML !!!</p>
</body>
</html>
Comme vous le voyez après " Bonjour " on a fait un retour à la ligne !!!
II) Deux règles de syntaxe
A) Balise de type Inline et Block :
On dit d'une balise qu'elle est de type block si elle fonctionne hors d'une autre balise .
La balise <p> est de type block vous ne pouvez donc pas faire ceci :
<balise><p>texte</p></balise>
Le texte s'affichera mais la page ne sera pas valide selon les normes du World Wide Web Consortium.
On dit qu'une balise est de type inline si elle fonctionne dans d'autre balise.
Par exemple inventons une balise <gras> de type inline :
On ne pourra donc pas faire ceci :
<gras><p>texte</p></gras>
Mais :
<p><gras>texte</gras></p>
B) Balise dans une autre balise
Quand vous mettez une balise dans une autre ,veillez à fermer dans l'ordre ces balises :
Mauvais exemple :
<p><gras>texte</p></gras>
Bon exemple :
<p><gras>texte</gras></p>
III) Quelques balises de formatage de texte
A) Les titres
il existe 6 niveaux de titre :
Les balises sont du titre le plus gros au plus petit :
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Attention : - Les balises de titre sont de type block donc gare à vous si je les vois à l'intérieur d'une balise :P !
- <h1> par exemple ne veut pas dire titre de 24 points mais titre très important !
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>Les titres</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<h1>titre très très important </h1>
<h2>titre très important </h2>
<h3>titre important</h3>
<h4>titre peu important</h4>
<h5>titre très peu important</h5>
<h6>titre pas du tout important</h6>
</body>
</html>
Les balises de titre fonctionne par paires.
B) Mettre en valeur le texte
Pour mettre en valeur une partie d'un texte de manière peu importante, on utilise la balise <em>, on pourrait dire que la balise <em> met en italique mais ce n'est pas le cas, il faut utiliser le CSS pour cela
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><em> ce texte est très important</em></p>
</body>
</html>
Pour mettre en valeur de manière importante un texte on utilise la balise <strong>, on pourrait dire que la balise <strong> met en gras mais ce n'est pas le cas, il faut utiliser le CSS pour cela (je me répète la non :P)
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><strong> ce texte est très importan</strong></p>
</body>
</html>
Les balises <em> et <strong> sont de type inline et fonctionnent par paires.
C) Mettre en exposant ou en indice
Pour mettre en exposant (par exemple : 102)il faut utiliser la balise <sup> qui fonctionne par paires et est de type inline. Cela marche avec des lettres des mot ou des chiffres.
Pour mettre en indice(par exemple : xn) en utilise la balise <sub> elle fonctionne de la même façons que <sup> :
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>10<sup>2</sup> ; x<sub>n</sub></p>
</body>
</html>
D) Les citations
Pour des citatons courtes on utilise la balise <q> à l'interieur d'un paragraphe.
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p><q> Mon idole c'est moi !</q></p>
</body>
</html>
Comme vous le voyez la citation se retrouve automatiquement entre guillemet.
Pour des citations longues on utilise la balise de type block : <blockquote>
Attention : On peut et on doit mettre une balise <p> a l'interieur de <blockquote>
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<blockquote>
<p>
Des cheveux noirs, comme l'ébène,<br />
Des yeux bleu océan,<br />
Des lèvres mélanges roses et bois,<br />
Un corps de grande taille.<br />
Sans détails, tu es beau.</p>
<p>Ton sourire empli de malices,<br />
Fait apparaître des dents d'une blancheur suprême.<br />
Tes lèvres sont splendides<br />
Et chaque mot prononcé par celles-ci<br />
Sont merveilleux, quelque soit les circonstances.<br />
Tes mains sont gracieuses et munies d'un stylo,<br />
Celle de droite fait des merveilles.<br />
Encore tant de choses à dire...<br />
Détaillé tu es merveilleux.<br />
Lorsque je regarde dans la profondeur de tes yeux,<br />
J'aimerai plonger dedans<br />
Et nager avec toi dans cette immensité bleue.<br />
Lorsque tu parles, je voudrais fermer les paupières<br />
Et t'écouter me bercer par le simple ton de ta voix.<br />
Je voudrais te prendre dans mes bras et te serrer si fort<br />
Que j'entrerais dans ton âme<br />
Pour être greffée à toi, à jamais.<br />
Je t'aime.</p>
</blockquote>
</body>
</html>
Comme vous le voyez les longues citations sont décalées vers la droite d'une dizaine de pixels.
E) Les acronymes
Les acronymes sont des "condensés" de mot comme XHTML, CSS, FBI...
Quand on utilise un acronyme on ne peut pas être sûr que l'utilisateur sait ce que ça veux dire : c'est l'utilité de la balise <acronym>
Par exemple :
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Cette page a été codé en Xhtml</p>
</body>
</html>
Comment savoir ce que veut dire XHTML ?
Voila la solution :
< !DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN " " http ://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd ">
<html xmlns= "http ://www.w3.org/1999/xhtml " xml :lang= "fr ">
<head>
<title>mettre de l'importance au texte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<p>Cette page a été codé en <acronym title="eXtensible Hypertext Markup Language">XHTML</acronym></p>
</body>
</html>
Il y a un attribut title qui contient le nom complet de l'acronyme.
Si vous ouvrez une page, sous firefox, vous verrez des pointillés sous l'acronyme et quand le curseur de la souris pointe dessus vous verrez le nom complet.
IE ne faites rien !!
IV) Conclusion
Je vous ai enseigné tout ce que vous devez savoir sur le texte !!
He ! Attends ! Comment on fait pour mettre en couleur notre texte en HTML ?
On ne peut pas. On doit le faire avec CSS.
Si vous avez des remarques ou des suggestions sur ce cours, n'hesitez pas à me les envoyer par MP !!
