Vous êtes ici : Accueil » programmation » Les images
Chapitre 5 Les images
Afin d'illustrer le contenu des pages Web, il est possible d'y insérer des images.
Les formats d'images reconnus par les navigateurs HTML sont :
-les images en .GIF (Graphic Interchange Format) format breveté donc payantes en principe.
-les images en .JPEG (Joint Photographic Experts Group),
-les images en .PNG (Portable Network Group) c'est un format de remplacement non breveté pour les fichiers .GIF.
Ces formats sont intéressants car ils compriment les images; il ne faut pas oublier que sur Internet, le poids est l'ennemi de la vitesse d'affichage...
On peut définir un fond de page en associant des attributs au marqueur
.
Ces attributs sont soit bgcolor, background.
· bgcolor :
associé au marqueur
, reçoit en variable un code hexadécimal qui définira la couleur du fond :
:
c'est la couleur de fond de cette page
· background :
associé au marqueur
, reçoit en variable une image "fond_gouttes_d_eau.gif" qui sera répétée autant de fois sur la page, jusqu'à que le fond soit uniforme :
fond_gouttes_d_eau.gif">
Cliquer sur l'image pour voir l'effet de cette image
Insérer une image au fil du texte
Il est possible d'insérer des images dans une phrase :
Vous voyez que cette image se trouve dans le milieu de la phrase.
align=bottom
L'image peut être alignée à la base du texte grâce l'attribut align (placé dans le marqueur
) qui reçoit la variable bottom :
L'image "pin-up.gif" est alignée à sa base.
align="bottom">
align=top
L'image peut être alignée à la tête du texte grâce la variable top :
L'image "pin-up.gif" est alignée à sa tête.
align="top">
align=middle
L'image peut être alignée au centre du texte grâce la variable middle :
L'image "pin-up.gif" est alignée au centre.
align="middle">
Mettre une image à côté d'un texte
Il est possible de positionner des images sur le côté d'un paragraphe, grâce à l'attribut align. Il est à noter qu'il n'est bien évidemment pas possible de combiner ces deux attributs dans le même marqueur.
<== donne :
Il est possible de positionner des images sur le côté d'un paragraphe, grâce à l'attribut align. Il est à noter qu'il n'est bien évidemment pas possible de combiner ces deux attributs dans le même marqueur.
donne : ==>
Autres commandes
Sous les navigateurs Netscape Navigator et Microsoft Internet Explorer, il est possible à partir d'une image, de réduire ou d'augmenter sa taille grâce à l'attribut width et height qui doivent recevoir une taille en nombre de pixels.
Par exemple :
width="150" height="75">
Cette image donnerait avec width=300 et height=150
width="300" height="150">
Nota :
Il est à noter, qu'il faut toujours nommer les fichiers en privilégiant les noms en minuscule et sans accent, bannir les signes particuliers interdit par Windows:
/ , , : , * , ? , " , < , > ,
et remplacer les espaces par " _ " et si possible utiliser des noms de 1 à 8 caractères.