2-3 Les images

Insérer une image à une page

logo plei@d

Les formats d'images : gif? jpg? ou png?

Des sites :
www.php-astux.info
www.siteduzero.com
www.eric-bellot.fr

Des sites pour trouver des images pictures.com Google image

Utiliser une image comme lien

logo plei@d
L'image ci-dessus est aussi un lien vers le site plei@d

La présentation de l'image : les attributs border, width et height, vspace et hspace, et align

border : l'image a un bord ou pas, border="nb pixels", ex : border="0" (pas de bord) ou border="3" (un bord de 3px)

width (largeur) et height (longueur) permettent de redimensionner les images. Attention à bien respecter la proportion entre ces deux valeurs sinon l'image sera déformée. Ces deux attributs peuvent servir à zoomer une image, agrandir comme réduire. NB : le poids des fichiers sur le web est un paramètre important. Il est donc préférable d'utiliser les fichiers des images à la taille voulue.

hspace et vspace permettent de décaler l'image par rapport au texte d'une certaine distance en pixels (px). Ces deux attributs peuvent être utilisés simultanément. Ex : vspace="30" hspace="50". vspace génère ici deux lignes de 30 pixels de hauteurs, une au-dessus et l'autre en dessous de l'image, alors que hspace engendre deux colonnes de 50 pixels de chaque côté de l'image.

align : alignement de l'image par rapport au texte.
Différentes valeurs : left, center, right, top, bottom, middle.
Pour les alignements verticaux bottom et middle, les pieds des lettres se trouvent à la même hauteur que le bas ou le milieu de l'image. Pour top, le haut des lettres sont au même niveau que la limite haute de l'image.
Pour les alignements horizontaux left, right : right, l'image se place à droite du texte.
Je n'ai pas vu de différence entre center et middle mais je n'ai sans doute pas essayé toutes les possibilités.

Un exemple :

pppppppppppppppppppppp ppppppppppppppppppp ppppppppppppppppppp pppppppppp ppp ppppppppppppppppp ppppp pppppppppp pppppppppppp ppppppppppppppp ppppppppppppppppppppppppppppppp pppppppppppppppppppppppppppppppppp pppp pppppppppppppp PPPPPP logo plei@dTexte ppppppppppppppppppppp ppppppppppppppppppp pp ppppppppppppppp ppppp ppppppppppppppppppppppppppppppppppp pppppppppppppppppppppppp ppppppppppppppppppppppppppp PPPPPPPPPPPPPPPPPPPPPPpppppppppppppppppppppppppppppppp pppppppppppppppppppppppppppp PPPPPPPPPPPPPPPPPPPP pppppppppppppppppppppppppp pppppppppppppppppppp pppppppppppppppppppppp PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP


Exo 2-2-1 : alignement de l'image et du texte
Exo 2-2-2 : une image en arrière plan

Les images mappées, c'est à dire avec un ou plusieurs liens sur des zones bien définies

Je connais mieux Gimp. J'utilise donc ce logiciel en apportant les modifications pour que le code source soit comme celui de l'exemple ci-dessous avec les balises map, area et leurs attributs.

Formes géométriques rectangle jaune aux bords rouge cercle vert avec un bord bleu triangle rose aux bords rouge Etoile orange aux bords plus clairs

Exo 2-3 : image mappée
Exo 2-5 : image mappée et liens internes

Cliquer ici pour retourner à la page d'accueil