Comment insérer des images avec HTML?
1. Téléchargez l'image.
2. Ouvrez votre fichier HTML.
3. Tapez <img src="">
4. Insérez l'URL de l'image entre les guillemets.
Comment insérer une image à partir d'un chemin différent en HTML?
L'ajout d'images à votre site Web ou à votre profil de réseau social est un excellent moyen d'embellir votre page. Le code HTML pour l'ajout d'images est simple et constitue souvent l'une des premières leçons pour un novice en HTML.
Partie 1 sur 2: insertion de l'image
- 1Téléchargez votre image. Il existe de nombreux services d'hébergement d'images gratuits, tels que Picasa Albums Web, Imgur, Flickr ou Photobucket. Lisez attentivement les conditions. Certains services réduiront la qualité de votre image ou supprimeront votre image si trop de personnes la voient (car cela utilise la bande passante de l'hébergeur).
- Certains services d'hébergement de blogs vous permettent de télécharger des images à l'aide des outils d'administration de blog.
- Si vous avez un hébergeur payant, téléchargez l'image sur votre propre site à l'aide d'un service FTP. La création d'un répertoire "images" est recommandée pour garder vos fichiers organisés.
- Si vous souhaitez utiliser une image sur un autre site Web, demandez la permission au créateur. Si elle l'accorde, téléchargez l'image, puis chargez l'image sur un site d'hébergement d'images.
- 2Ouvrez votre fichier HTML. Ouvrez le document HTML de la page Web où l'image sera affichée.
- Si vous essayez d'insérer une image sur un forum, vous pouvez taper directement dans le message. De nombreux forums utilisent un système personnalisé au lieu de HTML. Demandez de l'aide à d'autres utilisateurs du forum si cela ne fonctionne pas.
- 3Commencez par la balise img. Trouvez le point dans votre corps HTML où vous souhaitez insérer une image. Écrivez la balise <img> ici. Il s'agit d'une balise vide, ce qui signifie qu'elle est autonome, sans balise de fermeture. Tout ce dont vous avez besoin pour afficher votre image ira à l'intérieur des deux crochets angulaires.
- <img>
Comment insérer des images sans lien? - 4Trouvez l'URL de votre image. Visitez la page Web où votre image est hébergée. Cliquez avec le bouton droit sur l'image (contrôle-clic sur Mac) et sélectionnez "Copier l'emplacement de l'image". Vous pouvez également cliquer sur "Afficher l'image" pour voir l'image seule sur une page, puis copier l'URL dans votre barre d'adresse.
- Si vous avez téléchargé l'image dans un répertoire d'images de votre propre site Web, créez un lien avec /images/ votrenomdefichierici. Si cela ne fonctionne pas, le répertoire images se trouve probablement dans un autre dossier. Déplacez-le vers le répertoire racine.
- 5Placez l'URL dans un attribut src. Comme vous le savez peut-être déjà, les attributs HTML vont à l'intérieur d'une balise pour la modifier. L' attribut src est l'abréviation de "source" et indique au navigateur où chercher pour trouver l'image. Écrivez src="" et collez l'URL de l'image entre les guillemets. Voici un exemple:
- <img src="http://exampleimagehost.com/my-cute-dog.jpg">
- 6Ajoutez un attribut alt. Techniquement, votre code HTML a tout ce dont il a besoin pour afficher l'image, mais il est préférable d'ajouter également un attribut alt. Cela indique au navigateur quel texte afficher lorsque l'image ne se charge pas. Plus important encore, cela aide les moteurs de recherche à comprendre de quoi parle votre image et permet aux lecteurs d'écran de décrire l'image aux visiteurs malvoyants. Suivez cet exemple en modifiant le texte entre guillemets:
- <img src="http://exampleimagehost.com/my-cute-dog.jpg" alt="Mon chien mange une mandarine">
- Si l'image n'est pas importante pour le contenu de la page, incluez l'attribut alt sans texte (alt="").
- 7Enregistrez vos modifications. Enregistrez le fichier HTML sur votre site Web. Visitez la page que vous venez de modifier ou actualisez la page si vous l'aviez déjà ouverte. Vous devriez maintenant voir votre image. Si ce n'est pas la bonne taille ou si vous n'êtes pas satisfait pour une autre raison, passez à la section suivante.
Comment insérer une image dans un document MS Word qui peut être visualisé sur n'importe quel ordinateur?
Partie 2 sur 2: ajustements facultatifs
- 1Modifiez la taille de l'image. Pour de meilleurs résultats, redimensionnez l'image à l'aide d'un logiciel d'édition gratuit, puis téléchargez la nouvelle version. La définition de la largeur et de la hauteur à l'aide de HTML indique au navigateur de réduire ou d'agrandir l'image, ce qui peut être incohérent entre les navigateurs et (rarement) provoquer des erreurs d'affichage. Si vous souhaitez un réglage rapide et utilisable, utilisez ce format:
- <img src="http://example.com/example.png" alt="Afficher ceci" width=200 height=200> (Nombre de pixels, ou les "pixels CSS" plus adaptés aux téléphones en HTML5.)
- ou <img src="http://example.com/example.png" width=100% height=10%> (Pourcentage des dimensions de la page Web, ou pourcentage de l'élément HTML contenant l'image.)
- Si vous n'entrez qu'un seul attribut (largeur ou hauteur), le navigateur doit conserver le rapport largeur: hauteur.
- 2Ajouter une infobulle. L' attribut title peut être utilisé pour ajouter un commentaire ou des informations supplémentaires sur l'image. Par exemple, vous pouvez créditer l'artiste ici. Dans la plupart des cas, ce texte sera affiché lorsque le visiteur passera le curseur sur l'image.
- <img src="http://example.com/example.png" title="Photographie de J. godfrey">
- 3Faites-en un lien. Pour créer une image qui soit également un lien, insérez la balise d'image dans la balise de lien hypertexte <a></a>. Voici un exemple:
- <a href="http://urloflink.com"><img src="http://urlofimage.com/image.gif"></a>
Le code HTML pour l'ajout d'images est simple et constitue souvent l'une des premières leçons pour un novice en HTML.
- Conservez une sauvegarde de l'image sur votre ordinateur, juste au cas où.
- Assurez-vous que l'URL inclut le format de fichier de l'image (.jpg,.gif, etc.).
- Les images GIF fonctionnent bien pour les logos ou les dessins animés, tandis que les images JPEG fonctionnent bien pour les images complexes telles que les photographies.
- Dans la plupart des cas, vous voudrez vous en tenir aux images avec les formats de fichier.gif,.jpeg,.jpg ou.png. Il est peu probable que d'autres formats s'affichent correctement sur tous les navigateurs.
- Ne faites pas de «hotlink» en insérant l'URL du site Web d'une autre personne. Cela consomme de la bande passante sur le site de cette personne, sans amener aucun visiteur sur sa page. Outre la mauvaise étiquette, une image liée disparaîtra si le site lié tombe en panne. Si l'hébergeur voit ce que vous faites, il peut même changer l'image qui apparaît sur votre site.
Questions et réponses
- Cela fonctionne-t-il également pour les utilisateurs qui visitent mon site?Oui, tant que vous en utilisez un sur le Web ou que vous avez une image de votre ordinateur.
- Comment insérer une image?Le code pour insérer une image en HTML est répertorié dans cet article. Veuillez le lire ci-dessus.
- Que dois-je faire lorsque l'image n'apparaîtra pas sur le site Web HTML?L'hôte de l'image a probablement changé son lien, auquel cas vous devriez découvrir son nouveau lien et modifier le lien que vous avez écrit dans votre code HTML, l'enregistrer et recharger votre page Web. L'hôte peut également avoir supprimé l'image, auquel cas vous devriez trouver une autre image.
- J'ai une image sur mon ordinateur. Puis-je l'insérer en HTML sans le télécharger sur un site Web?Vous pouvez, mais l'image ne sera toujours que sur votre ordinateur et ne sera visible par personne d'autre qui visite votre site Web. Pour ce faire, utilisez le chemin du fichier de l'image au lieu d'une URL. Pour trouver le chemin du fichier, utilisez la fonction "Ouvrir un fichier" d'un navigateur pour ouvrir l'image, puis regardez la barre d'adresse. Il dira quelque chose comme "C:\Users\guide\image.jpg"
- L'image s'affichait, mais maintenant je ne vois qu'une case vide. Que s'est-il passé?Si l'image n'est plus disponible à l'URL que vous avez référencée, elle n'apparaîtra pas sur votre site Web. Très probablement, le site hébergeant l'image l'a supprimée ou l'a déplacée vers une autre page.
- Comment remplacer l'image s'il lui arrive quelque chose?Modifiez le code que vous avez utilisé pour insérer l'image précédente et ajoutez le code pour le remplacer. Après cela, enregistrez-le et rechargez-le dans la page Web.
- Dois-je redimensionner l'image avant de la télécharger, ou puis-je simplement utiliser les attributs de largeur et de hauteur?Si vous réduisez la taille d'une image particulièrement volumineuse, il est préférable de le faire dans un logiciel de retouche d'image avant de la télécharger. Le visiteur de votre site Web doit télécharger l'image exacte que vous avez téléchargée, même si elle ne se retrouve que sous la forme d'une minuscule vignette sur son écran.
- Doit-il s'agir d'un fichier jpg lors de l'insertion d'images avec HTML?Non. Vous pouvez utiliser n'importe quel type de fichier image, sauf si le site Web d'hébergement n'autorise que certains types de fichiers.
- Quels types de fichiers sont nécessaires pour insérer une image?Vous pouvez utiliser n'importe quel type de fichier image, sauf si le site Web d'hébergement n'autorise que certains types de fichiers.
- Comment insérer des images sans lien?Vous pouvez vous arrêter après avoir suivi les étapes jusqu'à la fin de la partie 1. Les étapes de la partie 2 sont facultatives.
Questions sans réponse
- Comment insérer une image à partir d'un chemin différent en HTML?
- Que dois-je faire si mon serveur plante?
- Comment utiliser des images brutes?
- Puis-je également y ajouter une animation? Si c'est le cas, comment?
- Comment insérer une image dans un document MS Word qui peut être visualisé sur n'importe quel ordinateur?
