WebTV Tutorial
sponsored by map
WebTv Gif
COLORS


COLORS

Well, this topic alone could take up a lot of tutorial pages by itself, however, I will try and stick to the basics - enought to get you started - and then give you some further resources to check out for help and further explaination...

The colors you see on a webpage are made up of three elements - the primary colors (and these are the primary light colors, not the primary pigment colors):


  • RED
  • GREEN
    and
  • BLUE


Each color element can have a value of between 0 and 255... using this method to describe a color, you would express white (the full intensity of all three elements) as 255,255,255... which means:
  • RED = 255
  • GREEN = 255
    and
  • BLUE = 255


By the same token, black (the absense of all color) would be 0,0,0:
  • RED = 0
  • GREEN = 0
    and
  • BLUE = 0


To get a primary color you'd give full intensity to one of the elements... example: RED = 255,0,0:
  • RED = 255
  • GREEN = 0
    and
  • BLUE = 0


There are a ka-zillion possible combinations where each element contains a differing value of between 0 & 255... well, ok... not a ka-zillion, but a lot! --- YOU do the math...

There are three ways to express the colors:


  1. By Name
  2. By Numbers (decimal)
    or
  3. By Hexadecimal Code


1) By Name: This is how we do it in daily life and how webtver's can express color in terms of a web page - but don't do it !!! As mentioned in another part of this tutorial, the 'name' method of assigning color values on a web page can not be read by all systems and so it should be avoided by the serious web page builder. 'Nuf Said !

2) By Numbers: This is the method explained earlier (the 255,255,255 thing) but is not the common way for expressing colors in html.

3) By Hexadecimal Code: THIS is the method we will use... Sufice it for now to say that the 'Code' is made up using the numbers 0 through 9 and the letters A through F and that each color element's value (red, green & blue) is expressed by a pairing/combination of two of theses leters and/or numbers, and a color is expressed by placing the 3 element codes in a non separated string. For example:

White = FFFFFF
Black = 000000
and
Red = FF0000

As you may surmise, the '0' is the leasser value and the 'F' is the greatest value...

Now, as I said before, there are a ka-zillion (well, if you've done the math then you fill in the exact number!!!) color combination possibilities, however, not all of the fine points of color variation can be read by all systems, so it is best to stick to the 216 'non-dithering' colors... these are the ones that are easily read by most if not all systems and the ones that you can depend on looking like what you intended...

What are the 'non-dithering' colors? Well, here's a great chart that a guy named Doug has put together (Click Here) you may want to print it out as I have done...

For the following discussion we will deal with five basic colors (and note how they are expressed using the quotations & # sign):
  1. BLACK - "#000000"
  2. RED - "#ff0000"
  3. GREEN - "#00ff00"
  4. BLUE - "#0000ff"
  5. WHITE - "#ffffff"

As with other Coding, the 'letter' part of the code can be expressed with upper or lower case - just don't mix (ex: "#00Ff00" - Bad).

Also, it is importantant to remember that 'Color' is not a command/tag. Instead it is an attribute uses to define other commands/tags.

Since some of the commands/tags mentioned here are ones that you may not yet have explored in the tutorial, it might be a good idea to bookmark this page and return here after understanding more fully the indiviual commands/tags.

That said, the color attribute can be used in the following commands/tags:
COLOR USE INDEX
  1. BODY - Where it is used to define:
    • the background color for your page,
    • the text (basic font color) and
    • link colors
      • link
        and
      • visited link
  2. FONT - Which alters the color chosen for text in the body tag
    and
  3. TABLE - Where tables can be colored to set them off from the background.


•••••

SEE 'RESOURCES' SECTION OF WEBTV TUTORIAL
FOR OTHER HELPFUL COLOR WEBSITES
GO TO WEBTV TUTORIAL MAIN PAGE



    •••••



    •••••



    •••••



    •••••

  1. BODY

      Here is what the 'Body' command/tag for this page looks like:

      <body bgcolor="#0000ff" background="http://members.tripod.com/~frump_author/images/gstar.gif" text="#000000" link="#ff0000" vlink="#0000ff">

    • the background color for your page,
      bgcolor="#0000ff" (Blue)
    • the text (basic font color)
      text="#000000" (Black) and
    • link colors
      • link
        link="#ff0000" (Red)
        and
      • visited link
        vlink="#0000ff" (Blue)

        NOTE:
        Some places will also offer a chance for an 'active' link, which colors the hotlink after you click on it and before the new (linked-too) page is reached. I have never seen a particular use for this element and never have used it.
        The code would read:
        alink="#??????" (Entering whatever color you choose)



    BACK TO COLOR USE INDEX

    •••••



    •••••



    •••••



    •••••

  2. FONT

    In the "Body" section, you have seen how to set the basic font color for a webpage via the 'text' attribute. However you can make changes in the text color throughout your page using the font command.

    To create the following line of text:

    The sky was blue.

    You would type:

    The sky was <font color="#0000ff">blue</font>.

    Now you can also make temporary or permanent changes to the size as well as the color.

    by changing the code to read:

    The sky was <font size=5 color="#0000ff">blue</font>.

    we would end up with:

    The sky was blue.

    You may also want to intermingle size changes with color changes. In the example below, note that two font commands are opened and therefore two font commands must be closed:

    The sky <font size=5>was <font color="#0000ff">blue</font></font>.

    we would end up with:

    The sky was blue.

    In this last example the size affected both words ('was' and 'blue') while the color command/tag only changed the second word ('blue'). Since two font commands/tags were opened, two had to be closed, hence "blue</font></font>" where the first "</font>" ended the color change and the second "</font>" ended the size change.

    BACK TO COLOR USE INDEX

    •••••



    •••••



    •••••



    •••••

  3. TABLE

    You can learn how to make tables in the 'Tables" section of this tutorial. As for coloring them, remember that:

    1. An uncolored table will take on the color or background it is placed upon.
    2. A uncolored table within a table will take on the color of the table it is inside of unless you specify a different color for that second table.

    Therefore (since the background we are working against is white) the following code:

    <table border=5 cellpadding=5><tr><td>THIS IS A TABLE</td></tr></table>

    will produce:

    THIS IS A TABLE


    To color it red, for example, you would change the code to this:

    <table bgcolor="#ff0000" border=5 cellpadding=5><tr><td>THIS IS A TABLE</td></tr></table>

    which will produce:

    THIS IS A TABLE


    Now we'll place an uncolored table within the table we have already created. The coding: <table bgcolor="#ff0000" border=5 cellpadding=5><tr><td> <table border=5 cellpadding=5><tr><td>THIS IS A TABLE
    WITHIN A TABLE</td></tr></table></td></tr></table>

    and we get:

    THIS IS A TABLE
    WITHIN A TABLE


    Now let's make the inner table another color... let's make it match the white background with the following code:

    <table bgcolor="#ff0000" border=5 cellpadding=5><tr><td> <table bgcolor="#ffffff" border=5 cellpadding=5><tr><td>THIS IS A TABLE
    WITHIN A TABLE</td></tr></table></td></tr></table>

    and we get:

    THIS IS A TABLE
    WITHIN A TABLE



    BACK TO COLOR USE INDEX

    •••••



    •••••



    •••••



    •••••


•••••


•••••
Go To Index