|
|
|
We have used attributes to change the BEHAVIOR of a tag, as with the ALIGN attribute for the paragraph and heading tags. We can also use attributes to change the APPEARANCE of a tag.
Tag: BODY
Attribute: BGCOLOR
Values: color values (named colors or hex codes)
Description: The BGCOLOR attribute in the BODY tag can be used to set the background color for the BODY of an HTML page.
Tag: BODY
Attribute: TEXT
Values: color values (named colors or hex codes)
Description: The TEXT attribute in the BODY tag can be used to set the text color for all content in the BODY of an HTML page.
We'll talk more specifically about colors and color codes in the next module. For now, you only need to know about the following named colors: black, white, red, blue, yellow, fuchsia, lime, and aqua.
The BODY tag, which represents the visible "document" of a web page, may be modified to have a specific background color using the BGCOLOR attribute.
Example:
<body bgcolor="white">
This is how this code would look in an HTML page:
<html> <head> <title>Test Page</title> </head> <body bgcolor="white"> <p>The background color of this page has been set to white.</p> </body> </html>
Click here to see this example.
I could set a black background simply by changing the BGCOLOR attribute's value.
Example:
<html> <head> <title>Test Page Two</title> </head> <body bgcolor="black"> <p>Now this content is on a black background.</p> </body> </html>
Click here to see this example.
Chances are that you were not able to read the text in the above example when you viewed it in your web browser. Your browser's text color is probably black, which is the default color for TEXT set in the preferences for your web browser; black text on a black background has VERY low contrast indeed!
To rectify this, we could set the text color for the page using the TEXT attribute for the BODY tag. If I wanted a black page with yellow text, for example, I could set both the BGCOLOR and TEXT attributes for the BODY tag.
Example:
<html> <head> <title>Test Page Three</title> </head> <body bgcolor="black" text="yellow"> <p>This text is yellow on a black background.</p> </body> </html>
Click here to see this example.
Attributes may be added in any order to a tag. The following example works identically to the previous example.
<html>
<head>
<title>Test Page Four</title>
</head>
<body text="yellow" bgcolor="black">
<p>This text is still yellow on a black background. Attributes may be placed into a tag in any order; switching the attribute order makes no difference to a web browser.</p>
</body>
</html>
Click here to see this example.
You may add as many attributes to a tag as you desire; there is no limit. However, you may NOT repeat the same attribute twice in the same tag!
When you add attributes to a tag, you must NEVER restate those attributes in the closing tag. I mention this again because it is a common misunderstanding for many students. The following would be INCORRECT:
<html>
<head>
<title>Test Page Five</title>
</head>
<body bgcolor="black" text="yellow">
<p>This text is still yellow on a black background. Sadly, this page is technically incorrect because I have restated the attributes in the closing tag; never do this, as the page may operate incorrectly.</p>
</body bgcolor="black" text="yellow">
</html>
As mentioned before, every attribute must follow this syntax:
attributename="value"
This syntax illustrates the strict XHTML standards, which requires that EVERY attribute be identical in form. HTML4, however, is more relaxed about attribute syntax. You will often see attributes with the quote marks omitted in HTML4 pages. Leaving out quote marks is not permitted in this class, however, nor will it be permitted once the XHTML standards are firmly in place.
When we talk about quote marks in HTML and other programming languages, we really mean "straight" quote symbols, not the curly or "smart" quotes that are substituted for straight quotes by most word processors. Curly quotes are not recognized by web browsers, and must NEVER be used as they will break your HTML page.
Use straight quote marks: " "
Never use curly or "smart" quote marks: “ ”
If you use the required HTML text editors for this course, you will not run into the curly/smart quote problem. Microsoft Word and many other standard word processing programs, however, will automatically replace straight quotes with curly quotes as you're typing, so be careful. The straight quote key is the usual one, right next to the "Enter" key on the PC, or the "Return" key on the Macintosh.
The most common reason for student web pages to break or operate incorrectly is a missing quotation mark surrounding an attribute value. If you forget to place one quotation mark around an attribute value, your page may display strangely or the whole page may fail to operate. Therefore, if you run into problems, check for missing quotation marks FIRST; that's what I do.
The following example would be incorrect and would probably break the page:
<body bgcolor="white>
If you leave out BOTH quote marks in the above example, the page will operate correctly:
<body bgcolor=white>
The above syntax, however, does not conform to the latest standards, and will not be supported in the future. Therefore, you must ALWAYS use both quotation marks surrounding an attribute value:
<body bgcolor="white">
The above examples correctly express how attribute syntax operates. However, be aware that, as of HTML 4.0, all appearance information for an HTML page has been removed from the HTML tags themselves and placed in Cascading Style Sheets (CSS). The sorts of background and text color attributes cited in the examples, therefore, would not be used in BODY tags on websites which have implemented the newer standards. I chose to use ALIGN, BGCOLOR, and TEXT attributes as examples because they do something readily comprehensible, but I also want you to know that they are on the way out. We will discuss the details of CSS and document appearance in later modules.
 |
 |
Copyright © 2001 Michael Masumoto. All Rights Reserved.