Étant donné qu'une image est une représentation visuelle de notre pensée, elle permet d'échanger des informations mais aussi des sentiments. Toujours pratique dans la communication, l'image se retrouve extrêmement souvent sur des sites Internet, tel que celui-ci. Preuve:
Les images pouvant être lues sur le web
Les images admissibles sur Internet sont du type .gif .jpg .png ou bien .bmp (Les gif et jpeg sont certains d'être lues par les systèmes plus âgés comparativement aux .png et .bmp proposant des techniques de visualisation plus récentes.) Je valoriserais davantage les images enregistrer en jpeg pour les photos car elles permettent l'affichage de beaucoup plus de couleur que les gif. Cependant, pour des dessins les .gif sont beaucoup plus utiles parce qu'elles prennent moins d'espace virtuelle et on peut les animer.
Affichage d'image sur une page
La balise <img> permet l'affichage des images sur les fichiers HTML s'il est muni de l'attribut «src».
Bien sûr, l'image apparaîtra là où le code l'indique.
L'image de base, sans attribut additionnel, se place comme indiqué.
Par exemple: <img src=http://www.imagerun.info/img142/waj61difb6gx81kl.jpg>
Qui donnerait:
Pour centrer l'image sur la page, il faut ajouter les balises <center> et </center> Ces balises centrent dans la page tout ce qui se retrouve dedans.(textes, images, tableaux, etc.)
Par exemple: <center><img src=http://www.imagerun.info/img142/waj61difb6gx81kl.jpg></center>
Qui donnerait:
Ensuite, nous avons les ajouts d'attributs dans la balise image (<img>).
Parfois, nous avons besoin d'encadrer notre image selon différents contextes, afin d'ajouter des bordures aux images, nous pouvons donner l'attribut «border» équivalant à un nombre plus ou moins grand selon l'épaisseur désiré du contour.
Par exemple: <img src=http://www.imagerun.info/img142/waj61difb6gx81kl.jpg border=5>
Qui donnerait:
De plus, il est en notre possible de changer la grandeur de notre image au pixel près, en ajoutant les attributs «width» (Largeur) et «height» (Hauteur).
Par exemple: <img src=http://www.imagerun.info/img142/waj61difb6gx81kl.jpg height=302>
Qui donnerait:
Il est bien compris de pouvoir cumuler le tout.
Par exemple: <center><img src=http://www.imagerun.info/img142/waj61difb6gx81kl.jpg height=400 width=150 border=6></center>
Qui donnerait:
Aligner une image verticalement
En d'autres occasions, il peut être intéressant d'aligner verticalement des images par rapport au texte. Pour y parvenir, nous allons acquérir les balises <p> et </p> ainsi que l'attribut «align».
<p> indique le début d'un paragraphe pouvant y comprendre des tableaux, des images, etc. Et «align» indique la hauteur verticale d'où se situera l'image. Les choix sont: top, middle et bottom.
Par exemple: <p> L'image est <img src=http://www.imagerun.info/img142/27cdv0e9lv3c3hcr.jpg>entre le texte.</p>
Qui donnerait:
L'image est
entre le texte.
entre le texte.
Sinon:<p> L'image est <img src=http://www.imagerun.info/img142/27cdv0e9lv3c3hcr.jpg align=middle>entre le texte.</p>
Donnerait: L'image est
entre le texte.
entre le texte.Sinon:<p> L'image est <img src=http://www.imagerun.info/img142/27cdv0e9lv3c3hcr.jpg align=top>entre le texte.</p>
L'image est entre le texte.
Aligner une image horizontalement
Si l'attribut «align» a pour valeur «left», l'image sera placée à gauche. Si sa valeur est «right», elle sera située à droite du texte.
Par exemple:<p><img scr=http://www.imagerun.info/img142/tt3v8pgav37hp7xq.jpg align=left> Comme vous le constatez, tout le texte du paragraphe se retrouve exactement à droite de l'image situer, elle-même, à gauche.</p>
Qui donnerait:
entre le texte.Aligner une image horizontalement
Si l'attribut «align» a pour valeur «left», l'image sera placée à gauche. Si sa valeur est «right», elle sera située à droite du texte.
Par exemple:<p><img scr=http://www.imagerun.info/img142/tt3v8pgav37hp7xq.jpg align=left> Comme vous le constatez, tout le texte du paragraphe se retrouve exactement à droite de l'image situer, elle-même, à gauche.</p>
Qui donnerait:
Comme vous le constatez, tout le texte du paragraphe se retrouve exactement à droite de l'image situer, elle-même, à gauche.
Sinon: <p><img scr=http://www.imagerun.info/img142/tt3v8pgav37hp7xq.jpg align=right> Comme vous le constatez, tout le texte du paragraphe se retrouve exactement à gauche de l'image située, elle-même, à droite.</p>
Qui donnerait:
Qui donnerait:
Comme vous le constatez, tout le texte du paragraphe se retrouve exactement à gauche de l'image située, elle-même, à droite.
Marge de l'image
Les attributs «hspace» et «vspace» donne une marge aux images.
Par exemple: <p><img src=http://www.imagerun.info/img142/ipm5a44ac0bny962.jpg hspace=10 vspace=15 align=left>Il y a une<br> petite marge<br> autour de<br> l'image au<br> quelle on<br> l'applique.
Il y a une
Qui donnerait:
petite marge
autour de
l'image au
quelle on
l'applique.
Il est également possible d'ajouter un lien sur une image. Pour s'y prendre, nous devons mettre la balise de l'image entre celles d'un lien externe ou interne. Exemple: <a href="#nom-de-l-ancre"><img src="http://www.site-de-mon-image.png></a>
Voir articles sur les liens
Image en fond d’écran
Visuellement, les fonds d'écran de fichier ou de page HTML sont plus attirants lorsqu'ils comprennent des images ou des motifs. De ce fait, il est possible d'utiliser une image en arrière-plan au lieu d'une couleur unie. L'attribut est «background» qui doit s’équivaloir au lien de l'image.
Prenons l'image suivante de l'adresse: http://www.imagerun.info/img142/766elewyxfqn5f02.jpg
Il est également possible d'ajouter un lien sur une image. Pour s'y prendre, nous devons mettre la balise de l'image entre celles d'un lien externe ou interne. Exemple: <a href="#nom-de-l-ancre"><img src="http://www.site-de-mon-image.png></a>
Voir articles sur les liens
Image en fond d’écran
Visuellement, les fonds d'écran de fichier ou de page HTML sont plus attirants lorsqu'ils comprennent des images ou des motifs. De ce fait, il est possible d'utiliser une image en arrière-plan au lieu d'une couleur unie. L'attribut est «background» qui doit s’équivaloir au lien de l'image.
Prenons l'image suivante de l'adresse: http://www.imagerun.info/img142/766elewyxfqn5f02.jpg
Et puis, mettons-la comme fond en faisant tel qu'indiqué.
Par exemple: <body background="http://www.imagerun.info/img142/766elewyxfqn5f02.jpg">...</body>
Qui donnerait: une répétition de l'image sur toute la longueur et la hauteur de la page.
Nous devons ensuite donner une propriété aux images: soit fixe ou à défilement vertical. (bgproperties="fixed" ou bgproperties="scroll") qu'on ajoutera à la balise <body>, suite à l'attribut «background».
