✅ Lien d'image en HTML - Différents types de balises HTML avec code et syntaxe

Introduction au lien d'image en HTML

Introduction au lien d'image en HTML

Lien d'image en HTML se trouve dans presque toutes les pages car ils nous aident à naviguer d'une page à l'autre sur un site Web. Une combinaison populaire consiste à utiliser la balise d'ancrage HTML avec la balise img de HTML . Avec cette combinaison, nous pouvons permettre le déplacement des utilisateurs d'une page à l'autre en cliquant sur une image. Avant d'approfondir ce sujet, comprenons d'abord le fonctionnement et le rendu des éléments d'ancrage et d'image individuellement, puis combinons-les pour obtenir une image liée.

Balise d'ancrage HTML

La balise HTML Anchor est utilisée pour créer des hyperliens HTML vers d'autres pages Web ou du contenu multimédia hébergé sur le Web. Reportons-nous à la syntaxe ci-dessous pour comprendre le fonctionnement des balises d'ancrage et leurs attributs de base

Cliquez ici!!

Dans l'exemple ci-dessus, l'attribut "href" spécifie l'URL de la page Web vers laquelle nous aimerions rediriger l'utilisateur en cliquant sur le texte "Cliquez ici !!".

Voyons le code complet ci-dessous:

Production

Avec l'exemple ci-dessus, vous pourrez faire les observations suivantes

Un lien non visité apparaîtra souligné et de couleur bleue. Par exemple. Ceci est un lien non visité
Un lien visité apparaîtra souligné et de couleur violette. Par exemple. Ceci est un lien déjà visité
Un lien actif apparaît souligné et de couleur rouge. Par exemple. Ceci est un lien actif

Balise d'image HTML

En naviguant sur Internet, je suis sûr que vous devez avoir rencontré plusieurs pages Web contenant diverses formes de multimédia. En particulier, les images sont une forme populaire de multimédia que l'on trouve aujourd'hui dans presque toutes les pages Web et sites Web interactifs. Comprenons la balise image et son implémentation en HTML avec l'exemple ci-dessous:

Syntaxe

Voyons maintenant comment fonctionnent chacun des attributs de la balise img:

src: l' attribut src définit le chemin du fichier image que nous essayons de charger avec cette balise. Il peut s'agir d'un lien vers une image hébergée sur le Web au format comme example.com/images/dummy.png.webp ou il peut s'agir d'un fichier image hébergé localement sur le même serveur que la page Web.
alt: l' attribut alt définit le texte et la description de l'image que nous aimerions afficher si les images ne se chargent pas en raison de la connectivité réseau ou de tout autre problème.
Largeur et hauteur: la largeur et la hauteur des deux attributs définissent la largeur et la hauteur de l'image que nous aimerions afficher sur la page Web. Sinon, l'image fonctionnerait avec une hauteur et une largeur de 100% par défaut.

Voyons maintenant le code HTML complet requis pour charger une image sur une page Web. Enregistrez l'image suivante sous le nom «sunset.png.webp» dans un dossier appelé «image_test» sur votre lecteur local.

Maintenant, dans le même dossier, créons un fichier HTML nommé sunset.html avec le code HTML suivant:

Allez maintenant dans un navigateur sur votre machine et tapez le chemin du fichier .html. Mes fichiers sont stockés dans le lecteur D de sorte que le chemin pour moi serait

D: /image_test/sunset.html

Et maintenant, nous pouvons voir que la page HTML rendue a chargé l'image du coucher du soleil sur notre navigateur. Avec l'aide de CSS et

tag, nous pouvons également afficher du texte selon nos besoins autour de l'image. Les balises d'ancrage et d'img sont compatibles avec tous les navigateurs comme Google Chrome, Safari, Microsoft Edge, Firefox et Internet Explorer.

Images liées en HTML

Maintenant que nous avons compris avec des exemples, comment les balises d'ancrage et les balises d'image fonctionnent individuellement, comprenons maintenant comment nous pouvons combiner les deux fonctionnalités pour réaliser un scénario dans lequel nous aimerions que les utilisateurs soient redirigés vers une nouvelle page Web en cliquant sur une image . Pour rendre une image cliquable et rediriger l'utilisateur vers une autre page Web, il nous suffit d'imbriquer l'image dans une balise d'ancrage. Dans l'exemple ci-dessous, nous essaierons de recruter les 3 principaux moteurs de recherche Web utilisés à travers le monde. Dans notre liste, nous afficherons les logos des 3 moteurs de recherche et en cliquant sur l'un des logos, l'utilisateur sera redirigé vers la page du moteur de recherche respective. Créons un dossier nommé "test de redirection" et dans le même dossier sauvegardons les images ci-dessous

1. Google

2. Yahoo

3. Bing

Nous allons maintenant créer un .html du nom imageredirection.html dans le même fichier. Le fichier imageredirection.html contiendra le code suivant

Maintenant, nous devons accéder à la page HTML à partir du navigateur, pour lequel je vais taper mon chemin local "D: / redirectiontest / imageredirection.html". le navigateur rendra ensuite le fichier HTML pour générer le résultat suivant:

Les utilisateurs pourront accéder au moteur de recherche respectif en cliquant sur leur logo. À partir de l'exemple ci-dessus, nous pouvons observer que HTML est un langage simple et flexible qui nous permet de combiner plusieurs balises ensemble et d'obtenir une fonctionnalité complexe comme celle-ci. La combinaison de l'utilisation de l'img et de la balise d'ancrage est une combinaison populaire.Avec le codage HTML supplémentaire, nous pouvons également ajouter différents éléments HTML comme l'affichage d'images liées dans une liste ordonnée ou non ordonnée

Lien d'image en HTML - Différents types de balises HTML avec code et syntaxe