11: Galley Gallery

Learning Target

• Add images to a webpage
• Use an image editor to resize images
• Add hyperlinks to a webpage

Resources

Resize an Image in Krita: 

Instructions

Step 1: 

1. 1. Create a new folder called Gallery in your H: drive.
   2. Inside this folder create a new webpage file called index.html.
   3. Create a subfolder inside of Gallery called images.
   4. Create a subfolder inside of Gallery called thumbs.

Note: This structure will help us stay organized with the many files we will have.

Step 2:

Find 6 or more images that show your favorite foods. Include at least one item from each of these categories:

• • Entrees
  • Side dishes
  • Salads
  • Snacks
  • Desserts
  • Beverages

Save your images to the images folder you created earlier. 

Suggestions:

• • Use images that are at least 800 pixels wide or tall
  • Use images that are a similar aspect ratio (wide, tall or square)

Step 3:

Copy your images into the thumbnails folder. Then create thumbnails from these copies:

1. 1. Resize the images so that one dimension is equal to your thumbnail image size (e.g. 240 x 180, or 320 x 180)
      
   2. Resize the canvas so the other dimension also matches your thumbnail size
      
   3. Save the new resized image.

Feel free to use any tool to resize your thumbnails. A tutorial for Krita is in the resources above.

Step 4:

In the index.html file you created earlier:

• • Add a heading to your page
  • A short paragraph describing your gallery
  • The thumbnails you created earlier

Here is an example of how to add an image from a subfolder:

<img src="thumbnails/fishentree.jpg" alt="Fish Entree">

Step 6:

Use CSS to arrange your images. Here is an example of a style that could be used to make your gallery at bit more pleasing and mobile friendly.

IMG {
   float: left;
   margin: 4px;
   border: 2px solid black;
}

Step 7:

Add a hyperlink to each of your thumbnails. This should link to the full size version of your image. For example:

<a href="images/drink.jpg">
     <img src="thumbnails/drink.jpg" alt="Yummy Drink">
</a>

Step 8:

Use 7z to create a compressed archive of your Gallery folder. You can use either .7z or .zip format. 

This allows you to turn in all of the files required for your page to work as a single upload.

Extensions:

• • Basic: Add additional menu options
  • Intermediate: Alter styles of the pages to improve the appearance and/or usability of your page
  • Intermediate: Try some style transitions in your gallery. For example: CSS Gradient Overtop Image On Hover
  • Advanced: Check the example code on this page and create a 2nd version of your gallery that works well with different screen sizes: Responsive Design Toolkit

Grading