ETSU Logo

CSCI 1210

Essentials of Web Development

Homework 3: Image Optimization

This assignment will provide you with more practice optimizing images for the web. Your final product should look something like this:

collage
Fig. 1- A collage of images
...only with your own pictures! (Feel free to refer to the Lab 2 instructions to refresh your memory about how to modify images, especially if you're using Photoshop.


  1. Take four pictures with your smartphone (or grab four images you've already taken). Make sure that they're landscape-oriented instead of portrait-oriented:
    setting up an HTML document
    Fig. 2- Setting up the HTML
  2. Create a hw3 folder on your external drive inside your homework folder. Inside the hw3 folder, create another folder named images
  3. Transfer the pictures from your phone to the hw3 folder. You can do this either by directly connecting your phone to your computer, or 'sharing' the pictures with yourself, i.e., email them to yourself and then download them from email to the hw3/images folder
  4. Optimize the images using the techniques you learned in Lab 2. The image aspect ratio should be 450:350 and the final image sizes for each should be 450px x 350px. Export the files with the names: 001.jpg, 002.jpg, 003.jpg, and 004.jpg
  5. Download hw3.html file
  6. Save the file in your hw3 folder
  7. Fill in the comment information with your own
    setting up an HTML document
    Fig. 3- Setting up the HTML
  8. Add the meta-information to the document
    Meta-Information
    Fig. 4- Setting up the HTML
  9. hw3.html is already set up to display your images Add the links to each of your images in each cell
  10. Adding images
    Fig. 5- Adding images
    Notice in the screen shot above, since the images are all in the images folder, we have to include images/ in front of each src= attribute. This tells the browser that the images are in a sub-folder and where to look for them


    Naturally, your pictures are going to be different. Fill in the alt="..." information. A lot of students struggle with what to put in alt="..." part...My advice is to look at the picture, then close your eyes, and imagine how to describe the image verbally. It doesn't have to be a long description, just enough to describe to someone who can't see the picture

    Finally, insert a <p> ... </p> element below the table with a brief description of each of your pictures
    Adding a paragraph
    Fig. 6- Adding a paragraph
  11. Save your changes. Click Run→Launch in Chrome or View→View File In→Chrome. Your file should look like the picture above

    ... It doesn't matter if you use single or double quotes for attributes' values, just as long as they match
  12. If some of the images display with different dimensions, go to the head element and add this:
  13. Embedded CSS
    Fig. 7- Embedded CSS
    right above the closing </head> tag. This will cause images, whatever their actual dimensions, to display 450 pixels wide

    We had some trouble with this in my other class, where GIMP seemingly arbitrarily changed the width to something other than 450 pixels. The important thing with image optimization is getting the file size down. The exact dimensions of the image are less important because we can use the above CSS to fine-tune how the browser displays the image
  14. Once your file is displaying properly (remember, you won't see the validation logos until the page is uploaded to the server), log in to your account on FileZilla (If you need to refresh your 'FileZilla memory,' click here for a refresher). Double-click homework. Right click in the files & subfolders window and select Create directory and enter it. Name the folder hw3
  15. Navigate to your homework/hw3 folder on the left (local) side
  16. Select your files. You have to upload hw3.html and your (optimized) image files for it to work on the server
  17. Drag and drop the files to the remote folder
  18. FileZilla
    Fig. 8- FileZilla
    Double click on one of the images folders (left or right side, doesn't matter)
    Image file sizes
    Fig. 9- Image file sizes
    Notice the file sizes for the image files...they are all under 100Kb. That's the point of image optimization!
  19. Now that your files are uploaded, return to your browser
  20. Open a new tab in your browser. In the address bar, enter your ETSU ID, followed by a dot ('.'). Then enter csci1210.com. This is your domain. Now enter homework/hw3/. This is the path to your work from your web root directory. Finally, enter the file name, hw3.html. It should look something like this, but with your ID, not mine:

    ramseyjw.csci1210.com/homework/hw3/hw3.html
  21. Press Enter
  22. Your page should display as it did when you ran it locally, except now you should have the validation links displaying in the lower right corner
    Validation links
    Fig. 10- Validation links
    Ctrl-click both links and make sure your work is error free. If there are any errors, fix them, save your work, re-upload the file and check again (remember, once the validation pages are open, you don't have to keep clicking the validation links. Once you've uploaded your changes, you can just return to the validation page and refresh it)
  23. Once your work is error free, copy the new URL into a new document in NPP. It should look like this:
    Submission File
    Fig. 11- Submission File
    That is all that should be in the file. Just the URL
  24. Click File → Save As and save the file as hw3.txt (that's ".txt", NOT ".text"!)
  25. Upload hw3.txt to the HW3 folder on D2L

Have a nice day!