There’s a reason why some people are described as artistic; moreover, there’s a reason why the more talented ones make a nice salary—having the talent and natural artistic ability to be a good (or great) designer is not easy. I am not one of those artistic people; however, I am frequently asked to play the role of designer when working with technology. And, if I’m guessing correctly, you are asked (or soon will be asked) to play that same role. Indeed, those of us working within technology fields are asked to wear many hats that often are outside our direct area of expertise and experience.

The interesting (and frustrating) thing about HTML is that it is not by design a feature-rich tool set for manipulating graphics. Indeed, the very opposite is true; in its original (and, for the most part, subsequent) incarnations, HTML was designed for very simple text markup, not for exact or otherwise sophisticated graphic design. Still, many people think of HTML as a graphics tool. Although the Web is by nature a communication medium that invites the utilization of graphics, tweaking HTML to fit your graphical presentation requirements can be a challenge.

However, there are some things you can do to strengthen your work. Using tables, frames, and other goodies in the HTML tool bag, you can actually create some pretty sharp-looking Web pages. This chapter will focus on some of the most basic (but critical) design issues by looking at a variety of basic text-formatting techniques.

HTML Terminology Overview
Terminology is probably not the right word to use in this context; however, there are some general terms and definitions that you should be aware of when working with HTML.

If you’ve done much work on the Web (and if you’re reading this article, I’m sure that you have), then you are already familiar with the material in the following sections. However, I will refer to these terms—tags, attributes, and absolute/ relative URLs—throughout the article, so take a moment to verify that you understand these concepts.

Does capitalization make a difference?
Should you capitalize your HTML code? Technically, it doesn’t make a difference: <A HREF="WWW.YAHOO.COM"> will work just as well as <a href="/www.yahoo.com">.

However, there are some things to consider. First is the issue of readability. When you go back to look at long chunks of code, lowercase can be easier on the eyes.

Second—and directly related to the preceding point—is consistency. If you mix and match capitalization within your code, it can be harder to troubleshoot and can open the door to coding errors.

Finally, capitalization does make a difference in other programming languages (such as XML), so again, consistency is the name of the game so you will have good habits when you move to other Web technologies, programming languages, and so on.

Tags and Attributes
An HTML tag is indicated by opening (<) and closing (>) brackets. Each tag contains various attributes, depending on the tag used. Look at the following sample HTML code:

<font face="Arial" size="3">This is an example of text.</font>

What are the tag and attribute(s) in this HTML?

• The tag in this example is the <font> tag. Notice the closing </font> tag as well. This tag will affect everything between the opening and closing <font> tags. (In this case, the text "This is an example of text." would be affected.)
• The attributes of the <font> tag are, in this case, the font face (which is set to Arial) and the font size (3, or 12-point text). Note that in many instances in HTML there is a numerical reference—especially with text formatting—to the usual "point" reference in text.

Many of the traditional formatting tags in HTML have been deprecated in favor of using style sheets; however, the original tags are still quite valid and— especially if you are new to HTML—worth understanding if for nothing else to further appreciate the power and functionality of CSS.

Here’s another example:
<font face="Arial" size="3"><a href="http://www.yahoo.com">Click here to go to Yahoo!</a></font>

• This example uses two different tags. The first, as you saw just a moment ago, is the <font> tag. The second is the <a href> tag, which is used to set a hyperlink.
• The attributes of the two tags should be apparent. In the case of the <font> tag, the attributes are the same as in the previous example (Arial font, size 3). For the <a href> tag, the attribute is the URL of the hyperlink (in this case, http://www.yahoo.com). Note that with the <a href> tag, the inclusion of the actual URL (in this case, http://www.yahoo.com) and all text that subsequently follows up until the closing </a> tag is what will be presented on the Web page as the actual hyperlink. You will learn all about working with hyperlinks in Chapter 5, "Understanding Hyperlinks."

This code listing is also an example of nested tags, or the process of placing more than one tag within another tag(s). While you can’t nest all tags (as you’ll see when you work with HTML tables), the important thing is to keep an eye on the order in which you open and close your tags. For example, look at the following two lines of code:

<a href="http://www.yahoo.com">Click here to go to yahoo.com</a> -- I think you will find it a useful site.

<a href="http://www.yahoo.com">Click here to go to yahoo.com -- I think you will find it a useful site.</a>

Although the two lines of code appear very similar, note that in the first one, the closing </a> tag is placed in a different location than in the second example. As you can see in Figure 2.1, this has a major effect—the text that comprises the hyperlink is different due to the placement of the closing </a> tag.

Put simply, depending on the tag and its specific attributes, you need to be aware of different formatting issues, which will be discussed in this chapter and throughout the article.