Comment utiliser une image comme un lien dans HTML

HTML est une langue utilisée dans la conception et le développement Web. À l'usage du seul HTML, nous pouvons fabriquer des pages Web statiques. L'alignement et la conception se font via CSS. Comme d'autres langages de programmation, il existe également des codes / commandes appelées balises. Ces balises sont écrites avec des supports angulaires.

Nous pouvons trouver des sites Web modulaires intégrés interactifs qui utilisent une approche de glisser-déposer, qui sont toutes composées de HTML. Nous pouvons ajouter de nombreux éléments dans le texte HTML, des images, des vidéos, etc. Chaque élément a une balise séparée écrite à l'intérieur du corps de balise HTML. HTML a de nombreuses fonctions à appliquer. Dont l'un est un lien. Le lien est une fonctionnalité qui transforme la page actuelle en une autre. Un lien derrière l'image est le sujet d'aujourd'hui à expliquer ici.

Essentiels requis

Il existe deux outils de base utilisés pour l'implémentation du code HTML.

• Un éditeur de texte
• Un navigateur

Un outil est utilisé comme un outil d'entrée alors que l'autre agit comme logiciel de sortie. Dans l'éditeur de texte, nous écrivons le code qui doit être exécuté sur l'autre logiciel. Cet éditeur agit comme un outil d'entrée. D'un autre côté, le navigateur agit comme un outil de sortie. Il s'agit d'une plate-forme qui exécute le code HTML écrit dans l'éditeur.

Au fur et à mesure que nous effectuons cette tâche sur Windows, l'éditeur de texte est le bloc-notes par défaut. Vous pouvez utiliser sublime, note de notes ++, etc. tandis que le navigateur est Internet Explorer. Mais dans notre guide, nous utiliserons Google Chrome et le bloc-notes, qui est facilement accessible.

Manuel HTML

Si nous voulons élaborer le concept de lien dans l'image, nous devons d'abord comprendre le fonctionnement du HTML. Le corps HTML est divisé en deux parties. L'un est la tête et le second est le corps. La partie de tête est écrite en premier. Dans cette partie, nous incluons le titre de la page Web. La partie fonctionnelle est connue pour être la partie corporelle du HTML. Parce que toutes les propriétés de HTML sont définies ici.

Toutes les balises, y compris HTML, ont des balises d'ouverture et de fermeture. Le code HTML écrit dans les blocs-notes est enregistré à la fois dans les extensions du bloc-notes et du navigateur. Le .Extension TXT, est enregistrée sous forme de code, tandis qu'avec HTML, il est enregistré pour le navigateur. Le fichier de l'éditeur de texte doit être enregistré avec l'extension HTML. Par exemple, lien.html. Ensuite, vous verrez que le fichier est enregistré avec l'icône du navigateur actuel que vous utilisez à cet effet.

…
… .

L'image ci-dessous est un exemple de code de HTML. Dans la partie tête, nous avons ajouté le nom du titre de la page. Et dans la partie corporelle, un texte brut est ajouté.

Création d'un simple lien hypertexte

Vous avez peut-être observé les liens sur les sites Web sous forme de texte ou de l'image. Ceux-ci sont développés en utilisant les hyperliens dans le code HTML. Ceci est la fonctionnalité des pages Web statiques et dynamiques. Il a à la fois des balises d'ouverture et de fermeture. est connu comme une étiquette d'ancrage. La syntaxe est donnée ci-dessous.

…

HREF est pour la référence de la page. Ici, nous écrivons l'adresse de ce site Web ou de ce site Web spécifique où nous voulons aller en cliquant sur le lien. Alors qu'à l'intérieur du corps de la balise d'ancrage, nous écrivons le texte auquel nous voulons lier. Par exemple, nous avons utilisé du texte ci-dessous.

https: // linuxhint.com»>
Mon super lien

Lorsque nous écrivons l'adresse, vous pouvez voir qu'il est automatiquement souligné et que sa couleur est modifiée. Cela implique la différenciation entre le texte simple et l'hyperlien. Alors qu'à l'intérieur du corps, nous avons utilisé une phrase simple. Considérez l'exemple ci-dessus dans l'état de travail.

Comme nous avons écrit ce code dans le bloc-notes, nous allons maintenant l'exécuter pour obtenir la sortie du navigateur.

À partir de la sortie, vous pouvez observer que le texte que nous avons ajouté est souligné, ce qui montre qu'il s'agit d'un lien. Alors que nous planons le pointeur de la souris vers le lien, le pointeur est converti dans le symbole de la main.

Tag d'image en html

L'image est le contenu de base du HTML. Il y a une balise spécifique utilisée. La balise d'image est un peu différente des autres balises. Car il ne contient pas de balises d'ouverture et de fermeture. L'image peut également être ajoutée directement à partir de votre système ou d'Internet. La source de l'image est mentionnée. Dans la source, vous ajoutez l'emplacement / l'adresse de l'image, soit dans n'importe quel dossier, soit placé sur n'importe quel site Web.

< img src = “c:\users\USER\DESKTOP\13.png”>

Ici, la balise d'image est . «SRC» représente la source. Ceci est le chemin de l'image avec l'extension de fichier.

Voir la sortie ci-dessous.

Image et un lien

Lier un site Web à l'image

Vous devez avoir rencontré des sites Web, en particulier dans les magasins de sites Web ou les sites Web d'achat en ligne. Il y a des tonnes d'images qui s'ouvrent sur une autre page en cliquant. Nous ajoutons un lien pour l'image ou liant deux pages via un lien. Cette page peut être une page statique ou dynamique. Nous avons besoin de deux éléments tag dedans. L'un est la balise d'image et l'autre est la balise de liaison.

Le code d'image est ajouté à l'intérieur de la balise d'ancrage car nous voulons que l'image agisse comme un lien. Vous trouverez ci-dessous le code HTML complet.

Maintenant, nous allons exécuter ce code dans Google Chrome.

Grâce à l'image, il ne sera pas possible d'expliquer avec précision. Mais lorsque vous vous entraînez, vous verrez que lorsque vous planez la souris, l'image montre la main du pointeur, la montrant comme un lien. Lorsque nous cliquez sur l'image, il s'ouvrira sur le site Web, dont l'adresse est mentionnée dans la partie de référence. Le site Web ci-dessous sera ouvert.

Lier une page Web statique à l'image

Si vous êtes prêt à ajouter la page Web statique dans le code, remplacez simplement l'adresse du site Web par la page présente dans votre système.

< a href = “sample.html”>

Dans le navigateur, vous verrez que l'exemple de page statique est ouvert dont l'adresse a été donnée à l'intérieur de la balise.

Attribut alt et lien d'image

Cet attribut aide à décrire quelque chose sur l'image. Ceci est affiché uniquement lorsque pour une raison quelconque, l'image n'est pas chargée ou votre connexion Internet peut être lente. Ainsi, cette description est montrée qui aide le lecteur à savoir quelque chose sur l'image ou un site Web.

< img alt= “image is not available” src= “C:\users\USERS\DESKTOP\13.png”>

C'est la balise. L'attribut alt est écrit à l'intérieur de la balise IMG.

La sortie est illustrée ci-dessous qui montre l'alternative de texte à l'image.

Conclusion

Dans cet article, nous avons utilisé les balises simples d'un lien et d'une image. De plus, nous utilisons une image comme lien avec de nombreux exemples. Il peut y avoir de nombreuses façons d'élaborer ce concept. Nous avons mentionné quelques exemples faciles dans ce guide.