<< Retour au sommaire

 

HTML 5, Les images  

 

 

 

Table des matières

1.      L’insertion de base,

2.      Ajouter une bulle d’aide avec l’attribut « title » ;

3.      Une image cliquable.

 

 

L’insertion de base

 

Dans une page HTML, vous pouvez insérer des images de presque n’importe quel format, toutefois, les formats conseillés sont « JPG », « PNG »  8 bits) et « GIF ».

 

La balise est <img>, orpheline, elle est de type Inline.

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 de destination relatif ou absolu.

« texte », dans l’attribut « alt », c’est le texte qui sera affiché au cas où l’image ne s’afficherait pas dans le navigateur. Cette notion de texte alternatif est d’ailleurs utilisée par les synthèses vocales pour informer de la nature de l’image, cet attribut est donc obligatoire.

 

Remarque :

 

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>

 

Tester la page >>


Ajouter une bulle d’aide avec l’attribut « title »

 

Dans la balise « img », l’attribut « title » 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 !" />

 

Tester la page >>

 

Remarque :

 

Les images cliquables

 

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

La syntaxe :

<a href="URL">

<img src="Nom de l'image" alt="texte alternatif" />

</a>

 

Description :

Rien de plus clair, la balise « img », ses attributs et leurs propriétés sont placés comme lien dans le bloc <a>… </a>

 

Dans l’exemple suivant, l’image « systeme-solaire.jpg »  est employée en tant que lien hypertexte pour ouvrir la page « asteroide.html » :

 

Code de la page index.html contenant l’image cliquable :

 

<!DOCTYPE html>

<html>

<head>

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

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>L'image cliquable</title>

</head>

<body>

<h1>Un grand danger dans le cosmos</h1>

<p>

Dans notre système solaire, quel corps céleste représente le plus grand danger pour notre planète ?

<br />

Vous êtes curieux ?

<br />

<a href="asteroide.html">

<img src="systeme-solaire.jpg" alt="Le système solaire" title="Cliquez ici pour découvrir le danger" />

</a>

<br />

Bon voyage !

</p>

</body>

</html>

 

Voici maintenant le code de la page « asteroide.html » :

 

<!DOCTYPE html>

<html>

<head>

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

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>L'image cliquable</title>

</head>

<body>

<h2>Le grand danger</h2>

<p>

Et oui, il s'agit d'un astéroïde, visez voir un peu ci-dessous !

<br />

<img src="asteroide.jpg" alt="Un astéroïde" />

</p>

</body>

</html>

 

Tester les pages >>

Philippe BOULANGER