Let's start with the Bold tags. This is very easy...any time you want to make a certain word or phrase in bold print you just add these tags around the word or phrase... <B> </B>

I am showing the above code with a space in between them...do NOT leave a space between the code and the word or phrase you are typing inside the code (of course, you will leave spaces between your words). This goes for many codes we will be using, so start a good habit now.   :o]   With some codes it will not matter, but with other codes you can get underlined spaces and that does not look good on your page. ALWAYS put your spaces in front of or behind your codes.

Let's do some work on our page. You should have a sentence saying something like this:

Hi, my name is Kathy and I live in Ohio. I love Chocolate and Teddy Bears.

Let's make one of the words in bold print...say the word love. Like this:

Hi, my name is Kathy and I live in Ohio. I LOVE Chocolate and Teddy Bears.

Notice that I capitalized the letters in the word love...that was so you could see the bold print better. Since I am using a larger font to write these pages the bold does not work as well...but you can see a difference.

Here is the code (no spaces between the word and codes):

Hi, my name is Kathy and I live in Ohio. I <B>LOVE</B> Chocolate and Teddy Bears.

Onto the italics code...it works the same way as the bold code above but will turn the words into italics, the code is: <I> </I> We are using capital I's (not the number 1, I know sometimes it is hard to tell).

Let's try this out on our sentence:

Hi, my name is Kathy and I live in Ohio. I LOVE Chocolate and Teddy Bears.

Notice that I italized two of the words above...Chocolate...Teddy Bears. Here is the code:

Hi, my name is Kathy and I live in Ohio. I <B>LOVE</B> <I>Chocolate</I> and <I>Teddy Bears</I>.

Notice how I used italics on two different words above? I had to use the beginning and ending codes around both sets of words. Now if you wanted to include the word and inside the italics you would only have to use one set of codes around all three words...like this:

Hi, my name is Kathy and I live in Ohio. I <B>LOVE</B> <I>Chocolate and Teddy Bears</I>.

Heading tags can be used for the words like you see above...HEADING TAGS...   We use the <H#> </H#> tag set for these. The number symbol you see here will be replace by a number in value from 1 through 6, with number 1 being the largest type. Headings are usually displayed in larger and bolder fonts than normal body text. Do not use the Bold tags with your header tags, they are already in a bolder type.

Just to confuse us, the designers of HTML put the numbering system for Headers as the reverse of what they are for Fonts. In Headers number 1 is the largest type and in Fonts number 1 is the smallest type (we will learn fonts later on).

Let's try this out with size 1 for a header on our page. We will type this in ABOVE our line we have been working on...after all it is a header. Here is the line:

Welcome to my Home Page

Here is the code:

<H1>Welcome to my Home Page</H1>

Let's "SEE" the different sizes:

Welcome to my Home Page -H1

Have you noticed that everything is being aligned to the Left Margin? What if we want to center our header? Good question! Let's learn the Align tags. ALIGN can be used with the above Header Tags and with other tags. Right now let's concentrate on using it with the Header tags.

The three main Align tags we will use are: ALIGN="CENTER"    ALIGN="RIGHT"    and ALIGN="LEFT" (which is the default). This tag is "Part of" another tag...which means we will be inserting it with another tag. Let me show you. Let's center our above header with the Align Center tag:

Welcome to my Home Page

Here is the code you will use...notice that the new tag is inside the brackets of the header tag. Also there is no need for a closing tag for align...the closing header tag does all the work for us.

<H1 ALIGN="CENTER">Welcome to my Home Page</H1>

Here is an example of the align right tag, all I did was change the word CENTER to RIGHT:

Welcome to my Home Page

Do you want to underline a word or words? First I want to caution you about using this tag a lot. To most people, underlined words mean that this is a link leading somewhere. You will see in the next lesson when we cover links how they will be automatically underlined and become 'hot' (lead your visitor to another page). For underlining we will use the tags <U> </U>

They will work in the same way as the bold and italics codes do above, but this tag will leave an underlined space if you leave spaces before or after your words inside the code.

Let's try underlining our Header:

Welcome to my Home Page

This is the code for it:

<U><H1 ALIGN="CENTER">Welcome to my Home Page</H1></U>

Notice how the two underline codes are at the outside of the above line and the two header codes are just inside the underline codes? We need to always keep our codes in order...do not mix them up within each other.

NOTE: You can use the bold, italics and underline codes together in a sentence or for even the same word. Just don't mix up the codes within the sentence, this can cause confusion in browsers. If you start with the bold code and insert the italics code do them in order from end to end. Like this:

Hi, my name is Kathy and I live in Ohio. I <U><B>LOVE</B></U> <I>Chocolate and Teddy Bears</I>.

See how the underline code is on the outside and the bold codes are on the inside....keeping them in order. When I wanted to use italics I used them on the next set of words. I am also keeping my spaces between words between the sets of codes. A little confusing, but you will get the hang of it.

This is what the line would look like: I LOVE Chocolate and Teddy Bears.

Last two for this lesson...Your spacing codes. Have you noticed that I have spaced lines between paragraphs? Just like on the old typewriters? With the typewriter you would hit the return key to get a space or two between your lines. Well...with HTML coding you have to use codes to do this. Remember white space on your HTML document means nothing, so use it freely!

Let's take the break tag first. This appears like this: <BR> This tag does not have a mandatory closing tag with it...one of the few that are like this (you can use a closing </BR> tag, if you wish). This tag will make your text go to the next line without leaving a double space (so there will not be a space). Let's try this out on our original line:

Hi, my name is Kathy and I live in Ohio.
I love Chocolate and Teddy Bears.

Here is the code for the above line (again using white space, put your breaks on a separate line):

Hi, my name is Kathy and I live in Ohio.
<BR>I love Chocolate and Teddy Bears.

Your line will look different from the one above because you should have the bold and italic words in it.

Last but not least, the Paragraph Break tag <P>
This tag, again, does not have a mandatory closing tag, but you can use one...</P> . This tag will leave a blank space between your paragraph or sentences. Watch:

Hi, my name is Kathy and I live in Ohio.
I love Chocolate and Teddy Bears.

This HTML coding isn't all that hard!

The code:

Hi, my name is Kathy and I live in Ohio.
<BR>I love Chocolate and Teddy Bears.
<P>This HTML coding isn't all that hard!

Did you notice that I started off the last line with the <P> Paragraph tag? I do this with all my HTML documents (coding) so I can "see" where my paragraph tags are. Then I know I have a space in this spot. Otherwise they get lost in the HTML coding on your document and you can't tell where they are. Just a little tip if you want to use it.    :o]

Add the above lines to your document, following the lesson from the top to the bottom, and then insert a Paragraph break between your Header and your first two sentences.