Partout Les forums Les lexiques Les tutoriaux

Apprendre les langages du web c'est si simple avec nous

Les images - XwZ

Dans ce tutorial je vais vous expliquer comment mettre des images dans une page.
Pour cela il faut utiliser la balise img.
La structure :

<img src="le chemin" alt="le titre de l'image" />

Maintenant voyons à quoi correspond le chemin d'une image.
Il y a 3 cas de figures différents :
1/ L'image se trouve dans le même répertoire ou dans un répertoire qui se trouve dans ce dernier.
2/ L'image se trouve dans un répertoire qui n'a "aucun" lien avec le répertoire courant.
3/ L'image se trouve sur un autre site (mais dans ce cas là il faut l'accord du créateur du site pour l'utiliser).

Dans le cas 1 il suffit de mettre le nom de l'image ou le nom du/des répertoire(s) puis le nom de l'image.
Exemple :
l'image se trouve dans le même répertoire :
mon_image.jpg
l'image se trouve dans le répertoire images :
images/mon_image.jpg

Dans le cas 2 il faut rajouter un petit quelque chose, je m'explique avec un exemple :
un site qui à 3 répertoires à sa racine avec dedans des pages et des images mais on va s'intéresser qu'aux images :

/images/

  images1.jpg

  images2.jpg

  images3.jpg

  images4.jpg



/pages/

  privée

On se met dans le cas où la page dans laquelle il faut insérer l'image se trouvant dans le répertoire pages.
Pour insérer une image du répertoire images dans ce cas il faut que l'on se "remette" à la racine du site pour cela il faut rajouter ../ devant le nom du répertoire images. On aura donc :
../images/image1.jpg

Dans le cas 3, après avoir demandé l'autorisation au webmaster, il faut mettre l'adresse complète de l'image.
Exemple :
je veux une image se trouvant sur le site http://www.le-site-de-limage.com
dans le répertoire images/photos/tel_sujet/
la photo s'appelle tel_sujet1.jpg
Je doit donc mettre :
http://www.le-site-de-limage.com/images/photos/tel_sujet/tel_sujet1.jpg

Maintenant voyons ce qu'il faut mettre comme titre d'images.
Le titre de l'image doit décrire succintement l'image et ce qu'elle représente. Si c'est une image qui est là pour le design vous pouvez laisser vide mais surtout mettez bien l'attribut alt.

Maintenant voyons la liste des attributs css dont vous risquez d'avoir besoin pour les images :
-> width : la largeur de l'image en pixel si vous ne précisez pas l'unité

-> height : la hauteur de l'image en pixel si vous ne précisez pas l'unité

-> border- : les bordures de l'image. la syntaxe :
- border-left : la_couleur dashed/solid/none/double/inset/outset l_epaisseur;
- border-right : la_couleur dashed/solid/none/double/inset/outset l_epaisseur;
- border-top : la_couleur dashed/solid/none/double/inset/outset l_epaisseur;
- border-bottom : la_couleur dashed/solid/none/double/inset/outset l_epaisseur;

-> float : position de l'image par rapport au texte. Mettre left si on veut que le texte soit à droite et mettre right si l'on veut que le texte soit à gauche.

Les commentaires :