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.

Normally, we’ll have our images saved and not rely on someone else’s images. Let’s save that image now in a new folder called images in our lessons folder. Let’s name it that last part web-design-intro-jpg. 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/web-design-intro.jpg

src means source

=    assigns the stuff on the right as the source

.     current folder

./images/   image folder inside the current folder

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

Your new link would look like this.

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 can watch the video of this lesson online.