|
|
| |||
Making A Background ColorAdding a background color is easy. You just add the BGCOLOR attribute to your <body> tag:
<html> This would give your page a pure red background like this. You can pick from a variety of colors like "black", "white", "red", "green", "blue", "purple", etc. Both IE and Netscape support several colors by name. In the next lesson, we'll find a way to present an even greater variety of colors. Coloring TextYou can color the text on your page pretty much like adding a background color. We add the TEXT attribute In your opening <body> tag: <body bgcolor="black" text="white"> This would print white text on a black background like in this example. It's important to remember that the text must contrast with the background or it will be hard to read. Also, there are some color combinations that are hard on the eyes and cause a blurred appearance on the screen. The two biggest offenders are black/red and blue/red. In the next lesson, we'll learn a way to pick a color shade that lessens this effect. Also remember that different viewers will have different default backgrounds for their browser screen. You won't know how your text will look against these background colors. Your best bet is to always set a BGCOLOR even it's just plain old white. Same goes for coloring text -- even if you just set it to black. Making Horizontal RulesHorizontal rules are horizontal lines that you can run across your pages to help divide and organize content. Here's an example: These lines are made with the <hr> tag. The <hr> tag does not have a closing tag. All of the data you need to make the line (horizontal rule) is put in the <hr> tag in the form of attributes. Below is an example of the code for a horizontal rule: <hr width="50%"> In this example, we've only added the attribute WIDTH. WIDTH determines how far the line will stretch across the page. In this case, the line will go half way (50%) across the page. Below is what this line would look like: I like using percentages, but you could also use "pixels". Pixels are the little dots on your screen that make up the image you see. Pixels are generally added to WIDTH as a plain number representing the number of pixels you want: <hr width="100"> OR <hr width=100> <hr width="100px"> The above examples all make a line that's stretches 100 pixels across your page. Because "100" is a number, you don't have to put it in quotes. Doesn't hurt if you do. Remember, when in doubt, use quotes. You must use quotes around percentages because the "%" sign is a special character and special characters require quotes. Notice in the last example I used "px" to tell the browser specifically that I was referring to 100 pixels and not 100 of something else. This isn't necessary in this particular case because pixels are the default if you just put in a number. On the other hand, if you're using percentages, the "%" sign is required. Otherwise, the browser will assume you're using pixels. Below are 100, 200, and 300 pixel long lines: We can use the SIZE attribute to determine how thick our <hr> will be (in pixels): <hr width="50%" size=10> SIZE in <hr>s are always numbers representing a number of pixels. You could add quotes and "px" if you wanted. Below is a <hr> that's 10 pixels thick and 50% wide: We can position our <hr> by using the ALIGN attribute that we're already familiar with: <hr width="50%" size=10 align="center"> This would center our line like below. We can use "right and "left" (default), too: Now lets color our line. To do this we'd add a COLOR attribute. This attribute is not supported by Netscape. Don't worry, though. Netscape will still display the horizontal rule, just not the color. <hr width="50%" size=10 align="center" color="red"> Here's what the line now looks like. If you're using Window's Internet Explorer (IE), you'll see a red line above. Otherwise, you'll see the line, but not the red color. There's one more attribute we can use to style our <hr>s: NOSHADE. The NOSHADE attribute does not have a value. You just type in "NOSHADE" and the 3-D effect is removed and the line looks flat. <hr width="50%" size=10 align="center" color="red" noshade> Here's the result in an uncolored <hr>. It's more noticeable without color. The first line is NOSHADE and the second is shaded for comparison: NOSHADEShaded (default)Just remember that NOSHADE removes the 3-D, "buttony" quality of a default <hr>. We've covered a lot of attributes for the <hr> tag. Below is a list of all of the attributes and what they do for easy reference. Remember to separate all attribute/value pairs with a space. Oh, and you can enter the attributes in any order. This is true of all HTML tags. It doesn't matter which attribute is first or second, etc. List Of <hr> Attributes
I'm always getting WIDTH and SIZE confused. The best way to remember the difference is with practice. Make a page using BGCOLOR, TEXT, and different types of <hr>s. Try making this page before moving on. MarginsMargins are whitespace "padding" between the content of your pages and the edge of the browser screen. Both Netscape and Internet Explorer have small default margins (Netscape's is larger). You can add some more space by using the MARGIN attributes in your <body> tag. Lets make a 20 pixel left and right margin for our page: <body leftmargin=20 rightmargin=20> There's also a TOPMARGIN and BOTTOMMARGIN. I'll be you can guess what they do. That's right, they add whitespace to the top and bottom of your page. Older Netscape browsers do not support MARGINS, but the newer 4.x and 6.x versions of Netscape do support MARGINS. The next lesson will show you how to use hexadecimal codes instead of words to represent the value of a color for attributes like BGCOLOR or COLOR. Using hexadecimal code for colors is strongly preferred over using names like "red" or "blue". |
|||
| |||
WIDTH -- How far you want the line to stretch across the page. Can be a percentage (%) or pixel (px) value.