HTML WEB DESIGN

ASSIGNMENT – IMAGE GALLERY

You will create a small image gallery that includes small preview images that can be clicked on in order to see the full sized image.

STEPS

• Start by finding five or six images. Make sure they are named clearly and saved inside the same folder.

• You need to create a small preview image of each image. This can be done in any graphic editing software.
  
  In Gimp, open the image, resize it by using Image > Scale Image and set the size to 100px in height. Then export the image.
  
  In Paint.net, open the image, resize it by using Image > Resize and set the size to 100px in height. Then use Save As to save the image as a different name.
  
  

Notice the filenames above. The small images have the exact name as the larger ones but have the word “Small” added at the end.

• Create an HTML document.
  
  
• Add tags for all the small images. Preview your document to make sure the images all appear.
  
  
• For each image tag, add a link tag to its corresponding large image.

• Click here to see an example. Feel free to look at the page source.