Wikiversité

Extensible Hypertext Markup Language/Organisation du texte

< Extensible Hypertext Markup Language
Début de la boite de navigation du chapitre

Bon, maintenant, après trois chapitres ultra-difficiles (Smiley faisant un clin d'œil), vous êtes maintenant capables de créer…une page blanche ! Bon, d'accord, c’est bien beau, mais bon… c’est mieux avec du contenu, non ?
Dans ce chapitre, nous allons apprendre à utiliser :

  • les paragraphes
  • les titres
  • les balises donnant de l'importance au mots
  • et quelques balises plus rares
Organisation du texte
Icône de la faculté
Chapitre no 3
Leçon : Extensible Hypertext Markup Language
Chap. préc. :Première page
Chap. suiv. :Liens hypertextes
fin de la boite de navigation du chapitre
En raison de limitations techniques, la typographie souhaitable du titre, « Extensible Hypertext Markup Language : Organisation du texte
Extensible Hypertext Markup Language/Organisation du texte », n'a pu être restituée correctement ci-dessus.

À partir de maintenant, tout ce que nous allons apprendre sera contenu entre les balises <body> et </body>.

Les paragraphes

modifier

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 : 

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, ceci est mon (futur) super site web !</p>
        </body>
</html>

Ce qui donnera :
​

Bonjour, ceci est mon (futur) super site web !


Bien sur, on peut utiliser plusieurs paragraphes : 

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, ceci est mon (futur) super site web !</p>
                <p>Revenez d'ici quelques jours, quand j'aurai terminé d'apprendre !</p>
        </body>
</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

modifier

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 : 

                <p>Bonjour, ceci est mon (futur) super site web ! <br />
                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

modifier

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

modifier

Il existe plusieurs manière de mettre le texte en valeur, <em> et <strong>.

La balise <em>

modifier

La balise <em>met "un peu" le texte en valeur : 

<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>

modifier

La balise <strong>met plus le texte en valeur : 

<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

modifier

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

modifier

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"

modifier

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

modifier

¿ 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

modifier

¡ 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.

modifier

1 De quoi entoure t-on un paragraphe ?

de <q> et </q>
de <p> et </p>
de <paragraphe> et </paragraphe>

2 Quelle balise utilise t-on pour aller à la ligne ?

la balise <br />
la balise <rb/>
la balise <line/>

3 Quelle balise permet de mettre en indice ?

la balise <sup>
la balise <sub>
la balise <ind>

4 Quels sont les deux types de balises ?

inline et block
les balises intelligentes et normales
les balises par paires et seules

5 Quel est le titre le plus important ?

<h3>
<h4>
<h2>


Conclusion

modifier

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  ) de retenir les dernière balises plus rares mais les autres sont o-bli-ga-toires, elles constituent en effet la base du XHTML ! À tout à l’heure !  


  Première page
Récupérée de « https://fr.wikiversity.org/w/index.php?title=Extensible_Hypertext_Markup_Language/Organisation_du_texte&oldid=912789 »