Ajouter des images à votre site Web ou à votre profil de réseau social est un excellent moyen d’améliorer votre page. Le code HTML pour l'ajout d'images est simple et souvent l'une des premières leçons pour un novice HTML.

Première partie de deux:
Insérer l'image

  1. 1 Té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 termes. Certains services réduiront la qualité de votre image ou réduiront votre image si trop de personnes la visualisent (car cela utilise la bande passante de l'hôte).
    • Certains services d'hébergement de blogs vous permettent de télécharger des images à l'aide des outils d'administration du blog.
    • Si vous avez un hébergeur payant, téléchargez l'image sur votre propre site à l'aide d'un service FTP. Créer un répertoire "images" est recommandé pour garder vos fichiers organisés.[1]
    • Si vous souhaitez utiliser une image sur un autre site Web, demandez la permission au créateur. Si elle le concède, téléchargez l'image, puis téléchargez l'image sur un site d'hébergement d'images.
  2. 2 Ouvrez votre fichier HTML. Ouvrez le document HTML pour 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 aux autres utilisateurs du forum si cela ne fonctionne pas.
  3. 3 Commencez par la balise img. Trouvez le point dans votre corps HTML où vous souhaitez insérer une image. Ecrire le tag ici. Ceci est 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 dans les deux crochets.
  4. 4 Trouvez l'URL de votre image. Visitez la page Web sur laquelle votre image est hébergée. Cliquez-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 copiez l'URL dans votre barre d'adresse.
    • Si vous avez téléchargé l'image dans un répertoire d'images sur votre propre site Web, créez un lien avec / images /tonfilenamehere. Si cela ne fonctionne pas, le répertoire images est probablement dans un autre dossier. Déplacez-le vers le répertoire racine.
  5. 5 Placez l'URL dans un attribut src. Comme vous le savez peut-être déjà, les attributs HTML entrent dans une balise pour la modifier. le src attribut est l'abréviation de "source" et indique au navigateur où chercher pour trouver l'image. Écrivez et collez l'URL de l'image entre les guillemets. Voici un exemple:
  6. 6 Ajouter un attribut alt. Techniquement, votre HTML a tout ce qu'il faut pour afficher l'image, mais il est préférable d'ajouter un alt attribuer aussi bien. Cela indique au navigateur quel texte afficher lorsque l'image ne parvient pas à se charger. Plus important encore, cela aide les moteurs de recherche à déterminer la nature de votre image et permet aux lecteurs d'écran de décrire l'image aux visiteurs malvoyants.[2] Suivez cet exemple en modifiant le texte entre guillemets:
    • Si l'image n'est pas importante pour le contenu de la page, incluez l'attribut alt sans texte (alt = "").[3]
  7. 7 Enregistrez 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'avez déjà ouverte. Vous devriez maintenant voir votre image. Si la taille est incorrecte ou si vous n'êtes pas satisfait par cette méthode, passez à la section suivante.

Deuxième partie de deux:
Ajustements facultatifs

  1. 1 Changer 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. Réglage de la largeur et la taille L'utilisation de HTML indique au navigateur de réduire ou d'étendre l'image, ce qui peut être incohérent d'un navigateur à l'autre et provoquer (rarement) des erreurs d'affichage.[4] Si vous souhaitez un ajustement rapide et réparable, utilisez ce format:
    • (Nombre de pixels, ou "pixels CSS" plus conviviaux dans HTML5.)[5][6]
    • ou (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.
  2. 2 Ajouter une info-bulle. le Titre attribut peut être utilisé pour ajouter un commentaire supplémentaire ou des informations sur l'image. Par exemple, vous pouvez créditer l'artiste ici. Dans la plupart des cas, ce texte sera affiché lorsque le visiteur passe le curseur sur l’image.
  3. 3 Faites-en un lien. Pour créer une image qui est aussi un lien, insérez la balise d'image à l'intérieur du balise de lien hypertexte Voici un exemple:

Exemple de code HTML pour insérer des images

Code HTML pour insérer des images