HTML - Images

Les images sont très importantes dans une page internet. Il est donc important de les utiliser de la bonne façon. Insérez des images en utilisant la balise <img/>.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  />

Demo

HTML - img src

"src" est un raccourci pour "source". Cet attribut est utilisé pour indiquer l'emplacement de l'image. Comme expliqué dans le tutoriel à propos des liens vous pouvez utiliser n'importe quel URL pour diriger vers le ficher.

Vous pouvez aussi indiquer l'URL complet. Par exemple:

htmlscr="http://www.tutorialehtml.com/assets_tutorials/img/image.jpg"

Utiliser l'URL complet n'est pas recommandé car si vous changez de domaine vous devrez également changer les adresses de tous les fichiers images. Ou si l'image est stockée sur un autre domaine utilisé simplement scr="http://www.domain.com/image.jpg".

Le fait de stocker l'image sur un serveur différent, présente un gros avantage si l'espace fourni pour votre domaine est limité.

HTML - L'attribut "alternative" pour les images

L'attribut "alt" est utilisé pour montrer du texte au lieu de l'image si votre navigateur ne peut pas afficher l'image ou lorsqu'un utilisateur à l'option "ShowImage" désélectionnée.

html<img alt="html image example" src="/assets_tutorials/img/image.jpg" />

Demo

HTML - la hauteur et la largeur d'une image

Pour déterminer la hauteur et la largeur d'une image on utilise les attributs "height" et "width". Logique, non!

html<img alt="html image example" src="/assets_tutorials/img/image.jpg"  width="120" height="75" />

Demo

HTML - alignement horizontal et vertical d'une image

Pour cela nous utiliserons les attributs align et valign. Les options offertes par ces attributs sont:

1. Align (horizontal)

• right
• left
• center

2. Valign (vertical)

• top
• bottom
• center

html<img alt="" align="right" src="/assets_tutorials/img/image.jpg" /> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Demo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HTML - Utiliser des images comme liens

Ceci est simplement une introduction, nous parlerons de cela davantage dans le prochain tutoriel. Les images sont très utiles en tant que liens et peuvent être formées comme suivant

html<a href="http://www.tutorialehtml.com/" title="Lien HTML exemple image">
	<img alt="image html exemple" src="/assets_tutorials/img/image.jpg" width="120" height="75" />
</a>

Demo

L'image ci-dessus enverra à la page d'accueil. Vous pouvez la changer pour votre page de démarrage et ici vous avez une image avec un lien vers votre page de démarrage

HTML - Vignettes

Des vignettes sont des versions miniatures (moins de kilobytes) des images qui ont une bien meilleure qualité. Pour créer une vignette, sauvegardez l'image dans une qualité plus basse que l'original. Ensuite liez cette petite image à l'image originale de haute qualité.

html<a href="/assets_tutorials/img/image.jpg"  title="Exemple de lien HTML vignette image">
	<img alt="html image example" src="/assets_tutorials/img/image.jpg" width="66" height="49" />
</a>

Demo