HTML and Web Page Design

Back

Attributes and Values
Page Background Colour
Hexadecimal Notation
RGB Colours
Other Attributes of <BODY>, , and <HR>
The tag and (some of) its attributes
Summary

Tags, Attributes, and Values

Attributes allow for the fine-tuning of how tags display information. Attributes are placed within the angle brackets of the start tag. If there is more than one attribute, they must be separated by spaces:

<TAG attribute1="value" attribute2="value"> </TAG>

Some attribute values have to be enclosed in double quotes (as above), and some don't. To be safe, enclose all attribute values in quotes. If quotes are not necessary for a particular attribute and value, browsers will still see the attribute value and use it, ignoring the quote marks. Attributes affect whatever is between the start and end tags, just like the tag itself.

Many tags have multiple attributes. The <BODY> tag, for example, can have over 20 attributes. You would rarely use all possible attributes for a given tag at once, however, since many are contradictory: you can't align text in a table both left and right. For tags with multiple attributes, it makes no difference what order they appear.

Page Background Colour

Since the <BODY> tag encloses your entire page, any attributes also affect the whole page. Using the very simple HTML document in Part 1, add an attribute to the <BODY> tag:

BGCOLOR="#number"

Changes the background colour of the document. An explanation of #number follows the example.

<BODY BGCOLOR="#99FFFF">
This is where most of your HTML code will be - what the users will actually see in their browser.
</BODY>

Back to Contents

Hexadecimal Notation

The value 99FFFF is a number in hexadecimal. We count in base 10, which means we start at 0 and go up to 9, after which a second digit is added, and we have 10:

0 1 2 3 4 5 6 7 8 9 10

Hexadecimal is base 16, so the second digit doesn't appear until the 16^th number. The numbers 0 - 15 are represented by 0-9, then A-F:

Base 16:	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F	10	...	20	...	100
Base 10:	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	...	32	...	255

RGB = Red, Green, Blue

Clear as mud? No matter. All you really need to understand is that the number 99FFFF is a hexadecimal RGB triplet. That means it's actually three numbers jammed together, kind of like expressing 31 December 2001 as 311201. RGB means Red, Green, Blue, the three so-called primary colours. The numbers express the intensity of each colour from 00 (lowest) to FF (highest). In decimal, that is 000 - 255. The advantage of hexadecimal might now be apparent: three digits in base 10 (255) are only two digits in base 16 (FF).

Back to Contents

So, the background of your page in the example above is 99FFFF, which is the background of this table:

Colour	Hex Value	Decimal Value
Red	99	153
Green	FF	255
Blue	FF	255

Easy ones to remember are:

000000	black (which is no light = no colour)
FFFFFF	white (which is all colours mixed together)
FF0000	red
00FF00	green
0000FF	blue
555555	dark grey
CCCCCC	mid grey
EEEEEE	light grey

It's a good idea to specify the background colour even if you want it white (FFFFFF), because white is not the default background colour of all browsers, nor for some versions of NS and IE.

Some colours are recognized by name, such as "red", "purple", etc. You could probably get away with BGCOLOR="red", but this is not universal. NS and IE do not even recognize all of the same colours by name. Consequently, it's wiser to stick to RGB values.

Numerous charts of colour definitions and similar utilities are available on the internet, many of them for free. You may see them referred to as "Colour Picker" or "Eyedropper" applications.

Back to Contents

Attributes of <BODY>

TEXT="#number"

Specifies the text colour for the entire document. Use RGB values for #number, as with BGCOLOR. If you want to be sure (or as sure as you can be) that the user sees black text on a white background, use BGCOLOR and TEXT:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
This is where most of your HTML code will be - what the users will actually see in their browser.
</BODY>

Several other attributes of the <BODY> tag could be mentioned here, to be experimented with later:

LINK="#RGB" ALINK="#RGB" VLINK="#RGB"

LINK is the colour of a link that has not been visited, ALINK (active link) is a link as the mouse clicks on it, VLINK (visited link) is a link the user has clicked on before.

TEXT, LINK, ALINK, and VLINK colours can all be overridden by the user in NS and IE, and probably many other browsers.

Attributes of 

You can use the tag for alignment. When is used with attributes, you should also use the end tag so the browser knows when to stop using that alignment.

Valid values are LEFT, RIGHT, CENTER, and JUSTIFY. You can only use one at a time. In such cases, attributes and valid values will henceforth be listed as follows:

ALIGN="RIGHT | LEFT | CENTER | JUSTIFY"

Give it a try:

This is where most of your HTML code will be.
 </BODY>

Attributes of <HR>

The <HR> tag has several attributes:

ALIGN="RIGHT | LEFT | CENTER"
SIZE="pixels"
WIDTH="pixels | % of window width"
NOSHADE

ALIGN works exactly as you would expect.
SIZE is actually thickness, in pixels.
WIDTH is how far it extends left and right. It's generally smarter to define this as a percentage of window width; users might have their display set at 800x600, or 1024x768, or whatever - you don't know.
NOSHADE displays the line as solid, which is not the default.

Play around with the numbers to get a feel for how they affect the appearance of the line:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<HR ALIGN="CENTER" WIDTH="75%" SIZE="10" NOSHADE>
 
This is where most of your HTML code will be - what the users will actually see in their browser.
</BODY>

Fonts

Most browsers use Times New Roman as their default font. The user can usually change the default font, and with NS and IE, override fonts specified in HTML documents. If an HTML document specifies a font that the user's computer doesn't have, the browser uses its default font.

This tag is useless without attributes: it defines a font typeface, size, and colour, for an entire document. There is no end tag. Place it right after the <BODY> tag.

Use of the <BASEFONT> and tags is discouraged. Fonts can be better defined and controlled with styles (CSS).

Colour is specified exactly the same way as with the <BODY> tag. Face is specified by name, just like in any word processor: Arial, Courier, Tahoma, etc. Avoid unusual fonts - it's unlikely that the average user's computer has them, so they won't see them anyway. You can also have a list of fonts, separated with commas (no spaces). The browser will display the first font in the list that it supports. Size is a range from -7 to +7, and is relative to the browser's default size. Not all browsers support the FACE and COLOR attributes when used with this tag, including some versions of NS and IE (see , below).

Another tag that is useless without attributes: defines a font typeface, size, and colour for a section of a document. You can also use this tag to define a font for an entire document, if you put right after <BODY>, and right before </BODY>. A font specified with this tag will override whatever is specified with the <BASEFONT> tag and the TEXT attribute of the <BODY> tag (if present). Attributes are handled exactly the same as with <BASEFONT>. A size of +7 may be larger than <H1> in some browsers. BUT: Using the tag this way is considered primitive. Try styles and CSS, as noted above.

Play around with them:

<HTML> <HEAD>
<TITLE>This appears in the title bar of the browser</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<BASEFONT SIZE="-2"> 
This is where most of your HTML code will be - what the users will actually see in their browser.
 </BODY>

tags can be "nested" to change fonts at any point in a document. The new font will be in effect until the browser comes across either another tag, or a tag.

In a longer document, try cutting and pasting the tag to various locations. Watch what it does in the browser.

Suppose you want the same font for a whole document except for a few short passages:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<BASEFONT SIZE="-2"> 
This is where most of your HTML code will be - what the users will actually see in their browser.
 
Font change!
 
Another font change!
 

 Back to the original font. 
</BODY>

While nesting font tags works, it also makes your HTML code needlessly complicated. A neater alternative is to keep the start and end tags as close to each other as possible - you could waste a lot of time looking for the end tag that matches a particular start tag:

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<BASEFONT SIZE="-2"> 
This is where most of your HTML code will be - what the users will actually see in their browser.

 
Font change!

 
Another font change!

 Back to the original font. 
</BODY>

Summary - Part 2

Attributes of the <BODY> tag:

BGCOLOR="#number" TEXT="#number" LINK="#number" ALINK="#number" VLINK="#number"

Specifies the colour of the background, text, links, visited links, and active links.

Specifies font colour, typeface, and size, for a whole document; overrides <BODY TEXT=>.

Specifies font colour, typeface, and size, for a section of a document; overrides <BASEFONT> and <BODY TEXT=>.

Align a paragraph right, left, center, or justified.

Attributes of the <HR> tag:

ALIGN="RIGHT | LEFT | CENTER"
SIZE="pixels"
WIDTH="pixels | % of window width"
NOSHADE

Back

HTML and Web Page Design - Part 2

Tag Attributes and Values; Colours; Fonts

Contents

Summary - Part 2

Copyright © Michael Ward 1999 - 2010