Insérer une image en HTML

Cet article est d’une grande importance. En fait, dans tous les langages de programmation y compris bien sur le PHP, nous serons amenés souvent à utiliser les conditions.

Le principe reste toujours le même et uniquement la syntaxe d’écriture qui change d’un langage à l’autre. Il faut donc bien comprendre le principe et non pas uniquement la syntaxe.

Le rôle des conditions consiste à exécuter différentes tâches selon différents cas.

Il existe 3 variantes pour les tests conditionnels en PHP.

Balise <img> : Insérer une Image en HTML

La balise <img> est l'élément de base pour insérer des images dans une page HTML. Voici comment l'utiliser :


  
  <img src="chemin_de_l'image.jpg" alt="Texte alternatif">

src :L'attribut src spécifie le chemin de l'image. Il peut s'agir d'une URL vers une image en ligne ou d'un chemin local vers une image stockée sur le serveur.
alt :L'attribut alt fournit un texte alternatif pour l'image. Il est essentiel pour l'accessibilité, car il est lu par les lecteurs d'écran pour les utilisateurs malvoyants. Assurez-vous de fournir une description précise de l'image.

Contrôler la Taille d'une Image en HTML

Vous pouvez contrôler la taille d'une image en utilisant les attributs width et height. Cependant, il est généralement recommandé de spécifier soit la largeur, soit la hauteur, pour maintenir les proportions de l'image.


  
  <img src="image.jpg" width="300" alt="Image redimensionnée">

L’attribut width="300" indique la largeur de l'image en pixels. Dans cet exemple, l'image sera affichée avec une largeur de 300 pixels. La spécification de la largeur peut être utile pour contrôler la taille de l'image à l'écran.

De la même manière, vous pouvez spécifiez aussi la hauteur de l’image :


  
  <img src="image.jpg" width="300" height="200" alt="Image avec hauteur spécifiée">

Comment ajouter une légende à une image ?

Les légendes d'images jouent un rôle important dans la présentation et la compréhension du contenu visuel sur une page web. En effet, les légendes d'images sont un élément important de la conception web. Elles améliorent la compréhension, l'accessibilité, le référencement et la lisibilité de votre contenu visuel. Il est recommandé de les utiliser chaque fois que cela est pertinent pour vos images.

Pour fournir des légendes aux images, vous pouvez utiliser l'élément <figure> avec <figcaption>.


  
  <figure>
  <img src=" php-html-css.png" alt="Image avec légende">
  <figcaption>Une belle image avec une légende.</figcaption>
  </figure>

Enregistrez une image dans le répertoire de votre site et mettez le code précédent dans index.html (en modifiant le nom de l’image).

Dans le résultat de l’exécution de ce code, remarquez la légende (Une belle image avec une légende) affichée en bas à gauche de l’image.

Résultat:

Remarquez bien la légende en bas de l’image.

Comment ajouter un hyperlien à l'image

L'utilisation d'images comme liens est une pratique courante sur le web. Cela permet de rendre la navigation plus visuelle et d'inciter les utilisateurs à interagir avec le contenu. Voici comment utiliser des images en tant que liens en HTML :

La balise <a> Enveloppant l'Image

Pour transformer une image en un lien, vous pouvez encapsuler la balise <img> avec une balise <a>. La balise <a> est utilisée pour créer des liens hypertexte, qu'ils soient textuels ou graphiques.


  
  <a href="page-de-destination.html">
  <img src="image-lien.jpg" alt="Image Lien">
  </a>

<a>: Cette balise est utilisée pour définir un lien hypertexte. L'attribut href spécifie l'URL de la page de destination vers laquelle le lien doit rediriger.

<img> : À l'intérieur de la balise <a>, vous insérez l'image que vous souhaitez utiliser comme lien. L'attribut src indique l'emplacement de l'image, et l'attribut alt fournit un texte alternatif pour l'accessibilité.

Utilisation des images comme des Boutons

Les images utilisées comme liens peuvent prendre la forme de boutons. Ces boutons d'image sont couramment utilisés pour des actions telles que "En savoir plus" ou "Acheter maintenant." Vous pouvez créer un effet de bouton en utilisant des images avec des styles de conception appropriés. Dans l’exemple suivant nous allons utiliser un bouton (image) nommé « bouton-acheter-maintenant ».


  
  <a href="produit.html">
  <img src="bouton-acheter-maintenant.png" alt="Acheter maintenant">
  </a>

Résultat

Lorsque vous utilisez des images comme liens, assurez-vous de fournir un texte alternatif (alt) pour chaque image. Le texte alternatif est essentiel pour l'accessibilité, car il est lu par les lecteurs d'écran pour les utilisateurs malvoyants. Assurez-vous également que le lien a un but clair et qu'il est facile à identifier.

En utilisant des images comme liens, vous pouvez ajouter une dimension visuelle à la navigation sur votre site, ce qui peut améliorer l'expérience utilisateur et encourager les interactions avec votre contenu.

Balise <img>: Ajouter l'attribut "title"

L'attribut title dans la balise <img> est un attribut facultatif qui permet d'ajouter un texte descriptif supplémentaire à une image. Il offre une information contextuelle qui s'affiche lorsque l'utilisateur survole l'image avec sa souris. Cette fonctionnalité est particulièrement utile pour fournir des détails complémentaires sur l'image ou pour offrir des informations interactives.

Voici comment utiliser l'attribut title dans la balise <img> :


  
  <a href="https://www.skilldeve.com/" >
  <img src="php-html-css.png" title="Apprenez le développement Web">
  </a>

Dans cet exemple, ce code crée un lien hypertexte qui redirige vers le site web "https://www.skilldeve.com/." À l'intérieur de ce lien, une image est affichée, et lorsque l'utilisateur survole cette image, un tooltip avec le texte "Apprenez le développement Web" s'affiche, donnant une information contextuelle sur le lien, comme le montre le résultat ci-dessous, ce qui peut inciter les utilisateurs à cliquer sur l'image pour obtenir plus d'informations.

Cependant, il est important de noter que l'attribut « title » ne doit pas être surchargé de texte, car les tooltips sont généralement concises. Il est préférable de fournir des informations brèves et pertinentes pour éviter d'encombrer l'interface utilisateur.

En utilisant l'attribut title de manière judicieuse, vous pouvez améliorer l'accessibilité, l'interactivité et l'expérience utilisateur de votre site web.

Résultat

Conclusion

Ce chapitre sur les images HTML nous a permis d'explorer un élément essentiel de la conception de sites web. Les images jouent un rôle clé dans la communication visuelle, l'accessibilité et l'engagement des utilisateurs. Voici quelques points clés à retenir de ce chapitre :

Insertion d'Images : Nous avons appris comment insérer des images dans une page HTML en utilisant la balise <img>. Cette balise nous permet de donner vie à nos pages en ajoutant des éléments visuels.

Texte Alternatif (alt) : L'attribut alt dans la balise <img> est essentiel pour l'accessibilité. Il fournit un texte descriptif de l'image, ce qui est essentiel pour les utilisateurs malvoyants et pour le référencement. Ce texte s’affiche à la place de l’images dans le cas où il y’a des problèmes d’affichage.

Redimensionnement : Nous avons exploré comment spécifier la largeur et la hauteur des images pour les ajuster à nos besoins. Cela est utile pour le contrôle de la présentation.

Liens avec Images : Les images peuvent être utilisées comme liens hypertexte. L'encapsulation de la balise <img> dans la balise <a> permet de créer des liens interactifs.

L'Attribut title : Nous avons découvert comment l'attribut title peut être utilisé pour fournir des informations contextuelles sous forme de tooltips lorsque l'utilisateur survole une image.

Accessibilité : Nous avons souligné l'importance de concevoir nos pages web de manière accessible. Le texte alternatif, les titres et les descriptions d'images sont essentiels pour garantir que tous les utilisateurs, y compris ceux ayant des besoins particuliers, puissent accéder au contenu.

Amélioration de l'Expérience Utilisateur : Les images bien utilisées peuvent rendre l'expérience utilisateur plus attrayante et interactive. L'ajout de titres et de tooltips peut guider les utilisateurs et les informer.

En résumé, les images ne sont pas seulement des éléments visuels, mais aussi des composants essentiels de l'expérience web. En les utilisant judicieusement, en accordant une attention particulière à l'accessibilité et à l'interaction, nous pouvons enrichir nos pages web et offrir une expérience utilisateur exceptionnelle. Il est essentiel de continuer à explorer et à expérimenter avec les images pour tirer le meilleur parti de leur potentiel sur le web.

Maitriser HTML et CSS: du débutant à Expert

Si vous souhaitez apprendre le HTML et le CSS, plongez dans l'univers captivant de la conception web avec le livre (ebook) "Maitriser HTML et CSS : du Débutant à Expert" publié sur Amazon. Vous trouverez dans ce livre tout ce que vous avez besoin pour développer vos compétences en HTML et CSS. Ce livre sera votre référence en HTML et CSS. C'est votre ticket pour un voyage extraordinaire où vous découvrirez les fondations du web, devenant ainsi le maître de votre propre espace en ligne. Cliquez sur l'image ci-dessous pour y accéder directement.