<< Retour au sommaire

 

 

Insérer des images

 

 

 

 

Le sommaire :

  1. Insérer simplement une image dans une page.
  2. Ajouter une bulle d’aide avec l’attribut title.
  3. Les images cliquables.
  4. Une image en arrière-plan avec l’attribut background.

 

 

Insérer simplement une image dans une page

 

Dans une page XHTML, vous pouvez insérer des images aux formats JPG, PNG  8 bits) et GIF.

 

La balise est <img>.

La syntaxe :

<img src="NomDeL'image" alt="texte" />

 

La description :

Img, c’est le nom de la balise.

« NomDEL’image », dans l’attribut « src », c’est bien sûr le nom de l’image à insérer, ainsi que son chemin relatif ou absolu.

« texte », dans l’attribut « alt », c’est le texte qui sera affiché au cas ou l’image ne s’afficherait pas dans le navigateur.

 

Remarque :

Les 2 attributs « src » et « alt » sont les seuls attributs obligatoires…

Pour rester dans la norme du W3C, vous devez impérativement placer l’insertion de l’image à l’intérieur d’un bloc <p>.

 

Voici un exemple qui permet d’insérer une plume dans le texte :

 

<h1>le paon</h1>

<p>Vous connaissez le paon ?<br />

Non ?<br />

Eh bien voici une belle plume de paon !<br />

<img src="plume.jpg" alt="plume de paon" /><br />

</p>

 

 


Ajouter une bulle d’aide avec l’attribut title

 

La balise « img » vous permet de créer une bulle d’aide qui sera affichée lors du passage du pointeur de la souris sur l’image.

En reprenant l’exemple précédemment cité, voici ce que ça donne :

<img src="plume.jpg" alt="plume de paon" title="Quelle jolie plume !" />

 

 


Les images cliquables

 

Une image cliquable est une image utilisée comme lien hypertexte dans une balise <a>.

 

Dans l’exemple qui suit, nous avons la page index.html qui contient un texte dans lequel se trouve une image cliquable donnant accès à la page LePaon.html :

 

Vous pouvez télécharger le tout ici :

 

Télécharger un exemple d'image Cliquable

 

Le code de la page index.html :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>le paon</h1>

<p>Vous connaissez le paon ?<br />

Non ?<br />

Eh bien voici une belle plume de paon !<br />

<a href="LePaon.html"><img src="plume.jpg" alt="une plume de paon" title="Quelle jolie plume !"></a><br />

</p>

</body>

</html>

 

Le code de la page LePaon.html :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Le paon</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>Quelques détails sur le paon</h1>

<p>

Le paon portent sur la tête une aigrette en couronne et le plumage de la queue du mâle peut se dresser en roue.<br />

Les plumes de la queue possède des « yeux », appelés ocelles.<br />

Certaines races de pigeon biset ayant été sélectionnées pour leur ressembler s'appellent pigeon paon.<br />

Certaines espèces de poissons combattants, au vu de leurs nageoires sont également appelées « Paon de mer ».

</p>

</body>

</html>

 

 

 


Une image en arrière-plan avec l’attribut background

 

Vous pouvez mettre une image en arrière-plan d’une page en spécifiant le nom de l’image comme valeur d’affectation à l’attribut « background » de la balise « body ».

 

Cette image sera affichée en mosaïque sur toute la surface de la page la contenant.

La syntaxe :

<body background="NomDeL'image">

 

Voici une page qui contient « plume.jpg » en arrière-plan :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Bienvenue sur mon site !</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body background="plume.jpg">

<h1>l'évasion</h1>

<p>Alors, n'est-ce pas agréable parfois de s'évader dans de jolis rêves ?<br />

Le rêve n'appartient-il qu'aux plus jeunes ?<br />

Non, je crois qu'il n'y a pas d'âge pour se réfugier parfois dans un monde meilleur...</p>

</body>

</html>

 

Philippe BOULANGER