Downloading and Archiving Images Project

Perhaps one of the most difficult concepts to understand about the Internet is how HTML handles non-text items.  Images, video, audio and similar files are not included in the actual HTML file as they would be with the typical word processor file.  Instead, they retain their independence as separate files that are pointed at by text commands (or tags) included in the HTML file.  When the client's web browser reads the appropriate tag, the browser acts upon the command by opening the appropriate file.

Depending upon the file type the browser determines how to handle the file.  The browser may:

• open the file itself, such as with JPEG or GIF files.
• utilize a plug-in, which is a special addition to the browser designed to display specific types of media files such as audio files like WAV.
• start another application which actually opens and displays the file, such as with BMP, MOV, or MP3.

The student will demonstrate the ability to:

• search the Internet and locate photographs of specific interest,
• identify actual content of graphic images,
• insert images into an HTML file, correctly using URL encoding for the filenames,
• save an HTML file and the images that go with it,
• use a compression utility such as WinZip to compress multiple files into a single file and reduce size,
• submit the HTML file and 10 image files as a single compressed Zip archive file, via the assignment drop-box.

For help in completing this assignment, please read the HTML sections of the textbook.  Note Chapter 5 contains a short section on installing and using WinZip.  Chapter 8 shows how to add images and links to a web page.

Prior to attempting an assignment submission for the first time, please practice with the Practice Assignment.  You have only ONE submission attempt allowed.  You cannot submit a second attempt so be careful and follow the directions.

This assignment is a bit different than the previous ones.  You don't need to download and edit this file.  Complete the following exercise and submit your zip file as follows:

1. Create a new (empty) folder (also called a directory) somewhere on your hard disk.  (On the desktop is often easiest.)  Name the folder Images.

   If using a lab or other public computer, save the file to removable media (floppy disk or USB flash drive).  Do not save to the hard drive of a college computer.  It will be deleted automatically when the computer is rebooted.

2. Next you will be downloading various image files.  These should be saved in the folder just created.  You will also need to keep track of the URL where you found each image.  That will be used later.  (An easy way to do this is to copy each URL into a new Notepad document, along with the name of the image file you found there.)

   Using the techniques you have learned, search the Internet and find then save (download) either a JPEG image (with .jpg extension) or a GIF image (with .gif extension), of each of the following:

   1. Any Monet painting of lilies EXCEPT the one titled Water Lilies
   2. Thomas Edison in Florida
   3. Maria von Trapp's American business
   4. Street scene of New Orleans' Bourbon Street, Live!
   5. George Vanderbilt's North Carolina home, from the backside
   6. St. Augustine lighthouse
   7. Meg Ryan in a black dress
   8. Downtown Tampa waterfront between 1890-1929
   9. Any outdoor New York City (or Los Angeles) street scene, taken in the past 24 hours.
   10. Sunshine Skyway bridge (the old one) prior to being knocked down
3. Create an HTML file named images.htm that shows, for each of the ten images, the following:
   • the image using the tag <IMG SRC="filename of image goes here">,
   • the description as listed above,
   • a clickable link to the Webpage where the image was found.  Create a link in your web page by using the tag <A HREF="the URL goes here"> text to show for link goes here </A>
     For example:  <A HREF="http://wpollock.com/">wpollock.com<A>
     Here's what this looks like in your web page: wpollock.com

   The images MUST be put within the same folder as the images.htm HTML file you create, and the HTML IMG tags must accurately point to the images within that folder.  (For example, if an image file's name is foo.gif, then the images.htm file should have this tag in it:  <IMG SRC="foo.gif">)

   Rather than start completely from scratch, you can save this sample web page I provide and edit it using Notepad:  basic web page with graphic.  This file shows one image (with the correct tags), a description, and a link.  You need to do all that for each of your ten images.

   Save this file on your computer, open it with Notepad, make your changes, and Save As images.htm.

   (If you don't understand what to do by examining the tags inside the sample file, please read ahead in your book to chapter 8, especially pages 417 through 422, which show how to add images and links.  At this point in the course you may have some difficulty understanding how to add clickable links to a web page.  I have written this guide to clickable links that may help.  Also, in the class resources section on the syllabus is a link to w3schools.com tutorial on HTML.)

   Automated Web design tools and/or sites such as Homestead, Geocities, Microsoft Word's save as web page feature, FrontPage, etc. MAY NOT be used.  This web page MUST be created using a text editor such Notepad, where you type in the HTML tags and text yourself.  (Note for Macintosh users:  You can use TextEdit, but that defaults to using Rich Text format.  Use the Format menu to change this by selecting Make Plain Text.)

4. REDUCE the size of images, if needed, to no larger than roughly 100kB each.
5. Add all 11 files into a single zip archive.  Name the archive images.zip.  (See the brief zip overview below if you don't understand how to create zip files.)
6. SUBMIT the single zip archive (containing the images.htm HTML file and the ten image files) via the BlackBoard.com drop-box.

For this project you should have created a new folder to hold all the images and the single HTML web page.  Rather than upload each of these files one at a time, you create a Zip archive using WinZip.  The book has directions for this in chapter 5 (pages 269–272).  You can obtain WinZip from www.WinZip.com.  (This is a trial version but that is good enough.)  Windows has support for creating zip files built-in, but using WinZip is easier.

A zip archive is a single file that contains one or more other files and folders.  You can upload this single zip archive file, and when I get it I can open it up with WinZip to view all the files you copied into it.

The hard thing about using WinZip is understanding the concepts of files, folders, archives, and compression.  When you Add a file to a zip archive, a copy of all the data in that file is appended to the zip archive file.  In addition the file's name, folder information, creation/modified date, and other attributes are appended too.  This is repeated for every file or folder you add to the zip archive file.

WinZip stores this data in a compressed way.  This means the same data is stored but will take up less memory.  So the size of a zip archive is often much less than the sum of the sizes of the files that were added!

WinZip (or any zip capable software, including some versions of Windows Explorer) can open up the zip archive file, allowing you to see what files were added to it.  You can then extract a file from the zip archive.  This re-creates the original file from the data that was appended when you added the file to the zip archive.

Many characters that are legal in a file name are not legal in a URL, or web link.  The most common problem is with spaces in the filenames.  It is easier to just use letters and digits (plus the extension) for naming files, then you don't need to worry about creating links to them.

If you do include any funky characters in your filenames, these special characters must be encoded using what is called URL encoding or sometimes percent encoding.  You simply replace each special character with a percent sign followed by two hex (for hexadecimal) digits.  The two digits indicate what the character was.  For example if you have saved an image file with the name New York.gif, the space must be encoded and the IMG tag would look something like this: <IMG src="New%20York.gif">.

You can view this URL encoding reference for a list of characters and their encoded equivalence.  (Note even normal letters and digits can be encoded, but there is no point to doing that.)

---

Key Points to Remember:

• A zip archive is a single, compressed file.  It can contain the entire contents and properties of many other files.
• When you add or extract files to/from a zip archive, you are copying, not moving (that is, adding a file to a zip archive doesn't delete the original file, and extraction a file from a zip archive doesn't shrink the zip archive file).
• File names may contain characters that aren't legal in a URL (web link).  Such characters should be avoided, or encoded using URL (or percent) encoding.
• You must use advanced searching techniques to be able to find all the images required.  You can also use image search engines to find them.
• You must be careful not to download viruses or malware when you search for and download images.  Use anti-virus and anti-malware software.
• Although it doesn't apply for this project, you should be certain to obtain any required permissions before copying and especially posting on the Internet for any images you wish to use.

If you have any problems using WinZip, remember you can post specific questions to the main discussion board and get help from fellow students (or me).  Or you can use your Google skills to find a WinZip tutorial on-line.  Or you can visit me during my office hours and we can work together on your project.