For those of you who have asked, I've typed up a tutorial on how to build a basic webpage.

First, I just want to say that I do not like using those so called "builders"

So I'll be showing you how to build a webpage using the barebones of HTML.

First you need to open your notepad. Click the start button on your desktop and go to

PROGRAMS, then to ACCESSORIES and then open NOTEPAD.

Now you should have NOTEPAD open right?

This is where you'll type your HTML (Hyper Text Mark-Up Language) tags.

First thing to type is

<HTML>

</HTML>

Those are called tags. This <> is an opening tag and this </> is a closing tag.

MOST but not all opening<> tags do have a closing</> tag.

Tags tell your browser what to do!

In between these 2 tags is where you'll type the rest okay?

Every HTML document needs opening <HEAD> and closing </HEAD> tags.

<HTML>

<HEAD>

</HEAD>

</HTML>

For now we're going to put the <TITLE> tags inside the <HEAD> tags.

We'll title your page here and we'll title it as; My First Webpage!

Don't forget the closing tag </TITLE>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

</HTML>

Next you add the opening <BODY> tag and the closing </BODY> tag.

Between these tags is where you'll do most of the "coding".

You should have this typed in now.

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Now that you have that done you can add your content!

We'll start off by adding text okay?

Type between the opening <BODY>tag and the closing </BODY> tag

Hi world, this is my first webpage!

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<BODY>

Hi world, this is my first webpage!

</BODY>

</HTML>

NOW, just so you can see what you've done so far

I want you to save this in your 'MY DOCUMENTS FOLDER' but do not close your notepad

just minimize it okay? But before you minimize it save it like this:

Go up to the top of your notepad and click FILE....

then click SAVE AS.........

the save as box will open.

In the slot where it says:

FILE NAME you type:

INDEX.html

then in the second slot where it says

SAVE AS TYPE

you save it as

ALL FILES

It is very important that you save it just like that and that you

have typed in all your codes just like I have showed you.

Okay, now that you have saved it go to your MY DOCUMENTS folder and find

INDEX.html

open and view your page.

*click here to see how your page should look*

Okay, so now you want to make that plain white page with the normal black letters

into something dazzling, right? LOL

We will now add a colored background and add colored font okay!

Pull up your notepad up again where you were working and it should still look like this:

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<BODY>

Hi world, this is my first webpage!

</BODY>

</HTML>

Okay, first lets add color to the background.

Inside the opening <BODY> tag add this:

<BGCOLOR="#855863">

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

Hi world, this is my first webpage!

</BODY>

</HTML>

Now save your document by going up to file and clicking SAVE.

Open your INDEX.html back up (or refresh it if you left it open)

Now the background is colored.

*click here to see how your page should look*

You can choose any color your want.

**Later, you can click here to see some other colors & their codes.* *

You can specify a background image instead of a bgcolor if you wish.

The image needs to be saved in the SAME folder as your HTML document!

Lets' add an image now okay?

Right click the image below and click SAVE PICTURE AS

When the box pops up I want you to save the image where you saved your

HTML document-(INDEX.html)

I had you save it in your MY DOCUMENTS Folder. So save your image in your

MY DOCUMENTS folder also!

Now that you have the image saved in the same folder as your HTML documents lets modify

the <BODY> tag.

Change it to this:

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

Hi world, this is my first webpage!

</BODY>

</HTML>

Now go up to file and click SAVE and re-open/re-fresh INDEX.html

*click here to see what your page should look like*

Now to change the font color add this tag:

<FONT COLOR="#35417B"> before the text.

Be sure and add the closing </FONT> tag after your text!

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<FONT COLOR="#35417B">

Hi world, this is my first webpage!

</FONT>

</BODY>

</HTML>

Now, just go back up to file and click SAVE

Open the previous saved INDEX.html

and hit refresh/reload to view your page.

*click here to see how your page should look*

Okay, lets' give the font a different "face" and make it bold and BIGGER okay?

To change the size and the face of your font add

inside the opening <FONT> tag :

<FACE="Comic Sans MS" SIZE="4">

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

Hi world, this is my first webpage!

</FONT>

</BODY>

</HTML>

To make your text bold, add the opening and closing bold tags before and after your text

<B>Hi world, this is my first webpage!</B>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<B>Hi world, this is my first webpage!</B>

</FONT>

</BODY>

</HTML>

Now go back up to file, click save and then re-open or refresh your

INDEX.html to view the changes.

*click here to see how it should look now*

To make your text italic add the opening <I> and closing </I> tags.

To underline your text add the opening <U> and closing</U> tags.

The FACE of the font can be changed also.

But if the person viewing your page does not have the font you used in your webpage downloaded into their computer he/she will NOT see it like you do!

Here are some fonts that almost every computer has.

Arial   Arial Black    Impact     Georgia
Comic Sans MS      Courier New
Times New Roman       Verdana

Before we go on I need to explain to you about nesting your tags.

This is so important to understand! If the tags are NOT nested your browser will get confused

and your webpage won't "work".

I'll use colors to help you visually.

<FONT><B><U> your text here </U></B></FONT>

That's nesting! The <U></U> tags are INSIDE the <B></B> tags and the <B></B>tags are

inside the <FONT></FONT> tags. That's the way it should be!!

DO NOT overlap the tags like this:

<FONT><B><U> your text here </FONT></U></B>

Okay back to fonts now.

You can set your font to different sizes. Do this by changing

SIZE="3" or "2" or "1" inside your <FONT> tag......"1" being the smallest!

If you wanted, Hi world, this is my first webpage!

to be even bigger and bolder like a heading you need to use the HEAD <H> tag

<H1>, <H2>.

The HEAD tag <H1> being the LARGEST.

So lets' go ahead and make the text

A HEADER okay?

First take <SIZE="4"> out of the <FONT> tag, then

Add the opening <H1> and closing </H1> tags before and after

your text like this:

<H1>Hi world, this is my first webpage!</H1>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

</BODY>

</HTML>

Now go back up to file, click save and then re-open or refresh your

INDEX.html to view the change.

*click here to see how your page should look*

Lets' go ahead and center everything now.

Add the opening <CENTER> tag right after the opening <BODY> tag

and the closing </CENTER> tag

right before closing </BODY> tag

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<CENTER>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

</CENTER>

</BODY>

</HTML>

Go ahead and take a look now. Go up to file, click save, and re-open or refresh your

INDEX.html

Do you see? It's centered now!

*click here to see how your page should look*

You can add a horizontal divider line into your web page if you want

by adding the horizontal rule <HR> tag.

you'll need to also set the thickness, width, and color.

the thickness can be set by adding a number inside the <HR> tag

example:

<HR="1"> the higher the number the thicker the line.

The width of the line should be added in percentage like this:

<HR="1" width="50%">

Also, now is the time to talk about line breaks and paragraphs.

<BR> tags will start a new line.

Example if you write

Me, myself and I WITH the <BR> tags like below:

Me<BR>Myself<BR>I<BR>

It�ll look like this on your page:

Myself

If you do NOT add the <BR> tags it would look like this on your page:

Me Myself I

Adding the paragraph tag <P> will skip a line before starting a new line.

You can use the line break <BR> tag to add a new line after an image also.

Okay, now I want you to add a horizontal line into your web page below your header.

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<HR SIZE="1" width="50% color="#35417B">

</CENTER>

</BODY>

</HTML>

You can play around with width and height percentage of the <HR> to get it how you want.

Now I want you to add a line break <BR> after your text

(Hi world, this is my first webpage!)

AND

After your horizontal line <HR>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

</CENTER>

</BODY>

</HTML>

Now go back up to file, click save and then re-open or refresh your

INDEX.html to view.

*click here to see how your page should look*

We already talked about adding an image as the background but lets' talk

about adding a image to the body of the webpage.

Save the image below just like you did your background image.

Right click over it and save it in your MY DOCUMENTS folder.

You got it saved?

Okay great, let's add the image tag <IMG SRC="yourimg.gif."> into the body of the page.

Also add the height and width of the image <IMG SRC=�yourimg.� height=�100� width=�100�>

This image is 100pixels by 100pixels.

To find out the height and width of other images just right click over the image and click properties.

When you add your <IMG SRC=��> tag don�t forget your line breaks<BR>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<IMG SRC="flake.gif" height=�100� width=�100�>

<BR>

</CENTER>

</BODY>

</HTML>

Okay, save it and look at your INDEX.html now.

Now, you know how to add a image!

*click here to see how your page should look*

Alright, moving right along lets add some links

<A></A>

Those are anchor tags.

You can hyper link a image or text.

<A HREF="the URL"> text or image</A>

Let's link the snow flake to www.msn.com

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<A HREF="http://www.msn.com"><IMG SRC="flake.gif" height=�100� width=�100�></A>

<BR>

</CENTER>

</BODY>

</HTML>

Save your document and view your INDEX.html

*click here to see how your page should look*

Did you see the blue box around your image? Most people do not like to see that.

To make the blue border disappear you have to modify your

<IMG SRC> tag.................

<IMG SRC="flake.gif" height=�100 width=�100� BORDER="0">

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<BR>

</CENTER>

</BODY>

</HTML>

Go ahead and save your document now and review you INDEX.html

Looks better without the blue border, huh?

*click here to see how your page should look now*

Okay lets' link some text now.

First let's add some text.

Go to YAHOO!

Go to Nicky's WebSite!

Go to AltaVista

Again, don�t forget the line break <BR> tags. Let�s add 2 lines between the text now.

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<BR><BR>

<FONT COLOR="#35417B" FACE="Comic Sans MS" SIZE="4">

Go to YAHOO!

<BR><BR>

Go to Nicky's WebSite!

<BR><BR>

Go to AltaVista

<BR><BR>

</FONT>

</CENTER>

</BODY>

</HTML>

Save your document and view your INDEX.html now

*click here to see how it should look*

Okay let's link the text now.

Just like with the snow flake image add the

opening <A HREF>and closing</A> hyper links tags

before and after the text to be linked.

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<BR>

<A HREF="http://www.yahoo.com">Go to YAHOO!</A><BR><BR>

<A HREF="http://www.oocities.org/Heartland/Bluffs/6791">Go to Nicky's WebSite!</A><BR><BR>

<A HREF="http://www.altavista.com">Go to AltaVist </A><BR><BR>

</FONT>

</CENTER>

</BODY>

</HTML>

Go ahead and save your HTML document now and view your INDEX.html

*click here to see how your page should look*

Maybe you want your page visitors to be able to e-mail you from your website.

That's easy just add this:

<A HREF="mailto:put your e-mail address here">Send me e-mail</A>

<HTML>

<HEAD>

<TITLE> My First Webpage!</TITLE>

</HEAD>

<H1>Hi world, this is my first webpage!</H1>

</FONT>

<BR>

<BR>

<BR>

<A HREF="http://www.yahoo.com">Go to YAHOO!</A><BR><BR>

<A HREF="http://www.oocities.org/Heartland/Bluffs/6791">Go to Nicky's WebSite!</A><BR><BR>

<A HREF="http://www.altavista.com">Go to AltaVista</A><BR><BR>

<A HREF="mailto:nickychat_2000@yahoo.com">Send me e-mail</A>

</FONT>

</CENTER>

</BODY>

</HTML>

Go ahead and save your HTML document now and view your INDEX.html

*click here to see how your page should look now*

CONGRATULATIONS YOU NOW KNOW HOW TO BUILD A BASIC WEBPAGE FROM SCRATCH!!

GIVE YOURSELF A PAT ON THE BACK!!:-)

Remember it takes patience and practice at first but after a few pages you'll

be whipping web pages out left and right! LOL

This is just a basic web page. There's still a lot more that can be learned.

*Go to next tutorial---> Table Tutorial*

*RETURN TO MAIN SITE-INDEX*