There are lots of web pages that successfully use the standard grey background and black lettering. If the goal is to transmit information to the biggest possible web audience, then a plain presentation might even be the best choice. However, most of us want more from a web page. You may want to give your page a little pizzazz or perhaps want to be able to present the info with a little color! This lesson will give you lots of ways to dress up your web page creations with color, different font sizes and font faces (styles). Using background images, basic tables and even frames will be discussed.

Changing the Color of the Background, Text and Links


Believe it or not all of this can be accomplished by changes to the <BODY> tag!

Simply adding any or all of these attributes to the intial <BODY> you can get a very colorful web page. NOTE: All of the different attributes can be added to the SAME <BODY>tag.

For example: <BODY BGCOLOR= "#a4c8f0"" TEXT="#000080">

will create web page with a Lt. Blue background and Navy text. These attributes should all be added to the same body tag.

BGCOLOR

Changes the color of the background of the page.

TEXT

Changes the color of the text on the page. This is an overall change and can only be done once on a page.

LINK

Changes the color of the links you have on your page BEFORE a guest on your page "clicks" on them to visit.

ALINK

Changes the color of an Active Link, or how a link looks when it is being clicked.

VLINK

Changes the color of a Visited Link, or how a link looks to the guest if they have already been to that site.

Note: There is some stylistic concern that random changes to the colors of the links from the standard set up (BLUE unvisited, RED active and PURPLE visited) will leave visitors confused. There may be something to this, but it seems to be even worse to leave the link colors unreadable on your colored background. If you are changing the background color or using a background image, make sure that your visitors can see your links and even your TEXT!!!!

The big questions probably are why/how "000000" equals black, "FFFFFF" equals white and how does a person figure out what the other colors are? There is good and there is bad news. For most of us the bad news is that colors for web pages which are usually referred to as hexidecimal equilvents or RGB values, are determined by a formula. The numbers and letters that make up the color represent the amount of red (first two), green (second two) and blue (third two), or RGB value in that color. Altering the amount of any or all of them creates the desired color(s).

Some of you may need or want to know the formula. (The rest of you, at the very least, may want to read over how to do it if you have a chance). I will not try to muddle my way though it. The good news is that there are MANY good resources out there which allow you to see how different colors look and even some that let you "try out" colors on the web.

I happen to have a Netscape Color chart on one of my pages. It allows you to click on the color and go to the top of the page and see the code for that specific color. It is a Java applet so be sure your Java is enabled on your browser before going there.

The values for some commonly used colors:

  • White "FFFFFF"
  • Black "000000"
  • Purple "FF00FF"
  • Yellow "FFFF00"
  • Gray "C0C0C0"
  • Yellow "FFFF66"
  • Red "FF0000"
  • Blue "0000FF"
  • Green "00FF00"
  • Lt. Purple "CC33FF"
  • Lt. Blue "00CCFF"
Also, the newer versions of MSIE and Netscape support the use of some color names rather than the RGB values! The supported color names are:

Black White Green Maroon
Olive Navy Purple Grey
Red Yellow Blue Teal
Lime Aqua FUSCHIA SILVER

The other Attribute you can change in the <BODY>tag: Using BACKGROUND= will change the background of the page to the image you have selected

<BODY BACKGROUND="brick.gif">

would change the background of the page to a gif of "brick". Take care when choosing a background that it does not make the text unreadable. Too dark a background with dark lettering, light background with light text or a background that is just too busy can all be problems!

The <FONT>  </FONT>tag set:


This is the next tag for jazzing up the page. It is a versatile tag set and allows for the changing of the text in several ways:

COLOR=

<FONT COLOR="#000000"> This is black </FONT>

This colors the text between the two tags the chosen color. Use the same color values for the FONT tag as for the BODY tag. Unlike the color change within the BODY tag, changing the FONT COLOR= can be done as often as you like, even letter by letter! Prudent design would seem to indicate that it not be done excessively and used only when it would provide an enhancement to the page.

SIZE=

<FONT SIZE=+7> LARGE text is possible </FONT>

Font sizes range from 1-7 with size 3 being default. In Netscape you can change the default size of the text through use of <BASEFONT SIZE=> tag in between the <HEAD>  </HEAD> tag set or in the beginning of the HTML document. You can then use the numerical value to change the size from 1-7 by using the <FONT SIZE=> You can also use the numerical values both positive(+1 thru +7) and negative(-1 thru -7)to increase or decrease text size in relation to the selected basefont size or in relation to the default of 3.

FACE=


<FONT FACE="COMIC SANS MS"> COMIC SANS MS </FONT>

If you have this font installed, it is called COMIC SANS MS.

This addition to the FONT tag should be considered carefully. It does do something much desired by web authors: it gives you the ability to "choose" the style of text used, with limitations. You can specify up to three alternate fonts to display if they are available on the visitor's browser system. If you are like me and collect fonts like some people collect matchbooks, changing to font styles like "Paperclip" or "CandyStripe" can be attractive, but many people will not have lots of esoteric fonts installed on their computers. If none of the selected fonts are available, it will revert to the browser's default font.

It is probably better to use the FACE= for fun rather than to define something of high importance, since you cannot be sure how it will appear to the viewer.

If you ABSOLUTELY have to have a certain piece of text appear a certain way, use a graphics program to create a GIF image of the text and insert it into your web page.

You can combine any or all of these to create for example, smaller text of a different color in a different type style!

Two More Tags that Change The Size of the Text:

<BIG> </BIG>
<SMALL> </SMALL>

Big makes the text in between larger than the rest of the text; small, the opposite. These are not as versatile as the font change, but still can be used to have a nice effect. On Netscape at least, it can be used in combination with the font tag to alter text size.

Additional tags you might use:

<U> </U>

This creates underlined text. It is generally used sparingly to avoid confusing readers by making them think it is a hyperlink.

<STRIKE> </STRIKE>

Looks like this

"Strikes out" or puts a line through the center of the text.

<SUB> </SUB>

Subscript: Places text slight lower than the rest of the text on the line.

Looks like <sub>this</sub>

<SUP> </SUP>

Superscript: Places text slightly higher than the rest of the text on the line.

Looks like <sup>this.</sup>

I am not sure just how you would use the next few tags.

<CODE> </CODE>

Used for defining a fragment of code, usually computer code.

<BR CLEAR>

Can be used to stop text from "wrapping" around images. Starts the text on the next line.

VSPACE and HSPACE

These attributes can be used in the <IMG SRC> tag to create space around the image.

  • VSPACE= creates space between the image and the text above or below.
  • HSPACE= creates space between the image and the text to the right or left of it.
The number indicated will determine the space left.

<ADDRESS> </ADDRESS>

Used for setting apart information about the author of the web page.

<P ALIGN=> </P>

Change the alignment of your paragraph with this tag. LEFT, RIGHT and CENTER can all be used. Just remember the closing tag </P> is needed to "reset" the alignment!

Tables:

<TABLE> </TABLE>

A table in HTML is a design element that can be used to organize statistics or data on the web page. Tables can also be used to creatively position text and images on the web page. This is a brief introduction to tables. The best resource for learning how to design a table however is by DOING it! The basic elements for a table are: <TABLE> </TABLE>

The outline that tells the browser it is looking at a table.

<TR> </TR>

"Table Row": Sets up a "row" in which all items contained are listed in a straight line.

<TD> </TD>

Table Data: Sets up a cell, where table data is placed.

Below is a very simple table: 

 <TABLE>>
   <TR>
   <TD>Cats</TD>
   <TD>Dogs</TD>
   </TR>
   <TR>
   <TD>Fish</TD>
   <TD>Birds</TD>
   </TR>
   </TABLE>

The resulting table looks like this:

Cats Dogs
Fish Birds

Not very impressive is it?

That's why tables have a large number of ways to alter them. Many tables you see on the web are using the BORDER attribute to place a line around the edge of the table and around the items inside the table's cells. There are other attributes that can be added to change how a table appears. For example:

A Table Header <TH> </TH> can be added.

This places a heading on the top of the table in a slightly bolder and larger typeface.

Cellspacing can be added to make the space between the cells larger and the internal borders thicker and cellpadding can be added to make the space between the items in the cells and the cell walls larger. Both of these are added to the initial <TABLE> tag.

<TABLE CELLPADDING=2 CELLSPACING=2>

COLSPAN can be used in the <TD> or the <TH> to create a heading or cell that covers more than one column. (Stretching across the table.)

ROWSPAN can be used in the <TD> or the <TH> to create a heading or cell that covers more than one row. (Stretching down the table.)

This example table below makes use of all of these above with the exception of ROWSPAN. 

 <TABLE BORDER=2 CELLPADDING=5 CELLSPACING=0>
   <TH COLSPAN=2>Common Pets<  /TH>
  <TR>
   <TD>Cats<  /TD>
  <TD>Dogs<  /TD>
   </TR>
   <TR>
  <TD>Fish<  /TD>
   <TD>Birds<  /TD>
   </TR>
   </TABLE>
Common Pets
Cats Dogs
Fish Birds
And there is more!

Table element can be modified in several other ways. One of the most interesting is the use of WIDTH in the opening table tag.

A TABLE WIDTH=300 for example creates a narrow table that can be used to create an even margin down the page or to set up a page in a columnar format. This table is also centered. Showing that you can use the CENTER tag to center a table. You can also ALIGN the contents of the td tag by using LEFT, RIGHT, and CENTER.

Such as <TD ALIGN=CENTER>

The number of innovative uses for tables is large and continuing to grow. You can combine tables for all sorts of effects. You can use tables to place images on your pages more exactly than with HTML. You can combine the use of text and images in a table. You can use a table to create a list of links.

One of the newest additions is the ability to change the color of the backgrond in the table, by adding the attribute BGCOLOR= to the TABLE, TR or TD tags. This can be used to create a change of background color by using a one row table with a BGCOLOR differing from the rest!

BUT (there always seems to be a BUT doesn't there?), using tables can be problematic. Browser's support tables to different degrees, with the results varying in appearance and some of the newer ATTRIBUTES are not visible universally.

I sometimes use tables, I also have a page that is just tables for links to my pages. The main problem I find with tables is they are not able to be read by a reader that the blind and vision impaired use. So if you are going to use tables you should also provide an all text link.

Lesson One
Lesson Two
Lesson Three
Lesson Four
Lesson Five
Lesson Six
Page Extras
Netscape Color Codes
Links for Graphics
back





barline