Guide pratique et progressif du langage HTML

Placement

C'est pas marqué la banque ici !

Cette page n'est pas destinée à vous apprendre comment venir planquer votre magot en Suisse (pour cela voir ce guide), mais comment placer des textes ou des images dans n'importe quel point de vos pages web.

Placement horizontal

Du texte, au deux tiers de la page:

Zone facultative	2/3 ->\|
(...)	Ce que vous voulez ici

<TABLE WIDTH="66%">
  <TR>
    <TD ALIGN="LEFT">Zone facultative</TD>
    <TD ALIGN="RIGHT">2/3 ->|</TD>
  </TR>
  <TR>
    <TD ALIGN="LEFT">(...)</TD>
    <TD ALIGN="RIGHT">Ce que vous voulez ici</TD>
  </TR>
</TABLE>

Bien sûr chaque cellule aurait tout aussi bien pu contenir une ou plusieurs images, des liens, plusieurs lignes de texte, ou un mélange de tout ça.

On peut aussi utiliser une table à deux colonnes (ou plus) et régler la taille de la première (et des autres) avec l'option <TD WIDTH="xxx">.

Placement vertical

L'alignement vertical est tout aussi facile depuis le HTML 3.2 avec <TD HEIGHT="xxx"> et les options TOP, MIDDLE, BOTTOM et BASELINE, on peut même théoriquement utiliser les "%", 100% étant la taille verticale de la fenêtre du navigateur.
Exemple:

Haut	Bas (+50 pixels)

<TABLE>
  <TR>
    <TD HEIGHT="50" VALIGN="TOP">Haut</TD>
    <TD HEIGHT="50" VALIGN="BOTTOM">Bas (+50 pixels)</TD>
  </TR>
</TABLE>

Les images

Vous avez déjà eu beaucoup d'exemples d'encolonnage de texte dans ce guide aussi n'y reviendrai-je plus, mais parlons un peu maintenant de mise en page d'images, mise en page un peu plus délicate, car là on ne peut pas dépasser une certaine largeur d'écran sous peine de voir passer des images les unes sous les autres. La plus petite résolution usuelle est de 640x480 pixels, avec les bords de gauche et de droite de la fenêtre et un peu d'espace, il vaut mieux ne pas trop dépasser les 600 pixels si l'on ne souhaite pas avoir au moins une image qui se dérobe (ou une barre de scrolling horizontal qui apparait si on impose de force une largeur de page). Pour éviter cela, il y a au moins deux possibilités intelligentes.

Tir groupé

Centrer bêtement les images (la méthode courante):

<CENTER>
<IMG ALT="Image 1" SRC="pics/aide/i1.gif">
<IMG ALT="Image 2" SRC="pics/aide/i2.gif">
<IMG ALT="Image 3" SRC="pics/aide/i3.gif">
<BR>
<IMG ALT="Image 4" SRC="pics/aide/i4.gif">
<IMG ALT="Image 5" SRC="pics/aide/i5.gif">
<IMG ALT="Image 6" SRC="pics/aide/i6.gif">
</CENTER>

Les images sont bien centrées, mais elles sont collées ensemble indépendament de l'espace restant à gauche et à droite, et de leur taille respective.

Espaces répartis

Centrer bêtement les images à l'intérieur d'une cellule de table ocuppant les 100%:

Changez la taille de la fenêtre pour observer ce qui se passe...

<TABLE WIDTH="100%" ALIGN="CENTER">
  <TR ALIGN="CENTER" VALIGN="MIDDLE">
    <TD><IMG ALT="Image 1" SRC="pics/aide/i1.gif"></TD>
    <TD><IMG ALT="Image 2" SRC="pics/aide/i2.gif"></TD>
    <TD><IMG ALT="Image 3" SRC="pics/aide/i3.gif"></TD>
  </TR><TR ALIGN="CENTER" VALIGN="MIDDLE">
    <TD><IMG ALT="Image 4" SRC="pics/aide/i4.gif"></TD>
    <TD><IMG ALT="Image 5" SRC="pics/aide/i5.gif"></TD>
    <TD><IMG ALT="Image 6" SRC="pics/aide/i6.gif"></TD>
  </TR>
</TABLE>

Les images sont bien centrées, mais elles sont séparées uniquement grâce à l'astuce de déclaration de la taille de la table (100%), sinon, le résultat serais le même que pour le centrage bête.

Contrôle total

Jouer sur l'espacement ET centrer:

Changez la taille de la fenêtre pour observer ce qui se passe...

<TABLE ALIGN="CENTER" WIDTH="100%">
  <TR ALIGN="CENTER" VALIGN="MIDDLE">
    <TD ALIGN="CENTER"><IMG ALT="Image 1" SRC="pics/aide/i1.gif"></TD>
    <TD ALIGN="CENTER"><IMG ALT="Image 2" SRC="pics/aide/i2.gif"></TD>
    <TD ALIGN="CENTER"><IMG ALT="Image 3" SRC="pics/aide/i3.gif"></TD>
  </TR>
  <TR ALIGN="CENTER" VALIGN="MIDDLE">
    <TD ALIGN="CENTER"><IMG ALT="Image 4" SRC="pics/aide/i4.gif"></TD>
    <TD ALIGN="CENTER"><IMG ALT="Image 5" SRC="pics/aide/i5.gif"></TD>
    <TD ALIGN="CENTER"><IMG ALT="Image 6" SRC="pics/aide/i6.gif"></TD>
  </TR>
</TABLE>

Ici, le contrôle est total, même si on ne voit pas bien la différence avec l'exemple précédent (car les images on presque toutes la même taille et c'est un cas particulier), on peut spécifier les tailles de chaque cellule en pourcent pour jouer sur les positions respectives des images, ou encore aligner à gauche ou à droite celles du bord, bref la solution de luxe si la taille des images est trop différente.

Autres cas

Ceux qui sont en 640 pixels de large ne verront pas de différence entre les trois méthodes, mais pour les autres c'est quand même moins moche, surtout avec un mélange d'images transparentes et du texte, comme nous le verrons ci-dessous.

600 pixels d'images sur la même ligne horizontale est un cas limite et vous pouvez l'éviter avec l'avantage que donne le texte dont le principal inconvénient jusqu'à présent à été une taille inconnue et variable, nous allons maintenant pouvoir tirer partit de ce défaut en éliminant (ou en réduisant très fortement) les blancs entre images grâce à son elasticité.

Tir groupé texte et images

Voici maintenant un système mixte avec centrage bête:

	Ici, il y a encore moins de problèmes, car le texte permet
	d'absorber très facilement toute variation de largeur.

Et je vous épargne, la limitation stupide de la largeur de la page à 600 pixels pour que vous ne puissiez pas ici percevoir toute l'horreur de cette méthode que quelqu'un de gentil qualifierait de "minimaliste" et que moi j'appelle "foutage de gueule de fainéant".

Espaces répartis texte et images

Et un autre avec la table à 100%:

	Ici, il y a encore moins de problèmes, car le texte permet
	d'absorber très facilement toute variation de largeur.

Changez la taille de la fenêtre pour observer ce qui se passe...

Comme pour les images seules, les différentes parties sont plus aérées, mais la limite "minimum" peut encore se réduire en juxtaposant les mots les uns sous les autres (à l'extrême bien entendu).

Moins moche et plus concret

Le contrôle total est aussi applicable avec du texte et des images, mais comme je pense que vous avez compris et que comme mes images et mon style sont ignobles, je suis allé piquer sans vergogne (et sans autorisation) une belle page chez un constructeur nippon (ni mauvais), que j'ai légèrement modifiée, je suis désolé pour la pub involontaire, ne regardez que la mise en page, là aussi vous pouvez largement changer la dimension de votre écran et la largeur de la fenêtre et observer la remarquable immunité de cette page à cet effet.

Sujet (enfin) épuisé !

Et voilà, vous savez maintenant tout de la mise en page et du placement en HTML, vous pouvez enfin retourner paufiner vos pages et leur donner le look que vous souhaitez.

Retour Suite

Dernière mise à jour de cette page: 04/09/2001, visiteurs:

depuis le 6 avril 2002