Project 11 -- Images and Color in Web Pages

Get started on this project as soon as possible to allow yourself time to troubleshoot your pages!

You may complete the instructions given in this project today, but do not submit this project until you have received your grade report for the previous project. Make all corrections from previous grade reports before submitting this project. Not making corrections will result in a 3-point reduction in your score for this project.

• Visit the online resources to learn about coding for images and color
• Study the examples given in the project instructions.
• Complete the self-check questions.
• Check your answers on the self-check questions.
• Ask questions about anything that you don't understand.

To be graded:

• Complete the lab activities to add color and images to your web pages
• Send answers to questions and the URL of your hometown.html page in email

Links to important resources for this project:
The resource page at W3Schools for the <img> tag in XHTML coding:
http://www.w3schools.com/tags/tag_img.asp

The web-safe 216 cross-platform color chart at W3Schools
http://www.w3schools.com/html/html_colors.asp

The colornames chart at W3Schools
http://www.w3schools.com/html/html_colornames.asp

Clip art gallery for technology images at DiscoverySchools.com
http://school.discovery.com/clipart/category/tech1.html

Images

Visit W3Schools for information about images
http://www.w3schools.com
From the home page, follow the links to the pages for "Learn XHTML," then "XHTML Tag List," then <img />
Use the links that you see on the <img /> page to explore topics about adding images to your pages.

Downloading images to use in your web pages:

Graphics that you use on a web-page should have one of the following extensions: gif, jpg, jpeg, or png.

Images will slow down the loading of your page. Always check the file size, and dimensions of images before using them in a web page. Too many images, or images that are too large, will annoy viewers who don't like waiting for a page to download, no matter how great the pictures are!

When you locate an image that is the right format (.jpg, .gif, or .png) and an appropriate size:

• right-click on the image,
• choose "Save Picture As" from the pop-up menu,
• choose the location where you want to store the file, and
• give the file a good filename if it doesn't have a short, descriptive filename that is all lowercase with no spaces!

Tips when selecting images for use on web pages:

When viewing images on the web, right-click and choose "Properties" from the menu to get a pop-up window that displays the size and dimensions of an image. The size may be given in bytes or kilobytes (K), which represents "thousands" of bytes. An image that is 9000 bytes is approximately the same size as a 9K image. If dimensions aren't labeled, width is usually the first measurement given and height is the second. Images will load faster if you include the information for the width and height as attributes with the <img /> tag.

Visit the home page for "Learn XHTML" at the W3Schools website. Scroll down the page until you see a picture of two men in the "Get Your Diploma!" section of the page. Right-click on this image. The pop-up menu will give you this valuable information:

• filename of the image = diploma.jpg
• storage location of this image = http://www.w3schools.com/images/
• size of the image = 5150 bytes (approximately 5K)
• dimensions = 117 x 128(width="117" and height="128")

The image tag is an empty tag. All of the code needed to display the image is in one code. There is no text to surround on the page and therefore no need for a separate ending tag. To be backwards compatible with older browsers, include a space and an ending slash before the right bracket of the image tag.

All images should include the alt attribute. The value given for the alt attribute will display:

• in a placeholder on the page while the picture is downloading,
• as a tooltip if you float on the image in some browsers, and
• in an image placeholder if the viewer has shut off graphic display with the browser.

Well-designed image tags will include this format:

<img src="filename.ext" alt="description of picture" width="###" height="###" />

name of the tag: img
attributes with values:

• src="filename.ext"
• alt="description"
• width="###"
• height="###"

So, suppose you have an image of campus named parkland.jpg to display on your page. If you store the picture in the same location as your web page, the image tag will look like:

<img src="parkland.jpg" alt="Parkland College" width="200" height="50" />

If you download the picture described in the "Get Your Diploma!" area of the w3schools web page to use on your page, the image tag will be:

<img src="diploma.jpg" alt="Diploma" width="117" height="128" />

You may want to nest the image tag inside a paragraph tag. This will make the image display on a new line and help control the alignment of the image on the page.

<p>
<img src="diploma.jpg" alt="Diploma" width="117" height="128" />
</p>

If you want to center an image on the page, you can use the align attribute with the paragraph to do that:

<p align="center" >
<img src="diploma.jpg" alt="Diploma" width="117" height="128" />
</p>

Copyright issues with images

When using images from the Internet on your web pages, it is important to locate and print out the copyright information or "terms of use" for the images.  If you cannot find copyright information for clip art, DON'T USE IT!  Often websites will label their graphics as "free," but only for non-commercial pages or under certain conditions. Many graphics pages require that you mention where you got the graphics or give a link back to their page. Be sure you know what the terms of use are for the graphics that you choose. You can be sued for misuse of "free graphics." The Discoveryschool website used in this project for images has a clearly stated policy about the use of the images they offer. Notice that this website offers clip art images for non-profit websites, but says the images cannot be changed in any way and credit must be given to Discoveryschool.com.
http://school.discovery.com/clipart/copyright.html

Some pointers when using images in your web pages:

Give your image files short, descriptive names that are all lowercase with no spaces.

When you upload your html files to Geocities, you ALSO have to upload the image files. They are not embedded in your page. They are stored as separate files! When you display a page in the browser, each time the browser finds an <img /> tag on the page, it looks for the file that represents the image. When you upload pages that have images, you will need to upload the html file and all of the image files that you included in the code of your page. If your pictures appear when you view your page from your storage device but do NOT appear after you upload your pages to Geocities, go through the troubleshooting steps given below. The most common reason image files do not appear when you view your pages in the browser is because the image files were not uploaded! The second most common reason is the filename used to store the file does not match exactly what is used in the src attribute for the <img> tag.

If your images do not display, check:

• Does the filename that you gave for the value of the src attribute match EXACTLY what you used to name the image file?
• Are you storing the image files and your .html files in the same location on your storage device?

What if your images don't display on your page after you have uploaded to Geocities:

• Did you upload your images to Geocities?
• Did you upload your images to the same folder at Geocities that is storing your html files for the images?
• View your filenames in the File Manager at Geocities. Write down EXACTLY what you see, including the upper- lowercase of the filename. (Your filenames SHOULD be all lowercase.) Rename if necessary!
• With your webpage open in the browser, right click on any broken image links you see as boxes with a red x in them. Choose properties from the pop-up menu. Write down EXACTLY what you see for the filename of the image.
• Does the filename you see in the File Manager at Geocities match EXACTLY what you see for the filename in the Properties box?
• Are your image filenames in the File Manager at Geocities EXACTLY the same as what you have provided for the src value with the <img> tag?

Colors

Read web page about web-safe colors:  
http://www.lynda.com/hex.html

Visit the web-safe color chart at W3Schools :  
(You can find this page by going to the W3Schools home page, the "Learn HTML" page. There you will find a link to "HTML Colors.")

Also visit the chart for color names (many of these are NOT part of the web-safe palette)
The link for this page is on the "Learn HTML" page. Look for the link to "HTML Colornames"

The need to use "web-safe" colors is controversial since modern computers typically will be able to handle any color. However, as a student of web-design, you should know what the "web-safe color palette" is and how to use it. Visiting the online resource given above (lynda.com) will give you more information about this important concept!

You need to be able to distinguish between the different charts available at W3Schools.

One chart given to use for the project has a chart of 216 cross-platform color codes. These are considered to be the "web-safe" group. The "colornames" chart does not include web-safe colors.

Example of using a hex number code to add a background color to a page:

<body bgcolor="#ffffff">

Reminder: The bgcolor attribute and color code are added to the existing body tag of your page. You can only have one <body> tag per document in a web page.

Self-Check Questions

After visiting the W3Schools website and visiting pages to give information about the <img> tag and using colors, complete these questions:

1. What tag name is used to place an image on a web page?
2. Is the image tag an empty tag or a container tag?
3. What rules should be followed when naming image files?
4. What filename extensions are the most compatible for image files used on web pages?
5. What is the purpose of the src attribute in an image tag?
6. In Internet Explorer, does the text given as the value of the alt attribute display when you float the mouse over the image in the browser?
7. In Mozilla Foxfire, does the text given as the value of the alt attribute display when you float the mouse over the image in the browser?
8. What is the purpose of the title attribute when used with the image tag?
9. Suppose you have an image of a birthday cake named "cake.gif" and it is 250 pixels wide and 125 pixels in height. Write the code for the <img> tag that will display the image on your webpage.
10. Suppose you have an image of a car named "car.jpg" and it is 170 pixels wide and 80 pixels in height. Write the code for the <img> tag that will display the image in a paragraph that is centered on your webpage.
11. How many colors are in the websafe color palette?
12. If I choose the color #ffccff for the background color of my page, rewrite the code for the <body> tag so it will make the page display the color for the background?
13. All web-safe color codes have a hex code that includes three sets of double digits. Examples: a neon green color is #00FF00, a dark blue is #3300CC. Visit the w3schools page to see the 216 cross platform colors. What letters do you see being used in the codes?
14. What numbers do you see as the double digits in web-safe color codes?
15. In the 216 Cross Platform color chart at W3Schools, scroll down to find the palest yellow in the last two columns of the chart. What is the hex color code number for the lightest yellow from the web-safe color list?
16. In the 216 Cross Platform color chart at W3Schools, scroll down to find the palest blue in the last two columns of the chart. What is the hex color code number for the lightest blue from the web-safe color list?
17. In the 216 Cross Platform color chart at W3Schools, scroll down to find the palest green in the last two columns of the chart. What is the hex color code number for the lightest green from the web-safe color list?
18. Visit the w3schools web page to see the reference for HTML Colornames. Many of these codes do NOT contain three sets of double digits. Give the Hex # code for "Antique White."
19. What are the only color names that are supported by the W3C HTML 4.0 standard?
20. What is the recommendation for what to use when coding for all of the other colors?

Lab Project

Short answer questions:

1. Is the <img> a container tag or an empty tag?
2. Did you include a space before the slash at the end of your <img> tag on your pages?
3. What are the required attributes when creating well-designed <img> tags?
4. Go to the Parkland homepage at: http://www.parkland.edu. On the Parkland home page, right-click on the image in the middle of the page, that says "Stay in the Loop." If you wanted to include this image in one of your web pages, write the code for the <img> tag that would display this image.
5. Are images embedded into your web page or are they stored as separate files?
6. Go to the 216-cross platform color chart at W3Schools:
   Find the six-digit color code for medium yellow.
   Write the <body> tag that would apply this color as the background color for your page.
   
7. Approximately how long did it take to complete this project?
8. Comparing this project to the other coding projects, was it about the same level of difficulty, more difficult or less difficult?

Coding

Adding Color and Images to your web pages

You will be using the files that you have created in previous projects. Correct any errors that were listed in previous grade reports. Errors not corrected from previous projects will result in an automatic 3-point deduction for your score of this project.

To find images for this project, visit the Discovery School's Clip Art Gallery of Technology images:
http://school.discovery.com/clipart/category/tech1.html

The images in this clipart gallery are available in two sizes.  To see the large size of the image, click on it to enlarge it.  These images will look best on your web pages in the smaller version of the file. Smaller files download faster too! Return to the smaller file version before saving the file to use in your web page. When you right-click to save the image, be sure that you are using the smaller version of the file. Look through the gallery and select two images to be used on your web pages.  Use one image on each of your web pages. For each image file:

• Right-click and choose "Properties" from the pop-up menu. 
• Write down the dimensions of the image given in the properties box.  The first dimension represents width, the second represents height.  
• Note the size of the file too.  For this project, images must be 9000 bytes or less. (9K or less if the size is given in kilobytes) 
• Close the properties box and right-click on the image to download it to the same location on your storage device where you are storing your html files from the last project.
• Image filenames should be all lowercase, short and descriptive. Image filenames cannot have spaces. You will lose points for using non-descriptive filenames or filenames with uppercase. Filenames should NOT be something like: 0345m.jpg. Be sure that you use the same file extension as the original image. These must be .jpg or .gif images. When you download images, you cannot change the file extension. It must be the same as the original image. Do not use images that have an extension other than .gif or .jpg.

Use Notepad to open the files that you used in the last project. Make any corrections that were given in your grade reports for previous projects. Also make the following changes: 

• Visit the 216 cross-platform, web-safe color chart at the W3Schools website. See links at the top of the project instructions for the different color charts available at the W3Schools website.When you view the color codes for colors that are considered to be "web-safe," they will only have the following characters: FF, CC, 00, 33, 66, 99.
  The 00 are zeros, not the letter o.
• For the hometown.html page:
  • Choose one of the 216 cross platform, web-safe colors for the bgcolor attribute of the <body> tag. You will lose points if your color is not from the 216 cross platform chart.
  • Add the bgcolor attribute to your existing body tag on your page! 
    (Do NOT create a second body tag. You should only have ONE starting body tag in a document.)
  • Include the hexadecimal color code as the value.  Be sure to include the pound sign (#) before the color code and enclose the value in quotation marks.  Use lowercase letters if the color code includes alphabetic characters.  
  • The color should be light enough to easily read black text.  Also avoid super bright colors that tire the eye.
  • Your finished tag will look similar to:
    <body bgcolor="#xxxxxx">
    (Replace the xxxxxx with a six-digit code for a color from the 216 cross-platform color chart.)
• For the movies-xx.html page:
  • Visit the colornames chart at the W3Schools website:
    Scroll down the chart and find the six-digit color code for "Wheat." Use this as the value for the bgcolor attribute in the <body> tag of your movies-xx.html page.
    
• After the last paragraph of each of your pages (BEFORE the </body> tag), add a new paragraph and include the align="center" attribute within the paragraph tag.
• Nest the <img> tag inside the paragraph.  The <img> tag needs to have the following attributes:
  • src="filename.gif" (replace filename.gif with the actual filename for the image)
  • width="##" (replace the ## with the actual width dimension you found in the properties box)
  • height="##" (replace the ## with the actual height dimension you found in the properties box)
  • alt="type in text to describe image" (use text to tell what the image is)
• The <img> tag is an "empty" tag so it requires a space after the last attribute and a slash before the closing bracket.  Your finished tag nested inside a paragraph will look something like:  
  <p align="center">
  <img src="computer.gif" width="75" height="20" alt="computer" />
  </p>
• After the picture on each web page, create a new paragraph. In the paragraph, type this sentence:
  
  Clip art licensed from the Clip Art Gallery on DiscoverySchool.com
  
  Be sure the text is enclosed in a paragraph tag.
  <p>Clip art licensed from the Clip Art Gallery on DiscoverySchool.com</p>
  
   
• Then make just the words "Clip Art Gallery" be a link to the Discovery School website at: http://school.discovery.com/
  
  HINT: Place the opening <a> tag with the href attribute to the left of the words "Clip Art Gallery."
  Place the closing </a> to the right of the words "Clip Art Gallery."

To test your page: 

• With Internet Explorer open, Click on File Menu,  Open  command, Browse button
• Locate the file you created and click on Open or double click on the filename. 

If your code does not work properly, you can edit the code in Notepad and save the file again!  You will have to open Notepad to edit the file.  With Notepad open:

• Use the File/Open command to open the html document.  Since you gave the file an extension of .html, the filename will not display by default.  In the Open dialog box, you will have to drop down the list arrow for "Files of Type" and choose "All Files (*.*)"  
• Edit your file.
• Save your changes
• Open the file in Internet Explorer again.  If you do not see the new version of your page, click on the "Refresh" toolbar button to have the page reloaded.  Keep testing until the page loads properly.

Save the changes and upload the revised web pages and the image files to Geocities. 

Do not submit your files for this project until you have received your grade report for the previous project.
Make any necessary corrections that are noted on previous grade reports.
Upload the html files and the image files you used  to Geocities. 

Send the answers to the short answer questions and the URL for your hometown.html page to me in an email to the instructor

Your URL should be something like:
http://www.geocities.com/yourlogin/hometown.html

Send a copy of the email to yourself to test your URL to be sure it works and to see if your image files are displaying when you view your pages in the browser AFTER you have uploaded the files to Geocities. If your pictures appear when you view your page from your storage device but do NOT appear after you upload your pages to Geocities, go through the troubleshooting steps given in the project instructions. The most common reason image files do not appear when you view your pages in the browser is because the image files were not uploaded!

You will receive a confirmation that I received the project.  It is your responsibility to watch for this confirmation.  If you do not hear from me within 24 hours, resubmit your email to me.