Welcome to the second lesson in our crash course in HTML. In case you missed it, follow this link to read part one of this series.

When last we met

In the first lesson, we discussed the basic outline of an HTML document—the head and the body. We showed you how to insert comments and how to use a picture as the background for Web page. This week, we’ll take a look at formatting text inside the BODY of the HTML document.

Getting down to the nitty-gritty
HTML provides a variety of tools that let you do nifty things to spruce up the text on a Web page. You control the appearance of the text on a Web page in much the same way that you format text in a word processing document. The difference is, of course, that there’s no “bold” button in pure HTML—you have to know what tags or codes to use to format your text.

Let’s review some simple tags and their functionality. Table A shows some of the tags you’ll use most often.

Table A: Some common HTML tags
<b> bolds text </B>
<i> italicizes text </I>
<center> centers text on a page </center>
<p align=”center”> Another way to center </p>
<p align=”left”> Aligns text to left (default) </p>
<p align=”right”> Aligns text to the right </p>
<h1> Makes text “Heading 1” </h1>
<h2> Makes text “Heading 2” </h2>
<h3> Makes text “Heading 3” </h3>
<h4> Makes text “Heading 4” </h4>
<h5> Makes text “Heading 5” </h5>
<h6> Makes text “Heading 6” </h6>

I didn’t stop typing headings because my carpal tunnel was acting up; there are only six headings in HTML. These styles are specifically used to make text stand out. You can create your own styles by using the FONT tag.

Introducing the FONT tag
The FONT tag is probably the most versatile when it comes to altering the style of your text. Just like the BODY tag, the FONT tag has a few parameters that can be used. Some of these parameters include SIZE, COLOR, and FACE.

Let’s say that you wanted your text to be big, blue, and in an Arial font. The following line of code would produce such a result.
<font face=”arial” size=”5″ color=”blue”>This is sample text.</font>

You’ll need to remember a couple of important notes concerning the FONT tag. First, unlike the text heading styles, with FONT, the larger the number, the larger the text is going to be. Again, you don’t have to close the parameters, only </font>.

In addition, not all browsers will be able to display all fonts that you want to use. For this reason, if you are going to use font faces, you should use a group of fonts that are similar. This way, if the end user’s browser won’t display one font in the group, it might display another. Based on recommendations by the folks who make Dreamweaver, here are some of the “good” font face groups:

  • Arial, Helvetica, sans-serif
  • Times New Roman, Times, serif
  • Courier New, Courier, mono
  • Georgia, Times New Roman, Times, serif
  • Verdana, Arial, Helvetica, sans-serif

You can group these fonts by separating them with a comma inside the tag:
<font face=”Georgia, Times New Roman, Times, serif “>

A word about hexadecimals

When you’re defining the color of the background, a link, or a block of text, you can use basic word names for clors, such as red, blue, green, or yellow. However, if you want to use a specific shade, you will have better luck using the hexadecimal system of colors.

Paragraphs and line breaks
You define paragraphs of text in HTML with the paragraph tag (<p>). Paragraphs will line-wrap according to the size of the browser window. By default, a blank line will appear between paragraphs. So, if you set up your HTML document with three paragraphs like the example below, a blank line will appear in between each.
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>

Suppose you want to force a line break at a particular point in the text. To do so, you must use the break tag (<br>). Since <br> will cause the next line of text to move down to a new line, it’s also a great way to insert blank lines in your document.

Keep in mind that if you are using HTML’s predefined heading styles, each heading tag also acts as a paragraph tag. If you have three different lines of text, all in different heading styles, a blank line will separate each of the lines of text.

For example, the following HTML commands result in the display shown in Figure A.
<h1>this is a line of code</h1>
<h2>this is a line</h2>
<h3>this is a line</h3>

Figure A
Closing a heading style has the same effect as closing a paragraph tag.

Putting it all together
Let’s review what we’ve covered so far. Figure B shows what the Web page will look like when your browser displays the following HTML:

 
<html>

<head>
<title>Title Goes Here</title>
</head>

<body bgcolor=”white”>

<center><h1>This title will be centered and use Heading 1.</h1></center>
<p><font face=”verdana” size=”2″>This is my first paragraph. This one will be font size 2 and use a Verdana font. <b>This sentence will be bold.</B></font></p>
<p><font color=”blue”>This is my second paragraph. This one will be in all blue. <i>This sentence will  be in italics.</I></font></p>
<p>This is my third paragraph.<br>
  But, I want this on a separate line.</p>

</body>

</html>

Figure B
Here’s what our sample HTML document looks like under Internet Explorer 4.

Come back for another lesson
In the next segment, I’ll show you how to format lists and tables!