(This project is worth 25 points.)
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:
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.
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:
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.
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 “
or a PNG image (with a “
extension), of each of the following:
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”.)
images.htm” that shows, for each of the ten images, the following:
<IMG SRC="filename of image goes here">”,
<IMG SRC="animatedUSFlag.gif" ALT="picture of a waving U.S. flag">
<A HREF="the URL goes here"> text to show for link goes here </A>”
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
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
images.htm file should have this
tag in it:
Common errors include using the wrong name for the SRC
such as “
foo” when the name is actually
foo.gif”, or “
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
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
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
(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”.)
images.htmHTML 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.
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:
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.
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