Comme un livre qui n’est pas un roman, un site Web a parfois besoin d’images pour présenter le texte. Que vous souhaitiez mettre en avant un service proposé par votre entreprise, des photos de plats de votre restaurant ou des souvenirs de votre dernier voyage de ski sur votre blog personnel, l’ajout d’images sur votre site Web est tout aussi important que l’ajout de texte.

Sur un site que vous codez vous-même, vous devez savoir plus que simplement comment coller une image en HTML. Même si vous avez un CMS tel que WordPress, Shopify ou alors Prestashop Pour n’en nommer que quelques-uns, cela n’exclut pas d’avoir à mettre la main dans le code pour insérer une image vous-même au lieu d’utiliser les outils prédéfinis fournis par CMS.

C’est pourquoi il est important de savoir comment insérer une image en HTML. Nous vous expliquons cela dans ce tutoriel.

Soumettez gratuitement votre projet à Codeur.com, recevez quinze devis et choisissez le développeur web idéal.

Trouver un développeur Web

Les bases de l’intégration d’une image

le Balise HTML Avec lui, vous pouvez insérer une image comme celle-ci: <img/>.

Bien qu’il puisse contenir une grande variété d’attributs, la seule chose essentielle à sa fonction est l’attribut src.

Avec cet attribut, vous pouvez spécifier le chemin (absolu ou relatif) de votre image. Vous utilisez donc cet attribut et entre guillemets pour indiquer où se trouve votre image sur votre ordinateur, serveur ou autre système d’hébergement.

Par exemple, disons que vous écrivez un article sur les ptérosaures et que vous souhaitez inclure une image de ptérodactyle dans votre article. Par exemple, vous obtenez une image de Pixabay (citant l’auteur comme source).

Téléchargez leimage libre de droit Un ptérodactyle du site Pixabay hébergera alors cette image sur votre serveur ou sur un hôte d’image gratuit (Exemple: goopics.net). Enfin, ajoutez l’image à votre site à l’aide de la balise <img/> comme ça :

<img src="https://i.goopics.net/kn9pe.jpg" />

Vous pouvez obtenir un résultat similaire et très simple comme celui-ci:

Intégration d'image HTML

Trouvez cet exemple sur https://codepen.io/pen/?template=vYKxOjX

Avez-vous peur des balises HTML? Commencer avec Apprenez les bases du HTML ou alors Embaucher un développeur Web indépendant pour créer et mettre en forme votre site Web.

Les autres attributs d’une image

Si vous souhaitez ajouter encore plus votre image sur votre site Web, c’est un excellent moyen de compléter votre balise <img/> avec des attributs autres que src.

Parmi ces attributs, nous trouvons: alt, title, height, width pour les plus célèbres.

Attribut Alt: texte alternatif

attribut alt ou un texte alternatif est un attribut très important dans une image car il donne à votre image deux options importantes:

  1. Laissez-vous lire par un lecteur d’écran utilisé par un utilisateur malvoyant. Si votre image concerne un texte ou un contenu important, votre balise alt décrit la scène de votre image et peut être lue par un lecteur d’écran pour décrire cette scène si l’utilisateur est malvoyant.
  2. L’image peut être indexée par les moteurs de recherche, Google pour les plus populaires, en fonction des mots-clés contenus dans votre balise alt. Cette journée est donc très importante pour eux Référencer vos images et avec lui aussi de votre côté.

Selon l’utilité de votre image, le contenu du tag alt sera différent:

  • Si votre image n’est qu’une « décoration », par exemple Par exemple, un symbole sans lien réel vers un texte ou un contenu important, laissez l’attribut inchangé alt vide comme ci-dessous. De cette manière, les lecteurs d’écran ignoreront l’image.

<img src="https://i.goopics.net/kn9pe.jpg"  alt=""/>

  • Si l’image complète le texte ou ajoute quelque chose au contenu auquel elle est liée, décrivez-la dans la balise alt Ce que l’image représente ou quelles informations supplémentaires la photo fournit:

<img src="https://i.goopics.net/kn9pe.jpg"  alt="Ptérodactyle volant à travers une forêt"/>

Attribut de titre: bulle d’aide

Cet attribut vous permet d’ajouter une info-bulle à votre image qui apparaît lorsque vous la survolez pour fournir des informations supplémentaires pour vous aider à comprendre l’image.

Trouvez le meilleur développeur Web sur Codeur.com

Vos premiers devis en 15 minutes

Gratuit et sans engagement

Déjà plus de 75000 clients

Trouvez un pigiste

Les attributs de hauteur et de largeur: définissez la hauteur et la largeur

Avec ces deux attributs, vous pouvez définir une hauteur (height) et une largeur (width) Base de votre image, ce qui est également possible en CSS.

Leur utilisation est simple, écrivez les dimensions que vous souhaitez (en px,%, em, rem, …) Dans ces deux attributs, la taille de l’image est automatiquement redimensionnée lors de son affichage.

Exemple:

<img src="https://i.goopics.net/kn9pe.jpg" height="100px" width="200px" />

Attribut largeur hauteur HTML

Conclusion

Vous savez maintenant comment coller une image au format HTML sur votre site Web ou tout autre endroit où vous pouvez écrire du code HTML. Le jour <img/> peut être simple, mais cela peut aussi être beaucoup plus complexe si une variété d’autres attributs existants sont utilisés pour cette balise.

Si malgré ce tutoriel, vous ne parvenez toujours pas à intégrer correctement une image dans votre site web, n’hésitez pas Publier une annonce gratuite sur Codeur.com Trouvez rapidement de l’aide auprès d’un pigiste.

Apprenez-en aussi Centrez votre image avec notre tutoriel CSS !

Souhaitez-vous mettre votre photo en arrière-plan de votre site Web? conséquences le manuel de fond CSS !



Source link

Recent Posts