HTML Lesson 4

Fonts, Headings and Alignment


If you want to change the color, size, or typeface of text, highlight it in NoteTab and double click the Font clip. You'll see choices for all of these. Because you can not be sure exactly what fonts are available to the rendering program, you'll usually want to specify several similar alternatives for the font FACE attribute, NoteTab does this for you with the basic fonts. You can manually add additional faces to the list.

The font SIZE attribute is best specified as the current size (based on how the reader has setup his own display) plus or minus one or more increments.

These are the sizes -3 -2 -1 0 +1 +2 +3 +4 +5 +6

Font colors are specified as mixtures of red, green and blue just like the background color. You use the color picker, or some graphics program to blend the color you want and then turn it into the three hex numbers which follow the # sign as a value to the COLOR attribute of a FONT tag. Note that, unlike the background where you want to limit yourself to one of the 216 colors which don't result in a dither pattern to create the background color, you can use any mixture of colors to create a font color.


There are six levels of section headings (<H1> to <H6>). They may only be used between paragraphs, not within them. In theory, level H1 should come first, within that there can be multiple H2's and within those multiple H3's, etc. However, unlike SGML, nothing enforces this in HTML -- most people use the ones which generate the size type they like (but remember, each rendering program can display these differently.) Here are the way the six display in your browser:

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6


Headings, paragraphs, and HR's all support the ALIGN attribute. Values for this attribute are "left", "center", and "right". To use it with a horizontal rule you must also specify a WIDTH (in terms of percentage of the block) attribute for the HR. You may also specify a SIZE (in pixels) attribute which is the depth of the rule. Most browsers also support "justify" as a value for the ALIGN of a paragraph (note that this paragraph is probably justified.) To see how all of this works, look at the coding of these blocks.

Heading 4 aligned "center"

Paragraph aligned "right"

Another block level tag, like paragraph is the BLOCKQUOTE which is usually rendered with both left and right indents. The BLOCKQUOTE tag does not support alignment or any other attributes.

Copyright 2001 by Wren McMains Resources

Go back to Lesson 3

Go on to Lesson 5

Back to the HTML Basics Index