HTML 1 - Assignment 5

This week you will learn how to add images to your web pages. Here is a list of the week's assignments:

• add images to your web site - 13 pts.
• contribute to message board - 2 pts.
• quiz 3 - 10 pts.

Tip of the week: No image in your web site should be larger than 760x540 px and/or 80 KB. Remember that digital camera pictures start at about 1.5 MB and go up from there!

Preparation:

1. Online lecture: HTML 1, Week 5 - Using Images in Web Pages
   
   
2. Text: Chapter 5
   
   
3. Handouts:
   The Image Element
   Mini-tutorial on resizing images
   
   
4. Week 4 Review - PowerPoint presentation covered in online lecture (.pdf format)
   Week 4 Review - PowerPoint presentation covered in online lecture (.txt format - accessible)

Validation Issues:

Since you have already read Chapter 7, you will notice that the code in Chapter 5 violates one XHTML rule -- the img and br tags, which are empty tags, should end with a " />". Just keep this in mind as you read the chapter, and remember to follow the XHTML rules as you are working on your web pages.

For Credit (25 points total):

1. Use graphics in your web site - 13 pts. total.
   
   Beyond validation issues, the book and I differ in our approach this week. The book demonstrates a way of organizing your files that is appropriate for a large, complex web site. Since our web sites are so small and simple, I think the book's approach is overly complicated, and I recommend that you do it my way instead -- employing the KISS (keep it super simple) principle. If, however, you want to follow the book's approach, that's fine. The instructions below are MY way of doing it.
   
   No matter how you do it, this assignment is complex. I will first describe the finished product and then give step-by-step instructions for how to get there. Here is a link to a some linked web pages that meet all of the requirements of this assignment. For your convenience, these pages will open in a new window (and this page won't validate.)
   
   Finished Product: You will add another second level page to your web site. This page will include at least 3 thumbnails. (A thumbnail is a smaller version of a larger graphic that downloads quickly. The viewer can then decide if he/she wants to click on the thumbnail - and possibly wait - to download the larger version of the graphic.) Each thumbnail will link to a third level html page that displays the original full-sized (or optimized) version of the image. You will organize your files by placing all the html files directly within the public_html folder, but all the images will be placed inside a new folder named "images". Your public_html folder will contain:
   
   
   • your index.html file
   • all your other html files
   • a folder named "images" that will contain all of your image files
   • NOTE: Your book suggests putting your thumbnails in one folder and your larger images in another folder. I find it easier to put all my images into one folder (called images), and I use a naming convention that allows me to tell the difference between the thumbnails and the larger images. For example, I might have an original picture named zoey.jpg, and, when I make the thumbnail, I will name it tn_zoey.jpg. That way all the thumbnails list together and I don't get them mixed up with the originals.
   
   Step-by-step Instructions:
   
   
   1. Create a new folder named "images". If you have any images that are already part of your web site, youneed to move them into this new folder, and fix any references to the images so that they still load correctly.
      
      
   2. Find at least 3 images and move them into your "images" folder. You may use any images that you like, including but not limited to:
      • images of your own that you already have
      • images you get from clipart.com - in the lab someone will log you in and you can download what you like
      • images that you download from free download sites on the web. Two recommended sites are http://www.webplaces.com/search and http://www.sxc.hu. At this second site you will need to obtain an account but there is no cost.
        
        
   3. Use a photo editing application to create a thumbnail for each of your images by resizing the original image, as demonstrated in the text and in the lecture.
      
      You can use any photo editing application to do this. If you are new to photo editing, your safest bet would be to get Adobe Photoshop Elements because it is simple, it is demonstrated both in the text and in the online lecture, and I will be most likely to be able to assist you. You can download it and try it out for free for 30 days. The URL to download it is http://www.adobe.com/products/tryadobe/main.jsp
      
      Other alternatives are iPhoto, which comes with Mac OSX, or Microsoft's Digitial Image Suite, which some Windows users may find on their computers. If you have trouble finding a photo editing application, you could always come to the lab to do this assignment, or find another computer somewhere that has a photo editing application. I hope that all of you can complete this part of the assignment, but, if you are feeling overwhelmed because you have no experience with web graphics, you can opt out. Instead of creating thumbnails, you can just use very small images and pretend they are thumbnails.
      
      Note that to create the thumbnails you can either resize the original images or crop them. With a very complex graphic, cropping to a small part of the larger image will frequently give better results. Be sure and give your thumbnail an easy to identify name. For example, if the original is named zoey.jpg, name your thumbnail tn_zoey.jpg.
      
      
   4. Create a new html file and save it in your public_html folder. This will be your thumbnail (or gallery) page. Add <img> elements to the new file so that the thumbnails will be displayed when the page is loaded into a browser. Add a link from each thumbnail to a new HTML page that contains the larger image. If you link directly to the file itself instead of to an HTML file that contains the graphic, you will not get credit for your work.
      
      
   5. Create new HTML files that will display the larger versions of the thumbnail images. Each new page should contain the larger photo and a caption. I am not requiring that you include the standard nav bar on these pages (although you certainly can if you like), but you should provide at least a link back to the thumbnail (or gallery) page.
      
      
   6. The new thumbnail page will introduce some navigational problems. You will have to modify the standard nav bar on all the other pages to include a link to the thumbnail page. You should also include a standard nav bar in your thumbnail page.
   
   Upload your web pages to the server, and send me an email. In the body of your email you should answer the following:
   1. What is the URL of your web site? (This should end with "index.html")
   2. Did all of your pages validate?
   3. What photo editing application did you use to create your thumbnails?
   4. Did you reorganize your files into 2 or 3 folders, or did you keep it simple with just one images folder?
   5. What link in your standard navigation bar leads to the thumbnail page?
   
   The subject should be "HTML 1 5.1".
   
   The following criteria will be used in grading your assignment:
   • A thumbnail (gallery) page has been added to your site that contains at least 3 thumbnail images. Each thumbnail links to an HTML page that contains a larger version of the thumbnail image and some explanatory text. A link to the gallery must be included in the standard navigation bar on all pages. - 9 pts.
   • Files are reorganized as described in the assignment (preferably with just a single images folder, but you can follow the book's example) - 1 pt.
   • All pages validate - 3 pts.
   
   Also, in order to receive credit for this assignment your nav bar must still meet the nav bar requirements given in assignment 3.
   
   
2. Participate in the Week 5 Discussion on the Message Board - 2 pts.
   
   
3. Take Quiz 3 on lesson 5 - 10 pts.
   
   Quizzes are open books and open notes but you must not talk to anyone or use your computer for anything else except to take the quiz itself. There is no time limit. You will only get one attempt.
   
   
   
   

Return to Top