In a previous HTML lesson, we learned how to create text anchors (or links). In another previous lesson, we learned how to add images to your HTML page. If you do not know how to do either of these, please read those lessons before moving on to this one (don’t worry, they’re very short). From creating a regular text link and adding an image to a web page to making your images link is a very short jump, so let’s dive in!
Follow the same folder guidelines as in the adding images post, unless you’re using an absolute to a remote image.
Code:
<a href="http://www.webdesign-lessons.com">
<img src="your-image-filename.jpg" alt="my messy boy!" />
</a>
Output:
The Breakdown:
You have created an anchor (or link) just like you learned in the HTML links lesson. You have created an image just like you learned in the HTML images lesson. The only thing that you have done differently is nested your image element inside of your anchor element, which tells the browser to use the image as a link. It’s really that simple!