HTML MADE EASY

Free Graphics | Graphics Optimizer | Resources | Freeware
JPEGCruncher Desktop | T-Shirts

Lesson 1: Tags

Beginning and Ending Tags
Most html tags consist of a beginning tag and an ending tag. For example:

<HTML>   </HTML>

Notice the / in the second tag. All ending tags contain a /. This slash is very important, it tells the browser that what you wanted done has ended.

At the top of every html document before anything has been typed, put:

<HTML>

This signifies the start of your html document. At the end of your html document after everything has been typed, put:

</HTML>

This signifies the end of your html document. Notice the / in the second tag, always remember to put the / in the end tag, otherwise your page won't turn out right. Under <HTML> comes this tag:

<HEAD>

This tag doesn't affect what's on the page but you should get in the habit of putting it in. Below <HEAD> put this tag:

<TITLE>

Beside it type the name of your web page, for instance "Test Page". At the end of "Test Page" type this:

</TITLE>

Remember the / in the end tag? So this is what it looks like:

<TITLE>Test Page</TITLE>

The <TITLE> tags designate what will appear in the titlebar at the top of the browser. Take a look at the example below.




The stuff between the<TITLE> tags is what appears here in the browser titlebar

Below the TITLE tags goes the </HEAD> tag. Notice this is an end tag because it has this: /

Note: It doesn't matter whether your tags are in upper or lower case letters.The upper case letters and bold style in this tutorial are used for emphasis.

Putting Something On Your Web Page
Now let us get to putting something on your web page. These are the body tags:


<BODY> </BODY>

They enclose the part of your html document which will appear on your web page.Want to start your web page with a heading? Here's the code:

<H>

The heading tag comes with numbers, <H1> to <H6>. The numbers beside the H tell the browser how large the letters are to be, with 1 being the largest and 6 the smallest. So what do your want your heading to say? Lets suppose it's "Learning Html." Lets also have a sub-heading with smaller letters called "Step One". Here's what the html code looks like so far:

<HTML>

<HEAD>
<TITLE>
Test Page </TITLE>
</HEAD>

<BODY>
<H1>
Learning Html </H1>
<H3>
Step One </H3>
</BODY>

</HTML>

Notice that the stuff which will be on your web page is in between the BODY tags. This is what it will look like on your web page:

Learning Html

Step One

Heading tags produce bold text and they will not allow other text to line up beside them. Well, they're headings aren't they?

In the Center
If you want to center something on the webpage you use these tags:

<CENTER> </CENTER>

The stuff enclosed between these tags will be centered on your web page. Continuing with our html example, here's what to do if you want just the larger heading centered:

<HTML>

<HEAD>
<TITLE>
Test Page</TITLE>
</HEAD>

<BODY>
<CENTER>
<H1>
Learning Html </H1> </CENTER>
<H3>
Step One</H3>
</BODY>

</HTML>

Notice that the beginning CENTER tag is placed before the <H1> tag and the CENTER end tag is placed after the </H1>. So the stuff between these tags is what will be centered. Here's the result:

Learning Html

Step One

If you wanted to center your smaller heading as well your html code would look like this:

<HTML>

<HEAD>
<TITLE>
Test Page </TITLE>
</HEAD>

<BODY>
<CENTER>
<H1>
Learning Html</H1> <H3>Step One </H3>
</CENTER>
</BODY>

</HTML>

See? The CENTER end tag doesn't come until after the end </H3> tag for the second heading. This is how it would look on your web page:

Learning Html

Step One

Have you tried out what you learned so far? No? So what are you waiting for? Go try it and then come back to learn how paragraphs are made in Lesson 2.