We learned how to add an image to the page and how to add links, but what if you wanted to make the image the link instead of words?

I sell books, so I often have a cover picture which I want people to click on to open the page where they can learn more about it.

Can you think how you might turn your image into a link? We’ll need to use both the link and image tags. The image tag displays the image and the link tag tells the browser where to send the person when they click on it.

Normally, we’d make a link with opening and closing anchor tags <a></a> and then put the clickable part in between them, so that’s exactly what we’re going to do now. Here’s a link we can use for testing this.

<a href = ” link you want to go to you put here ” ><img src = ” image link here ” /></a>

Normally, we’ll have our images saved and not rely on someone else’s images. Let’s save an image now in a new folder called images in our lessons folder. Here’s an image. The one in my example is no longer valid. Let’s name it apple.png . Pay attention to whether your images are jpg or png. PNG is maybe considered the best for use online, but either is okay. You just need to make sure you use in your code whichever one it is saved as.

We then link to it like this.

src = ./images/apple.png

src means source

=    assigns the stuff on the right as the source

.     current folder

./images/   image folder inside the current folder

/images/apple.png   the jpg file named web-design-intro in the images folder

Your new link would look like this.

<a href = ” link you want to go to you put here ” ><img src = “./images/apple.png” /></a>

The technical word for folder is directory. The directories look like little folders on your computer if you have it set to show you the icons, the images for the directories and files.

You can go to File Explorer or your default documents folder and click on different directories and watch the address of those directories change along the top. Things like:

That’s a directory path. It shows you all the levels of directories (folders) you need to look into to find Lesson 11. It shows that the computer is looking on the hard drive for the main user’s document’s directory called projects and then in a directory called lessons for an html file called lesson11.

• You need to follow my directions here and not copy the code from the video. The Learning-with-Lee site I used in the video is no longer owned by me and is now a site aimed at sending you spam! 

You can watch the video of this lesson online.