The Text Alignment Attribute
HTML includes an align attribute that allows you to do some basic text alignment in your Web pages. As with everything else, the best way to see this attribute in action is to look at a code example.

<p align="left">This text is left aligned.</p> <p align="center">This text is center aligned.</p> <p align="right">This text is right aligned.</p>

The <p> tag simply puts a paragraph break between each line.

Style sheets and DHTML (Dynamic HTML) allow for more exact placement of text on your Web page.

Basic Font Manipulation Techniques
There are various text-formatting issues at work here, including the type of font, the size of the font, and various formatting features (such as underlined text).

For the examples I have used Microsoft FrontPage as my HTML editor of choice. However, to help you better understand the actual HTML structure, I have listed the code generated by FrontPage. While I would be a liar if I said I still hand-coded all my HTML, I do suggest you try your hand at coding your own HTML prior to becoming overly dependent on an HTML editor application. While these tools can (and should) save you lots of time, it is worth your effort to initially work with a simple text editor such as Notepad as you code and experiment with your initial HTML pages. Doing so will help you understand what you can and can’t do with HTML.

I want to point out a few things with regard to basic text formatting.

• The font is set by the <FONT> tag. In this example, the font is set by declaring its name in quotes (for example, "Poor Richard").
• The size of the font is set in a similar fashion; however, note the difference in how this is indicated in the size attribute of the <FONT> tag. Although the last line of text reads "36-pt," the size attribute is set to 7. In HTML, valid size attributes are 1-7, which in turn correspond to point size (which is used in HTML editors and word processing applications).
• Other formatting, such as italics (<i>) and underlining (<u>), can be set before or after the <FONT> tag attributes. However, for ease of reading and troubleshooting your HTML code, it’s a good idea to get into the habit of formatting your code the same way—you’ll definitely thank yourself later when you have to read through hundreds of lines of HTML to find what you’re looking for!

HTML can be maddeningly difficult to troubleshoot because the placement of an opening or closing tag—depending on other formatting attributes you have set on the page—can alter the appearance of your text and be difficult to find. That said, it really is a good idea to get in the habit of “clean coding” by always placing your formatting tags (and all others, for that matter) in the same order.

Many of these formatting tags have been deprecated in HTML 4.0, or the functionality they present can be facilitated through the use of style sheets. However, you can obviously still use these tags, and they can come in handy for quick formatting and Web page design issues.

Bolding Text
You can bold text to make it, well, bold—or to otherwise draw attention to it. If you look at the code listing for this page, you can see how the <b> tag has been utilized.

You will see &nbsp; in several code listings throughout our articles. It simply refers to a character space in the actual text. If you are using an HTML editor such as FrontPage and you hit the space bar on your keyboard, the corresponding &nbsp; will be inserted in the HTML to reflect the space.

What’s going on with this HTML? Well, not much… at least in terms of good, effective formatting. The <b> tag has certainly been overused. But in addition to that, notice how confusing this code is to read. Not only are the bold tags haphazardly placed throughout the text, but the use of capitalization also makes both the HTML and what appears on the actual Web page difficult to read. In the next section, in which you will look at the <u> underlining tag, notice how this messy formatting has been cleaned up, improving the text presentation and making the HTML much easier to read.

Underlining Text
You can use underlined text as effectively (if not more so) than bold text. Notice how much easier the following code sample is to read, compared to the previous one.

In addition to the HTML being easier to read, the actual screen output is much more defined. Although the text in this example could use some work (admittedly, it’s not the best grammar!), the clear, single use of bolding and underlining gets the point across fairly well.

Be careful you don’t use too much underlining in your Web pages. As you will see, hyperlinks are associated with underlined text. If you have a lot of underlined text on your page, readers might think words are hyperlinks when in reality they are just underlined.

Italicizing Text
The final basic text-formatting technique is italics, which are set using the <i> tag.

Again, the use of italics has been kept consistent and not mixed with other formatting. This helps to create a clean, formatted look that is not too busy. In this example, the use of italics also helps to draw attention to the letter’s heading.

Although this code is getting a little busier, it is still fairly easy to read. A good way to clean it up even further is to remove the extraneous formatting tags. Remember that you only need one set of opening and closing tags for a specific formatting attribute; everything that appears between the two will retain that formatting. So in this example, you can put the opening <i> tag at the beginning of the first line you want italicized, and put the closing </i> tag at the end of the last line you want italicized.

Again, more than likely you will be using an HTML editor to do your initial coding and subsequent editing. The code listings provided so far are the product of Microsoft FrontPage, and thus FrontPage automatically put in the line-by-line formatting (such as the opening and closing <i> tags around each line). In reality, this probably won’t be a big issue because you’ll be using an HTML editor to do your work. Still, it is a valuable and telling comment on how busy the editors can make your code, often unbeknownst to you! You’ll really see this later when you start looking at more advanced HTML functionality, such as tables and frames.

Advanced Text Formatting
Although the word "advanced" is probably a bit of a misnomer in the context of this chapter (admittedly, this is basic—yet important—stuff), basic HTML offers other formatting options that allow for more sophisticated text markup. I will discuss superscript, subscript, bulleted and numbered lists, and the manipulation of font colors in the following sections.

Superscript and Subscript
Presenting superscript and subscript on your Web pages is easy.

• The <sup> tag is used for superscript. Anything you place between the opening ^{and closing} tags will have superscript formatting applied to it.
• The <sub> tag is used for subscript. Anything you place between the opening _{and closing} tags will have subscript formatting applied.

The following code listing provides a quick example of these tags.

You might want to use a superscript to make a reference to a footnote. ¹. You might want to use a subscript in order to _{highlight a hyperlink, such as <a href="http://www.someplace.com">here</a>.}

The W3C is currently working on a standard for the presentation of scientific notation on Web pages. You can find more information on this topic at http://www.w3.org/TR/html401/struct/text.html#h-9.2.3

Bulleted and Numbered Lists
Bulleted and numbered lists are probably the most common advanced text formatting that you will find on a Web page. Although they are a bit more complicated to use than some of the other tags you have seen in this chapter, they are still quite easy once you get the hang of them.

• For bulleted lists, you use the opening <ul> and closing </ul> tags. Then, you surround each item you want to individually bullet with opening <li> and closing </li> tags.
• Numbered lists are very similar, except that you use opening <ol> and closing </ol> tags to denote them. However, just like the bulleted list, you use opening <li> and closing </li> tags to individually number each item.

You might want to nest a numbered list within a bulleted list or vice versa. This is easily accomplished by specifying the placement of your opening and closing <ul> and <ol> tags, respectively.  

You might be wondering whether an HTML editor would make this type of formatting easier. If you think the answer is yes, you are absolutely right! However, it is helpful to learn how to code by hand so you can use an editor to its full advantage. Even though such applications generate code automatically, you often need to go into that generated code and tweak it to your liking.

Manipulating Font Colors
You can easily manipulate text color via the color attribute of the <font> tag. You can set the attribute to one of two values.

1)            You can literally use the name of a color. In this case, you can set the color to one of sixteen defined colors, such as <font color="Red">.

2)            You can use the hexadecimal value of the color, which allows you to select from literally hundreds of color combinations. Each color has a hexadecimal value; by tweaking this value, you can tweak the color. For example, the hexadecimal for basic red is FF0000. However, a slightly lighter shade of red is FF3118. In your HTML code, you use these hexadecimal values in the color attribute. For example, to use the hexadecimal for red, you would type <font color="#FF0000">, where the "#" preceding the number indicates that you are using a hexadecimal value. The hexadecimal number is split into three colors—red, green, and blue—where the first two numbers of the hex are red, the next two numbers are green, and the last two are blue. You can specify the amount of the color that you want using a value between 00 and FF. That is why FF0000 produces pure red—you have the reddest color possible without any green or blue.

As with many other components of text formatting, things are easier with an HTML editor. However, as I stated throughout this chapter, it is a good idea to learn how to hand-code these things yourself so you have a better understanding of how everything fits together.

What about blinking text?
From time to time, you might still visit Web sites that use blinking text. The <blink> tag makes the text between the opening and closing tags literally blink.

Originally a Netscape convention (back in the days when the browser wars were more contentious and there were serious differences between browsers such as Microsoft Internet Explorer and Netscape Navigator), the use of blinking text was seen in some ways as a mark of defiance against the Microsoft juggernaut. Why was this the case? Simple: Internet Explorer did not support blinking text.

But as with all things rebellious (if you want to put it that way), blinking text got old really fast. Today, it is generally considered bad design (both aesthetically and functionally) to use blinking text. If you really want to draw attention to a specific section of content, a better choice is more reserved (yet no less effective) means of text formatting, such as attractive fonts and other formatting techniques. So beware of blinking text and, when you can, avoid using it in your Web pages.