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

20. Alignement Supplémentaire

Pourquoi toujours rester à gauche ?

... quand vous pouvez aller à droite ?

ou simplement trainer au milieu ?

Objectifs

Après cette leçon, vous pourrez :

Créer du texte aligné au centre de la page
Aligner des images et des blocs de texte
Ajouter un espacement défini autour des images
Créer du texte justifié à droite

Leçon

Note : Si vous n'avez pas les documents des leçons précédentes, téléchargez une copie maintenant. Vous pouvez également essayer de vous référer à la page de test pour voir si votre navigateur supporte les tags utilisés dans cette leçon.

Alignement de Texte

Au fur et à mesure que le web grandissait et grandissait et grandissait, il y avait le besoin d'un contrôle accru sur la mise en page des documents. Un des désirs était d'aligner du texte au milieu d'une page, plutôt que toujours justifié le long de la marge gauche.

Nous en arrivons de nouveau à une de ces fatiguantes situations où Netscape s'oppose au HTML "standard". Netscape présenta une autre extension des tags HTML -- <center>...</center> -- elle aligne au centre de la page web tout ce qui se trouve à l'intérieur des balises. Ca parait logique ? Eh bien, si vous discutez avec un puriste des languages de définition, l'alignement est un attribut. Le HTML plus général (et "standard") pour l'alignement au centre est une variation du tag <p> :

  <p align=center>
  bla bla bla
  <img src="fichier.gif"><br>
  bla bla
  </p>

Remarquez que, maintenant, il y a un tag </p> de fin de paragraphe. Cela devient important un peu plus tard quand on arrive aux Feuilles de Style et autres fonctionnalités de mise en page du HTML 4.0. De la même manière, si vous centrez plusieurs paragraphes, chacun devra être séparé par un <p align=center>...</p>

La majorité des autres navigateurs et les standards du HTML 3.2 supportent maintenant les tags <center>...</center> de Netscape. Souvenez-vous que, si un navigateur ne supporte pas une balise, il l'ignore tout simplement.

Pour voir l'effet d'alignement au centre, comparez :

Le Fromage dans l'Histoire

Le fromage était présent dans beaucoup d'évènements majeurs

Quand Magellan naviguait à travers les détroits, il mangeait du fromage. Quand les Troupes Alliées débarquèrent en Europe, il y avait également du fromage. Quand Neil Armstrong posa le pied sur la Lune, il venait de finir un petit en-cas de fromage.

retour à la page d'accueil du fromage

avec cet exemple qui centre le contenu :

Le Fromage dans l'Histoire

Le fromage était présent dans beaucoup d'évènements majeurs

retour à la page d'accueil du fromage

Nous allons maintenant modifier notre page d'accueil (index.html) pour utiliser le tag <center>...</center> dans la liste des leçons. Nous allons également faire d'autres changements pour améliorer son apparence.

Ouvrez le fichier index.html dans votre éditeur de texte.

Recherchez la section suivante :

  <B>Dans cette Leçon...</B>
  <ul>
  <i>
  <li><A HREF="intro.html">Introduction</A>
  <li><A HREF="term.html">Terminologie des Volcans</A>
  <li><A HREF="usa.html">Endroits Volcaniques aux USA</A>
  <li><A HREF="mars.html">Endroits Volcaniques sur Mars</A>
  <li><A HREF="proj.html">Projet de Recherche</A>
  </i>
  </ul>

et remplacez-la par le HTML suivant :

  <p align=center>
  <font size=+1>
  <i>
  <A HREF="intro.html">Introduction</A><br>
  <A HREF="term.html">Terminologie des Volcans</A><br>
  <A HREF="usa.html">Endroits Volcaniques aux USA</A><br>
  <A HREF="mars.html">Endroits Volcaniques sur Mars</A><br>
  <A HREF="proj.html">Projet de Recherche</A><br>
  </i>
  </font>
  </p>

Sauvegardez et Ouvrez dans votre navigateur web.

NOTE : Regardez attentivement les modifications que nous avons apportées. Cette section entière est incluse dans les tags <p align=center>..</p> d'alignement. La liste non ordonnée que nous avons construite dans la leçon 6 n'apparaitrait pas centrée -- les puces seraient décalées. Nous avons donc retiré la structure <ul><li>...<li>...</ul>. Les tags <br> à la fin de chaque ligne forceront le retour à la ligne.

Finalement, nous avons ajouté une balise <font>...</font> pour augmenter la taille du texte. (remarquez, ça peut ne pas marcher sur certains navigateurs web ; il parait que la fonte ne serait pas modifiée sur Internet Explorer version 4).

Si vous le souhaitez, vous pouvez également utiliser les tags <center>...</center> à la place de <p align=center>...</p>

Vous voudrez peut-être comparer votre fichier HTML avec un exemple du document-type à ce stade.

Tous les tags d'entête <hN>...</hN> peuvent être centrés en ajoutant l'attribut :

  <hN align=center>bla bla bla</hN>

Nous allons maintenant utiliser cet attribut pour centrer le titre de chaque page web :

Ouvrez tous vos autres fichiers HTML dans votre éditeur de texte.
Pour chacun, éditez le texte qui apparait en haut, dans les tags <h1> ou <h2>, en suivant cet exemple du fichier intro.html :
```
  <h2>Introduction</h2>
```
en
```
  <h2 align=center>Introduction</h2>
```
Sauvegardez et Rechargez dans votre navigateur web.

NOTE : Il existe aussi un attribut d'alignement pour le tag <hr> qui s'ajoute aux autres options que nous avons vues dans la leçon 19 "Simples Règles Horizontales". Quand vous spécifiez une largeur pour une règle, vous pouvez également préciser qu'elle doit être alignée à gauche ou à droite (par défaut, elle est centrée) :

<hr size=8 width=60% align=right> :

<hr size=8 width=60% align=left> :

Aligner des Images et du Texte

Dans la leçon 7a, nous avons vu comment inclure des images dans nos pages et comment ajouter une ligne de texte en haut, au milieu ou en bas de ces images. Pourtant, jusqu'à maintenant, nous ne pouvions pas avoir un bloc de texte à coté d'une image.

Avec l'attribut align dans le tag <img>, nous pouvons aligner l'image elle-même à gauche ou à droite de la page. Mais en plus, nous pouvons remplir les espaces vides "autour" de l'image avec du HTML. Le code pour le faire est le suivant :

  <img src="nom_de_fichier.gif" align=right>
  <img src="nom_de_fichier.gif" align=left>

Comparez ces deux exemples :

pas d'attribut align
align=bottom (défaut si non précisé)

Le Fromage dans l'Histoire

Le fromage était présent dans beaucoup d'évènements majeurs
Quand Magellan naviguait ý travers les dÈtroits, il mangeait du fromage. Quand les Troupes AlliÈes dÈbarquËrent en Europe, il y avait Ègalement du fromage. Quand Neil Armstrong posa le pied sur la Lune, il venait de finir un petit en-cas de fromage.

texte fluide
align=left

Le Fromage dans l'Histoire

Réduisez et agrandissez votre fenêtre de navigateur web pour voir comment cela affecte votre page et ses images/texte alignés.

Encore une chose. A certains moments, le texte et les autres éléments alignés avec l'image seront courts et vous voudrez forcer le texte suivant au-dessous de l'image. Il existe un attribut pour le tag <br> pour effacer l'alignement :

  <br clear=left>
  <br clear=right>
  <br clear=all>

qui "effacera" - clear - (ou désactivera) les alignements précédents définis dans les tags <img> . Nous vous suggérons de toujours utiliser ces tags car l'alignment varie en fonction de la police spécifiée dans le navigateur web du lecteur et la largeur de sa fenêtre.

Bordure autour d'une Image

Parfois, quand vous alignez l'image à gauche ou à droite, le texte entoure l'image d'un peu trop près. Vous pouvez ajouter une option au tag <img> pour insérer une bordure ou une marge autour de votre image :

  <img scr="mon_image.gif" alt="Mon Image" width=79 height=142 vspace=8 hspace=12>

Les options vspace et hspace créent une marge du nombre de pixels spécifiés au-dessus et en-dessous (vspace) ou sur la gauche et la droite (hspace) de l'image. Nous pourrions donc modifier notre exemple ci-dessus comme suit :

text fluide sans marge
align=left

Le Fromage dans l'Histoire

Le fromage Ètait prÈsent dans beaucoup d'ÈvËnements majeurs
Quand Magellan naviguait ý travers les dÈtroits, il mangeait du fromage. Quand les Troupes AlliÈes dÈbarquËrent en Europe, il y avait Ègalement du fromage. Quand Neil Armstrong posa le pied sur la Lune, il venait de finir un petit en-cas de fromage.

text fluide avec marge
align=left, vspace=10 hspace=18

Le Fromage dans l'Histoire

Ajout de l'Alignement d'Image à notre Site Volcan

Nous allons maintenant retourner à notre page index.html pour reformater l'écran d'accueil. L'image est peut-être très belle mais le fait d'avoir l'image suivie par le texte au-dessous prend trop de place. Nous allons utiliser l'alignement d'image/texte pour présenter le texte à coté de l'image.

Ouvrez le fichier index.html dans votre éditeur de texte.

Cherchez la partie :

  <img alt="Une Leçon sur le :"   src="../pictures/lava.gif">
  <p>
  <B><font size=+4 color=#FF66FF>W</font>
  <font size=+3 color=#DD0055>EB VOLCAN</font></B>
  <BLOCKQUOTE>
  <B><I><font size=+1>"La Nature se déchaine sauvagement,
  menaçant la Terre"</font></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>

  Dans cette leçon, vous vous servirez d'Internet 
  pour rechercher de l'information sur les volcans et rédiger 
  un rapport de vos résultats.

et remplacez-là par :

  <img alt="Une Leçon sur le :" src="../pictures/lava.gif"   align=left>
  <B><I><font size=+1>
  "La Nature se déchaine sauvagement,
  menaçant la Terre"
  </font></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.
  <p>
  <B><font size=+4 color=#FF66FF>W</font>
  <font size=+3 color=#DD0055>EB VOLCAN</font></B>
  <p>
  Dans cette leçon, vous vous servirez d'Internet 
  pour rechercher de l'information sur les volcans et rédiger 
  un rapport de vos résultats.
  <br clear=left>

Sauvegardez et Rechargez dans votre navigateur web.

NOTE : Tout ce qui se trouve entre le tag <img... align=left> et le tag <br clear=left> sera placé à coté de l'image -- l'image est alignée à gauche et le reste du HTML remplit l'espace vide.

Nous avons également déplacé la citation en haut pour attirer l'attention. Avec cette nouvelle présentation, le tag <blockquote> ne sert plus à rien, nous l'avons donc supprimé.

Vous voudrez peut-être comparer votre fichier HTML avec un exemple du document-type à ce stade.

Justification/Alignement de Texte

Nous allons ajouter une balise d'alignement supplémentaire, le tag de "division" <div>...</div>, présenté dans le HTML 3.0. Tout le texte à l'intérieur du tag est justifié suivant l'attribut align :

  <div align=left>...</div>
  <div align=right>...</div>
  <div align=center>...</div>

Notez que l'attribut center réalise le même effet que le tag <center>...</center> de Netscape.

Nous allons maintenant utiliser cette balise pour aligner la citation de notre page d'accueil sur la marge droite de la page :

Ouvrez le fichier index.html dans votre éditeur de texte.

Ajoutez les tags <div> et </div> comme indiqué ci-dessous :

  <div align=right>
  <B><I><font size=+1>
  "La Nature se déchaine sauvagement,
  menaçant la Terre"
  </font></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.
  <p>
  <B><font size=+4 color=#FF66FF>W</font>
  <font size=+3 color=#DD0055>EB VOLCAN</font></B>
  </div>

Sauvegardez et Rechargez dans votre navigateur web.

Vérifiez Votre Travail

Comparez vos pages web avec cet exemple du document-type. Si vos pages sont différentes de l'exemple ou que les liens hypertexte ne fonctionnent pas correctement, vérifiez le texte que vous avez tapé dans l'éditeur de texte.

Révision

Revoyons les grandes lignes de cette leçon :

Comment centrez-vous certaines parties de votre page web ?
Quel est le moyen correct d'aligner une image sur le coté droit d'une page web ?
Comment insérer 10 pixels de marge entre une image alignée à gauche et le texte qui l'entoure ?
Comment créer du texte justifié à droite ?

Travail Indépendant

Essayez de centrer ou de justifier votre texte à droite.

A Suivre....

Posons une

jolie table...

ALLER A.... | Index des Leçons | précédent : "Simples Règles Horizontales" | suivant : "Tables" |

Ecrire le HTML : Leçon 20 : Alignement Supplémentaire
©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/tut20.html