The Lesson 11 source code is the Lesson 10 source code with added source code for displaying web page text, background, and table borders in colors. In each of these instances, a color is specified as an attribute value. The specified value for a color may be a color name value or a hexadecimal color value as preferred by the author of the source code.
The 16 color attribute values which are color names are as follows; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. All characters in color names should be lower case. The lowercase syntax is not required for older browser capabilities, but is beneficial when web pages are upgraded to current browser capabilities. All characters for all color names in the lessons herein are in lowercase.
Hexadecimal color values are made up of the numerical characters zero (0) through nine (9) and/or the lowercase alphabetical characters "a" through "f" (all of the hexadecimal color attribute values have 6 characters). The lowercase syntax is not required for older browser capabilities, but is beneficial when web pages are upgraded to current browser capabilities. All characters for all hexadecimal color values in the lessons herein are in lower case.
A color chart is available which displays the attribute color values and color samples for named and hexadecimal values (if viewed at this point, use the "Back" button on your browser to return to this frameset).
The first added source code for this lesson is the bgcolor attribute which was added to the opening body tag and reads as follows; bgcolor="ccffff" (this value specifies the background color for the web page). View this added source code in the above frame. This bgcolor attribute has a hexadecimal value (ccffff). This background color (or other color applications in this lesson) can be viewed on the Lesson 11 web page (if/when viewed during this lesson, use the "Back" button on your browser to return to this frameset).
The next added code is the bgcolor attribute added to the first opening table tag (near top of source code) which reads as follows; bgcolor="dddddd" (this value specifies the background color for the table). Scroll to and view this source code in the above frame. Placing this bgcolor attribute in the opening table tag overrides the same attribute in the opening body tag. If this attribute is deleted from the opening table tag, the table background color will be the background color specified in the opening body tag.
Background color applies to a predefined unit (body, table, cell, etc..), and therefore is defined by an attribute value in the opening unit tag (opening body tag, opening table tag, opening cell tag, etc..).
A text color applies to a text unit which the author defines by the positioning of the tags for a font tag pair (the text between the opening font tag and the closing font tag is the defined text unit). The color attribute is utilized in the opening font tag to specify the applicable text color for the defined text unit. The font tag and the size attribute for this tag were presented in Lesson 8. An opening font tag can utilize either or both of the size and color attributes.
The next added code is in the next line of code, the line of code containing the caption tag pair. Scroll this source code into view in the above frame. In the existing opening font tag, which follows the opening caption tag, the color attribute and a color attribute value have been added and read as follows; color="cc00ff". This attribute value specifies the color for the text unit defined by the opening and closing font tags (the text reading "Table of Contents"). The font tag pair and the size attribute in the opening font tag originated in a prior lesson. Now that the opening font tag has two attributes (color and size), the closing font tag returns the text color to the default color and the text size to the default text size.
The next added code is in the line of code which creates the anchor named "paragraph" which was created in Lesson 9, and contains the text "Paragraph Tag" in an h2 heading. Scroll this line of code into view in the above frame. A font tag pair has been added in this line of code. The opening font tag contains the color attribute and attribute value which reads as follows; color="ff0000". This attribute value specifies the color for the text unit defined by the opening and closing font tags (the text reading "Paragraph Tag").
The same code changes have been made to each of the 7 remaining anchors; newline, ordered, unordered, basic, pre, blockquote, and table. The heading text in all of these anchors will appear in the same color. Scroll to and view each of these changes in the above frame.
The next added code is in the opening table tag for the table at the bottom of the web page. In this tag, the bgcolor and bordercolor attributes and attribute values have been added and read as follow; bgcolor="cccccc" bordercolor="red" (these values specify the colors for the table background and the table border). Scroll to and view this source code. This utilization of the bgcolor attribute was explained above. The bordercolor attribute can be utilized for tables that have borders (border attribute value greater than zero).
The next added code is in the next line of code (the line of code creating the table caption). In the existing opening font tag which follows the opening caption tag, the added color attribute and attribute value read as follows; color="0066ff". This value specifies the color for the text unit defined by the opening and closing font tags (the text reading "Professional Football Teams"). Scroll to and view this source code.
Every character in the table caption could be a different color by having an opening and closing font tag for each character. In this instance, the opening tag for each character must specify both size and color. The closing font tag for the first character would close both size and color; therefore, the opening font tag for the next character would have to reset both size and color.
The next added code is in the next line of code (the opening tr, "table row", tag) and reads as follows; bgcolor="bbbbbb" (this value specifies the background color for the row). Scroll to and view this code. The background attribute in the opening table row tag overrides the same attribute in the opening table tag (just as the the bgcolor attribute in the opening table tag overrides the same attribute in the opening body tag). The first row of this table is a heading row and a different background color in this row is appropriate (and optional).
The next added code is in the next line of code (the th, "table heading", tag pair) and the added code is the font tag pair. The opening font tag is typed immediately before the cell text and reads as follows; font color="6600ff" (this value specifies the color for the text unit defined by the opening and closing font tags). The closing font tag is typed immediately following the cell text. The next two instances of added code are the same changes in the next two lines of code (the tags for the other two cells in the row). Scroll to and view these three lines of code.
Lesson Comments:
The current Inernet Explorer Browser will display the cell background color (bgcolor) whether or not the cell contains data. The current Netscape Browser will not display the cell background color unless the cell contains data. Any text character, such as a period, can be typed in a cell as a compliance with the Netscape syntax. The cell text can be displayed in the same color as the cell background color, causing the cell text to be invisible. This syntax was utilized in the color chart available herein (this syntax can be viewed in the color chart source code).
A graphic background (wallpaper) can be displayed on the web page by utilizing the background attribute in the opening body tag. When the background attribute is utilized in this manner, the attribute value is the name of a graphic file. The selected background should be compatible with the other web page components.
Under this syntax, the contents of the opening body tag are as follows;
body background="GraphicFileName.jpg"
Under this syntax example, the graphic file specified in the backgroundd attribute value must be in the same folder (directory) as the web page source code.
End of Lesson 11.