Comment utiliser toutes les possibilités des images avec HTML5

Voici un des piliers de HTML5, c’est l’utilisation des images.

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser toutes les possibilités des images avec HTML5

Bonjour à tous et bienvenu sur Développement Facile.

Dans ce nouveau cours, toujours consacré à HTML 5, vous allez apprendre à utiliser les images, très important.

Les images

La grande majorité des sites Internet ont toujours des images, une bannière, un logo, des illustrations avec les articles. Il faut savoir que les format JPEG, GIF, et PNG sont pris en compte par les principaux navigateurs Web, donc le format GIF, si vous êtes à peu près du même âge que moi, donc une trentaine d’années, c’est utilisé au début du web, donc rappelez-vous les GIF animés il y en avait partout de ces gifs animés, plus ou moins jolis, bien évidemment, donc c’est une compression sans perte, maintenant il faut savoir que le GIF a été remplacé par d’autres formats. Vous avez le format JPEG qui possède une compression vraiment efficace de 16 millions de couleur par contre c’est une compression avec perte, suivant la valeur de la compression de votre image, elle s’affiche plus ou moins bien, vous avez une perte de qualité, par contre les JPEG ne prenne pas beaucoup de place, c’est leur avantage. Et vous avez le format PNJ qui est de plus en plus utilisé, parce que non seulement il a transparence, il gère la transparence, et réunit le meilleur du JPEG et du GIF, donc on peut faire de l’animation avec le PNG, c’est un format ouvert nom breveté et qui compresse les images. Donc il existe aussi un nouveau format, WebP développé par Google, il commence à prendre de plus en plus d’importance, l’avantage du format WebP, il réduit la taille des fichiers de 30 pour cent, par rapport au format PNG et sans perte de qualité perceptible. Ce format est voué à se développer WebP, vous allez le voir de plus en plus. Globalement vous verrez souvent du format PNG et JPEG.

L’ajout d’une image

Pour ajouter une image dans votre document HTML, vous avez la balise img avec différents attributs, les attributs height et width ça défini en pixels la hauteur pour height et pour width la largeur de l’image, toujours en pixels.
L’attribut alt contient une description de l’image, donc dans l’attribut alt, vous mettez une description, un texte associé à l’image, donc voici un exemple pour insérer une image, donc image avec l’attribue src, vous mettez le lien vers votre image, si c’est dans le même répertoire c’est comme les fichiers HTML du dernier cours, logo.png, si c’est dans un autre répertoire vous mettez le nom de l’autre répertoire fichier logo.png ou vous pouvez remonter d’un répertoire ../ pour remonter dans le répertoire logo.png, ou vous pouvez afficher des images qui sont sur un autre domaine, un autre site Internet que le vôtre, en donnant l’URL complète dev-facile.com/logo.png. Remarquez à la fin de l’anti slash, pour fermer la balise image, donc comme je vous l’ai dit certains développeurs n’utilisent pas la balise anti slash tout à la fin, personnellement je vous conseil de l’utiliser comme ça votre code sera valide, XHTML pour le WC3.

Donc voici un exemple de code source avec un logo qui sera affiché au taille de largeur 150 pixels par 150 en hauteur, src = logo.png donc il n’est pas forcément dans le même répertoire, et la description de ces logos, dev-faciles dans l’attribut alt, tout simplement.

L’ajout d’un lien sur une image

Vous pouvez également mettre des liens sur une image, vous l’avez vu souvent dans un site Internet, le header donc la bannière en haut, c’est un liens qui renvoi vers la page d’accueil du site Internet, tout simplement, vous mettez votre balise image et autour de votre balise image vous ouvrez la balise a, href = accueil.php et vous refermez la balise a, après votre balise image, comme vous avez l’exemple sur le code source qui s’affiche sur votre écran. Href accueil.php vous mettez votre balise image, logo.png et vous refermez cette balise-là. L’utilisateur pourra cliquer sur votre image, et sa renverra sur la page accueil.PHP.

Supprimer la bordure de l’image

Vous pouvez, bien évidemment, rajouter du CSS sur votre image, vous allez le voir dans les prochains cours, les balises CSS 3 pour faire des effets de profondeur, des effets ombré, des bordures sur votre image. Là je vous montre un exemple tout simple, pour supprimer la bordure sur votre image, il suffit d’utiliser l’attribut style, et vous faîtes border : none, comme vous voyez sur l’exemple de code source qui s’affiche sur votre écran, et là, la bordure de votre image ne va pas s’afficher.

L’ajout d’une couleur en arrière-plan

Vous pouvez ajouter une couleur arrière-plan de votre image, donc si vous avez une image png avec une couleur transparente, vous pouvez modifier cette couleur et ajouter la couleur que vous souhaitez, donc par exemple, vous définissez le style, feuille de style avec body background-color avec un code couleur en hexadécimale, et donc il faut savoir que dans tout les documents HTML, il y a une balise body, tout le contenu dans la balise body aura une couleur de fond qui est défini à E2A9F3, et donc vous avez votre logo.png, donc si il a une couleur transparente, bien évidemment, on verra la couleur de fond vous avez défini dans la balise body, si il n’a pas de couleur transparente, tout ce qui est autour de votre image, l’image ne fait que 150 pixels par 150 donc il y a de la place autour de l’image, il y aura une couleur de fond. Donc c’est très utilisé également, parce que si la couleur de fond votre image, il n’y a pas de dégradé, c’est une couleur unie, je vous conseille de le faire en CSS, comme ça votre image sera beaucoup plus légère, donc votre site Internet va s’afficher beaucoup rapidement sur le pôle de l’internaute, donc pensez à utiliser les balises CSS pour définir vos couleur de fond, à la place de vos images, c’est beaucoup plus léger un fichier CSS qu’un fichier image.

Vous pouvez également ajouter une image en arrière-plan, vous avez de plus en plus de site Internet, des blogs WordPress, il y a une image en arrière-plan et votre texte qui défile. Vous utilisez background image et vous mettez l’URL de l’image, donc soit logo.png, c’est dans le même répertoire, soit vous avez votre répertoire fichier ici, vous mettez fichier/logo.png ou alors vous pouvez mettre une URL d’une image qui est sur un autre site Internet que le vôtre. Donc voici encore un exemple de code source que vous pouvez utiliser pour définir une image en arrière-plan.

Votre plan d’actions !

Maintenant c’est à votre tour d’utiliser les images dans vos pages Web. Retrouvez un exemple de code directement sous ce cours vidéo si vous avez des questions, posez-les également directement sous cette vidéo. Je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source HTML5

Un exemple de code source HTML5 qui utilise des images.

Quel format d’images utilisez-vous et pourquoi ?

Dites-moi, dans les commentaires, le format d’images que vous utilisez (png, gif, jpeg, Webp ou flash), et pour quelles raisons ?