Comp25: HTML - Products Webpage

Learning Objectives

1. To use HTML to complete the web page that lists the products that you sell.
2. To practice adding images to your HTML files.

Steps to Take

1. Add content to your Products page with descriptions of your products.  Each product should have
   1.  An <h2> tag to provide a heading
   2. An image of the product (Don't worry if the images do not align properly yet...we'll fix that when we add <TABLES> to the page)
   3. A descriptive paragraph (use the <p> tag)  (Remember what constitutes a paragraph!! 5 sentences)
   4. A bulleted list of features or benefits of the product (use the <ul> and <li> tags). 
2. You must have a minimum of five distinct products. 
3. Find images that relate to each of the products you sell.  Be sure your images are saved to your web-docs folder, and they follow the file-naming guidelines outlined during lecture
   1. Use Google Images to search for your pictures.  Save the images to your web-docs folder by right-clicking on the image and choosing Save As. -- OR
   2. Copy the images from Google into Paint. Crop, edit or resize the image as you desire, then save the image as .jpg or .gif to web-docs
4. Add the <img> tag to display the images you downloaded.  The general syntax for the <img> tag is:

   <img src="filename.gif">

   Be certain that the filename matches the name of the image that you downloaded, including the case, spacing, and file extension.  The file must be in your web-docs folder to work.

   • NOTE: If you decide to create a separate folder for your images, the tag syntax is as follows
     <img src="images/filename.gif"> --- this optional and not required.
5. Save your HTML file again, and verify that you can access it (and the photos) from your public website with the following address:

   http://www1.pacific.edu/~yourusername/products.html

6. Test your links between the products page and your index page to insure they are not broken links.
7. For full image homework credit, add buttons to your navigation bar, instead of text links.
8. Upload your products.html page to Blackboard to insure that it was completed on time

Troubleshooting

If everything is indented like crazy...

You started an <ul> or <ol> tag but didn't finish it.

If all the writing is really, really big...

You started an <h..> tag but didn't finish it.

If half the page is one big link...

You forgot to finish off the <a> tag.

If the actual <a href..." code appears ON my webpage...

You forgot a quote in the href attribute.  The website address or page must have quotes on both sides.

If your pictures don't work and you get a broken image icon...

There could be a lot of reasons for this, but it is likely because the image filename doesn't exactly match what you typed in your code.  Check for spaces, the file type extension, and upper/lower case.  Make sure you didn't forget the src attribute, and that the filename has quotes around it.

If your picture is too big...

Ideally you should edit the image in a program like Photoshop or Paint.  If you can't do that, use the width and height attributes on the img tag.  See this page for help on how to do that.

If you click on the link to test an email and it says something about Groupwise...

In the computer lab, your default email is set to Groupwise.  That's just how it is, so you can't really test it from here.  Try it from home.

Grading Guidelines

This assignment will be graded using the following guidelines: