Now that we have completed the basic framework for your page, let's add some text and formatting tags.

The <p> tag stands for paragraph. You will open this tag before a paragraph and close it after the last period. <p> tags automatically include a space between the close of one </p> and the beginning of another <p>.

If you would just like a hard return or line break, use the <br> tag. The <p> tag is equivalent to hitting return in a text document twice, the <br> tag is equivalent to hitting it just once.

Let's give them a try, after the open body tag, type <p>This is my first crack at HTML.<br>What do you think?</p><p>Closing tags is important.<br>If you forget to close a tag, finding it can be frustrating.</p>

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p>
</body>
</html>

You may want to add a horizontal line from time to time to break up the text on your web page. The tag for horizontal rules, as they're known, is <hr>. The <hr> tag is special in that you don't need to close it. Let's add a horizontal rule after our last </p> tag.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p>
<hr>
</body>
</html>

You may have seen numbered or bulleted lists on web pages. The HTML terminology for these formatting effects is ordered and unordered lists. I'll make an ordered list for issues 1, 2, & 3, and an unordered list for ideas a, b, & c after the horizontal rule.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p>
<hr>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
</body>
</html>

Headers are formatting terms taken from the print industry, they qualify differences in text size and weight based on the hierarchical level of the information. They range from Header 1, which is the largest, to Header 6, which is the smallest. Let's add some headers to our code.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body>
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p>
<hr>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
</body>
</html>

You may want to add your own styles to text without headers. HTML supports bold and italicized text. I'll add titles to the list with bold and italic formatting.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body>
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p>
<hr>
<b><i>The issues</i></b>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<b><i>The ideas</i></b>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
</body>
</html>

Notice I placed the tags for italics <i> inside the tags for bold, this is called nesting tags. Especially as we continue with text formatting, you may find that you have a long string of tags associated with a word, phrase, or sentence. It is important that you open and close the tags in the same order, or that each is nested properly so the browser knows what to do.

Before we add color to our page, let's take a look at a web safe color palette. I like to use http://www.lynda.com/hexh.html. It gives you an idea of colors you can use with both their hexadecimal or 6 digit value and their RGB value. We will use the hexadecimal value for the purposes of this tutorial.

The tag to change the background color, simply "bgcolor", must be included with the opening body tag since the background color applies to the entire web page. The tag to change the font color must be opened and closed around the text whose color you would like to change. I will change the background color to a light orange, FF9900, and I will change the text, "Closing tags is important. If you forget to close a tag, finding it can be frustrating." to red, FF0000. If you are having trouble with this, check to make sure you are properly nesting your tags.

<html>
<head>
<title>This is my first HTML page :: Libby Peterek</title>
</head>
<body bgcolor="FF9900">
<h1>HTML by Libby & Chad</h1>
<p>This is my first crack at HTML.<br>
What do you think?</p>
<font color="#FF0000"><p>Closing tags is important.<br>
If you forget to close a tag, finding it can be frustrating.</p></font>
<hr>
<b><i>The issues</i></b>
<ol>
<li>issue 1</li>
<li>issue 2</li>
<li>issue 3</li>
</ol>
<b><i>The ideas</i></b>
<ul>
<li>idea a</li>
<li>idea b</li>
<li>idea c</li>
</ul>
</body>
</html>