Jeudi 26 Juin 2025
• Tableaux à angles arrondis
• Créer une barre de scroll colorée
• Les Roll-Over
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un poulet
• Créer un calque
• Créer un tableau
• Créer un formu



• Monter une page
• Déplacer une image
• Manipuler un calque






Pages précédentesRetour au sommairePages suivantes
 
  La balise IMG
  Les formats à utiliser sur le web
  Les principaux attributs de la balise IMG
  Exercice pratique

 1. La balise <IMG> 

La balise <IMG> est très importante pour la manipulation des images. On peut lui associer de nombreux attributs.
La première particularité de cette balise est qu'elle ne se referme pas.

Dans sa forme la plus simple, elle est composée de deux éléments :
  •  <IMG> La balise image elle même : elle signale au navigateur la nécessité de charger une image.


  •  SRC Cet attribut signifie source de l'image. Il indique le nom du fichier graphique que vous voulez placer dans la balise ainsi que son emplacement.
Exemple : <IMG SRC="nom_de_mon_image.gif">
 
Top
 

 2. Les formats à utiliser sur le web 

Un des éléments les plus importants à considérer lorsque vous construisez vos pages web est le poids en koctets de celles-ci mais égalemment le poids de vos images.

En effet, plus vos images auront un poids important, et plus le temps de téléchargement de ces images sera long et pénible pour les internautes.

Il est donc impératif d'utiliser des formats d'images qui utilise un taux de compression élevé.

Les deux formats d'image les plus courants sur le web sont les formats GIF (.gif) et JPEG/JPG (.jpeg ou .jpg).

  •  Le format GIF ( Graphic Interchange Format )

    Il s'agit d'un format où la taille des fichiers est réduite au minimum avec l'utilisation de 256 couleurs.
    C'est un format compressé qui présente l'intérêt de pouvoir être organisé en couches ( gif entrelacé ).
    Sur une page web, une image GIF peut apparaître de piètre qualité au début de l'affichage et pendant que le client prend connaissance des textes, celle-ci s'améliore jusqu'à devenir parfaite ( elle est écrite sur la page couche après couche ).

    de plus, les images au format GIF peuvent être transparentes, voir animées.

    Ce format convient aux images de taille assez petite ou bien aux images où le nombre de couleurs et de nuances est limité.
    Pour insérer un logo, une icône ou même une banderole, il est imbattable rapport qualité / taille.

    Exemple de gif avec et sans couleur de transparence :
    ( Ici, la couleur noire est la couleur de transparence ).

    Avec Transparence    Sans Transparence

    Nombre de couleurs :

    Comme tout fichier graphique, le nombre de couleurs joue sur le rapport taille / qualité du fichier.
    Voici une image enregistrée sous un format gif avec différentes palettes de couleurs.

128 couleurs -
8 Ko
64 couleurs -
6 Ko
16 couleurs -
4 Ko
8 couleurs -
3 Ko
 
Top
 
  •  Le format JPEG ( Joint Photographics Experts Group )

    Ce format est beaucoup plus compressé que le format GIF mais il ne bénéficie pas de cette structure en couche décrite plus haut.
    Le format JPEG utilise des couleurs 24 bits ( millions de couleurs ) et est idéal pour afficher des visuels très nets, de façon très réaliste.
    Ce format ne permet pas la transparence mais il gère beaucoup plus de 256 couleurs.

    Le taux de compression d'une image peut être déterminé entre 1 et 99%.

    Exemples d'images compressées :
Taux de 10% -
8 Ko
Taux de 30% -
5 Ko
Taux de 60% -
3 Ko
Taux de90% -
2 Ko
 
Accessoirement, il existe égalemment le format PNG même si celui-ci est encopre très peu utilisé. Ce format permet d'afficher un nombre de couleurs très important comme le format JPEG tout en permettant la transparence des fichiers.
 
Top
 

 3. Les principaux attributs de la balise <IMG> 

  •  L'attribut SRC :

    Cet attribut permet de spécifier l'URL complète ( chemin ) du fichier.

    Ex : <IMG SRC="nom_de_fichier.gif">

    "nom_de_fichier" doit bien sûr être remplacé par le nom de votre image et son extension (.gif ou .jpeg)

    Si votre fichier se trouve dans un autre répertoire que votre page HTML, par exemple dans un répertoire "images", cela donne :

    <IMG SRC="images/nom_de_fichier.gif"> Attention, comme sous UNIX, on utilise le slash ( / ).

    Si par contre, votre image se situe deux répertoires plus haut que votre fichier HTML dans un dossier nommé "images", on écrira :

    <IMG SRC="../../images/nom_de_fichier.gif">

    Enfin, il est possible, bien que déconseillé, de charger une image sur un autre site; il vous faut pour cela l'adresse complète du serveur.

    <IMG SRC="http://www.free.fr/imV4/mst_freelogo.gif">

    Si vous saisissez cette adresse dans votre navigateur, vous apercevrez l'image ci-dessous :

Top
  •  L'attribut WIDTH et HEIGHT

    Précisez la taille de l'image au navigateur :

    En spécifiant la taille de l'image au navigateur, celui-ci charge plus rapidement votre page, en effet il n'a pas à la recalculer, de plus si jamais le visiteur a désactivé le chargement des images, la mise en page ne sera pas perturbée.
    Ces dimensions correspondent à la taille en pixels de l'image.

    Exple : <IMG SRC="img/planet.jpg" WIDTH="128" HEIGHT="97">

    Ainsi, l'image est chargée avec une largeur ( width ) de 128 pixels et une hauteur ( height )de 97 pixels.
    Vous pouvez agrandir ou rétrécir l'image en modifiant les attributs WIDTH et HEIGHT mais attention, l'image ne sera pas chargée plus rapidement si vous diminuez sa hauteur ou sa largeur ( ou les deux ), bien au contraire.

  •  L'attribut ALT

    Cet attribut permet de fournir un texte de rechange à votre image si le navigateur n'affiche pas l'image.

    Deux avantages :

    - Si le visiteur désactive le chargement des images, il pourra quand même deviner le sens des images.
    - Vous pouvez par ce biais fournir une légende à une image lorsque le pointeur de la souris passe au-dessus de cette image.

    Exple : <IMG SRC="planet.jpg" WIDTH="128" HEIGHT="97" ALT="La planète Saturne !">

    La planète Saturnes !

Top
 
  •  L'attribut BORDER

    En spécifiant une valeur à l'attribut BORDER de 1 à x, vous insérer une bordure à votre image.
    Cet attribut est utile lorsque vous assignez un lien hypertexte à une image; en effet, une bordure bleue disgratieuse vient automatiquement se positionner autour de l'image.
    En donnant la valeur 0 à l'attribut BORDER, labordure disparait.


  •  HSPACE et VSPACE

    Avec les attributs HSPACE=x et VSPACE=x, (x étant un nombre de pixels) vous pouvez fixer un espace vertical et horizontal autour de votre image.

    Exemple : <IMG SRC="city.gif" WIDTH="178" HEIGHT="174" HSPACE="25" VSPACE="45">

Top
 
  •  L'alignement des images ( Attribut ALIGN )

    Par défaut, l'image est placée sur une ligne et, le texte s'il est présent est aligné sur le bas de l'image.

    Exple : <P ALIGN="center"><IMG SRC="city.gif" WIDTH="128" HEIGHT="84">La ville de San Francisco - Côte ouest des USA.</P>

    La ville de San Francisco - Côte ouest des USA.

    L'attribut ALIGN possède 9 valeurs.


  • Les différentes valeurs de l'attribut ALIGN :

Les différentes valeurs de l'attribut ALIGN pour la balise IMG
ALIGN="middle" ( texte au milieu ) ALIGN="left" ( aligne l'objet sélectionné sur la marge gauche et place le texte qui l'entoure à sa droite)
San Francisco La ville de San Francisco est située sur la côte de Californie, environ 640 km au nord de Los Angeles. Elle est située au bord d'une grande baie qui forme un vaste port naturel partiellement abrité par la chaîne montagneuse côtière.
ALIGN="bottom" ( texte en bas ) ALIGN="right" (aligne l'objet sélectionné sur la marge droite et place le texte qui l'entoure à sa gauche )
San Francisco La ville de San Francisco est située sur la côte de Californie, environ 640 km au nord de Los Angeles. Elle est située au bord d'une grande baie qui forme un vaste port naturel partiellement abrité par la chaîne montagneuse côtière.
ALIGN="top" ( texte en haut ) ALIGN="baseline" (aligne la ligne de base du teste sur le bas de l'objet sélectionné)
San Francisco San Francisco - Golden Bridge
ALIGN="absbottom" ( texte en bas absolu ) ALIGN="toptext" ( aligne l'objet sélectionné sur le haut du caractère le plus élevé de la ligne du texte )
San Francisco San Francisco
ALIGN="absmiddle" ( texte au milieu absolu )
San Francisco
 
Top
 

 4. Exercices pratiques 

Essayez de reconstituer le code HTML de l'exemple ci-dessous :

Pour cela, vous pouvez utiliser les images de votre choix ou bien celles que j'ai moi même choisi.
( Clic droit sur l'image et "enregistrer l'image sous" ).
Pour le texte vous pouvez saisir le celui de votre choix.

Pour reproduire les effets de l'exemple, vous devez utiliser les attributs ALIGN, VSPACE, HSPACE, ALT etc...

En cliquant sur le bouton ci-dessous, vous pourrez visualiser le résultat à atteindre :

aperçu

Top

 
Pages précédentesRetour au sommairePages suivantes
 
Recherche par
mots-clés :
Moteur de recherche interne



• Les feuilles de style
• Les popups
• Des liens spéciaux





• Test HTML
• Test DHTML
• Test Javascript





• Scripts dhtml