Downloading and Archiving Images Project

(This project is worth 25 points.)


Purpose

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:

Objectives

The student will demonstrate the ability to:

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.


Assignment Instructions

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 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: picture of a waving U.S. flag
    • 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 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 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 OnLine@HCC 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.


Brief “Zip” Overview

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:

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.


Key Points to Remember:

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.


Copyright ©2010 by Wayne Pollock