Adding Image as a Link
To add an image as a link, enclose the <img> tag within an <a> tag, setting the image’s source with the href attribute. This creates a clickable image linking to external content, such as images, videos, or other web pages.
File paths are of two types:
- Absolute File Paths: It always contains the root element along with the complete directory list required to locate the file.
- Relative File Paths: It is the hierarchical path representation that locates the file or folder on a file system beginning from the current directory.
Example: In this example we embeds the w3wiki logo as a clickable link using the <a> tag, wrapping the <img> tag with the link destination specified in the href attribute.
<!DOCTYPE html>
<html>
<head>
<title>Adding image as link</title>
</head>
<body>
<h3>GeekforGeeks</h3>
<p>Adding image as link</p>
<a
href=
"https://ide.w3wiki.org/tryit.php"
>
<img
src=
"https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="w3wiki logo"
/>
</a>
</body>
</html>
Output:
HTML Images
The HTML <img> tag is used to embed an image in web pages by linking them. It creates a placeholder for the image, defined by attributes like src, width, height, and alt, and does not require a closing tag.
There are 2 ways to insert the images into a webpage:
- By providing a full path or address (URL) to access an internet file.
- By providing the file path relative to the location of the current web page file.
We will first discuss inserting the image into the webpage & simultaneously, we will understand both the above approaches.
Contact Us