Tips for Using Color

Introduce this lesson early in the HTML instruction sequence.  Adding color is fun and might provide an incentive to students struggling to learn HTML.  Students probably don't need to know much about the hexadecimal numbering system (see Color Codes) to use color, as long as they are able to look at a color chart and see the code numbers. Browse the sites listed at the bottom of the instruction page for one that is easy to use.

If you are learning HTML along with your students, it's good to have a few "tricks up your sleeve."  Try introducing the horizontal rule (<hr>) attribute, which creates a line across the web page--it can be used to separate one section of the page from another, or to divide the page copyright information from the main page. This tag can hold various attributes, or several at once, such as:

Color -- <hr color="------">

Width -- <hr width=30> for a width in pixels

or <hr width=100%> all of the window width

This is how wide the rule line will be on the page.  If you use pixels, the line will automatically be centered on the page, unless you add:

<hr align=left> 

<hr align=right>

Size -- <hr size=10> affects the thickness of the line in pixels

Here is an example combining several attributes:

<p>First Paragraph

<p>

<hr width=100% size=10 color="FF0033">

<p>Second Paragraph

The result looks like this:

First Paragraph

Second Paragraph

Note that the <hr> tag is like the <br> tag in that it does not use a closing tag, since it produces a single feature, not a continuing action.  Also, in the above example, adding the <p> tag creates more space before and after the horizontal rule: try adding the rule without the space to compare the effect.

For a table, the color attribute can be placed inside any one of these tags:

<table color="------">  ....to make the entire table background one color

<tr color="------"> ....to make a row background one color

<td color="------"> ....to make a cell background one color

<th color="------"> ....to make a cell heading background one color

Refer to the Tables Lesson to determine whether or not a closing tag is necessary. 

Color can be used to change the text of a list, but the color attribute must be added within a <font> tag, not a list (<ul> or <li>, etc.) tag.  See the Lists Lesson.

Copyright Notice: No materials on any of the Bellingham Schools' web pages may be copied without express written permission unless permission is clearly stated on the page.
Permission / Image Information / Return to Tech Connections Homepage / District Homepage

Bellingham Public Schools. 1306 Dupont St. Bellingham WA 98225-3198