Programmation en HTML

   

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...

 

Les fonds d'écran

    On peut définir un fond de page en associant des attributs au marqueur <body>.
    Ces attributs sont soit
    bgcolor, background.
  • bgcolor :

    associé au marqueur <body>, reçoit en variable un code hexadécimal qui définira la couleur du fond :

    <body bgcolor=#FFFFCC> :
    c'est la couleur de fond de cette page

  • background :

    associé au marqueur <body>, 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 :

    <body background="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
<img src="">) qui reçoit la variable bottom :
L'image "pin-up.gif" est alignée à sa base.

<img src="image/pin-up.gif" width="150" height="75" 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.

<img src="image/pin-up.gif" width="150" height="75" 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.

<img src="image/pin-up.gif" width="150" height="75" align="middle">

 

Mettre une image à côté d'un texte

<align=left>

  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.
 <==   <align=left> donne :
 

<align=right>

  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.

<align=right> 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 :



<img src="image/pin-up.gif" width="150" height="75">

Cette image donnerait avec width=300 et height=150


<img src="image/pin-up.gif" 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.

 
Introduction | Découvrez le HTML | La page HTML | Les liens hypertextes | Formater le texte
Mettre des images | Les tableaux | Les listes & définitions | Les formulaires | Le multimédia