To create a hyperlink using an image to navigate to another HTML page, we need to adhere to the following guidelines. By following these instructions, we can effectively convert an image into a clickable link:
Step 1: To begin, the first step is to enter the HTML code in a text editor or open the current HTML file in the text editor where we intend to convert an image into a hyperlink.
<!Doctype Html>
<Html>
<Head>
<Title>
Make an Image as a Link
</Title>
</Head>
<Body>
Hello World! <br>
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" width="200" height="200"> <br>
Hello User! <br>
How are You?
</Body>
</Html>
Step 2: Next, position the cursor immediately preceding the placeholder <img> in an HTML file. Subsequently, introduce the anchor tag, commonly utilized for creating hyperlinks to other web pages. Insert the <a> tag at this specific location.
<a>
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" width="200" height="200"> </a>
Step 3: The next step involves inserting the "href" attribute to the anchor tag. This attribute should be placed within the opening <a> tag. Subsequently, the path to the HTML page intended to be linked with the image needs to be specified within the href attribute, following the instructions provided in the subsequent HTML code snippet.
<a>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" width="200" height="200"> </a>
Step 4 involves saving the HTML file and then opening it in a web browser to view the changes.
<!Doctype Html>
<Html>
<Head>
<Title>
Make an Image as a Link
</Title>
</Head>
<Body>
Hello World! <br>
<a href="">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" width="200" height="200">
</a>
<br>
Hello User! <br>
How are You?
</Body>
</Html>
The result of the provided HTML code can be observed in the screenshot displayed below: