LOGO Lionel Groulx

Site Web du cours « Programmation de Systèmes »

HTML, CSS Accueil
Chapitres :

  1. Introduction
  2. HTML:Bases
  3. HTML:Balises fondamentales
  4. HTML:Images
  5. HTML:Formulaires
  6. CSS:Mise en place
  7. CSS:Formatage de texte
  8. CSS:Couleurs et habillage
  9. Tableaux
  10. CSS:Effets dynamiques
  11. Mise en page structurée
  12. page HTML prête à l'emploi

HTML et CSS Chapitre 4
Insertion d'images

Les formats d'images privilégiés sur le web sont JPEG, PNG et GIF.

-          Les Jpeg sont plutôt adaptées aux photographies,

-          Les PNG aux sigles, logos et dessins,

-          Les GIF aux images animées.

Attention de ne pas choisir de caractère exotique dans le nom du fichier, et de bannir les espaces. Leur préférer les « _ ».

 4.1       <img /> pour une insertion d'image

C'est une balise orpheline, qui permettra l'insertion d'image, qui devra être accompagnée de deux attributs obligatoires

 4.1.1     Attribut src

C’est un attribut obligatoire qui permet d'indiquer le chemin de l'image.

Soit sous forme absolue, ex :

src = "http://monsite.com/mesimages/mafleur.jpg"

Soit sous forme relative. Ex :

src = "mesimages/mafleur.jpg"

 4.1.2     Attribut alt

C’est un attribut obligatoire qui permet d'indiquer le texte alternatif à afficher si l'image ne s'affiche pas (problème de téléchargement ...). Il est d'usage de décrire ce que contient l'image. Ceci permet aussi d'aider les moteurs de recherche à savoir ce que contient votre image. C'est un outil sémantique.

 4.1.3     Attribut title

C’est un attribut facultatif qui permet de placer une infobulle sur l'image.

Exemple d’insertion d’image :

<img src="img/tn_fromages.jpg" alt="Photo de fromages" title="Notre plat de fromages" />

 4.1.4     Cas particulier d'une grosse image

Dans ce cas-là, il est conseillé de travailler avec 2 versions de l'image, la taille réelle, et une version miniature.

Dans un premier temps, n'afficher que la miniature sur le site, et faire un lien sur la taille réelle que lorsque la miniature est cliquée.

Exemple :

<p> Voici ma GROSSE montagne! <br />

    <a href="img/montagne.jpg">

        <img src="img/montagne_mini.jpg" alt="Photo de montagne" title="Cliquez pour agrandir" />

    </a>

</p>

 

 4.1.5     <figure> pour une image en tant que figure

Dans le cas général, on veut juste poser une image dans le milieu du texte. Alors, la balise <img /> doit se retrouver encerclée de la balise paire <p>.

Seulement, il peut arriver que l'on désire présenter une ou plusieurs images regroupées, comme un objet unique à part. L'intérêt particulier de ceci est qu'on peut alors y préciser une légende. L'autre intérêt est sémantique : le regroupement d'images est porteur de sens, étiquetable par la légende à préciser.

Dans ce cas, on peut utiliser la balise en paire <figure> qui permet d'insérer une ou plusieurs images en tant que figure unique, et d'y adjoindre une légende.

 4.1.6     <figcaption> pour insérer une légende dans une figure

Comme vu précédemment, l'avantage de la création d'une figure est de pouvoir insérer une légende.

Exemple :

<figure>

<img src="images/internetexplorer.png" alt="Logo Internet Explorer" />

<img src="images/firefox.png" alt="Logo Mozilla Firefox" />

<img src="images/chrome.png" alt="Logo Google Chrome" />

<figcaption>Logos des différents navigateurs

</figcaption>

</figure>