62
Inserting the Thumbnails into the Table Cells
With the cells created. The Thumbnails can be inserted into each cell so that they can then be
linked to the full size images in the image folder.
To insert the images into the table cells:
1. Place the cursor between the first “<td></td>” that was created in the previous section.
2. Type
[<img src=“images/tn_cat_1.jpg” width=“125” height=“94”>]
.
3. Place the cursor between the second “<td></td>” that was created in the previous section.
4. Type
[<img src=“images/tn_cat_2.jpg” width=“125” height=“94”>]
.
5. Place the cursor between the third “<td></td>” that was created in the previous section.
6. Type
[<img src=“images/tn_cat_3.jpg” width=“125” height=“94”>]
.
7. Place the cursor between the fourth “<td></td>” that was created in the previous section.
8. Type
[<img src=“images/tn_cat_4.jpg” width=“125” height=“94”>]
.
9. Place the cursor between the fifth “<td></td>” that was created in the previous section.
10. Type
[<img src=“images/tn_cat_5.jpg” width=“125” height=“94”>]
(see Figure 11).
Figure 11 – Adding the Thumbnails
Linking the Thumbnails to the full-sized images
With the thumbnails inserted into the page and in place, they can now be used as hyperlinks for
the full sized image. Thus, once the viewer of the page clicks on the image, the full-sized image
will appear. The links that will be created will appear in a new browser window.
To link the thumbnails to the full-sized images:
1. Place the cursor before the <img> tag for the thumbnail tn_cat_1.jpg.
2. Type
[<a href=“images/cat_1.jpg” target=“_blank”>]
.
3. Place the cursor after the <img> tag for the thumbnail tn_cat_1.jpg.
4. Type
[</a>]
to close out the hyperlink tag.
5. Place the cursor before the <img> tag for the thumbnail tn_cat_2.jpg.
6. Type
[<a href=“images/cat_2.jpg” target=“_blank”>]
.
7. Place the cursor after the <img> tag for the thumbnail tn_cat_2.jpg.
8. Type
[</a>]
to close out the hyperlink tag.
9. Place the cursor before the <img> tag for the thumbnail tn_cat_3.jpg.
10. Type
[<a href=“images/cat_3.jpg” target=“_blank”>]
.
11. Place the cursor after the <img> tag for the thumbnail tn_cat_3.jpg.
12. Type
[</a>]
to close out the hyperlink tag.
13. Place the cursor before the <img> tag for the thumbnail tn_cat_4.jpg.
14. Type
[<a href=“images/cat_4.jpg” target=“_blank”>]
.
15. Place the cursor after the <img> tag for the thumbnail tn_cat_4.jpg.
Creating a Web Page Using HTML, Part 2
-
8