Cette leçon décrit les méthodes permettant d'inclure des images dans la conception de pages HTML, mais n'aborde pas les procédés destinés à la fabrication ou au traitement d'images. Cet aspect sera abordé plus tard au cours de nos leçons.
Les images en ligne :
On entend par image en ligne, une image dont l'affichage se fait automatiquement dans la fenêtre du browser lors du transfert de la page HTML. Cet affichage est quasi simultané avec l'apparition du texte de la page ; l'illustration trouve sa place dans le document HTML dans les mêmes conditions qu'une photo sur une page imprimée.
Il existe plusieurs façons d'enregistrer une image numérique pour la stocker sur un support informatique. Comme tous les browsers graphiques doivent pouvoir comprendre le format dans lequel a été encodée l'image, le format GIF (Graphics Interchange Format) s'est imposé comme standard. Il s'agit d'un format compressé, conçu pour optimiser les temps de téléchargement et permettant le traitement d'images en couleurs ou en niveaux de gris. Ce format n'autorise pas de donner plus de 256 couleurs à un point de l'image (pixels). D'autres formats comme XBM ou JPEG peuvent être utilisés. Employer le format GIF ou JPEG dans des images en ligne, c'est s'assurer que les Internautes les recevront correctement quel que soit le browser utilisé.
<IMG> :
C'est la balise permettant d'inclure une image. Elle sera toujours complétée par l'attribut SRC, qui permet de donner l'adresse du fichier graphique contenant l'image :
Dans l'exemple qui suit, le répertoire images se situe au premier niveau par rapport à la racine du serveur, et l'image cheval.gif se trouve dans le sous-répertoire animaux.
Exemple :
<img src="/images/animaux/cheval.gif">
En toute logique, l'image que l'on propose dans une page HTML d'un serveur devrait toujours résider sur ce serveur.
La valeur de l'attribut SRC permet cependant de spécifier une URL, si bien qu'il est tout à fait correct de trouver des images définies dans une URL comme suit :
L'URL peut être exécutée, par exemple, sur le serveur http://www.business.com, ces lignes provoqueront une connexion au serveur comme ci-après :TOTO, et les images s'afficheront bien ; cet affichage est néanmoins subordonné à la disponibilité du serveur http://www.business.com et à la qualité de la transmission.
Une image peut être aussi insérée au fil du texte, mais si l'on désire affecter un style particulier au texte qui se trouve sur la même ligne que l'image, il faut définir la balise de style avant de définir l'image si la balise est de type <Hn>. En effet, la balise de type <H> provoque un retour à la ligne, l'inverse de l'effet souhaité. Si la balise est une balise de style physique comme <i>, il n'y a pas de règle à respecter.
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Les images en ligne </TITLE>
</HEAD>
<BODY>
<H3> Carte mère fabriquée <img border="0" src="images/Carte_Mere.gif" width="700" height="516"> <i> en 2005 par Microsoft </i></H3>
La balise <IMG> admet un attribut de présentation permettant de situer l'image par rapport à la ligne de texte courante. Il s'agit de l'attribut ALIGN, dont les valeurs peuvent être les suivantes :
ALIGN=TOP
pour aligner le haut de l'image sur la ligne courante,
ALIGN=MIDDLE
pour aligner le milieu de l'image sur la ligne courante,
ALIGN=BOTTOM
pour aligner le bas de l'image sur la ligne courante.
D'autres attributs, LETF et RIGHT permettent au texte de couler autour de l'image, avec un réglage de l'espace vertical VSPACE et un réglage de l'espace horizontal HSPACE.
Il est aussi possible également de redéfinir la taille de l'image à l'aide des attributs WIDTH (largeur) et HEIGHT (hauteur), mais il faut savoir
que, d'agrandir ou diminuer une image peut nuire à sa qualité de cette dernière.
Ces deux attributs qu'on vient d'évoquer sont aussi très intéressants, pour obtenir, à partir d'un seul pixel coloré, des rectangles de différentes largeur et hauteur.
On peut ainsi calculer et réaliser des histogrammes, en utilisant une image constituée d'un seul pixel que l'on redimensionne !
Enfin, il est possible d'affecter l'image d'un cadre noir avec l'attribut BORDER. Pour tous ces attributs, la valeur s'exprime en points.
Exemple d'utilisation :
<HTML>
<HEAD>
<TITLE> Les images en ligne </TITLE>
</HEAD>
<BODY>
<H2> Image Originale </H2>
<img src="images/Daniel.jpg">
<H3> Image réduite, alignée et encadrée à l'aide d'extensions de certains navigateurs </H3>
<p> <font face="Arial" size="3" color="#000000"> Nous mettons quelques phrases de nos leçons d'électroniques afin de pouvoir démontrer l'exemple comme ci-après : </font> </p>
<p> <font face="Arial" size="3" color="#000000"> Tout au long de ce développement, on aura souvent recours à des figures pour représenter d'une façon analogique les phénomènes qui se produisent dans les semi-conducteurs. Le recours à ces figures est utile toutes les fois qu'il n'est pas possible de visualiser directement le phénom`ne à &eamp;acute;tudier. Même si cette représentation est toujours approximative et ne reproduit pas fidèlement le phénomène, elle peut toutefois, d'une certaine façon et pour un temps donné, représenter du mieux possible les phénomènes connus. </font> </p>
<p> <font face="Arial" size="3" color="#000000"> Le courant parcourant ce circuit est toujours dirigé, selon le sens conventionnel, du pôle positif au pôle négatif de la pile : il entre dans la résistance par l'extrémité repérée à l'aide de la lettre A et sort par celle repérée à l'aide de lettre B. Dans un tel circuit, la tension engendrant le courant continu est appelé tension continue. Il existe par contre d'autres types de générateurs, lesquels délivrent un courant, qui, par ses caractéristiques est appelé courant alternatif.
Pour comprendre la différence entre ces deux types de courant, il est nécessaire tout d'abord de se référer à la figure 1-b. Celle-ci représente le même circuit électrique que la figure 1-a, à la différence près qu'il est alimenté par un générateur de courant alternatif dont nous pouvons noter au passage le symbole graphique.
Dans cette figure 1-b, les polarités du générateur de courant alternatif, indiquées par les signes «+» et «-» sont identiques aux polarités apparaissant dans le circuit de la figure 1-a. En conséquence, dans ces deux cas de figure, le courant circule dans le même sens traversant la résistance de A vers B.
Cependant, dans le cas d'un générateur alternatif, le courant ne circule dans un sens que durant un temps très bref, au bout duquel il s'inverse. Nous sommes alors en présence de la figure 1-c où les polarités du générateur sont inversées et où le courant traverse la résistance de B vers A. Même dans ce nouveau sens de circulation, le courant ne persiste que durant un temps très bref pour ensuite revenir dans le cas de la figure 1-b et ainsi de suite.
Nous pouvons dire que le courant change périodiquement son sens de circulation, autrement dit qu'il parcourt la résistance alternativement de A vers B et de B vers A durant des périodes de temps très brèves. de cette explication, nous comprenons l'origine de l'appellation du courant alternatif.
L'intensité d'un courant alternatif varie constamment, dans le cas de la figure 1-b elle augmente de zéro jusqu'à une valeur maximale déterminée par le générateur et la résistance, puis diminue pour revenir à zéro. A l'instant où l'intensité est nulle, le générateur inverse ses polarités, nous sommes dans le cas de la figure 1-c, l'intensité augmente à nouveau jusqu'au même maximum que précédemment et redescend ensuite à zéro. A cet instant, il se reproduit un changement de polarités et le cycle recommence.</font> </p>
<p> <font face="Arial" size="3" color="#000000"> Du moment que la résistance est fixe, les variations d'intensité du courant I ne peuvent être dues qu'à des variations analogues de la tension fournie par le générateur. Cette tension possède les mêmes caractéristiques que le courant qu'elle fournit et est appelée tension alternative.</font> </p>
<br><br><br> <!-- Ici, nous avons mis trois retours volontairement pour laisser plusieurs espace dans le Navigateur -->
On peut évidemment justifier les phrases côté droit du browser.
Comme vous eûtes certainement pu vous apercevoir jusqu'à présent, que vous pouvez faire copier / coller, dans votre logiciel favoris ou du bloc note à partir de tous nos exemples sus évoqués.
Nous savons que l'attribut <ALT> accompagné du texte de substitution remplit cette fonction, en cas d'absence d'images par certains browsers :
<IMG SRC="photo.gif" ALT="Photo du cheval">
En cas de non affichage de la photo, l'Internaute trouvera ce texte, qui pourra aider à une meilleure compréhension du document.
Les images en guise d'ancres :
On peut tout à fait remplacer le texte d'une ancre par une balise définissant une image.
On verra par la suite de nos études concernant le JavaScript Image() . . .
Tout comme les liens, les images sont rangées dans un tableau et sont accessibles grâce au mot clé images.
document.images[i] référence les images d'une page HTML avec i variant de 0 à document.images.length-1, document.images.length donnant le nombre d'images contenues dans la page.
L'objet image possède quatre propriétés :
SRC définit l'adresse (l'URL) du fichier contenant l'image,
HEIGHT retourne la hauteur de l'image en pixels (propriété non modifiable),
WIDTH retourne la largeur de l'image (propriété non modifiable),
COMPLETE renseigne sur l'état de l'affichage de l'image (à la valeur false (faux) tant que l'image n'est pas complètement affichée, true ensuite "vraie").
Exemple de modification d'image :
Lorsque la souris passe sur le chiffre 1, il est aussitôt remplacé par le chiffre 2 ; le chiffre 1 revient lorsque la souris sort de l'image.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page
