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 media files are not included in the actual HTML file as they would be with the typical word processor file.  Instead, these media files retain their independence as separate files that are “pointed at” by HTML tags included in the web page file.  When a web browser reads the appropriate tag, the browser acts upon that command by opening the appropriate media file.

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

• open the file itself, such as with JPEG, GIF, or PNG graphic 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, Java applets, or Flash movies;
• start another application, which actually opens and displays the file, such as with BMP, MOV, or MP3 media files.

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 “zip” to compress multiple files into a single file and reduce size,
• submit the HTML file and ten 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.  This chapter shows how to add images and links to a web page.  There are several additional resources that can help, found on our class syllabus web page in the Resources section.

Prior to attempting an assignment submission for the first time, please practice with the Practice Assignment first.  You have only ONE submission attempt allowed for any projects.  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 steps 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 something like “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 may 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 a “.jpg” extension), a GIF image (with a “.gif” extension), or a PNG image (with a “.png” 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, taken within the past day (look for a live image)
   5. George Vanderbilt's North Carolina home, from the backside
   6. St. Augustine lighthouse
   7. Penelope Cruz in a black dress
   8. Downtown Tampa waterfront between 1890-1930
   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

   There is a fine collection of safe and free to use images called Wikimedia Commons.  You can find a link to there from the resources section of the syllabus.

   The downloaded image files may have long and confusing names.  I suggest you rename the images when downloading them to short, easy-to-use names.  (In particular, avoid spaces or other strange characters and use names such as “monet.jpg” or “tampa-waterfront.jpg”.)

3. (Read all the directions for this step before starting!)  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">”,
     For example:  <IMG SRC="animatedUSFlag.gif" ALT="picture of a waving U.S. flag">
     Here's what this looks like in a web page:
   • the description as listed above, something such as Monet's painting "By the Waterlily Pond"
   • 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

     If you use Google or another search engine to locate websites with the image you need, the URL of the website is not “http://www.google.com/search?h1=en&ie=ISO-8859-1&q=water%20lilies”, or “http://www.google.com/url?q=http://www.BuyArtdirect.com/?q=monet”!  You need to be looking at a web page that shows the image you want, then copy the URL of that page.  Also, right-click on the image to save it (and make a note of the image's filename).

   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">.)  Common errors include using the wrong name for the SRC such as “foo” when the name is actually “foo.gif”, or “foo.gif” when you actually named the file “foo.gif.gif” (which happens when you have left the Windows default of “hide file extensions”).

   Rather than start completely from scratch, you can save this sample web page 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 one of your ten images.

   Save basic web page with graphic on your computer, open it with Notepad (or another text editor), 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 the HTML chapter 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.

   Try opening your web page in your web browser.  (Use the “File menu→Open file...” in Firefox, or “File menu →Open...” in Internet Explorer, then browse until you find your images.htm.  Make sure it works, and that the title, heading (if any), and the images, descriptions, and links all work and look correct.

   Some folk have a problem with Internet Explorer not showing images for some websites (such as local files as used in this project).  You can try using another browser such as Firefox, Opera, Safari, or Google Chrome instead.  If you really want to use IE, first make use you've applied all available updates for your system.  (This should be done if you have enabled “automatic updates”.)  Then you can try some solutions to enable images from support.microsoft.com.  If none of that works, some posts on Internet forums suggest that old versions of some virus scanners, even if they've been removed, can cause this problem.  If so, you can reinstall Internet Explorer and the problem should go away.

   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.  (The “Paint” tool that comes with Windows 7 can do this and other common tasks, such as cropping an image, or converting one format to another format.  However older versions of Windows only include a much less capable Paint tool; you'll have to search for another tool for your system.)
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 Canvas drop-box.

If you're having trouble getting your images to show, see the various HTML resources found on our class web page, especially troubleshooting guide.

For this project you should have created a new folder to hold all ten images and the single HTML web page.  Rather than upload each of these files one at a time, you create a single “zip” archive, that contains all 11 files.  The hard thing about using zip is understanding the concepts of files, folders, archives, and compression:

• A zip archive is a single file that contains the contents of many other files, in a compressed form.  This means the same data is stored but it will take up less disk space.  So the size of a zip archive is often much less than the sum of the sizes of the files that were added!  The zip archive also stores the file metadata, such as the file's name, date & time it was created, and any attributes such as “read-only”.  Once created, you can store or send (as an attachment) the smaller, single zip file.
• 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 metadata is appended too.  This is repeated for every file or folder you add to the zip archive file.  Note that adding a file to an archive copies the file, it doesn't move the file (the original file is left untouched).
• Viewing a zip archive in Microsoft Office, Notepad, or other such tools would be useless, as the contents are in a compressed form and probably include many different types of files.  (For this assignment for example, your zip archive “images.zip” will contain ten GIF or other graphic files, plus a text HTML document.)  To view one or more of the documents stored as part of a zip archive, you need to “extract” those documents; this recreates the original files that you added to the archive when you created it.  Note that extracting a file from an archive doesn't delete the data from the archive; that is, the archive remains untouched.
• For this project, you should upload a single zip archive file to the drop=-box.  When I get it I can open it up with WinZip to view all the files you copied into it.  If you are using the latest version of WinZip, please keep in mind your instructor only has an older version, so save your archives in the older, “compatible” format if possible.
• You can obtain WinZip from www.WinZip.com.  (This is a trial version but that is good enough.)  Modern Windows has support for creating zip files built-in, but using WinZip may be easier.  WinZip can also create (and open) many different types of compressed archives (including the newest “.zipx” archives).

Creating zip archives (without using WinZip)

1. Right-click on an empty part of your desktop.
2. Select “New→WinZip File”, “New→zip File”, “New→Compressed (Zip) File”, or whatever your version of Windows shows to create a zip archive.  (This will depend on your version of Windows and what additional software, such as WinZip, you have installed.)
3. Name the new (and empty) zip archive file “Images.zip”.  (Depending on your software, the resulting file may have an extension of “.zipx” instead.)
4. Drag the 11 files (ten image files and one HTML web page) and drop them onto the new zip archive file.  You can select all 11 at once, or drag them one at a time.)

That's it!  If you don't have WinZip or other such software installed, when you double-click a zip archive file Windows will open it and display the contained files, as if the zip archive were a folder.  You can drag files out, add more files in, even double-click on the files to open them in their default applications.

If you have a Mac, to create a zip archive, you right-click on a folder (or multiple highlighted files), and choose “compress” from the menu that appears.

When you're done playing with the zip file, close it and then submit it to the drop-box for this assignment.

If you need any additional help, please don't hesitate to ask!  You can post a question on the class discussion board, come to my office hours for a demo, or use your newly acquired awesome searching skills to find help on the Internet.