Positionnement d'une image seule

Vous venez de voir que le tag IMG permet d'inclure une image et que l'attribut SRC indique au navigateur où aller la chercher. Vous allez pouvoir maintenant placer cette image en trois endroits différents et rappelez vous la dernière définition qui était :

Pour aligner l'image à gauche, ajouter le tag en rouge :

<IMG SRC="images/v167.gif" width=42 height=40 align=left >

Pour aligner l'image à droite, ajouter le tag en rouge :

<IMG SRC="images/v167.gif" width=42 height=40 align=right >

Pour centrer votre image, petite variante, ajouter les 2 tags rouges :

<CENTER> <IMG SRC="images/v167.gif" width=42 height=40> </CENTER>

Tous ces tags provoquent le même résultat qu'il s'agisse de texte, images, tableaux, lignes, paragraphes.

NOTA - Dans la nouvelle version 4.0 du langage HTML, l'utilisation de <CENTER> est déconseillée au profit du nouveau tag que je cite ci-après :

<DIV ALIGN=center> <IMG SRC="images/v167.gif" width=42 height=40> </DIV> <DIV ALIGN=left> ..texte... </DIV>

<DIV ALIGN=right> ... texte ... </DIV> sont également recommandés mais au préalable,je vous invite à lire la note en bas de page ------> HTML 4.0

Vous trouvez souvent de la documentation sur le HTML qui décrit directement le positionnement des images avec le texte.

Je ne critique pas, mais je préfère dissocier les deux sujets car vous pouvez souhaiter placer une image seule sans texte accolé ou avec une simple légende. Vous saisirez mieux ensuite la portée des nouveaux tags utilisés pour éventuellement placer du texte à coté ou autour d'une image.

Il existe le tag BORDER (bordure) qui permet d'encadrer une image d'un trait plus ou moins épais, mais qui est surtout employé pour signaler qu'une image sert de lien hypertexte (image cliquable) ou encore dans la présentation des tableaux.

Je vous en donne tout de même la formule, car rien n'interdit de l'utiliser comme décor d'une image :

 <IMG SRC="images/v167.gif" whidth=27 height=43 BORDER=3 >
 

  avec BORDER =3

  avec BORDER=6

Dans Internet Explorer le cadre lorqu'il dépasse BORDER 1 n'est plus symétrique.

Vous allez maintenant positionner une légende (je n'ais pas dit du texte, ce qui suppose plusieurs lignes), que vous allez placer par rapport au corps de votre image :

je suis votre cobaye, position basse.

<P ALIGN=left><IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=bottom>je suis votre cobaye, position basse.

  je suis votre cobaye, position médiane.

<P ALIGN=left><IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> je suis votre cobaye, position m&eacute;diane.

je suis votre cobaye, position haute.

<P ALIGN=left><IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=top> je suis votre cobaye, position haute.

vous pouvez aussi me placer à droite de la légende.

<P ALIGN=right> vous pouvez aussi me placer &agrave; droite de la l&eacute;gende. &nbsp; <IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=bottom>

"Il en va de même pour ALIGN=middle et ALIGN=top, en place de ALIGN=bottom".

Cette fois vous avez   centré la légende

<P ALIGN=center> Cette fois vous avez&nbsp;<IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> centr&eacute; la l&eacute;gende.

vous pouvez dans ce cas codifier aussi :

<CENTER> Cette fois vous avez&nbsp;<IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> centr&eacute; la l&eacute;gende </CENTER>

"Il en ira de même avec ALIGN=top et ALIGN=bottom en place de ALIGN=middle".

je suis votre cobaye, position médiane.
Mon texte débute juste la valeur d'un retour de ligne sous l'image.

- ce qui se codifie :

<P ALIGN=left><IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> je suis votre cobaye, position m&eacute;diane.<BR>Mon texte va ......

je suis votre cobaye, position médiane.

Mon texte débute cette fois avec la valeur d'un intervalle de ligne sous l'image.

- ce qui se codifie :

<P ALIGN=left><IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> je suis votre cobaye, position m&eacute;diane. </P> >Mon texte va ........

Cette fois vous avez  centré l'ensemble
avec une phrase juste dessous

-ce qui se codifie :

<CENTER>Cette fois vous avez&nbsp;<IMG SRC="images/v167.gif" WIDTH=42 HEIGHT=40 ALIGN=middle> centr&eacute; l'ensemble<BR>avec une phrase juste dessous</CENTER>

A tous les exemples donnés dans ce paragraphe 8.2, peut s'appliquer la nouvelle norme indiquée ci-dessus dans le cadre NOTA .

HTML 4.0
La guerre commerciale que se livrent Netscape Navigator/Communicator et Microsoft Internet Explorer n'a pas toujours que des effets bénéfiques pour les programmeurs.
Certains éléments retenus par l'un ne sont pas toujours compris et interprétés par l'autre, ce qui se traduit encore de nos jours par des signes cabalistiques en lieu et place. On les appelle des éléments propriétaires, et il est fortement déconseillé de les utiliser. Par exemple sur Nestcape le mot BRAVO clignotera si vous l'entourrez des tags <BLINK>......</BLINK>, mais sera sans effet avec Intenet Explorer !Actuellement le language de programmation utilisé couramment est le HTML 3.2, et depuis juillet 1997 le W3C, organisme chargé d'assurer la standardisation des technologies du Web, a mis en place le HTML 4.0 qui apporte quelques modifications et qu'il convient d'appliquer.
Mais tout le monde n'est pas equipé des navigateurs avec la version 4.x.x, et certains n'ont même pas l'intention d'en changer aussi longtemps qu'il leur sera possible. Dans ces conditions si vous voulez que vos pages puissent être interprétées par le maximum de visiteurs, n'allez pas plus vite que la musique, et j'ai conçu la programmation de mon site à partir de ce constat.
Toutefois depuis juin 2000, j'estime que les navigateurs version 4 étant largement majoritaires, on peut sans crainte utiliser des codes qui aident à justifier l'alignement du texte et parfois supprimer les liens soulignés pour une meilleur clarté de la page. Mais pensez aux malvoyants qui repèrent les liens avec ce soulignement---(retour)