N ow that you understand the basic <HTML> tags, lets get into one of the most important parts of your page. This is the "META" tag that no one will see but the robots that index your site. The better the "META" tag, the more exposure you will receive from search engines. This is put on your root URL (Main Or Opening Page) page incorporated into the <HEAD> section of the document. This will tell the index robots all about your site and what you have to offer. Below is a sample META tag that is taken from our root directory. The only this we have negated are all the Key words for lack of space.

<HTML>
<HEAD>

<TITLE>My First Web Page</TITLE>
<META NAME="TITLE" CONTENT="My First Web Page">
<META NAME="DESCRIPTION" CONTENT="This is my first attempt to build and design my own web site using pure HTML codes and no page builder">
<META NAME="KEYWORDS" CONTENT="All Your Key Words Go Here">
<META NAME="OWNER" CONTENT="Your Email Address">
<META NAME="AUTHOR" CONTENT="Your Name Here">
<META HTTP-EQUIV="EXPIRES" CONTENT="">
<META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1">
<META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="English">
<META HTTP-EQUIV="VW96.OBJECT TYPE" CONTENT="Howto">
<META NAME="RATING" CONTENT="General">
<META NAME="ROBOTS" CONTENT="index,follow">
<META NAME="REVISIT-AFTER" CONTENT="4 weeks">
</HEAD>

<H1>My First Web Page</H1></font></div>
<div align="left">

<P><font face="georgia,arial,helvetica"size="3"color="#ffffff">Your Text Goes Here. I am designing my first web page with pure HTML codes and am I proud of myself! Once I start to master this, I will not need to rely on page builders to do the work for me and I will have more latitude with designing the page the way I want.</P>

</BODY>
</HTML>

N ow that we have a META tag in place, lets close the </HEAD> tag and concentrate on the <BODY> tag that is positioned just below the closing </HEAD> tag. This will define all your default colors on your page like we explained on the previous page.

N ow that we have added the <BODY> tag, lets concentrate on the <basefont size="?"> size. Here again, this sets the default font size through out the <BODY> section of your document unless otherwise specified with a complete font tag that will override the basefont size in the area you specify.

Font Size 1 <font size="1"> </font>

Font Size 2 <font size="2"> </font>

Font Size 3 <font size="3"> </font>

Font Size 4 <font size="4"> </font>

Font Size 5 <font size="5"> </font>

Font Size 6 <font size="6"> </font>

Font Size 7 <font size="7"> </font>

O nce you have selected the <basefont size="?"> size (we selected 3), position it just below the <BODY> tag.

N ow what we need to do is position the page before we can add anything on it to be seen. This is done by using a "<div>" divide tag. This will tell the page if the material will be centered, to the left or to the right side of the document. You do not close the </div> tag until you want to change the positioning of material on your page. Since the first thing in your document that will be seen is your Header, we will position it to the center of the page. The tag will look like <div align="center">. This is inserted just below the <basefont size="3">.

N ow that we have done all the ground work on preparing the page, now lets start to add things that you can actually see when you open the page.

T he first thing now that will actually appear on your web page is the Header. We will place The Header just below your <div align="center"> tag we just added.

T he easiest way to set this is with the use of <H> </H> or Header tags. As you can notice they are used in pairs with an opening and closing tag. This text will be made Bold by the use of these tags. These tags should only be used in conjunction with changing the size of the Header. As with all tags, you can use either lower case or caps to designate the tag. It will not make any difference.

B elow are a list of <H> </H> (Header) tags and the sizes they represent. We have chosen for this tutorial the size of <H1> </H1>.

H 1

H 2

H 3

H 4

H 5

H 6

O k, we have selected a Header size and have centered it on the top of the page. We have also selected a basefont size for the default text on the page.

N otice we have also closed the </font> tag after the closing </h1> tag. Reason being is that we are going to change the default font color (#ba55dc) set in the <BODY> tag to that of White or #FFFFFF for our <P> </P> paragraph.

M ost people read from left to right, so why don't we put a text paragraph under the header and position it to the left. First you need to close the div tag that you had initially to center the Header. This is done by inserting the closing </div> tag after the closing </h1> tag. Now we want to add a new div tag and align the page to the left.
<div align="left">

N ow lets put in a paragraph of text aligned to the left underneath the Header. You will use the opening and closing <P> </P> paragraph tags to enclose your paragraph with the use of a FULL font tag. See the below example.

If you notice we use three different font styles. (georgia,arial,helvetica)
Reason being is that not all browsers can see * only one specified style of font, so you give the computer the choice if it can't read the default (first) style it will go to the second style etc. As with most any tag you place on a page it needs besides the opening <tag> you must also close the </tag>. As with this example you close a tag by placing the backslash / in front of the name of the tag. Also what this full font tag does is override the default text color that you have set within your <BODY> tag. If you do not add the color attribute into the complete font tag, it will revert to the default within your body tag. This is the case with our Header tag. It will take the color of the default unless otherwise specified.
* In reality what we are saying is that if the computer viewing the page does not have that font style loaded in it's system, it cannot view the specified style.
We will cover later different font styles, how to add them into your computer, and the proper way to have your site viewed with a certain font style you want your page viewed if it is not the basic, ordinary style.

<p> </p> Your paragraph tags will give you a double space between your paragraphs as opposed to the <br> break tag that will give you a single space between lines within a paragraph. The <br> break tag is used to split sentences and or images from being on the same line. This is one tag that you do not need a closing </br> tag when you insert it on the page.

O ther than these basic font commands, if you would follow the below link, you can see all the different font effects and commands that you can make use of and enhance your page even more.
[ Font Commands ]

L ets go see what this page looks like so far.
[ Lets See What We Have Done So Far ]

N ow that we understand that and viewed what we have done so far, lets go to the next page.

[ Page 1 ] [ You Are Here ] [ Page 3 Is Next ] [ Page 4 ] [ Page 5 ] [ HTML Tags & Codes ]
[ Code Tester ] [ Error Messages ]

Introduction To HTML Web Page Design Page 2

H 1

H 2

H 3

H 4

H 5

H 6

Introduction To HTML
Web Page Design Page 2