Le Texte (XHTML)
Nous nous intéresserons dans ce chapitre aux principales balises XHTML de mises en forme qui mettront en exergue certains éléments de notre texte (création de paragraphes, de titres...).
Nous allons maintenant voir comment insérer et organiser son texte.
Créer des paragraphes
La première balise à connaitre est la balise de paragraphe.
C´est certainement l´une des balises les plus utilisées car, comme son nom l´indique, elle sert à délimiter un paragraphe de texte.
Cette balise est très simple à retenir : <p> </p>.
Tout ce qui se trouve à l´intérieur de cette balise sera considéré par le navigateur comme un paragraphe.
Exemple :
<p> Salut à toi internaute </p>.
La mise en forme du paragraphe
Il faut savoir que le langage Xhtml, ne respecte pas les sauts de ligne.
Regardons par exemple le paragraphe suivant :
<p> Bonjour ! je suis un paragraphe de texte rédigé en Xhtml. Je sers à montrer une règle du langage XHTML assez surprenante pour un débutant. Heureusement le problème se résout facilement </p>.
Ainsi le paragraphe n´est pas mise en forme !! Toutes les lignes sont à la suite les unes des autres.
Heureusement, il existe une balise permettant de faire un retour à la ligne simple à l´interieur d´un paragraphe : la balise <br/>. (pour break).
Ce qui donne dans le code :
<p> Bonjour !! <br/>.
Je suis un paragraphe de texte rédigé en Xhtml <br/>.
Je sers à montrer une règle du langage XHTML assez surprenante pour un débutant. Heureusement le problème se résout facilement </p>.
C´est de cette manière que l´on organise le texte de sa page Web.
La majeur partie du texte d´une page Web se trouve donc à l´intérieur de balises de paragraphe <p>, dans lesquelles on retrouve généralement des sauts à la ligne <br/>.
Créer des titres
Apres avoir vu comment créer des paragraphes, nous allons apprendre à placer des titres dans notre page Web pour structurer l´information.
Le langage XHTML nous propose pas moins de 6 balises de titres différentes :
<h1> Titre très important (titre principal) </h1>
<h2> Sous-titre </h2>
<h3> Sous-sous-titre </h3>
<h4> Sous-sous-sous-titre </h4>
<h5> Sous-sous-sous-sous-titre (pas très important) </h5>
<h6> Sous-sous-sous-sous-sous-titre (hum...) </h6>
Voici un exemple de l´utilisation des titres et sous titres :
<h1>Salon de Coiffure Trankilou </h1>
<h2>Localisation </h2>
<p> Le salon de coiffure est situé dans un charmant petit village du nord de la Creuse </p>
<h2> Horaires d´ouverture</h2>
<p> de 14h à 17h du Lundi au Mardi (avec la pause café de 15h à 16h)</p>
L´objectif des titres est de permettre de structurer au mieux les pages Web, ce qui est le but du language XHTML.
Les titres importants seront écrits plus gros par le navigateur que les sous-titres, ce qui permet de bien les différencier à l´affichage.
Mettre en valeur son texte
Lorsque une page comprend beaucoup de paragraphes, comme c´est souvent le cas, il peut être pratique de mettre en valeur certaines parties du texte.
On dispose pour cela de 2 balises de "mise en valeur" différentes :
- <em> </em> : pour une faible mise en valeur. Le texte sera généralement mis en italique.
- <strong> </strong> : pour une mise en valeur importante. Le texte sera généralement mis en gras.
<p> Attention, ceci est <strong> très important </strong> <br/>
Ce mot aussi est <em> important </em>, mais un peu moins que le texte ci-dessus.</p>
Les citations
Dans un site Web on peut être ammené à faire des citations, que ce soit des citations de livres ou d´autres sites.
Pour ce faire on dispose de plusieurs balises, on choisit la balise en fonction de la longeur de la citation.
Les citations courtes
Une citation courte se place dans une balise : <q> </q>.
<p> Une citation du film " Le Schpountz de Marcel Pagnol : <br/>
<q> Irénée, tu n´es bon à rien, tu es mauvais à tout </q> </p>
Le texte à l´intérieur d´une citation courte sera généralement placé entre guillemets.
Les citations longues
Pour effectuer une citation un peu longue (de plusieurs paragraphes), on utilise la balise <blockquote>.
A l´inverse d´une citation courte, une citation longue ne doit pas se trouver dans un paragraphe, mais elle doit au contraire contenir une balise de paragraphe.
<p> Voici un extrait du poème "Le matin" de Victor Hugo </p>
<blockquote>
<p> Le voile du matin sur les monts se déploie. <br/>
Vois, un rayon naissant blanchit la vieille tour; <br/>
Et déja dans les cieux s´unit avec amour, <br/>
Ainsi que la gloire à la joie, <br/>
Le premier chant des bois aux premiers feux du jour.</p>
</blockquote>
Une citation longue est généralement mise en retrait (elle est un peu décalée vers la droite).
Les exposants et indices
Les exposants et indices sont rarement utilisés mais peuvent s´avérer pratiques si l´on a l´intention d´écrire des formules mathématiques ou des abréviations.
- <sup> </sup> : mise en exposant (caractères surélevés).
- <sub></sub> : mise en indice (caractères abaissés).
On peut utiliser la mise en exposant pour indiquer une date par exemple:
<p> Bienvenue dans le XXI <sup> ème </sup> siècle !</p>
<p> L´eau est notée H<sub>2 </sub> 0 en chimie.</p>
Les abréviations
Si l´on désire placer un terme en notation raccourcie dans la page. On utilise la balise <abbr>. Cette balise permet de regrouper les acronymes, abréviations et sigles.
Prenons par exemple le terme ADN, contraction de "acide désoxyribonucléique"
Exemple :
<p> La police scientifique a démasqué le coupable à l´aide d´un test <abbr title="Acide Désoxyribonucléique"> ADN </abbr></p>
L´attribut title sert à afficher une infobulle. Ainsi si l´on survole ADN avec la souris, une infobulle apparaitra pour indiquer la signification du terme.