Manuscript for HTML Tutorial #21

Listed below is the manuscript of all textual instructions used in HTML Tutorial #21 - Using an Image as a Link to Another Web Page. Most of this text is displayed inside the yellow balloons used to guide viewers as they watch the lessons.

Students and instructors may find it helpful to have a hard copy of these balloon instructions. You may print this web page to use as an aide in following, referencing, or demonstrating the web design series.

Manuscript Table of Contents

Entire HTML Tutorial Series

Tutorial #21 - Using an Image as a Link to Another Web Page

Lesson #21: Image Links. Click the play button to begin the tutorial.
OK, we’ve seen how to add links...
...and images to our web page.
Now let’s see how to make an image that also serves as a link.
We’ve placed some button graphics, like the ones in our free graphics section, into the same directory as our other web files.
We will use these buttons as links to our other web pages.
Of course, additional web pages can be made the same way as the home page, except that they should be saved with their own unique filenames.
To make our image links, we’re going to combine the method used for making links, with the method for embedding images.
We’ll start with the opening <a> tag.
Of course we need to specify the destination of our link with the href attribute and a value.
Next we’ll insert the <img> tag.
In our <img> tag we need to use the src attribute and a value, to specify which image to use.
We should also include the width, height, and alt attributes, with their appropriate values.
Then we will end the whole thing with the closing </a> tag.
Basically, we just created a link...
...and used our <img> tag in place of the text.
Let’s see if it works.
When we click on the Products button, it takes us to the...
...products.html page.
Let’s go back to our home page.
You may have noticed that our image link has a border around it.
Images have a default border that appears when they are used as links.
Let’s see how to make this border disappear.
All we have to do is add the border attribute, and give it a value of 0 (zero).
OK, let’s go ahead and include our four other buttons as links, and then see how our page looks.
Now visitors can jump between web pages by clicking on buttons.
In our next Lesson #22, we will see how to move these buttons into a left-hand navigation column.

<<<Tutorial #20

Tutorial #22>>>