HTML
HTML image as link
A link can connect two web pages or different parts of same page. These html links are called hyperlinks. It is denoted by the tag <a>. The links destination can be provided by adding the attribute href as <a href=”http://infotainpoint.com”>. The closing tag is </a>. This is used inside the body tags <body></body>
Example1:
The below code displays an image and on clicking it takes to the website mentioned in the href attribute.
<html>
<head>
<title> Image as link</title>
</head>
<body>
<a href=”http://infotainpoint.com”> <img src=”logo.png”></a>
</body>
</html>
Example2:
To make the link open in a in a new tab add the attribute target=”_blank”
<html>
<head>
<title> Image as link</title>
</head>
<body>
<a target=”_blank” href=”http://infotainpoint.com”> <img src=”logo.png”></a>
</body>
</html>
Example3:
To navigate between top and bottom of the same page we can use the “name” attribute
Write the following code at the top of the page of temp.html
Top of page <a name=”top”></a>
Write the following code at the bottom of the page of temp.html
<a href=”temp.html#top”>Go to top of page”</a>
It may happen that sometimes the image may not be loaded in the browser due to various reasons. If an alt attribute is given then the words given in the alt attribute is shown for the user to click on. The below code shows how to give alt attribute
<html>
<head>
<title> Image as link</title>
</head>
<body>
<a href=”http://infotainpoint.com”> <img src=”logo.png” alt=”Logo”></a>
</body>
</html>
Summary: We have seen that image given in the src attribute of <img> tag can be made a hyperlink if the <img> tag is inside the anchor tag. Also we have seen that the anchor tag attribute target=”_blank” opens a new window. To move between top and bottom of same page we have seen how to use name attribute of anchor tag. If the image is not loaded then the alt attribute of <img> tag gives text to click on instead of an image.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink</title>
</head>
<body alink=”yellow” vlink=”green”>
Top of page <a name=”top”></a><br><br>
<!–
self opens in same window,blank opens in new tab or window
parent opens in parent frame,top opens in full body of window
–>
<a href=”https://www.youtube.com/channel/UCWUprMcyBV5KJ-NH9jAispg” target=”_self”>SQLBIBYTES_self</a><br><br>
<a href=”https://www.youtube.com/channel/UCWUprMcyBV5KJ-NH9jAispg” target=”_blank”>SQLBIBYTES_target</a><br><br>
<a href=”https://www.youtube.com/channel/UCWUprMcyBV5KJ-NH9jAispg” target=”_blank”>
<img src=”Logo.png” alt=”Logo” style=”width:40px;height:40px;”>
</a><br><br>
<button onclick=”document.location=’https://www.youtube.com/channel/UCWUprMcyBV5KJ-NH9jAispg'”>SQLBIBYTES_button</button><br><br>
<a href=”https://www.youtube.com/channel/UCWUprMcyBV5KJ-NH9jAispg” title=”SQLBIBYTES”>Click here</a><br><br>
<a href=”test.pdf”>Download test pdf</a>
<img src=”Logo.png” alt=”Logo” style=”width:40px;height:40px;”><br><br>
<img src=”Logo.png” alt=”Logo” style=”float:right;width:40px;height:40px;”><br><br>
<img src=”Logo.png” alt=”Logo” style=”width:40px;height:40px;”><br><br>
<img src=”Logo.png” alt=”Logo” width=40 height=40><br><br>
<img src=”Logo.png” alt=”Logo” width=40 height=40><br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<a href=”temp.html#top”>Topofpage</a>
</body>
</html>