In this guide, you'll learn how to:
- Create clickable links using the
- Add images using the
- Set a custom width and height for images
1. Creating a Hyperlink
To make text or an image clickable and redirect it to another webpage, use the
You can also make an image clickable like this:
When the image is clicked, it will open the link in the browser.
2. Adding an Image in HTML
Use the
You can set custom dimensions using the
Example:
This displays the image at 300px wide and 200px high.
3. Full Example: index.html
Here’s a complete example that includes both a hyperlink and an image with custom size. Save this code in an
Note: You can download these images and place it in same directory where the index.html is located.
Output:
Conclusion
- Use the
- Use the
- Customize image size using
- Combine both to make clickable images.
With these basic skills, you can start building rich, interactive webpages!
- Create clickable links using the
<a> tag- Add images using the
<img> tag- Set a custom width and height for images
1. Creating a Hyperlink
To make text or an image clickable and redirect it to another webpage, use the
<a> tag. The href attribute defines the destination URL.
HTML:
<a href="https://www.example.com">Visit Example Website</a>
HTML:
<a href="https://www.example.com">
<img src="logo.png" width="150" height="100">
</a>2. Adding an Image in HTML
Use the
<img> tag to display an image. It is a self-closing tag and uses the src attribute to specify the image location.You can set custom dimensions using the
width and height attributes.Example:
HTML:
<img src="car.jpg" width="300" height="200">3. Full Example: index.html
Here’s a complete example that includes both a hyperlink and an image with custom size. Save this code in an
index.html file and open it in a browser:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Links and Images in HTML</title>
</head>
<body>
<h2>Visit a Website</h2>
<p>
Click the link below to visit our favorite website:
<br>
<a href="https://www.wikipedia.org">Go to Wikipedia</a>
</p>
<h2>Image with Custom Size</h2>
<p>
Below is an image resized to 300x200 pixels:
<br>
<img src="mountain.jpg" width="300" height="200" alt="This is the mountain image">
</p>
<h2>Clickable Image</h2>
<p>
Click the image to go to a website:
<br>
<a href="https://www.nationalgeographic.com">
<img src="nature.jpg" width="250" height="150" alt="This is the nature image">
</a>
</p>
</body>
</html>Output:
Conclusion
- Use the
<a> tag with href to create links.- Use the
<img> tag to show images.- Customize image size using
width and height attributes.- Combine both to make clickable images.
With these basic skills, you can start building rich, interactive webpages!
Last edited: