Si tu crées ton site internet, tu vas devoir l’agrémenter d’images pour le rendre plus plaisant à regarder. Pour cela, tu seras obligé de passer par l’HTML, le langage de programmation qui gère la structure de ton futur site web. Bien que cette manipulation ne soit pas très complexe à maîtriser, elle présente certaines spécificités à connaître. C’est pourquoi, Études Tech revient sur toutes les étapes à suivre pour mettre une image en HTML.
Qu’est-ce que le HTML ?
Le terme HTML est l’acronyme pour « HyperText Markup Language », ce qui signifie dans la langue de Molière « Langage de balisage hypertexte ». C’est un langage de programmation dédié à la création et à la structuration d’un site web. L’HTML est utile pour déterminer la structuration et la hiérarchie des éléments que tu vas être amené à intégrer à ton site web. Les balises sont donc incontournables en matière de langage HTML. Ce sont elles qui entourent le contenu pour définir sa mise en forme et elles prennent plusieurs formes selon les éléments qu’elles doivent décrire. Tu peux retrouver la balise <h1> pour les titres, <p> pour les paragraphes, <a> pour les liens et enfin <img> pour les images.
Les balises sont utilisées par paire avec une qui va servir d’ouverture et une balise de fermeture correspondante. Par exemple <p> pour ouvrir et </p> en fermeture. Enfin, tu peux également retrouver des attributs au sein de tes balises. Elles fournissent des informations complémentaires sur les éléments. Elles peuvent avoir plusieurs fonctionnalités comme afficher des contrôles de lecture pour un média, indiquer l’URL de destination d’un lien, spécifier si un élément cliquable doit être ouvert ou non dans un nouvel onglet. Ces attributs sont indispensables pour intégrer une image en HTML. Sans elle, l’image pourrait rencontrer des bugs de chargement ou ne pas fonctionner correctement sur ton site web.
Lire aussi : Le langage de programmation en développement web
Pourquoi mettre une image en HTML ?
Si tu commences à concevoir ton site web, tu dois bien avoir à l’esprit que ce qui va permettre à ton spectateur ou lecteur de rester, c’est bien la forme que celui-ci va avoir. Tu peux faire le meilleur contenu, les articles les plus intéressants possibles, si le site n’est pas agréable, alors il n’attirera personne. Pour cela, il y a plusieurs critères indispensables à respecter. Ton site doit être fluide et intuitif. Pour la fluidité, il faut qu’il n’y ait pas de ralentissement sur le chargement des pages. En ce qui concerne l’intuitivité, l’utilisateur ne doit pas perdre son temps à comprendre comment il fonctionne et à chercher pendant longtemps les réponses qu’il souhaite. Toutes les pages de ton site doivent avoir un objectif précis. Si certaines ne mènent à rien ou ne fonctionnent pas alors cela va grandement baisser l’attractivité de ton site.
Un autre élément qui va te permettre de générer de l’attractivité, ce sont les illustrations que tu vas apporter à ton site et cela passera forcément par l’HTML. Un site sans image dégage une importante impression de vide laissant rapidement place à l’ennui. Intégrer des images permet d’illustrer des situations afin que le lecteur puisse avoir une représentation visuelle de ce qu’il est en train de lire. Cela améliore également le référencement de ton site.
Certaines plateformes, comme WordPress, favorisent l’intégration d’image, mais ce n’est pas le cas pour toutes les plateformes. C’est pourquoi, tu dois connaître toute la méthodologie pour mettre une image en HTML.
Les balises importantes pour mettre une image en HTML
Pour mettre une image en HTML, tu auras besoin d’utiliser la base <img>. C’est une balise dite orpheline, c’est-à-dire qu’il n’existe pas de balise fermante </img> comme cela peut être être le cas lorsque tu cherches à intégrer un paragraphe. Une fois ceci-fait, tu vas pouvoir insérer l’attribut <src> symbolisant la source de ton image, l’endroit d’où elle provient. Cette source peut être multiple. Elle peut provenir d’un site web, dans ce cas il va falloir que tu rentres l’URL du site en question. L’image peut provenir directement de ton ordinateur. Ici, il faudra que tu insères le chemin nécessaire pour retrouver ton image au sein de ton ordinateur. Afin d’éviter toute sorte d’ennui, il est préférable que ton site contienne des images libres de droit que tu pourras récupérer sur des sites comme Pixabay.
Un autre attribut important pour mettre une image en HTML c’est <alt>. Cet attribut décrit l’image, ce qui peut être pratique si ton image rencontre un problème d’affichage, à cause d’un URL erroné ou à cause d’un bug au sein de ton site. L’utilisateur pourra se faire une idée de ce qu’il était censé voir. Cet attribut <alt> permet aussi aux malvoyants d’avoir une représentation de l’image grâce à la description qu’ils vont entendre.
Lire aussi : Tout savoir sur OpenAI, l’entreprise détentrice de ChatGPT
Les extensions à utiliser
Plusieurs types d’image peuvent être intégrés en HTML. Ton choix se basera donc sur le type d’image que tu vas utiliser. Si tu souhaites mettre des photos alors oriente-toi vers le format JPG ou JPEG, tous les deux sont très similaires, avec beaucoup de caractéristiques identiques. En effet, ces deux formats sont destinés à la photo parce qu’ils offrent un meilleur traitement des couleurs. Celles-ci seront plus détaillées et plus jolies. Par contre, il va y avoir une certaine perte des données lorsqu’elles vont être compressées. Par conséquent, cela va donner un rendu assez pixelisé lorsque l’on va zoomer sur la photo.
Le format PNG est celui qui est destiné davantage aux logos. En effet, il offre un meilleur rendu parce qu’il n’y a pas de perte de données lors de la compression contrairement aux formats JPG et JPEG. De plus, le PNG gère la transparence, c’est pour cela que c’est le format que l’on retrouve le plus, lorsqu’il s’agit de créer un logo. Néanmoins, les couleurs sont bien moins jolies que sur un format JPG et JPEG. Si tu souhaites intégrer une photo à ton site alors oriente-toi vers ces deux derniers et si tu intègres un logo alors choisis le format PNG.
Tu as également un troisième format, beaucoup moins prisé, mais qui a le mérite d’exister : le gif. En effet, il offre une qualité bien inférieure à celle des trois formats évoqués, mais il prend en charge l’animation.
Comment intégrer une image ?
Une fois que tu as sélectionné tes images, crée un dossier « img » sur ton ordinateur où tu vas y insérer toutes les images choisies. Sur ta ligne de code, indique le chemin nécessaire pour retrouver ton dossier. Une fois ceci fait, avec l’attribut « alt », décris l’image en question. Par exemple, tu as choisi un panier de basket pour illustrer un article en rapport avec ce sport, inscris « panier de basket, lors d’un coucher de soleil » pour apporter le plus de précisions possibles avec le minimum de mots.
Avec les attributs width et heights, tu vas pouvoir choisir la largeur et la hauteur de ton image, il faut que tu indiques ces valeurs en pixels. Tu as également la possibilité de faire un lien sur ton image afin de rediriger l’utilisateur vers une autre page ou de mettre un lien sur ton image. Celle-ci devient cliquable et sera visible dans sa taille originelle.
Lire aussi : Le guide complet pour apprendre JavaScript
