Up to now, the <Body> tag has just been somthing that offset the "guts" of the HTML file. In reality, it sets up some things about the page before it puts up the text and graphics that are in the file.
You have experienced it already. The background of all these lessons is "white," whereas the default background color is gray. There are a number of these tags, and this lesson will look at the ones important for Basic HTML.
The "attributes" we will be looking at are:
Others we will look at briefly are:
A couple of others, TOPMARGIN and LEFTMARGIN, are seen occasionally, but don't seem to do anything that I can see in the current versions of the browsers. Perhaps they are to be included in a later version of HTML. Anyway, no further mention of them will be made.
In this case the background color is PURPLE and you could have used the word "PURPLE" rather than the "hex number"#7C0418.""
I trust you noted that the background color (WHITE) in the first row of the table overrode the TABLE attribute BGCOLOR (RED) and so did the bacground color in the second cell in the second row (BLUE). In this case, with the PURPLE background color, WHITE text shows up nicely.
You may also set the TEXT color for the entire page using the TEXT attribute. You can use the NAMES of the colors for which that works, and for others the "hex number" for the text color. This color will also be overriden by the COLOR attribute in a <FONT> tag.
Here is what the <BODY> tag looks like for the next example:
BACKGROUND allows you to use a pattern or texture behind everything on your page, rather than just a color.
These are just .GIF or .JPEG (.JPG on a PC) files. You can put a whole image behind your page, but such is a graphic is pretty large and will slow down the loading time a great deal. In any case, what this BACKGROUND causes to happen is "tiling" the images. That is, it repeats the graphic over and over again until it fills the entire page.
BACKGROUND will override BGCOLOR in a <BODY> tag. In the example this time, I have added the BACKGROUND called "fairytile1.jpg" as a BACKGROUND and left the BGCOLOR="PURPLE" in. For reference the actual graphic looks like this:
This one is quite large (300x175 pixels). Usually they are more like "highclouds.jpet" which you see below.
The <BODY> tag now looks like this.
Both of these are found in the Backgrounds directory of the Images directory of this course. You can "borrow" them like you can graphics on the web, by holding down the mouse button with the cursor on them until a menu comes up which allows you to save them.
Notice that the PINK text is very difficult to read on this BACKGROUND. This means you should change the color. You want to be nice to those viewing the page.
That takes care of the attributes of the <BODY> tag that you will generally use. I will put a small selection of background texture images in with the assignments and under the RESOURCES part of the Table of Contents menu on the left. You will note that there is also a link to a site with lots of these.
Three other "attributes" of the <BODY> tag have gotten popular lately. I personally dislike their use, because it removes some of the consistency from the web. I presume that designers want to keep all of the colors on their pages in sync, so choose to change the standard colors for links.
Basically, most people set the preferences for colors in links in their browser to BLUE for links which have not been "visited" and RED for those that have been "visited." They also set links to be "underlined." There is now a trend to change the colors of links in various "conditions."
There are three "conditions." They are "unvisited links," "selected links," and "visited links." The first and last are obvious. The one in the middle refers to a link which is currently being selected by having the cursor on it and the mouse button held down.
The three "attributes" are COLOR attributes, and are LINK,ALINK, VLINK. Each one takes a COLOR "name" or "hex number." They seem, for now, to have to be set for the whole page. Putting them into an <A> with the link doesn't work in the current versions of HTML.
The <BODY> tag on this link looks like:
Again, the TAN visited link is difficult to see on the "fairytile1" background, so you need to be careful with what you choose for the link colors. My advice is not to use these "attributes" of the <BODY> tag.
The other "attribute" mentioned above are BGPROPERTIES, TOPMARGIN, LEFTMARGIN.
BGPROPERTIES is an MS Internet Explorer extension of HTML and only accepts the value of "FIXED." It does nothing in Netscape, but in Explorer, the "FIXED" value of the BGPROPERTIES attribute keeps the background image from scrolling when you scroll down on the page.
Click on the link above. If you are using Explorer, you will see that when you scroll, the text and graphics on the page scroll and the background stays fixed. In Netscape, the background scrools too.
The <BODY> tag now looks like this.
Finally, to prove you can't trust me, TOPMARGIN and LEFTMARGIN. I said they wouldn't be mentioned again, but there I went and did it.
Here are some background patterns you may want to use. You will find them also in the RESOURCES part of the Table of Contents menu on the left. There is also another site linked there with lots and lots of other patterns.
 | |  | |  |
 |  |  |  |  |
After reading the answers, to put things back the way they were, use the BACK button or scroll down to the link at the bottom of the "Answers" page.