Travailler avec des images en HTML

1. Objectifs

• ِApprendre à travailler avec des images en HTML.
• Apprendre à intégrer des images en HTML, à les légender d’un intitulé.

2. Introduction

• Certainement une des balises les plus connues et les plus usitées de HTML, <img> embarque une image stockée dans un fichier externe à l’intérieur d’un document web.
• Étant donné les fondations mêmes du langage, HTML ne décrit que la structure du document et son contenu texte.
• Les images ne sont pas intégrées dans ce même fichier HTML, mais stockées dans des fichiers voisins (dans le même répertoire ou non) avec différents formats de compression, possédant chacun des avantages et inconvénients.
• Dans cet article, nous allons nous intéresser aux différents formats d’image (jpeg, png,gif etc.) et allons voir comment insérer une ou plusieurs images dans une page en HTML.






3. Les différents formats d’image

• On peut enregistrer les images sous différents formats. Les formats les plus utilisés sont :
• Le JPG ou JPEG ;
• Le PNG ;
• Le GIF ;
• Le BITMAP.
• Chaque format possède ses propres spécificités et il faut donc faire bien attention au choix du format lorsque’on enregistre une image.

1. Le GIF (Graphics Interchange Format)

• Graphics Interchange Format est un format assez vieux, qui à été très utilisé
• Le GIF est un format d’image numérique destiné au téléchargement d’images couleur sur Internet qui a été créé en 1987.
• Un GIF utilise une palette de seulement 256 couleurs, ce qui limite son utilisation à des images peu détaillées.
• Ce format offre l’avantage en contrepartie de pouvoir stocker plusieurs images dans un même fichier. C’est cela qui permet de créer des GIF animés en jouant sur la durée d’affichage de chaque image.

2. Le JPEG (Joint Photographic Experts Group)

• JPEG est une norme qui définit le format d’enregistrement et l’algorithme de décodage pour une représentation numérique compressée d’une image fixe.
• Le JPEG sont très répondues sur le web, ce format est construit pour réduire le poids des photos, qui peuvent comporter plus de 16 millions de couleur différentes
• Les images JPEG sont enregistrées avec l’extension .jpg ou .jpeg

3. Le PNG (Portable Network Graphics)

• Le Portable Network Graphics (PNG) est un format ouvert d’images numériques, qui a été créé pour remplacer le format GIF, à l’époque propriétaire et dont la compression était soumise à un brevet.
• Le PNG est un format sans perte spécialement adapté pour publier des images simples comprenant des aplats de couleurs.

4. Insérer des images en HTML

1. Attributs obligatoires

• La balise qui permettre d’insérer une image <img>
• Cette balise est accompagnée de deux attributs obligatoires
• src: indique où se trouve l’image qu’on veut insérer, sous forme soit :
• de chemin absolu exemple src="https://www.apcpedagogie.com/logo.png"
• de chemin relatif src="chemin du dossier/logo.png"
• L’attribut src va fonctionner de la même manière que l’attribut href pour les liens. Ainsi, si vous enregistrez votre image dans un dossier différent de votre page HTML, pensez bien à en tenir compte dans la valeur donnée à src.

<!-- Image dans le même répertoire que la page HTML -->
<img src="logo.jpg">
<!-- Image stockée à la racine du site web -->
<img src="/logo.jpg">
<!-- Image située sur un autre site -->
<img src="https://www.apcpedagogie.com/logo.png">

• alt: En HTML, la balise "alt" est une description textuelle que l’on attribue à une image. Elle signifie littéralement "texte alternatif".
• Pour la longueur, il est recommandé d’utiliser 3 à 5 mots environ. Rien ne sert de rédiger un long paragraphe de description.

2. Autres attributs

• Attributs de la balise peut avoir plusieurs attributs tels que: align, border, alt, width, height, hspace, vspace …etc.
• ALIGN: prend les valeurs:
• top, middle, bottom, pour l’alignement vertical
• left, right pour l’alignement horizontal
• border: Permet de régler l’épaisseur du trait entourant l’image, en pixels.
• La valeur 0 signifie qu’il n’y a pas de bordure (c’est la valeur par défaut sauf dans le cas où l’image est dans un lien).
• ALT: permet d’afficher un texte lorsque le souris passe au-dessus.
• Width et height:Ils permettent de déterminer la hauteur et la largeur de l’image, en pixels.
• prennent des valeurs en pixels (px) et pourcentage (%)
• Il faut toujour éviter de les utiliser pour redimensionner l’image.
• Hspace:Permet de déterminer l’espace horizontal qui entoure l’image.
• Vspace :Permet de déterminer l’espace vertical qui entoure l’image.

3. Exemples

• Exemple 1 : Explication si l’image n’apparaît pas
• <img src="logo.png" alt="logo de site">
• Exemple 2 : image avec bordure
• <img src="logo.png" border="1">
• Exemple 3 : image provenant de l’Internet http://www.html.net/logo.png
• <img src="https://www.apcpedagogie.com/logo.png">
• Exemple 4 : l’image joue le rôle de lien
• <a href="https://www.apcpedagogie.com/logo.png"> <img src="logo.png">
• Exemple 5 :image avec largeur précise
• <img src="logo.png" width="200">
• Exemple 6 : image avec largeur et longueur précises
• <img src="logo.png" width="200" height="200">
• Exemple 7 : image avec largeur proportionnelle à celle de l’image Remarque: pour ne pas déformer l’image, utilisez l’un des deux attributs width ou height
• <img src="logo.png" width="20%">

Les images doivent se trouver obligatoirement à l’intérieur d’un paragraphe(<p> et </p>

<p>

Voici une photo que j’ai pris lors de mes dernières vacances à la montagne:

<img src="images/montagne.png" alt="photo de vacance"/>

</p>

5. Positionnement des images

• Par défaut, les images sont considérées comme des éléments en ligne, c’est-à-dire possédant la propriété CSS display:inline. Au sein d’un bloc de texte, elles se positionnent comme un caractère.
• Il existe de nombreuses techniques et combinaisons d’éléments HTML pour positionner les images dans le contenu.
• Les cas de figure les plus fréquents sont le centrage, le flottement à gauche, le flottement à droite et le positionnement absolu, qui peuvent être accomplis à l’aide de CSS.

6. Ajouter une infobulle

• L’attribut title permet d’afficher une bulle d’aide sur un image.

• <p>
• Voici une photo que j’ai pris lors de mes dernières vacances à la montagne:
• <img src="images/montagne.png" alt="photo de vacance" title="photo du dfilaya 12122012"/>

</p>

———-

Bibliographie

• Livre : HTML 5 Une référence pour le développeur web: Rodolphe Rimelé
• HTML 5 et CSS 3 Mathieu Nebra