Bon, maintenant, après trois chapitres ultra-difficiles (
Dans ce chapitre, nous allons apprendre à utiliser :
- les paragraphes
- les titres
- les balises donnant de l'importance au mots
- et quelques balises plus rares
À partir de maintenant, tout ce que nous allons apprendre sera contenu entre les balises <body> et </body>.
Les paragraphes
Voilà, une page blanche c’est bien, mais avec un peu de contenu, c’est mieux, non ? Seulement, vous ne savez peut-être pas comment vous y prendre ?
En fait, c’est très simple : en XHTML, les pages s'organisent en paragraphes. Chaque paragraphe est entouré des balises <p> et </p>. Par exemple :
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 </head>
7 <body>
8 <p>Bonjour, ceci est mon (futur) super site web !</p>
9 </body>
10 </html>
Ce qui donnera :
Bonjour, ceci est mon (futur) super site web !
Bien sur, on peut utiliser plusieurs paragraphes :
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 </head>
7 <body>
8 <p>Bonjour, ceci est mon (futur) super site web !</p>
9 <p>Revenez d'ici quelques jours, quand j'aurai terminé d'apprendre !</p>
10 </body>
11 </html>
Ce qui donnera :
Bonjour, ceci est mon (futur) super site web !
Revenez d'ici quelques jours, quand j'aurai terminé d'apprendre !
À partir de maintenant, nous ne donnerons plus le code de base, en nous contentant d'écrire ce qui est marqué entre les balises <body> et </body>, ceci par souci de lisibilité.
Le retour à la ligne
Vous l'avez remarqué, à chaque nouveau paragraphe, le texte va à la ligne.
¿ Oui, mais si je veux aller à la ligne dans un paragraphe ?
Il existe une balise pour cela : la balise simple<br />. Par exemple :
1 <p>Bonjour, ceci est mon (futur) super site web ! <br />
2 Revenez d'ici quelques jours, quand j'aurai terminé d'apprendre !</p>
Ce qui donnera :
Bonjour, ceci est mon (futur) super site web !
Revenez d'ici quelques jours, quand j'aurai terminé d'apprendre !
Vous remarquerez que la touche "Entrée" n'a aucun effet !
Les titres
En XHTML, les titres s'écrivent entre des balises. Il en existe plusieurs niveaux :
<h1>Titre super important</h1><h2>Titre important</h2><h3>Titre un peu moins important</h3><h4>Titre encore moins important</h4><h5>Titre pas important </h5><h6>Titre vraiment pas important </h6>
Bien entendu, on utilise rarement plus de trois ou quatre niveaux de titres.
Mettre le texte en valeur
Il existe plusieurs manière de mettre le texte en valeur, <em> et <strong>.
La balise <em>
La balise <em>met "un peu" le texte en valeur :
1 <em>Ceci est assez important</em>
Donnera par défaut (car vous verrez qu'avec le CSS, on peut faire de sorte que cela soit souligné, rouge, etc.; de même manière qu'on peut le faire avec les titres, <strong>, etc.) :
Ceci est assez important
La balise <strong>
La balise <strong>met plus le texte en valeur :
1 <strong>Ceci est important</strong>
Donnera par défaut :
Ceci est important
En gros, <em> donnera Ceci est assez important et <strong> Ceci est important alors que sans cela, on verrait Ceci est normal
D'autres balises
Nous allons voir les balises suivantes :
- Mettre en exposant ou en indice
- Les "citations"
- Les <acronym title="Vous ne savez pas à quoi sert cette balise ? Moi si !">acronymes</acronym>
Mettre en exposant ou en indice
En XHTML, pour mettre en exposant certains mots, on utilise la balise <sup> :
Ceci est un <sup>exposant</sup>
Donnera :
Ceci est un exposant
Pour mettre un mot (ou plus) en indice, on utilise la balise <sub>. Par exemple :
Ceci est un <sub>indice</sub>.
Donnera :
Ceci est un indice.
Les "citations"
Il existe deux types de citations en XHTML : les citations courtes et les citations longues.
Les citations courtes, à utiliser dans un paragraphe, s'entourent de la balise <q> et les citations longues, une balise à utiliser en dehors d'un paragraphe, de la balise <blockquote>. Par exemple :
<p>Voici une citation de Jacques Prévert, dans <q>Salut à l'oiseau</q> :</p>
<blockquote>Et je te fais cadeau d'avance<br />
du mégot de ma vie<br />
afin que tu renaisses<br />
quand je serai mort<br />
des cendres de celui qui était ton ami</blockquote>
Donnera :
Voici une citation de Jacques Prévert, dans "Salut à l'oiseau" :
Et je te fais cadeau d'avance
du mégot de ma vie
afin que tu renaisses
quand je serai mort
des cendres de celui qui était ton ami
Les acronymes
¿ Quecequo ?
Wikipédia le sait mieux que moi :
L'acronymie (du grec ἄκρος, akros, « au bout, extrême » et ὄνομα, onoma, nom) est l'abréviation d'un groupe de mots formée par la ou les premières lettres de ces mots.
¿ Et comment on fait ?
On utilise la balise <acronym> et l'attribut title :
<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p>
Donnera ceci .
Les deux types de balises
¡ Oui, je connais :les balises fonctionnants par paire et celles ne fonctionnants pas par paire !
Non, je parle de deux types de balises.
Ce sont les balises de type inline et block. Rappelez-vous, je vous en ai déjà parlé, oui, pour les citations : la balise <q> est utilisable seulement dans un paragraphe; c’est une balise de type inline et la balise <blockquote> est utilisable seulement hors d'un paragraphe, c’est une balise de type block.
Vous l'aurez compris, les balises de type inline (telles que <q>, <br />, etc.) s'utilisent dans un paragraphes, tandis que les balises de type block (comme <h1>, <h2>, <blockquote>...) servent à structurer la page en plusieurs "blocs".
Q.C.M.
Conclusion
Voilà, c’est la fin de ce chapitre…
Maintenant, vous avez une solide base pour apprendre le XHTML.
Vous n'êtes pas obligés (heureusement