http://geocities.com/SiliconValley/Hub/1707/tarob01.html you can view the tutorial online here along with more reference material and play some free games while you're at it.

Note: If you are viewing this tutorial offline in document format without using Microsoft Word, these pages may appear very different than their original format.

So, you've finally decided you want to learn HTML. It's a good decision, especially if you're going to have a presence on the Web. You have to know HTML. And it's not that hard to learn with some practice and a little patience. Believe me, if you really want to learn HTML you can learn it! Of course there will be new terms to remember, there always are, but learning the terminology will help you learn how to put code together and make HTML work for you. You will learn a lot from this tutorial.

I have tried to organize this tutorial in such a way as to not confuse you, the learner. That would be a waste of our time. I have tried to start out with the things that I think will be the easiest to learn then slowly progress to more complex terms and subject matter. I have highlighted the key terms and code to make it easier for you to understand and familiarize yourself with the material. If you understand the terms then you’re a long way to mastering HTML. I recognize that different people learn at different paces. If the material seems to confuse you at first, take a break for a while, then come back and reread the tutorial. Finally, I can't stress this enough, it takes practice and time to learn any new subject, and HTML is no different. Be patient with yourself, you will learn it.

1. You will need a simple text editor. I suggest Microsoft Word, or Notepad. Both come with the Windows 95, 98 Operating system. Another good editor is NoteTab, especially for HTML. It has an HTML document maker, which makes it easy to write HTML code. And, I think it is superior to Word and Notepad, I use it. Any editor will be fine though. (Remember that HTML files must be saved with the file.html extension).

The first thing to remember is HTML is only difficult to learn if you make it difficult. I will admit that learning a new programming language can be a difficult task. However, HTML is not really a programming language, so trust me, it shouldn't be that bad.

This tutorial is designed with beginner in mind, someone who has absolutely no knowledge of computer programming. After you complete the tutorial you should be able to build and maintain your own Web Site, without the assistance of those so-called Web Builders. Don't get me wrong Web Builders can be great for people without knowledge of HTML. Or if you want to throw a Web Page together in a real hurry, but you will never get the look you want until you learn the HTML language. Having bored you to tears with my soliloquy let's begin.

Note: This tutorial is broken down over several lessons beginning with the most elementary parts first, then the more complex.

So, what is HTML you ask? Well, even if you didn't ask I'm going to tell you anyway. HTML is an acronym (fancy word for initials) for Hypertext Markup Language. The most used language for Web building. What about JavaScript you ask? Isn't it used on the Web? Well, it is, but without HTML it's worthless, as you'll see. Let's get started.

For those of you who know how to cut and paste, which most people do, you should skip over this section, as it will more than likely be redundant to you. This section is meant for the beginning programmer. Cut and Paste is an essential tool used by programmers and formatters and is just what it sounds like. You essentially move one piece of text to another place in the document or to another document altogether. Here's how it works.

Choosing between the Cut and Copy selections should not confuse you. They both achieve the same goal, i.e. to move text from one portion of a document to another. Here are some helpful hints to follow. If you want to permanently remove text from a document choose the Cut option from the pop-up menu (shortcut menu) that appears by right clicking the highlighted text. If you want to use the same piece of text in another part of the document or another page, but keep it in your current document choose Copy from the pop-up menu that appears by right clicking the highlighted text.

Now all you have to do is insert the Cut or Copied text into another part of the page or another document. To do this simply click where you want the text to be inserted, the cursor should appear, then right click for the pop-up menu, and choose Paste.

Programmers use comments for a variety of reasons. Most importantly to help them understand their own code, or someone else's code when editing an HTML document. You can use comments anywhere in the HTML document. Whatever you type between the comment <!--This is a comment--> tags is hidden from the person viewing the page. For instance, you could type <!--Anyone reading this page is a Dummy!--> and they wouldn't see it! I wouldn't advise that though. If you forget to include one of the <> tags it would become very visible. Then the person reading this page becomes very angry!

This is what every Html page MUST have in order to work effectively, not just effectively, but, to work at all. The <META> and <BASE> tags are optional, but if you want people to find your page you will need them, trust me. I'll talk about them later.

Let's break it down. The <HTML> tag signifies the start of your Web page. That's all it does. Put it out of your mind. Stop thinking about it. Think of something more pleasant. Now, the <HEAD> tag is used for holding the <TITLE> and </TITLE > tags. Obviously, the TITLE is what your page will be called. Please remember, whatever you place between the <TITLE></TITLE> tags will not be visible on the screen. When you surf the Net look in the lower left-hand corner of your Web browser, the Title will appear there, not on the Web page itself.

The <HEAD>and </HEAD> tags are also used for holding and giving instructions to the rest of the page. Here is where JavaScript instructions are used.

But, it is not limited to JavaScript, HTML has it's own functions and code, that can be used in the <HEAD></HEAD> tags. One such function is the <STYLE></STYLE> command which I'll talk about later.

But, what is that / in the </HEAD> tag you ask? The / mark simply means the end of the <HEAD> portion of the document. That's all. Think of it this way, the instructions stop at the</HEAD> tag.

What comes after the <HEAD</HEAD> tags? The <BODY> of course. The body is the heart of your HTML document. What you put in the<BODY></BODY>tags will show up on the screen. In other words it’s what the viewer will see. I’m repeating myself aren’t I? Remember, the <BODY> tag must end with</BODY> then </HTML> which ends the HTML document.

Oh, by the way, I forgot to mention that the <BASE> tag carries or holds the (URL) Universal Resource Locator, your Web Address. Hence, <BASE>. Simple enough I guess.

Let’s create a program to place your name on the screen.

<HTML> <!--Beginning of document -->

<HEAD> <!--Instructions -->

<TITLE>My First Web Page</TITLE>

</HEAD> <!--End of instructions -->

<META> <!--Description of Web Page -->

<BASE> <!--Your URL, http://www.yoursite.com -->

<CENTER> YOUR NAME GOES HERE</CENTER>

</BODY> <!--End of visible portion -->

</HTML> <!--End of page -->

Now, you might be wondering where the heck those <CENTER></CENTER> tags came from and what they do. Well, all they do is center the text i.e. YOUR NAME to the middle of the page. See that wasn’t so bad. Yeah! Right you say. It will get easier. LOL (Lots of Laughs).

Now might be a good time for you to begin to acquaint yourself with some of the most used HTML commands. Below are a few. Try to familiarize yourself with them. Also, I forgot to mention HTML is not case sensitive. <CeNter> is the same as <CENTER>. It is a good idea though to use one style all the time. Either all capital letters or all lower case letters. I use capital letters, because it is easier to edit my forms.

<CENTER></CENTER> Centers text or images.

<BR><BR> This skips a line (Line Spacing).

<P></P> Start and end of a paragraph.

<HR></HR> Places a horizontal line across the page.

<TABLE></TABLE> Uniformed chart.

<FORM></FORM> For corresponding with visitors to your Web Page.

<FRAMESET></FRAMESET> Divides screen into several pages.

<H?></H?> Changes size of text, where ? Is 1-6, 6 being the largest size text.

<BIG></BIG> Increases text size, but the change is automatic not arbitrary as in <H?></H?> where you control the size of text.

<SMALL></SMALL> Where there’s

<EM></EM> Just as the tag says, places emphasis on text.

<I></I> Italicizes text like what you’re reading right now

<TT></TT> Typewriter text, single spaced.

<BLINK></BLINK> The most overrated tag of all! Blinking text.

<FONT COLOR="#XXXXXX"></FONT> Specifies color of text #XXXXXX, can be "WHITE", "BLUE" etc. it is arbitrary.

<BODY BGCOLOR="WHITE"> Duh! Specifies color of background.

<BLOCKQUOTE></BLOCKQUOTE> Mainly used for indenting

<MARQUEE>Whatever you type between these tags will scroll from left to right</MARQUEE> I've never tried this code.

&nbsp Indents text, no tags<>.

These are the commands that you will use most often when working with HTML. These are just scraping the surface, but they are the most used. I will cover each one in more detail as we move on through the tutorial.

Web Pages are interconnected individual pages. I have three Web Sites that are all connected together through Hyperlinks (Fancy word for connected together, but that’s what all the Internet geeks use so I will to). Big Deal! You say. I say Yup! Without Hyperlinks the Internet would collapse. Suppose you have two Web Pages. The first an

introduction page and the second, a page with games on it. There has to be some way to connect them together or no one will ever see the games page. Hence, Hyperlinks. This is the way to connect two or more pages. Use this formula.

<A HREF="http://www.yoursite.com">

The Hyperlink above will send the person who clicks Games to http://www.yoursite.com (not a real address, so please don’t click it, you’ll go nowhere.).

The Games portion is the only words that will be visible on the screen, because it is not enclosed within the <> tags, the Hyperlink. Whatever page you want to send the person visiting your page to is what you include in the tags, e.g. "http://www.yoursite.com" (you didn’t click did you?). Always surround the Hyperlink with quotation marks. Was that simple or what? But what about <A HREF=></A> you ask? Oh, jeesh! You had to ask. Always include them to or your gonna be sitting on your page infinitely, forever, an eternity. A means (Anchor) HREF means (Hyper Reference). No more technicalities just include them.

What do all the links above have in common? That's right, they all have little, ugly-annoying lines under them. Well, I'll just have to live with that you say. WRONG! What would you say if I told you there was a way to completely remove those pesky things? GREAT! Wonderful! Maybe thank you? O.K. here it is. The formula is as follows.

A{text-decoration:none} No spacing!

Simply include this HTML command in the <HEAD></HEAD> (Do you remember from earlier? <HEAD></HEAD> tags are the instruction portion of HTML documents) tags of your document and Bingo! You have no more underlined links! Thank you. Thank you. But, no applause is necessary.

Note: When placed within the <HEAD></HEAD> tags the above command will affect the entire page. Hence, there will be no underlined links on the entire page.

I'm not talking about some horror movie when I say Body Parts! Man your SICK! I'm talking about the "code" that will effect the way your Web Page looks to your visitors.

Note: There is a complete coloring code for HTML text and background colors which I have decided not to include in this tutorial. If you would like a copy, please e-mail me and I will be glad to send you one.

Note: Please do not use the colors I used here, you will have a pretty funky page if you do!

This might not be the best place to start teaching Tables, but I am going to start, hesitantly though. Plus, I want to confuse you a little more! It’s one of my few pleasures! LOL.

What is a Table? And I don’t mean the one in your kitchen that you eat breakfast on every morning. An HTML Table is a means of presenting information and choices to your Web Page viewers in a uniformed manner.

<CAPTION>My Table</CAPTION> Whatever you place between the <CAPTION></CAPTION> tags will be placed directly over your Table.

<TABLE> Table starts here.

<TR> Table Row no.1. --à

<TD>Hello</TD> Table Cell moving right on screen no.1.

<TD>Hello no.2</TD> Second Table cell immediately following the first.

</TR> Ends Table row no.1. You can have as many Table cells i.e.

<TD></TD> as you want in any Table Row. It is arbitrary. Also, you can have as many Table Rows i.e. <TR></TR> it is also arbitrary.

<CAPTION>MY FIRST TABLE</CAPTION>

<TABLE BORDER="5" CELLSPACING="5" CELLPADDING="5"> Begin TABLE.

<TR> Begin TABLE Row.

<TD>HELLO</TD> Begin TABLE Row CELL no.1

<TD>Hello no.2</TD> TABLE Row CELL no.2

</TR> Ends TABLE Row no.1

You could start another <TR> here if you wanted to.

</TABLE> Speaks for itself. Ends TABLE.

Wait a second, where did that BORDER and CELL SPACING/PADDING stuff come from? Don't panic it's not that big of a deal.

BORDER="" States how large the CELL BORDER should be in terms of pixels. The higher the number the larger the increase in size. I.e. 1à 2à 3à increase size of the BORDER. BORDER="0" will have no BORDER at all.

CELLSPACING="" (one word when writing the code) States how much room is between the text and the BORDER. Don't go overboard on this one! It will look awful if you do. 1à 2à 3à increase size of the SPACING.

CELLPADDING="" (Again one word when writing the code) States how much room is between the BORDERS of CELLS. 1à 2à 3à increase size of the PADDING.

You should have one Table row and two individual Table cells with a BORDER beside each other that say Hello, and Hello no.2.

That was to easy there must be more to it than that! Well, there’s good news and bad news. The good news is that was easy. The bad news is there is more to it. Not a whole lot, but some. What if you wanted to link the cells to some other Web page? How would you do that? Well, it’s not that hard, really it isn’t. Take the Table example above for instance. Try clicking on one of the cells. What happened? That’s right, nothing. That’s because they aren’t linked with anything yet. More specifically they aren’t linked with another Web page. How do you link them you ask?

Well, don’t get angry, here’s how you link Table cells.

<CAPTION>MY FIRST TABLE</CAPTION>

<TD><A HREF="http://www.yoursite.com">HELLO</A></TD> This links the Hello cell with yoursite.com.

<TD><A HREF="http://www.anothersite.com">HELLO no.2</A></TD> This links HELLO no.2 with anothersite.com.

But… there's more. Oh, jeesh you say. Don't loose heart it's not that bad. I have to talk a little bit about Table (there's that word again) alignment. Using the above example let's talk about it now.

<CAPTION> MY FIRST TABLE</CAPTION>

<TD ALIGN="?????" WHERE ????? IS "CENTER" "RIGHT" OR "LEFT"><A HREF=http://www.yoursite.com>Hello</A></TD> "CENTER" will place HELLO in the center of the TABLE CELL, "RIGHT" will place HELLO to the right, and "LEFT" will send HELLO to the left. Simple Enough!

HTML Tables can be hard to get a grip on so reread these examples several times if you have to, and practice with your own page. After all, these are just the very basics of HTML Tables. So practice, practice, and practice.

<TABLE BORDER="3">

<TR> TABLE row no.1

<TD BGCOLOR="BLUE">Upper Left Cell</TD>

<TD BGCOLOR="GREEN">Upper Right Cell</TD>

<TR> TABLE row no.2

<TD BGCOLOR="ORANGE">Middle Left Cell</TD>

<TD BGCOLOR="RED">Middle Right Cell</TD>

<TR> TABLE row no.3

<TD BGCOLOR="WHITE">Lower Left Cell</TD>

<TD BGCOLOR="Purple">Lower Right Cell</TD>

</TABLE> This TABLE will have three rows and six cells. Each one will be a different color. Practice these examples and experiment with the code a little by changing the BORDER and color values and add some alignment to it.

This section of the tutorial is for those off you who live and die to use Netscape. At least I think Netscape is the only Browser that supports the Multi Column command. I have used them on my Web page before and I never could see them using Microsoft IE.

What the <Multicol></Multicol> does is place as many columns on your page as you want. There are some additional commands that go along with <Multicol></Multicol> command, and I may not have all of them included. If you know of anymore commands, e-mail them to me. I won't go into a lot of detail with <Multicol></Multicol> commands and I really don't know why I included it in the tutorial because who wants to use something that doesn't work with all browsers, and besides TABLES can do the same thing. O.k. here it is, just for you die-hards.

cols="number of columns you want on your page"

width="overall width that the columns on your page will be"

So, you've mastered Tables and now you think you might want to communicate with the people who visit your Web Site. Not a novel idea, but it's easy to do using Forms. Forms allow you to take in information from other people visiting your Site. Say, for example you wanted to create a mailing list to keep in touch with visitors, or you wanted to promote your Web Site or a product if you have a Web business. Forms are the way to do that. A Form presents your Web Site in a professional manner and they send information the user types in right to your e-mail account. Below is a simple Form that will send visitors e-mail addresses to your e-mail account. Hence, you will have a mailing list.

Forms are placed in the <BODY></BODY> tags wherever you want the Form to start at.

<FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com">(Please don't use my e-mail address to spam me. If you have a question fine, I will be happy to try to help you, but please no spamming).

Now, let's break it down. The first line begins a new Form by "Posting" it. Whatever the person types in the text box will be sent to timrobertson01@hotmail.com through the "Action" command. There is no spacing! And always surround with "quotation marks". Easy, right! But, where is the text box? Be patient I didn't forget it.

This command simply means that "text" will be entered into the box. Name is what YOU give to the box. If you were asking for a visitors e-mail address to start a newsletter, you might put "newsletter" in the NAME="" field. Anything you want to name it is fine. It's completely up to you. Size means the size the actual text box will be. In this case it will be "25". Meaning the text box can hold 25 characters or letters. You can make it hold 50 characters or even a 100 if you want to. Again, these are arbitrary. Please remember to end your Form with the </FORM> tag!

Here is the (almost) complete code for the above e-mail Form text entry.

<TEXTAREA NAME="suggestions" ROWS=5 COLS=25></TEXTAREA> Requires-à </TEXTAREA></FORM>

Oh, by the way. You just thought you were through. Remember the (almost). You are going to need a way for your visitor to send the above information to your e-mail address otherwise they'll be scratching their head and cursing you to the top of their lungs. Here's how to send the information.

<INPUT TYPE="submit"><INPUT TYPE="reset"> This will create "submit" and "clear" (reset) buttons underneath the textbox. It's actually pretty cool looking. Try it!

<FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com">

<INPUT TYPE="text" NAME="newsletter" SIZE="25">

<INPUT TYPE="submit"><INPUT TYPE="reset">

<HR SIZE=5 NOSHADE width=100%> This makes a black Horizontal Line across the entire screen. 5 (thickness of line) and 100% (screen length) are arbitrary. If you wanted to place a Line across half the screen you do it this way.

<H3>MY LIST</h3> Text size

<UL> Start of Unordered list

<LI>Hi (Item no.1, no </LI> required)

<LI>Hello (Item no.2, no </LI> required)

<LI>Hey there (Item no.3, no </LI> required)

</UL> End of Unordered list

Here's what it will look like on the screen. It will not be red of course. That is unless you make it red. There will be Bullets or dots in front of the items. (Not shown below).

<H3>MY LIST</H3> Text size

<OL>Hi (Item no.1, no </LI> required)

<OL>Hello (Item no.2, no </LI> required)

<OL>Hey there (Item no.3, no </LI> required)

</OL> End of Ordered list

Here's what it will look like on the screen. . There will be NO bullets, only numbers. Again, it will not be red unless you make it red, or blue or green or purple or whatever color you make it.

Lists are not terribly difficult to master. They are one of the easier HTML codes to do. There is no limit to how large the list can be. They can be 1-1,000 I guess. I've never tried it before.

This is to deep for beginning HTML coders so I will not try to cover it now. I have a separate tutorial for JavaScript.

This section dealing with Frames will no doubt be the most difficult to learn, because it’s the most difficult for me to write! What is a Frame? A Frame is a collection of several different Web pages on the same page. Confused? I thought you might be. Let me explain. The first thing to remember is that Frames are difficult to learn! Like I said earlier they just are. Period. You will have to read this section several times in order for you to fully understand the material. I also, strongly suggest that you read or reread the section on Tables before you start studying Frames they can be very complicated. The main thing is just be patient, you will learn how to make Frames eventually. Now, let’s get started.

How could I best describe a Frame and what it does? Think of it this way. All Framed pages require a separate instructional code sheet to hold several different pages together. I just call it the Frame page. It’s not visible to the Web visitors. Think of a picture frame with several different pictures in it. That is what a Web page Frame is, it holds several Web pages together like that picture frame holds those pictures on the wall. You can see several different pictures at the same time in the same Frame. Cool.

Note: Columns are vertical. Rows are horizontal, as if you didn't know that already.

This is an example of a simple Frame using columns. Let’s start with the Frame page itself. If you are going to have framed pages you must make your instructional page. Remember the code sheet. Here it is.

<HTML> this starts the page

<HEAD> Starts instructions (remember?) There are none for this page

<TITLE>MY FIRST FRAME PAGE</TITLE>

</HEAD> Ends instructions of which there are none

<FRAMESET COLS="50%,50%"> Divides the screen into two columns (or pages), right and left each side is 50% of its normal size

<FRAME SRC="yourpage.html"> This is the page (URL) that will be on the left-hand side of the screen. Frames are read from LEFT to RIGHT remember that

<FRAME SRC="anotherpage.html"> This is the page (URL) that will be on the right-hand side of the screen

</FRAMESET> Ends the Frame

</HTML> Ends the entire Frame page

Above was an example of a basic and I do mean basic Frame page. Let's break it down.

Basically to make the above Frame page you need to make three pages. The Frame page itself, and the two pages that will be on the left and right sides of the screen respectively. Not to bad. Yeah, RIGHT! It's not really it just takes time.

The Frame page is not visible remember? What is visible is "yourpage.html" and "anotherpage.html". You can type the full length of the URL if you want to or if it is not in your Web directory you will have to. I.e. "http://www.yourpage.com" and "http://www.anotherpage.com". I recommend typing the full URL, at least until you are more comfortable with Frames. Always include the </FRAMESET> tag at the end. Then finish with </HTML> and now you've written your first basic Frame page! Congratulations! Remember that's three <HTML></HTML> pages to write for this Frame example.

Don't get overly excited however, there's still a lot more you will have to learn to properly use Frames on your Web Site.

<TITLE>My Frame Page</TITLE>

<FRAMESET COLS="25%,75%"> Divides screens into right and left columns. Remember? FRAME columns are read from left to right.

<FRAME SRC="NavigationalBar.html" NAME="SideNavBar"> This is the page that will go onto the left side of the screen.

<FRAMESET ROWS="15%,85%"> Divides column number two into two Rows.

<FRAME SRC="Top_NavBar.html" NAME="Top_NavBar"> This is the page for the top row of column number two. (Remember, that when you name pages, try to name them in a way that you will understand what is going on.)

<FRAME SRC="tarob0l.html" NAME="Main_Page"> This is the bread and butter of your page, it will show up right underneath row number one.

<NOFRAMES> This page uses Frames. You don't have the browser capacity to view this page. Please go here.

HREF="http://www.geocities.com/SiliconValley/Hub/1707/

tarob01.html">Home</A> (Sets up a link to allow the viewer to go to the full homepage.)

A lot of people tend to overuse FRAMES, and consequently that drags the appearance of their page down. Usually two FRAMES are enough for any normal Web site. I have three on mine so I'm breaking my own rule of "not more than two." It's more or less a judgement call as to how many FRAMES that you want. Remember, it is your visitors who count most here, not you unfortunately. If your in doubt go with the "no more than two rule", just to play it safe.

Note: Frames are not supported on all browsers. I don't remember exactly, but I think only browsers 2.0 and greater have the capacity to support FRAMES. There is a way to handle that problem though <NOFRAMES></NOFRAMES> which is in the example above. More information is available in the complete HTML tutorial or at timrobertson01@hotmail.com. Please ask me for assistance and I'll try to help.

Note: The complete HTML tutorial (HTML) is now available by download for only $8.95. It includes the comprehensive tutorial "Building and promoting your Internet Business." It talks about everything you have to learn in order to start an Internet business and where to go to obtain information about affiliate sponsors and more. You can earn money off of your Web site! Contact: timrobertson01@hotmail.com to order. I DO NOT guarantee you will make money by using the tutorials referenced herein.