Welcome to Day 3 of the 7 Days HTML Tutorial!
Now that you know how to structure text using tags and elements, it’s time to make your web page more exciting and interactive by adding links and images.
By the end of this post, you’ll know how to:
- Add clickable links to other pages or websites
- Insert images into your web pages
- Make images clickable
Let’s go!
Table of Contents
How to Add Links in HTML?
To add a link in HTML, use the <a> tag.
The href attribute defines the URL you want the link to go to.
👉 Syntax:
<a href="https://www.google.com">Visit Google</a><a>= anchor tag (used for links)href= “hyperlink reference” (the destination URL)- The text between the tags is the clickable part
Example:
<p>Check out my favorite search engine: <a href="https://www.google.com">Google</a></p>Open link in a new tab:
<a href="https://www.google.com" target="_blank">Google in a new tab</a>How to Add Images in HTML
Use the <img> tag to insert an image.
👉 Syntax:
<img src="image-url.jpg" alt="Description of the image">src= the source (file path or URL)alt= alternative text (shown if image can’t load and helpful for screen readers)
❗ Unlike most tags,
<img>is a self-closing tag — no closing</img>needed.
Example with an online image:
<img src="https://www.example.com/pic.jpg" alt="Example Picture">Example with a local image:
If the image is in the same folder as your HTML file:
<img src="my-photo.jpg" alt="My Photo">Making Images Clickable
You can wrap an image inside a link to make it clickable.
Example:
<a href="https://www.example.com">
<img src="logo.png" alt="Clickable Logo">
</a>Now, clicking on the image will take the user to the link’s destination.
Mini Project: Create a Portfolio Header with Links and Image
<!DOCTYPE html>
<html>
<head>
<title>My Portfolio</title>
</head>
<body>
<h1>Welcome to My Portfolio</h1>
<img src="https://via.placeholder.com/300x200" alt="My Placeholder Image">
<p>Here are a few of my favorite sites:</p>
<ul>
<li><a href="https://javacodepoint.com" target="_blank">Javacodepoint</a></li>
<li><a href="https://www.w3schools.com" target="_blank">W3Schools</a></li>
<li><a href="https://developer.mozilla.org" target="_blank">MDN Web Docs</a></li>
</ul>
<p>
<a href="https://www.github.com">
<img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub Logo" width="50">
</a>
</p>
</body>
</html>Try saving this as portfolio.html and open it in your browser. Replace the links and images with your own to personalize it!
Quick Recap
- Use
<a>to create hyperlinks withhreffor the destination - Use
<img>to display images using thesrcandaltattributes - You can combine
<a>and<img>to make clickable images
Practice Task
📝 Create a page that includes:
- A heading with your name
- A paragraph about your favorite website
- A link to that website
- An image from the web
- A clickable image that goes to your favorite website
What’s Next?
On Day 4, we’ll explore how to organize information using Lists and Tables in HTML.
👉 You’re now halfway through the course—great work!
🎯 Want to test your learning so far?
Check out the 7 Days HTML Challenge with Solutions to practice and validate your understanding with hands-on tasks!