How to Add a Clickable Image in HTML Page

By

 


Using HTML to create clickable images that can lead to any website that you specify.





Introduction


In this post we will learn how to create a clickable image , that is an image in your html page that when clicked, will lead to any website page.


Steps to create a clickable Image


1). First write the URL link address inside the <a> hyperlink .


2). Inside this hyperlink, wrap the image source inside this hyperlink as shown below in the source code . 


3). Now, try clicking anywhere on the image in the preview window and lo and behold! You are forwarded to the specified web page that you had mentioned in your hyperlink.


You may view the preview image  here. To view the Image in Full View in my code editor, check out this  IMAGE LINK to read the  in a CODE  editor 
If  I write the link to my home page of my blog website in the hyperlink as shown in the code below,  by linking in the image, you will be forwarded to the home page of my blog page at blogger. But for this, you need to first view my image by clicking on the image link as shown above, and then test it out. 


You can mention any url link here in the code to lead the reader to the respective site by clicking anywhere on the image. So, after reading this post, I want you to actually test it out by following my instructions here and then do a different image in your code editor and try to forward your readers to another of your site or web page etc. 




Code







<h1>CLICKABLE IMAGE LINK</h1>

<a href="https://meerateachestech.blogspot.com">
    <img src="https://i.imgur.com/vRJjYek.png" alt="clickable image">
</a>



Conclusion

Now you know how to create a clickable image that when clicked can lead to your specified web page! This is so useful when you want to send people to your landing page by using interesting clickable images . 




I am a self-taught Web Developer and Blogger, also into teaching coding for absolute beginners, writing technical articles and the purpose of this blog is to let beginners become tech savvy in technology covering coding, programming, web development, social media management and digital marketing. Even if you are a total beginner with no tech skills, this blog will help you to attain the required tech skills in no time, without the need to get formal tech education or degrees.

Comments

Post a Comment

Popular Posts

Build A Random Quote Machine in React

By
Image
  Build A Random Quote Machine in React  This ReactJS Tutorial will teach you how to create a random quote generator using React hooks. This is a challenge for testing your frontend libraries in the freeCodeCamp frontend libraries certification projects and in this challenge, I will walk you through the steps so that you can pass all the ten tests in this challenge. This React Project is part of the freeCodeCamp frontend Libraries Certification Challenges and here, I am going to walk you through the challenge and also break down the challenge into smaller, more understandable steps, to demonstrate how to build this App in a simple way. The Random Quote Machine App is a very unique app that will allow the users to interact with the app , whereby by clicking on a button, you will be able to see random new quotes with their authors' names and you will also be able to share these quotes on Twitter.  Code editors required for this challenge :   We will be coding in HTML, ...
Read more

A Simple Guide to Promises in JavaScript ES6

By
Image
A Simple Guide to Promises in JavaScript ES6 In this JavaScript tutorial, based on the freeCodeCamp JavaScript Algorithms and database structures, I will be explaining and walking you through the concept and usage of Promises in JavaScript, with very simple examples to make you understand the concept easily.  What is a Promise in JavaScript? A Promise in JavaScript is an object that displays the final success or failure of an Asynchronous operation.    A Promise in JavaScript is similar to a promise given in real life, meaning, it is Asynchronous, that is, it is unidirectional. When you give a promise to another person, you could either fulfil that promise or reject the promise, but, you can not both fulfil as well as reject a promise given. Similarly, in JavaScript, a Promise is Asynchronous in nature. Imagine a situation whereby you decided to apply for loan to start a new business. You make a loan application letter the next day and approach the Bank Manager. When ...
Read more

Welcome to my first Blog Post

By
Image
This is just an introduction and welcome post to all the readers. I am writing this post to beginners who are learning Programming with a fear of walking in this coding journey. Even if you don't have any formal degree in Computer Science, let me tell you that you can walk this path of web development, without any fear, as long as you are willing to do so. I will be posting several tutorials and projects along the way to help you learn programming without the need to feel stressed and frustrated. My tutorials will be mostly coding tips, concepts, tutorials and  Beginner Projects on HTML5, CSS3, JavaScript including React, and Python for beginners. See you in the next blog post!
Read more

Top Free Online Websites to Learn Coding

By
Image
Top Free Online Websites to Learn Coding This guide will help you to find  online sites to learn Coding for free.                   Photo by Antonio Batinić: Finding free sites online to learn Programming is a big task when you search online, as there are millions of resources that are available for free. Sometimes, it can be a time killer and really tiring and tedious and simultaneously, also lead to confused minds and make you demotivated to focus on your goals. You may also select the wrong resources and end up getting totally demotivated after wasting few months or years on the wrong resources. I have made your search easy and convenient by presenting below, the top ten sites that offer free online programming. Here are the names of the online sites that offer Programming courses, completely free of cost. While, you may have across several blogs talking about of free courses, please note that some of the sites mentioned online ar...
Read more

Beginner's Guide On For Loop in Python

By
Image
  Beginner's Guide On For Loop in Python Introduction This post is for beginners who are trying to learn Python and they will find this step-by-step guide very easy to understand.  Here, I will be first introducing the concept of the 'for' loop in Python, and thereafter, I will proceed to explain the significance and methods of using this loop in your Python projects with several easy-to-understand examples and source code.   What is a 'for' loop A 'for' loop in Python is used to loop over a sequence and it is very useful when you perform tasks in your python functions. The 'for' loop could be used for looping or iterating over a list, tuple, set, dictionary or a string. We will see the examples below. During the phase of looping through a list for example, after creating the variable name to specify each item in the list, we will decide what is the action that is to be executed in the phase of this iteration whereby each and every item s...
Read more

Build A Calculator in React

By
Image
  Build A Calculator in React This project is part of the freeCodeCamp react certification program. In this React Project tutorial, we will learn how to build a simple calculator using JavaScript React framework.  TASKS TO ACHIEVE IN THE PROJECT The calculator should contain clickable element with an  'Equal to'  sign (that is, an = symbol )  which has an id of "equals". There should be ten clickable elements having one number each from 0-9 with the following corresponding IDs :  id="zero", id="one", id= "two", id="three", id="four", id="five", id="six", id="seven, id="eight" and id="nine" There will be four clickable elements each having one of the primary mathematical operators with the following corresponding IDs:  id="add', id="subtract", id="multiply", id="divide". T here will be one clickable element with a decimal point  symbol w...
Read more

How to remember code in your learning phase

By
Image
How To Remember Code In Your Learning Phase How to remember code is the biggest fear factor in every beginner's mind when setting off to learn Programming. You may heard some friends or colleagues brag that " Oh, I could memorize code so fast and very easily , as I have a sharp memory !" After hearing this many times in a row, you tend to get disappointed or even slow down in your learning journey and some learners may even give up learning to code. Now, let me tell you, please stop listening to others' brag stories and just focus on you as a learner while learning to code. Just compare you to yourself and no one else! In this article, I will be providing you with enough tips and best practices to strengthen the process of your learning journey and you will then realize that it was a waste of time looking at other learners' learning process. DOCUMENT EVERYTHING There are different ways to document code, and given below are pointers to document your code. Write dow...
Read more