Leçons de niveau 12

Extensible Hypertext Markup Language/Organisation du texte

Une page de Wikiversité.
Sauter à la navigation Sauter à la recherche
Début de la boite de navigation du chapitre
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
Icon falscher Titel.svg
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.

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

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

Les paragraphes[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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 | modifier le wikicode]

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

La balise <em>[modifier | modifier le wikicode]

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>[modifier | modifier le wikicode]

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[modifier | modifier le wikicode]

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 | modifier le wikicode]

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 | modifier le wikicode]

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 | modifier le wikicode]

¿ 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 | modifier le wikicode]

¡ 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 | modifier le wikicode]

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 | modifier le wikicode]

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 Smiley faisant un clin d'œil) 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 ! Smiley faisant un clin d'œil