Comment insérer une image avec HMTL

Si vous créez votre propre page Web ou votre blog personnel, il est normal que vous souhaitiez la personnaliser avec les images qui servent à définir votre site ou à illustrer ce que vous expliquez. De cette façon, vous devez savoir comment insérer une image avec HTML, ce qui est assez simple si vous suivez le guide des étapes que nous expliquons ci-dessous.

Le langage HTML est ce langage que nous utilisons lors de la création de notre propre page Web . Nous pouvons entrer dans notre éditeur et à partir du point où nous voulons insérer l'image, nous devrons utiliser les codes ou la route nécessaire pour que la photo soit visible lorsque nous entrons sur le Web ou sur le blog. Pour ce faire, guidez-vous comme nous vous le disons maintenant.

Étapes pour insérer une image avec HTML

  1. La meilleure chose à faire pour savoir comment insérer une image avec HTML est que nous en avons un exemple. Pour ce faire, prenez une photo que vous souhaitez insérer et enregistrez-la sur votre ordinateur. Nous avons pris celui d'un chiot et nous l'appelons ainsi "perro-divertido.jpg".
  2. Nous devons insérer cette image dans le code HTML avec le code suivant:
  3. C'est le code pour créer un élément d'image. Ensuite, les lettres " src " sont utilisées comme attributs et représentent la "source". Fondamentalement, nous allons fournir au navigateur Web une valeur pour la source de l'image. Naturellement, la valeur de l'attribut source est "perro-divertido.jpg". Cet exemple suppose que votre fichier image se trouve dans le même répertoire que votre fichier HTML.
  4. Si, par exemple, votre fichier image se trouvait dans un dossier appelé "images", le code changerait et ressemblerait à ceci:
  5. Comme vous pouvez le constater, dans les deux exemples de code, nous n'avons pas encore inclus de balise de fin , car le code de l'image est un élément "fermeture automatique". En effet, contrairement à un paragraphe, notre élément ne contiendra pas beaucoup de contenu. , mais une seule image. En fait, HTML5 ne nous oblige pas à ne jamais "fermer" nos éléments, mais pour des raisons d'organisation, il est toujours conseillé d'essayer d'inclure des balises de fermeture traditionnelles pour la plupart des éléments.
  6. Enfin , vous devez ajouter un élément de code supplémentaire avant de terminer le téléchargement de l'image au format HTML. Elle consiste à attribuer un attribut et une valeur "alt" à notre image. L'attribut "alt" signifie "alternative" et est utilisé pour fournir une alternative basée sur une description de l'image dans le texte pour les spectateurs au cas où l'image ne se charge pas ou s'ils ont une déficience visuelle. Voici à quoi ressemblera notre code: