Ecrire le HTML | A Propos | FAQ | Alumni | Kudos | Références | Tags | Leçons | précédent | suivant |

13. Vous Pouvez Me Citer en Bloc !

Encore un autre tag HTML très simple pour mettre en forme votre texte :

"Qu'est-ce qu'il se passe ici ?" demande le tag <blockquote> aux tags <p> et <br>. Leur réponse : "Nous ne sommes pas sûrs, mais tu es très différent de nous !"

Objectifs

Après cette leçon, vous pourrez :

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant.

Dans la litterature traditionnelle, les citations sont décalées par rapport au texte principal dans un bloc de texte indenté. Le HTML intègre également cette possibilité via le tag <blockquote>....</blockquote> :


<blockquote>
"Ceci est une longue citation d'une personne très célèbre. Comme elle est très longue et intéressante, 
elle doit être en retrait par rapport au reste du texte.
Cela indique clairement que la citation est de quelqu'un d'autre que l'écrivain."
</blockquote>

ce qui donne :

page web exemple
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
"Ceci est une longue citation d'une personne très célèbre. Comme elle est très longue et intéressante, elle doit être en retrait par rapport au reste du texte. Cela indique clairement que la citation est de quelqu'un d'autre que l'écrivain."
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Notez que nous pouvons utiliser n'importe lesquels des codes HTML que nous avons étudiés jusqu'à maintenant à l'intérieur des tags <blockquote>, comme dans cet exemple :

<blockquote>
<H2>Un Manifeste</H2>
Ceci est une <B>longue</B> citation d'une <A  HREF="http://www.mcli.dist.maricopa.edu/alan/"> 
personne très célèbre</A>. 
Comme elle est très longue et intéressante, elle doit être
<pre>     en retrait</pre>
par rapport au reste du texte.
<p>
<I>Cela indique</I>:
<ul> 
<li>clairement que 
<li>la citation est de 
<li>quelqu'un d'autre que l'écrivain.
</ul>
</blockquote>

ce qui donne ce qui suit :

page web exemple
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Un Manifeste

Ceci est une longue citation d'une personne très célèbre. Comme elle est très longue et intéressante, elle doit être 
    en retrait
par rapport au reste du texte.

Cela indique:

  • clairement que
  • la citation est de
  • quelqu'un d'autre que l'écrivain.
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Ajoutons un bloc de texte à l'introduction de notre page web Volcan. Nous allons utiliser une citation du naturaliste Romain, Pline, qui assista à l'éruption du Vésuve en 79 avant J.C.

  1. Ouvrez le fichier HTML, index.html dans votre éditeur de texte.
  2. Sous le titre <h1>Web Volcan</h1>, ajoutez ce qui suit : 
    
  <BLOCKQUOTE>
  <B><I>
  "La Nature se déchaine sauvagement, menaçant la Terre"
  </I></B><br>
   -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm">
  Pline l'Ancien</A>, qui mourut d'asphyxie après avoir  
  observé la destruction de Pompei par
  l'éruption du Vésuve en 79 avant J.C.
  </BLOCKQUOTE>
    NOTE : remarquez comment nous avons utilisé une combinaison des tags de style gras et italiques (voir la Leçon 5) pour mettre en valeur la citation. La citation se trouve sur une nouvelle ligne grâce à l'emploi du tag <br> (voir la Leçon 4). Nous avons également créé un lien hypertexte de "Pline l'Ancien" vers un autre site web contenant plus d'informations sur Pline et ses observations.

    Voyez aussi comment le tag <blockquote> ajoute une césure de paragraphe au dessus et en dessous du bloc de texte.

    Et finalement, les NOTES (comme celle-ci) que nous avons utilisé tout au long de ce didacticiel ont fait un bon usage du tag <blockquote> !
  3. Sauvegardez et Rechargez le fichier HTML.

Vérifiez Votre Travail

Comparez votre document avec un exemple du document-type. Si votre page web est différente de l'exemple, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Revoyons les grandes lignes de cette leçon :

  1. Que fait le tag <blockquote> ?
  2. Pourquoi n'avons-nous pas besoin d'un tag <p> avant un tag blockquote ?

Travail Indépendant

Expérimentez le tag <blockquote> dans votre propre page web. Ne l'utilisez pas seulement pour des citations. Le tag peut être efficace pour ajouter de l'esprit à la présentation de votre page web. Le tag <blockquote> est un moyen d'éviter les pages pleines de paragraphes de texte.

Certains développeurs utilisent deux ou trois (voire plus) tags <blockquote> imbriqués pour créer l'effet de marges plus larges. Par exemple,

<BLOCKQUOTE>
  <BLOCKQUOTE>
    <BLOCKQUOTE>"Oh, Encore des tags," se lamenta-t-il.
    <p>Elle lui répondit : "Souvenez-vous, très cher, que bien que
    le HTML puisse être limité en termes de contrôle 
    de mise en page, son potentiel est énorme quant à l'utilisation 
    créative du nombre de tags."
    </BLOCKQUOTE>
  </BLOCKQUOTE>
</BLOCKQUOTE>

donne :

page web exemple
"Oh, Encore des tags," se lamenta-t-il.

Elle lui répondit : "Souvenez-vous, très cher, que bien que le HTML puisse être limité en termes de contrôle de mise en page, son potentiel est énorme quant à l'utilisation créative du nombre de tags."

Si nous avions juste utilisé un seul groupe de tags <BLOCKQUOTE> ... </BLOCKQUOTE>, nous aurions vu :

page web exemple
"Oh, Encore des tags," se lamenta-t-il.

elle lui répondit : "Souvenez-vous, très cher, que bien que le HTML puisse être limité en termes de contrôle de mise en page, son potentiel est énorme quant à l'utilisation créative du nombre de tags."

Vous ne pouvez pas prévoir la marge exacte sur les côtés des pages, mais c'est une variation simple et efficace pour présenter du texte.

A Suivre....

Divisez une page web en "morceaux" reliés logiquement...

ALLER A.... | Index des Leçons | précédent : "Pieds de Page Adresses et Liens Emails" | suivant : "Tasser ou Couper" |

Ecrire le HTML : Leçon 13 : Blocs de Texte
©1994-2003 Maricopa Center for Learning and Instruction (MCLI)
Maricopa Community Colleges

La 'net connection (en anglais) à MCLI est Alan Levine
Suggestions en Français à Bernard Bensoussan

URL: http://www.mcli.dist.maricopa.edu/tut/tut13.html