Chapitres :
01 - Introduction :
Trois formats d'image peuvent être mis sur l'internet :
- le format GIF, il est utilisé pour des images contenant peu de couleur. En effet le nombre de couleur dans le gif est de 256 dont une couleur transparente.
- le format JPG, il est utilisé pour les des images contenant beaucoup de couleur, une photo par exemple. Le jpg doit être en RVB.
- le format PNG, concurrent du gif il peut contenir plus de couleurs que le gif. Cependant, il reste encore peu utilisé. Attention tous les navigateurs ne le reconnaissent pas
02 - Insertion d'une image :
Pour insérer une image, il faut utiliser la balise HTML <img>. La balise IMG est une balise simple, elle n'a pas de balise de fermeture.
Taper le code <http://webinnov.fr/formation/exemple/images/vignette.png> et visualisez.
Si vous connaissez la taille de l'image définissez la.
La taille de "vignette.png" est de 154 pixels de longueur et 46 pixels de hauteur.
Il faut donc tapez le code suivant :
Il n'est pas nécessaire de mettre "px", car la taille est toujours défini en pixel par défaut.
03 - Les bordures d'une image :
Il est possible de créer un contour ou bordure. Cela me semble, pas très intéressant.
J'aborde le problème du contour car quand vous créez un lien sur l'image, le navigateur vous crée un contour qui n'est pas forcément le bienvenue.
Il me semble donc nécessaire de connaître l'attribut <border>.
L'exercice suivant consiste à introduire une image avec une bordure de 3 (toujours en Px par défaut), puis une image avec lien et une image avec lien mais sans bordure.
1<img src="vignette.png" border="3">
2<br />
3<br />
4<a href="#" ><img src="vignette.png"></a>
5<br />
6<br />
7<a href="#" ><img src="vignette.png" border="0"></a>
Il n'est pas nécessaire de connaître pour l'instant le fonctionnement d'un "lien", le sujet est abordé dans le chapitre suivant.
04 - Alignement d'une image par rapport au texte :
Tout d'abord voyons comment s'aligne l'image par défaut.
Taper : <img src="vignette.png"> puis copiez et collez du texte. (Voici du texte.)
Maintenant nous allons aligner le bas du texte avec le bas de l'image.
Tapez : <img src="vignette.png" align="absbottom"> puis copiez et collez du texte.
Pour plus d'information sur les valeur de l'attribut align de la balise HTML IMG.
1<img src="vignette.png">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis. Eros
Et Accumsan dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim.
Nos arsapiente delectus au aut prefer endis dol tene sententiam, quid
est cur verear ne ad eam nc quos tu paulo ante memorite tum etia ergat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue. Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut
labore et dolore magna aliqu atib saepe eveniet ut er reupdiand sint.
Endiumagist and et dodecendesse videantur, iustitiam, aequitated fidem.
Neque hominy infant efficerd possit duo contend notiner si effecerit.
Natura proficis facile explent sine julla unura aute enim desiderable.
Nam liber tempor cum soluta nobis eleifend option congue nihil. Nos
arsapiente delectus au aut prefer endis dol. Ilxrepudiand sint et molestia
tenetury sapiente delctus au aut prefer endis dol. Endiumagist and et
dodecendesse videantur, iustitiam, aequitated fidem. Neque hominy infant
efficerd possit duo contend notiner si effecerit. Natura proficis facile
explent sine julla unura aute enim desiderable.
1<img src="vignette.png" align="absbottom">
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis. Eros
Et Accumsan dignissim qui blandit praesent luptatum zzril delenit augue
duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis
eleifend option congue nihil imperdiet doming id quod mazim.
Nos arsapiente delectus au aut prefer endis dol tene sententiam, quid
est cur verear ne ad eam nc quos tu paulo ante memorite tum etia ergat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero
eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue. Lorem ipsum dolor sit amet, consectetur adipisci tempor incidunt ut
labore et dolore magna aliqu atib saepe eveniet ut er reupdiand sint.
Endiumagist and et dodecendesse videantur, iustitiam, aequitated fidem.
Neque hominy infant efficerd possit duo contend notiner si effecerit.
Natura proficis facile explent sine julla unura aute enim desiderable.
Nam liber tempor cum soluta nobis eleifend option congue nihil. Nos
arsapiente delectus au aut prefer endis dol. Ilxrepudiand sint et molestia
tenetury sapiente delctus au aut prefer endis dol. Endiumagist and et
dodecendesse videantur, iustitiam, aequitated fidem. Neque hominy infant
efficerd possit duo contend notiner si effecerit. Natura proficis facile
explent sine julla unura aute enim desiderable.
05 - Créer un espace entre l'image et le texte :
Le texte collé à l'image n'est pas très beau. Nous allons étudier l'espacement horizontal qui permet de décaler le texte horizontalement par rapport à l'image.
Pour cela mettez dans la balise <img> l'attribut hspace, donnez lui une valeur.
Il faut donc tapez le code suivant :
puis copiez et collez du texte. (Voici du texte.)
Nous allons étudier l'espacement vertical qui permet de décaler le texte verticalement par rapport à l'image.
Pour cela mettez dans la balise <img> l'attribut vspace, donnez lui une valeur.
puis copiez et collez deux fois du texte.
06 - Insertion d'une image de fond :
Vous pouvez insérer une image de fond. Cette caractéristique se détermine dans la balise HTML <body> grâce à l'attribut background="url".
Sachez que une image placé en fond se répète jusqu'à ce qu'elle remplisse tout le document HTML.
Vous verrez qu'une image n'ayant pas de bons raccords fait de votre fond, un fond très laid.
Tapez dans la balise <body> :
Internet Explorer offre d'autres possibilités que vous pourrez retrouver à la balise HTML
<html>
<head>
<title>
</title>
</head>
<body background="vignette.png">
</body>
</html>
 |
 |
 |