Créée le, 19/06/2015

 Mise à jour le, 29/06/2020

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes     Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Inclusions d'Imageries HTML :


Les Inclusions d'Imageries HTML :


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 :

<IMG SRC= "images/repertoire/sous_repertoire/nom_du_fichier_graphique">

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 :

<img src="http://www.electronique-et-informatique.fr/images/animaux/cheval.gif">

Ou encore comme ci-après :

<img src="ftp://ftp.electronique-et-informatique.fr/publicite/images/cadeaux/surprises.gif">

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&egrave;re fabriqu&eacute;e <img border="0" src="images/Carte_Mere.gif" width="700" height="516"> <i> en 2005 par Microsoft </i></H3>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Alignement des images :

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.

Exemple d'utilisation :

<HTML>

     <HEAD>

                    <TITLE> Les images en ligne : Alignement </TITLE>

     </HEAD>

          <BODY>

               <H2> Voici <img border="0" src="images/Enfant_3.jpg" width="100" height="100" align="texttop"> quatre images <img border="0" src="images/Enfant_4.jpg" width="100" height="100" align="middle"> align&eacute;es <img border="0" src="images/Enfant_7.jpg" align="bottom"> diff&eacute;remment. <img border="0" src="images/Enfant_6.jpg" width="100" height="100" align="absmiddle"> </H2>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

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&eacute;duite, align&eacute;e et encadr&eacute;e &agrave; l'aide d'extensions de certains navigateurs </H3>

                        <img src="images/Daniel.jpg" align="right" hspace="20" vspace="30" width="350" height="300" border="8" >

                <p> <font face="Arial" size="3" color="#000000"> Nous mettons quelques phrases de nos le&ccedil;ons d'&eacute;lectroniques afin de pouvoir d&eacute;montrer l'exemple comme ci-apr&egrave;s : </font> </p>

                <p> <font face="Arial" size="3" color="#000000"> Tout au long de ce d&eacute;veloppement, on aura souvent recours &agrave; des figures pour repr&eacute;senter d'une fa&ccedil;on analogique les ph&eacute;nom&egrave;nes qui se produisent dans les semi-conducteurs. Le recours &agrave; ces figures est utile toutes les fois qu'il n'est pas possible de visualiser directement le ph&eacute;nom&grave;ne &agrave; &eamp;acute;tudier. M&ecirc;me si cette repr&eacute;sentation est toujours approximative et ne reproduit pas fid&egrave;lement le ph&eacute;nom&egrave;ne, elle peut toutefois, d'une certaine fa&ccedil;on et pour un temps donn&eacute;, repr&eacute;senter du mieux possible les ph&eacute;nom&egrave;nes connus. </font> </p>

<p> <font face="Arial" size="3" color="#000000"> Le courant parcourant ce circuit est toujours dirig&eacute;, selon le sens conventionnel, du p&ocirc;le positif au p&ocirc;le n&eacute;gatif de la pile : il entre dans la r&eacute;sistance par l'extr&eacute;mit&eacute; rep&eacute;r&eacute;e &agrave; l'aide de la lettre A et sort par celle rep&eacute;r&eacute;e &agrave; l'aide de lettre B. Dans un tel circuit, la tension engendrant le courant continu est appel&eacute; tension continue. Il existe par contre d'autres types de g&eacute;n&eacute;rateurs, lesquels d&eacute;livrent un courant, qui, par ses caract&eacute;ristiques est appel&eacute; courant alternatif. Pour comprendre la diff&eacute;rence entre ces deux types de courant, il est n&eacute;cessaire tout d'abord de se r&eacute;f&eacute;rer &agrave; la figure 1-b. Celle-ci repr&eacute;sente le m&ecirc;me circuit &eacute;lectrique que la figure 1-a, &agrave; la diff&eacute;rence pr&egrave;s qu'il est aliment&eacute; par un g&eacute;n&eacute;rateur de courant alternatif dont nous pouvons noter au passage le symbole graphique. Dans cette figure 1-b, les polarit&eacute;s du g&eacute;n&eacute;rateur de courant alternatif, indiqu&eacute;es par les signes &laquo;+&raquo; et &laquo;-&raquo; sont identiques aux polarit&eacute;s apparaissant dans le circuit de la figure 1-a. En cons&eacute;quence, dans ces deux cas de figure, le courant circule dans le m&ecirc;me sens traversant la r&eacute;sistance de A vers B. Cependant, dans le cas d'un g&eacute;n&eacute;rateur alternatif, le courant ne circule dans un sens que durant un temps tr&egrave;s bref, au bout duquel il s'inverse. Nous sommes alors en pr&eacute;sence de la figure 1-c o&ugrave; les polarit&eacute;s du g&eacute;n&eacute;rateur sont invers&eacute;es et o&ugrave; le courant traverse la r&eacute;sistance de B vers A. M&ecirc;me dans ce nouveau sens de circulation, le courant ne persiste que durant un temps tr&egrave;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&eacute;riodiquement son sens de circulation, autrement dit qu'il parcourt la r&eacute;sistance alternativement de A vers B et de B vers A durant des p&eacute;riodes de temps tr&egrave;s br&egrave;ves. de cette explication, nous comprenons l'origine de l'appellation du courant alternatif. L'intensit&eacute; d'un courant alternatif varie constamment, dans le cas de la figure 1-b elle augmente de z&eacute;ro jusqu'&agrave; une valeur maximale d&eacute;termin&eacute;e par le g&eacute;n&eacute;rateur et la r&eacute;sistance, puis diminue pour revenir &agrave; z&eacute;ro. A l'instant o&ugrave; l'intensit&eacute; est nulle, le g&eacute;n&eacute;rateur inverse ses polarit&eacute;s, nous sommes dans le cas de la figure 1-c, l'intensit&eacute; augmente &agrave; nouveau jusqu'au m&ecirc;me maximum que pr&eacute;c&eacute;demment et redescend ensuite &agrave; z&eacute;ro. A cet instant, il se reproduit un changement de polarit&eacute;s et le cycle recommence.</font> </p>

<p> <font face="Arial" size="3" color="#000000"> Du moment que la r&eacute;sistance est fixe, les variations d'intensit&eacute; du courant I ne peuvent &ecirc;tre dues qu'&agrave; des variations analogues de la tension fournie par le g&eacute;n&eacute;rateur. Cette tension poss&egrave;de les m&ecirc;mes caract&eacute;ristiques que le courant qu'elle fournit et est appel&eacute;e tension alternative.</font> </p>

<br><br><br> <!-- Ici, nous avons mis trois retours volontairement pour laisser plusieurs espace dans le Navigateur -->

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

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.

<A HREF="Photo.jpg"> <IMG SRC="Photo.mini.gif"> </A>

Dans ce cas, l'image est encadrée par un filet de couleur pour indiquer qu'il s'agit d'un lien hypertexte sur lequel on peut cliquer.

C'est cette méthode qui est utilisée pour placer des boutons de navigation dans les pages HTML.

Exemple d'utilisation :

<HTML>

     <HEAD>

                    <TITLE> Les images </TITLE>

     </HEAD>

          <BODY>

                <p> <font face="Arial" size="3" color="#000000"><b>E</b>n cliquant sur l'imagette, vous obtiendrez une vue agrandie du tableau, <i> (format JPEG) </i> </font></p><p>

                <a href="images/Tableau.jpg">

                <img src="images/Tableau_small.jpg"> </a> <p> <font face="Arial" size="3" color="#000000">

                <b>V</b>ous pouvez aussi

                <a href="images/Tableau.jpg"> cliquer ici</a> </font> </p> <p><hr><br>

                <a href="Page_1.html"> <img src="images/Gauche.png" title="Page pr&eacute;c&eacute;dente"></a>

                <a href="Home.html"> <img src="images/Haut.png" title="Sommaire"></a>

                <a href="Page_2.html"> <img src="images/Droit.png" title="Page suivante"></a> <h4>

                 | <a href="Page_1.html"> Page pr&eacute;c&eacute;dente</a>

                 | <a href="Home.html"> Sommaire</a>

                 | <a href="Page_2.html"> Page suivante</a> | </h4>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Les images et JavaScript :

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.

Exemple d'utilisation :

<HTML>

     <HEAD>

                    <TITLE> Les images 1 et 2 </TITLE>

             <SCRIPT>

             un = new Image(); deux = new Image();

             un.src = "images/Un.gif"; deux.src = "images/Deux.gif";

             </SCRIPT>

     </HEAD>

          <BODY BGCOLOR="#FFFFFF">

             <A HREF=http://www.electronique-et-informatique.fr/Electronique-et-Informatique/index.htm

             onMouseOver="document.images[0].src=deux.src"

             onMouseOut="document.images[0].src=un.src">

             <IMG SRC="images/Un.gif" border="0"> </A>

          </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

On trouvera dans l'exemple de la Réalisation d'une carte cliquable animée, au cours de nos leçons, une autre utilisation de l'objet image.

Et enfin, nous allons résumer cette septième leçon que nous espérâmes utiles dans vos futurs projets.

On peut inclure deux types d'images dans un document HTML :

  • Les images en ligne sont celles qui apparaissent dans la page HTML, elles sont généralement au format GIF ou JPEG ou même voire PNG dans certains cas.

La balise pour inclure une image en ligne est la suivante :

<IMG SRC="URL_DU_FICHIER.GIF">

D'autres attributs sont possibles :

ALT = texte pour spécifier un texte de substitution pour les browsers non graphiques "qui sont rare actuellement" mais, cela peut arriver.

ALIGN = TOP ou BOTTOM ou MIDDLE pour aligner l'image sur une ligne de texte par exemple.

D'autres attributs permettent de redimensionner et de faire flotter une image dans un texte :

ALIGN = LEFT ou RIGHT font flotter l'image soit à gauche, soit à droite du texte.

WIDTH = L et HEIGHT = H, d'où L et H représentent la largeur et la hauteur de l'image en pixels.

BORDER = n, n représente l'épaisseur du trait bordant de l'image ; la valeur 0 supprime la bordure.

  • Les images externes sont des fichiers graphiques pointés par des liens hypertexte :

<A HREF="URL_DU_FICHIER.GIF">ANCRE</A>

<A HREF="URL_DU_FICHIER.JPG">ANCRE</A>

  • Propriétés JavaScript :

Les images sont stockées dans le tableau images. Le nombre d'images du document est : DOCUMENT.IMAGES.LENGTH

SRC : URL DU FICHIER IMAGE.

HEIGHT et WIDTH : donnent les dimensions de l'image.

COMPLETE : Affichage complet (true) ou non (false).

Fin de cette septième leçon, la prochaine sera consacrée à la "Mise en page" concernant le langage HTML.










Nombre de pages vues, à partir de cette date : le 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 29 JUIN 2020.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en JUIN 2020.