The default settings of the browser render text in black letters against a grey or white background, with paragraphs spanning the width of the browser window--not very exciting or appealing. Before moving on to other topics, let's consider how you might format your document so that it is less tiresome. Specifying ColorsThe first thing you might do is add some splashes of color to your page. The color can be specified in one of two ways: using a predefined color name or using a numeric value that represents the color. The color name may be chosen from the following list:
However, some browsers to not recognize color names. Therefore, you must specify the color with a hexadecimal number representing the proportion of red, green, and blue hues that make up the color. A red-green-blue (RGB) color value consists of three two-digit hexadecimal numbers in the format #nnnnnn, each pair (nn) of which range in value from a low of 00 to a high of FF (decimal 0 to decimal 255) and which specifying the intensity of the corresponding color--red, green, and blue. For example, the color #FF0000 is red because the red portion of the number is set to its highest value (FF); green and blue are set to zero. Similarly, #0000FF represents the color blue. Of course, you don't have to try to figure out the hexadecimal values of colors; these are given in prepared tables that have the corresponding values for a wide range of colors. The following table gives the hexadecimal values for the 16 named colors; there are a million or so others.
So, in specifying colors--for page backgrounds, text, headings, horizontal rules, and other elements on a page--you can use color names or, for more wide applicability, the hexadecimal values. For color values not part of the sweet sixteen, you can find programs that translate hues and shades into hexadecimal values. The BGCOLOR AttributeOne of the colors you can change is the default grey background on your pages. The BGCOLOR attribute of the <BODY> tag is used to assign a background color to your document. The color can be one of the predefined color names or its hexadecimal equivalent. So, for example, the specification
<BODY BGCOLOR=YELLOW> or will change the grey or white background to yellow. As you will see later, the background can also be rendered as a graphic, or texture. If you want to see the effects of different background colors, click on the buttons below. Your browser will have to be JavaScript enabled. If you can't see the color changes, set the following options from your browser's menu:
NetScape Navigator 3.0 - Options/Network Preferences/Languages/Enable JavaScript
The <FONT COLOR> TagYou can use the the <FONT> tag and its COLOR attribute to change text color in a document. Surround the text character, word, or block with an open and close tag. For example,
<FONT COLOR=BLUE>
This text is colored blue
</FONT> The <FONT SIZE> TagThe <FONT> tag also has a SIZE attribute to permit you to vary the size of text characters. The size can be fixed, using the numbers 1 through 7 (SIZE=1|2|3|4|5|6|7); or it can be relative, using + or - to vary the size from the browser default size which is usually 3; (e.g., SIZE=+1 or SIZE=-2):
<FONT SIZE=5>This text size is 5</FONT> You can, of course, include both a COLOR and SIZE parameter within a <FONT> tag: <FONT SIZE=5 COLOR=GREEN> This text is a size 5 green text.</FONT> Other text size tags include
<BIG> - to increase the font by one size</BIG> and
<SUB> - to add subscriptssubscript or And you can render text in bold or italics using the tags
<STRONG>This text is bold</STRONG>
<EM>This text is in italics</EM> Other combinations of background and text colors along with text sizes can make your document more interesting and easier to read, so long as you do not go overboard by trying to use the entire spectrum of colors or the complete set of font tags. A Centered TableAnother way to increase visual variety on your page is to center the text within a display area that is less than the width of the browser window. That is, you can specify that the line lengths be a certain percentage of the window width and then center the text within that area.First, enclose your document within a simple table structure that is a certain percentage of the window width. This is done using the <TABLE> tag and its WIDTH attribute. You may also use the BGCOLOR attribute to set a background color for the table, the BORDER attribute to give it a border, and the CELLPADDING attribute to leave blank space between the text and the border. Then, enclose the table structure within the <CENTER> tag. The specifications look like this:
<CENTER>
The resulting output looks like this:
Later, we will describe tables more fully and formally specify the accompanying parameters; for now, you can use this general model for setting off and highlighting a block of text. A Handy Piece of SpaceRecall from previous discussion that virtually all formatting is handled by tags. So, you cannot use the space bar on your keyboard, for example, to indent lines or to add space in the middle of a line. The browser treats one or more spaces as a single space. There is a way, though, of adding extra blank spaces; you can use the special non-break space character-- . This character is normally used when you do not want the browser to break a space at the end of a line. For example, if the term "Figure 1" appears at the end of a line, you don't want to break the line between the word "Figure" and the numeral "1". Both should appear together. So, you place a non-break space character (rather than a normal space character) between the two: Figure 1. This shows up in the browser as just "Figure 1"; but there's a special space between them.Well, you can use one or more of these non-break space characters to add spaces in your document. When you type them within a string of text, it will leave blank spaces (as the four did here). Or you can add them to the beginnings of lines to indent them:
Two here Another case where multiple characters are reduced to one is with the <P> tag. No matter how many paragraph tags you enter in a row, only one paragraph break will be made. You may, however, want to double space or triple space between paragraphs. Simple enough with . Put a non-break space character between <P> tags and you get as many blank lines as you want: <P> <P> <P> As you can see, each character doesn't take up much space, but it's better than nothing. For the most part you will use them as intended--as a single non-break space. On special occasions, though, you may need more than one.
Contents
Next
|
|||
Using a simple table, colors, and text fonts is a way of making your documents more appealing
and, hopefully, more informative. Still you need to use descretion in choosing display combinations
else they become distracting. In later sections we will provide more detail
about the use of tables and backgrounds for finer control over the appearance of a page.