George and Susan Welcome to our HTML help page!
Home | HTML-Index | Basic HTML | HTML Structure


Thumbnails Made Easy
That conforms to the HTML 4.0 standard.
Valid HTML 4.01!
You will need two images, one smaller to act as the thumbnail and the larger image it will be linked with.
  • Blue = HTML code.
  • Red = Large Photo URL.
  • Green = Small Photo URL
  • Black = Text under photo
  • Brown = <center> tag allows you to horizontally center text or image on your page.
  • Purple = <br> tag starts new line.
  • Gray = text you want to display if the image does not appear.
Why a Thumbnail?
You use a small version of the picture for viewers to click on so they can see the larger version.
The reason I recommend a thumbnail image, because when you offer a small version of the picture it allows for a faster loading page. Plus it allows the viewer to be in charge of what he/she wants to see.

If you type this:

<center>
<a href="URL-of-large-photo-Here" target=_blank><img src="URL-of-Small-photo-Here" border=0 alt="my photo"></a>
<br>
Click image to enlarge
</center>


It should look like the picture below except of course in the demo below I have used one of my funny animated pictures.
Click on the picture and see how it works.
It is a good idea to have all of your thumbnail pictures the same size if you use more than one. That way they will line up.
my photo
Click image to enlarge


My home page