Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

2 - My first web page

HTML Crash Course

2 - My first web page

by  Javrix  Posted    (Edited  )
Quick review:

In the introduction we learned that HTML is made up of tags that look like <code>.

Now let's get down and start coding!
The first thing we need to do is open a text editor program. I recommend Notepad, but you can also use Word, Wordperfect, etc.
If you are using Frontpage, Dreamweaver, or any other web development tool, go to the source and delete everything that's there.

The first thing we need to do to create our web page is to tell the browser that this is an HTML document. So the very first thing we type in is:

<HTML>

This tells the browser we're going to use HTML.

Next we put in the <HEAD> tag. The <HEAD> tag will contain all of our search engine information and some other stuff we'll look at in a moment.
One of the things that goes in the <HEAD> tag is the <TITLE> code. You see on the very top of your browser right now? It probably has a little message, well this message is actually the <TITLE>.
So type in the following code:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>

We're almost finished and then we can see the results.
First let's add some stuff into our page.

The next tag we'll be using is the <BODY> tag. Everything before the <BODY> tag the user won't see in the actual browser.

Let's put in our <BODY> tag and I'll explain what they do after:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">

Whoa, that's a lot of codes! Don't get scared though, let's take a look at them one-by-one.

The BGCOLOR code tells the browser what color should the background be. We'll get into what the color codes are later, but for now this is what you should know:
They are always 6 characters long. The first two mean Red, the second two means Green, the third two mean Blue.
0 is the darkest and F is the lightest. So if we have red, green, and blue all the lightest, the background will be white!
The same goes for any color code.
TEXT means what color the text will be. Again, the same rule applies. They're all 0, the darkest, so our text will be black.
The LINK code means throughout our page, the links will be this color. In this case BRIGHT GREEN.
The VLINK means what color should a visited link be. So we have our home page, and you go to page 1, then you come back to our home page, the link would then be this color. In this case a gray color.
ALINK is our active link. When you click on a link, as you click it, it will change tot this color.

I know it's a lot to suck in, but don't worry, it will all click in.

Now let's put some stuff in our web page and finish it:

<HTML>
<HEAD>
<TITLE>My first web page</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="00FF00" VLINK="CCCCCC" ALINK="C0C0C0">
Hey, this is my first web page!
</BODY>
</HTML>

Got it? I hope so.
What's that? You say we didn't put a link or anything in our page so why do we have all those link codes in the <BODY> tag?
The answer is we'll use them later, and we'll cover links in our next section.

In your text editor, click on File-Save As. In the "File Name" box, type in home.html or home.htm
In the "Save as type" select "All files" or if you have a .htm or .html extension, do that.

Save it on your desktop. Minimize this and double-click on it, and like magic, there's your page.

Things to notice:

The title on the top of the browser, the background color, and the text color.

Good job! If you got all of that, let's move on...
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top