Formatting HTML Text

Tags Covered
[<Hn></Hn>] - [<CENTER></CENTER>] - [<BR>] - [<P>]
[<I></I> and <EM></EM>] - [<B></B> and <STRONG></STRONG>]

Now that you have your very first Web page, you will want to customize it and make it look exactly the way that you want it to appear to your many visitors!

Heading Tags:

To make a heading for your Web page you may use <H1>Heading</H1>
This will appear as:

Heading

Using your index.html file, from lesson one, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> Some very witty remarks, or very serious text here... </BODY> </HTML>

Using your index.html file, from lesson one,
you should edit it to look like this:

<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>

<BODY>
<H1>Your Heading</H1>

Some very witty remarks, or very serious text here...

</BODY>
</HTML>

Notice that it will always be positioned anywhere between the <BODY> and </BODY> tags...and as you've guessed, it's one of those tags with a beginning tag (<tag>) and an ending tag (</tag>)

Take a look at it in your Web browser...it should look something like this:

Your Heading

Some very witty remarks, or very serious text here...

You are doing SUPER! There are also 5 more Heading tags for you to try!

<H2>Example of H2</H2> Example of H2	<H3>Example of H3</H3> Example of H3
<H4>Example of H4</H4> Example of H4	<H5>Example of H5</H5> Example of H5
<H6>Example of H6</H6> Example of H6

TiP: Also try adding an ALIGN attribute - <H1 ALIGN="Center">Heading</H1>
also try: Right and Left in the Align attribute...

[ Back to the TOP ] - [ Back to the Tutorial List ]

Center Tags:

Hmmmm, looking good! But you are thinking MAYBE that the text you want to add to your page just might look better if it was all centered on the page...

We will use the <CENTER></CENTER> tags to do this...

Using your index.html file, from above,
you should edit it to look like this:
<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
<H1>Your Heading</H1>
<CENTER>Some very witty remarks, or very serious text here...</CENTER>
</BODY>
</HTML>

Using your index.html file, from above, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks, or very serious text here...</CENTER> </BODY> </HTML>

OK Now, save and open that file in your browser...or refresh it. It should look like this:

Your Heading

Some very witty remarks, or very serious text here...

WOW! Did you see that? All the text between the <CENTER></CENTER> is centered just as you expected! That tag will center everything including images, tables, forms, etc. Isn't this FUN? Making this thing do what you want...
Oh the POWER!! *wild laughter*
Oh dear...let's move on to our next concept *smile*

[ Back to the TOP ] - [ Back to the Tutorial List ]

Line Break & Paragraph Tags:

So, you say, "OK guys, nice trick, but I want to make that sentence split early." OR "Hey guys, I want to end that sentence and start a whole new paragraph." Well, you can sure do that!

And we use the <BR> AND/OR <P> tags for that. Watch this..

Using your index.html file, from above,
you should edit it to look like this:
<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
<H1>Your Heading</H1>
<CENTER>Some very witty remarks,<BR>or very serious text here...<P>
And some new text here...</CENTER>
</BODY>
</HTML>

Using your index.html file, from above, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks,<BR>or very serious text here...<P> And some new text here...</CENTER> </BODY> </HTML>

And when you look at THAT in your web browser, you should see it as:

Your Heading

Some very witty remarks,
or very serious text here...

And some new text here...

Do you see how the <BR> tag just starts a new line, while the <P> tag ends the current line, then adds a line?

The <BR> tag is known as the Line Break tag (or just Break), and the <P> tag is known as...you guessed it, the Paragraph tag. They even work after images, to allow you to continue adding text, but not have the text right beside the image. We will get to images soon, but for now...

[ Back to the TOP ] - [ Back to the Tutorial List ]

Italics & Emphasis Tags:

Let's look at some tags that will dress your text up just a little more. Let's learn the tags to make your text appear in ITALICS. In your index.html file, lets add the <I></I> tags...

Using your index.html file, from above, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks,<BR>or very serious text here...<P> <I>And some new text here...</I></CENTER> </BODY> </HTML>

Your Heading

Some very witty remarks,
or very serious text here...

And some new text here...

See how that last line appears now? The <I></I> or Italics Tag is what caused that. Now, replace the <I> and </I> tags with <EM> and </EM> respectively, then load the page again...

Your Heading

Some very witty remarks,
or very serious text here...

And some new text here...

Notice the difference? Good, because there is no difference in those two tags. The <EM></EM> is known as the Emphasis tag. Which is the same as Italics, except some browsers MAY display them slightly different, but in my experience I've seen no differences. I prefer to use the <EM></EM> tags myself...

[ Back to the TOP ] - [ Back to the Tutorial List ]

Bold and Strong Tags:

Hmmmm, you say that still needs a little extra touch to it, yes? We will use the <B></B> tags next.

Using your index.html file, from above,
you should edit it to look like this:
<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
<H1>Your Heading</H1>
<CENTER>Some very witty remarks,<BR>or very serious text here...<P>
<I><B>And some new text here...</B></I></CENTER>
</BODY>
</HTML>

Yep, you CAN combine those tags to get the look you want, and bold-italic will work just fine here, see below? Also, you will find that it works better if you end your tags in the opposite order that you started them..such as above...the Italics tag starts first, but ends AFTER the bold tag ends...it makes a much neater looking HTML document...

Using your index.html file, from above, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks,<BR>or very serious text here...<P> <I><B>And some new text here...</B></I></CENTER> </BODY> </HTML>

Your Heading

Some very witty remarks,
or very serious text here...

And some new text here...

Cool, huh? Well, try replacing the <B></B> tags with the STRONG tags <STRONG></STRONG>...

Using your index.html file, from above, you should edit it to look like this:
<HTML> <HEAD> <TITLE>Your Page Title</TITLE> </HEAD> <BODY> <H1>Your Heading</H1> <CENTER>Some very witty remarks,<BR>or very serious text here...<P> <I><STRONG>And some new text here...</STRONG></I></CENTER> </BODY> </HTML>