So, you want to make a Web Page!
Lesson 14

adapted from Joe Barta's tutorials at- PageTutor.com


If you don't already have one, be sure to create a new folder titled Lesson_14 in your HTML folder


Something else that is useful to know (especially if you want to offer a lot of imagery) is to provide thumbnails that link to larger versions of the image. Let's suppose that I want to offer three very nice pictures of let's say a few of my cars (I wish).


Click on the thumbnail to see a larger image


"THUMBNAIL" INFORMATION - IMPORTANT

This bit about making a smaller version is very important. I have seen many instances of someone trying to make a thumbnail by simply reducing its dimensions in the <img> tag. All this does is cram the full image into a smaller space. What you need to do is create a smaller copy of the image and use that as a link to the big image.

Let's do one. I think we'll use the Corvette (that's the blue one if there's anyone out there that for some silly reason doesn't know).

Start by saving both the full sized image and the small image in your Lesson_14 folder. Once again... right-click & Save Picture As...

Thumbnail version = car2_T.gif / Larger version = car2.jpg (each inside your Lesson_10 folder)


Now, create a basic HTML page (don't forget the title)

<html> 
<head> 
<title>Lesson 14</title> 
</head> 
<body>
</body> 
</html>

Then insert the smaller image (car2.gif) with an <img> tag.

<body>  

<img src="car2_T.gif">  

</body>  

nn

 

Add your <a> tags.

<body>  

<a><img src="car2_T.gif"></a>  

</body>  

Then add the URL of the big picture and bingo, you're done!

<body>  

<a href="car2.jpg"><img src="car2-sm.gif"></a>  

</body>  

nn

 

You can, if you'd like, get rid of the blue border. Or, you may wish to keep it so that your viewers know that it is a link. It's up to you.

<body>  

<a href="car2.jpg"><img src="car2_T.gif" border="0"></a>  

</body>  

nn

 

 

Save as: Lesson_14.html in your HMTL/Lesson_14 folder

On to Lesson 15