Comment ajouter une image dans HTML

Si vous souhaitez attirer l'attention des utilisateurs lorsqu'il visite votre site Web, l'ajout d'images peut être une chose amusante à faire. Les images rendent l'apparence de votre site Web plus attrayant, ajoutant ainsi à la beauté globale de votre site Web. Mais comment ajouter des images à un site Web? Eh bien, nous avons résumé les moyens en utilisant les images qui peuvent être insérées dans les pages Web.

Comment ajouter des images dans HTML

Afin d'ajouter des images aux pages Web, utilisez le étiqueter. Cette balise est vide et se compose de certains attributs et n'a pas de balise de fin.

Les attributs de la balise sont; le SRC attribut utilisé pour définir le chemin de l'image et le alt L'attribut est utilisé comme texte alternatif dans les scénarios lorsque l'image ne se charge pas en raison d'un problème.

Ici, nous avons montré comment utiliser cette balise pour ajouter des images.

Html

Dans le code ci-dessus, nous ajoutons trois images à la page Web à l'aide de la balise. Dans chaque balise, le chemin des images a été fourni à l'attribut SRC et un autre texte a été ajouté à ces balises. De plus, nous fournissons également une certaine largeur et hauteur aux images.

Sortir

Des images ont été ajoutées à la page.

Comment ajuster la largeur et la hauteur de l'image

Si vous souhaitez modifier la largeur et la hauteur d'une image, utilisez simplement les propriétés de largeur et de hauteur dans la balise.

Html

Le code ci-dessus ajoutera des images à la page Web ayant la largeur et la hauteur spécifiées en utilisant la largeur et les propriétés de hauteur.

Sortir

Les deux images ont des largeurs et des hauteurs différentes.

Comment ajouter des images d'un autre dossier

Si les images que vous souhaitez intégrer dans votre page Web sont présentes dans un autre dossier comme indiqué dans la capture d'écran ci-dessous, ajoutez le nom du dossier dans l'attribut SRC.

Les images sont présentes dans le dossier nommé «Images».

Html

Pour montrer correctement comment ajouter des images d'un autre dossier, nous avons joint une capture d'écran de l'éditeur de code. La section mise en évidence en rouge montre que des images sont présentes dans un autre dossier qui est présent juste à côté du fichier HTML. Le nom du dossier ainsi que le nom et le format de l'image sont fournis à l'attribut SRC de la balise comme mis en évidence en vert.

Sortir

L'image a été ajoutée à partir d'un autre dossier.

Comment ajouter des images à partir d'une autre page Web

Afin d'ajouter des images d'une autre page ou source Web, vous devez fournir l'URL complète de cette source à l'attribut SRC de la balise.

Html

Le code ci-dessus va récupérer l'image à partir de l'URL spécifiée et l'ajouter à notre page Web.

Sortir

L'image a été ajoutée avec succès à partir d'une autre page Web.

Comment ajouter des images sous forme de liens

Si vous souhaitez rediriger votre utilisateur vers une autre page Web, vous pouvez utiliser des images pour effectuer cette tâche.

Html

Dans le code ci-dessus, nous fournissons d'abord le lien de la page Web que nous voulons rediriger nos utilisateurs vers et fournir ce lien vers l'attribut HREF de la balise puis nicher notre image qui est un GIF dans ce cas dans l'ancre étiqueter.

Sortir

Lorsque l'utilisateur clique sur l'image, il sera redirigé vers la page Web fournie comme le lien dans la balise d'ancrage.

Conclusion

Dans le but d'ajouter des images en HTML, utilisez le étiqueter. Cette balise est vide, n'a pas de balise de fin et se compose de deux attributs requis qui sont; L'attribut SRC et l'attribut ALT. L'attribut SRC est utilisé pour indiquer le chemin d'accès de l'image, tandis que l'attribut ALT indique un texte qui est affiché comme un alternatif au cas où l'image ne se charge pas en raison d'un problème. À l'aide de cette balise, vous pouvez ajouter des images d'un autre dossier ou d'un autre site Web, ou les utiliser comme liens.