Lien image en HTML

Image Link In HTML se retrouve 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 HTML . Avec cette combinaison, on peut permettre le déplacement des utilisateurs d'une page à une 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. Référons-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 » précise l'URL de la page Web vers laquelle nous souhaitons rediriger l'utilisateur en cliquant sur le texte « Cliquez ici !! ».

Voyons le code complet ci-dessous :

Sortie 

–>

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

1. Un lien non visité apparaîtra souligné et en bleu. Pour, par ex. Ceci est un lien non visité
2. Un lien visité apparaîtra souligné et en violet. Pour, par ex. Ceci est un lien déjà visité
3. Un lien actif apparaît souligné et en rouge. Pour, par ex. Ceci est un lien actif

Balise d'image HTML

En naviguant sur Internet, je suis sûr que vous avez dû tomber sur plusieurs pages Web contenant diverses formes de multimédia. Les images, en particulier, constituent une forme populaire de multimédia que l’on retrouve 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

<img src="smiley.gif" alt="Smiley face" width="42" height="42">

Comprenons maintenant comment fonctionne chacun des attributs de la balise img :

1. src : L'attribut src définit le chemin du fichier image que nous essayons de charger avec cette balise. Il peut être lié à une image hébergée sur le Web avec un format tel que example.com/images/dummy.png ou à un fichier image hébergé localement sur le même serveur que la page Web.
2. alt : L'attribut alt définit le texte et la description de l'image que nous souhaitons afficher en cas d'échec du chargement des images en raison de la connectivité réseau ou de tout autre problème.
3. Largeur et hauteur : La largeur et la hauteur des deux attributs définissent la largeur et la hauteur de l'image que nous souhaitons afficher sur la page Web. Sinon, l'image fonctionnerait par défaut avec une hauteur et une largeur de 100 %.

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

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

Accédez maintenant à un navigateur sur votre ordinateur et saisissez le chemin du fichier .html. Mes fichiers sont stockés sur un lecteur D, donc 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

balise, nous pouvons également afficher du texte selon nos besoins autour de l'image. Les balises Anchor et 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 la balise d'ancrage et la balise d'image fonctionnent individuellement, comprenons maintenant comment nous pouvons combiner les deux fonctionnalités pour obtenir un scénario dans lequel nous aimerions que les utilisateurs soient redirigés vers une nouvelle page Web en un seul clic. d'une image. Pour rendre une image cliquable et rediriger l'utilisateur vers une autre page Web, il suffit d'imbriquer l'image dans une balise d'ancrage. Dans l’exemple ci-dessous, nous essaierons de répertorier les 3 principaux moteurs de recherche Web utilisés dans 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 correspondant. 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 imageredirection.html contiendra le code suivant.

Nous devons maintenant accéder à la page HTML depuis le navigateur, pour laquelle je vais taper mon chemin local « D:/redirectiontest/ imageredirection.html ». le navigateur restituera 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 img et de la balise d'ancrage est une combinaison populaire. Avec un 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, à l'aide de

ou
. L'extrême flexibilité et la simplicité qu'offre HTML avec chaque version publiée aident les concepteurs UI et UX à concevoir des pages Web interactives et intuitives que nous voyons lors de la navigation sur Internet pour les activités quotidiennes.

Article recommandé

Ceci a été un guide pour Image Link en HTML. Nous discutons ici des différents types de balises HTML ainsi que de la syntaxe. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus :
1. Attributs HTML
2. Balises au format HTML
3. Balises d'images HTML
4. Cadres HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!