Personal tools
  •  

HTML Color

Document Actions
  • Content View
  • Bookmarks
  • CourseFeed

Objectives:

  • Learn HTML to add color to documents
  • Tags discussed: <BODY> with its BACKGROUND and BGCOLOR attributes

File(s):

  • none

Using web graphics

HTML enables you to embed color in documents. Features include:

  • ability to change background color
  • ability to change font color
  • ability to change link color
  • ability to change visited link color

Example

Now open your course home page in your text editor.

Locate the body tag and modify it as follows (do not add anothere BODY tag):

  • <BODY BGCOLOR="FF0000">

Save the document, then view it in your browser. Hopefully, you'll notice that the background color has changed.

Locate the body tag and modify it as follows (do not add another BODY tag):

  • <BODY TEXT="FFFFFF">

Save the document, then view it in your browser. Hopefully, you'll notice that the text color has changed. As above, the color it has changed to is specified by the hexadecimal digit, "FFFFFF".

The different values for colors can be deciphered by viewing this chart at Douglas R. Jacobson's Homepage .

Thus, locate your prefered color, identify the hexadecimal value, and insert it next to the attribute within the body tag. Don't forget the quotes!

Example

Now locate the file, "KAYAK.GIF", and copy it to the same folder as your course home page. Remember, file names are case sensitive. Locate the body tag and modify it as follows:

  • <BODY BACKGROUND="KAYAK.GIF">

Save the document, then view it in your browser. Hopefully, you'll notice that the background graphic has changed. Note that this is not a very appealing graphic!

Warning

You should be careful when modifying default color or inserting background graphics. Why? Because individual users have the option of providing their own default colors. This is done by modifying defaults under the "Preference" menu item in the browser. Try it. Note how you can specify what colors to use when displaying documents.

Thus there is a potential for disaster. For example, you may specify a white background while your user has specified white text. Guess what the user will see when he/she loads your document: NOTHING.

The user can also specify, via the "Preferences", what the browser should do when there is a clash between what you've specified and the user has specified. The user can either choose to use document options or to always use user options.

[End of tutorial]

Copyright 2008, by the Contributing Authors. Cite/attribute Resource . admin. (2008, May 20). HTML Color. Retrieved January 07, 2011, from Free Online Course Materials — USU OpenCourseWare Web site: http://ocw.usu.edu/instructional-technology-learning-sciences/producing-distance-education-resources/resource13.html. This work is licensed under a Creative Commons License Creative Commons License
Online Degree Program
Utah State University offers an online masters degree program (MS & MEd) in Instructional Technology and Learning Sciences. Click below to find out more.