HTML Tutorial

Version 030700


Al Gore for President

--Table of Contents--



Coming soon -- Microsoft Windows 98





[Disclaimer:]

I wrote this because I couldn't find any good tutorials on the Internet for HTML. Even the college class I took in it wasn't very useful, I think it was the instructor. That was two years ago, now there are several good ones on line. How useful this tutorial is to you, I don't know, but here it is.

TableOfContents


Note: First, if you downloaded this tutorial and are viewing this it offline in document format without using Microsoft Word, these pages may appear very different than their original format. Secondly, if you use Microsoft Internet Explorer over Netscape then you're out in the cold. The difference between them is night and day. Netscape wins hands down! Microsoft Internet Explorer cannot support half the things Netscape can, so get [Netscape] At the very least, just be aware that not all things work the same in all web browsers, especially when using [CSS]. So, make sure your work is appropriate for both the major browsers.


[HTML]

So, what is HTML you ask? HTML is an acronym [an acronym is just a fancy word for initials] for Hypertext Markup Language. The most used language for Web building. XML is cool to though. It's a new concept similiar to HTML, but XML still in the infant stage. However, the future is promising for XML. What about JavaScript? Isn't it used for web pages? Well, it is, but without HTML it's worthless, as you'll soon see. Shall we make some code?. Let's begin.

You have to know HTML. Let's put it like this, you do not have to be a computer genius or master programmer to learn HTML. Some people say that if the clock on your VCR is still blinking 12:00 don't bother trying to learn HTML. It's really not that hard though, it's actually simple, and with some repitition and a little immagination you will learn it. Of course there will be new terms to remember, there always are. That's the downside of anything fun, there are always boring terms to remember, 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.

Anyway, I have tried to organize this tutorial in such a way as to not confuse you. That would be a waste of our time. I suggest that you do not scroll this page as you go along, rather use the [Table of Contents] to navigate your way through this tutorial. I have tried to start out with the things that I think will be the easiest to learn then slowly progress to the more complex parts of HTML. 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. Be patient with yourself, you will get the hang of it.

Please consider this page a work in progress. This tutorial is constantly being updated and reorganized. Also, please report any errors about this tutorial [especially spelling and other grammar errors, as I cannot stand those] to my [e-mail]. When warranted i.e. proven to be wrong, I will correct them. P.S. I am rarely wrong but, it's been known to happen. Thanks.

TableOfContents


[Things You Will Need]

  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 Note Tab Light, 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. You can obtain Note Tab Light here. However, any editor will be fine though.Note Tab Light is a freeware HTML editor. (Remember that HTML files must be saved with the file.html, or file.htm extension). It makes no difference really.

  2. You need a computer.
  3. Access to the Internet. NO! Only a web browser. Preferably Netscape.
  4. You need some free time. If you're bored and don't have anything else to do, then ok. If you have something more fun to keep you busy, like a having a girlfriend, then why are you reading this? Go do something with her!

I will admit that learning a new programming language can be kind of difficult. However, HTML is not a programming language, so it shouldn't be that hard for you to learn.

This tutorial is designed with the 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 who have no knowledge of HTML. Or if you want to throw a Web Page together in like five minutes, but you will never get the web site you want until you learn the HTML mark-up language. Ok enough of that crap.

TableOfContents


Note:This tutorial is broken down over several articles beginning with the easiest parts first, then the more complex.


[Free Web Hosting]

One of the most exciting things about HTML is the ability to post anything you want on the Internet for others to see. Photos, poems, art work and the list goes on. [Intranet] is something that a college or business might use for people who work or go to school there. I have hacked some Intranets before, most of them are boring. Anyway, posting on the Internet is an easy way for virtually millions of people from all over the world to hear your thoughts and ideas on anything you care to tell them. Of course, building an Internet audience of millions is almost impossible. Only a few sites can boast millions of hits, but the potential is enormous and growing everyday.

Answer: Well, this is the real easy part. Your ISP [Internet Service Provider] usually provides several Megabytes [usually 5] of their own server [Computer Hard Drive] for you to post your HTML pages on the Internet. And, just in case you have been asleep for the last five or so years, or have absolutely no idea what that acronym [ISP] means, then here's the answer. Your ISP is the phone number [In the case of Dial Up Networking] you call every time you connect to the Internet.

If your ISP doesn't provide you with free web hosting then you can simply sign up for a free account with one of the major providers.

Below are a few of the major providers of free web hosting.

Yahoo! [The best of the best. I use them.] TableOfContents


[Cut and Paste]

Cut and Paste are absolutely essential tools when working with HTML that is why I am including them in this tutorial. Beginning HTML coders will find they will use them more than almost any other tool. Otherwise you would have to write out code by hand then retype it into your document. That is a laborious [Boring, Time Consuming, you know, laborious], process that's no fun at all.

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 HTML coder. Cut and Paste is an essential tool used by HTML coders 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.

To move a piece of text from one section of a page to another, simply take your mouse, hold the left button down and highlight the text you want to move. Easy!

Cut or Copy?

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 theCut 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.

Paste

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.

TableOfContents


[Viewing Your Page]

Looking at your page in your web browser is very easy, but a lot of people get confused over it, so here it is. We are adding this section because we receive so many e-mails about this very subject, and we have answered this question by e-mail a thousand times. I don't think we would get e-mail if it weren't for this question. So, shut up and get on with it, ok. Gotcha. Well the first thing you do is to give your HTML file a name such as My_web_page.html, then save it into the folder that you place your work. I suggest you create a folder for placing all your work in, you can do this using Windows Explorer, assuming you have the Windows O/S [Operating System]and most people do, although I use Linux also [another subject, another time, I don't want to really blow your mind, because Linux easily can]. Anyway, go to the File menu on your web browser and select Open. Then on the dialogue box that will appear choose Browse and go to the folder where you saved the HTML file and double click it. Simple! That's it.

The above process is used for opening HTML files using MS Internet Explorer and not Netscape. Opening files with Netscape is similiar to that of MS Internet Explorer.

TableOfContents


[Comments]

Once you start getting your hands dirty and begin to work with HTML long enough, you'll find yourself using the HTML <!--comment command--> for a variety of reasons. Most importantly, to help other people understand your code, or for you to read someone elses code so you can steal their ideas from their web site and put them on yours. You can use comments anywhere in the HTML document. Whatever you type between the 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 or the exclamation point it would become very visible. Then the person reading this page becomes not only dumb, but very angry!

Note: By the way, you CANNOT use comments within other comments. Just take my word for it and it will save you a lot of grief. I had to learn that lesson the hard way, so don't try it.

This is not legal in HTML and will really create havoc on your code. Trust me, I have tried it. So be wise, and avoid even trying it!

TableOfContents


[The Basics]

  • <HTML>
  • <HEAD>
  • <TITLE> </TITLE>
  • </HEAD>
  • <META>
  • <BASE>
  • <BODY>
  • </BODY>
  • </HTML>

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. Think about something more pleasant, like soaking in some UV rays at the beach while bikini watching. Huh? I'm still here, just daydreaming about Wrightsville beach and Emerald Isle, North Carolina. Oh 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, the <BASE> tag. Simple enough I guess.

TableOfContents


Getting Found with the <META></META> tags

NOT COVERED in this Tutorial, but one is coming soon, please check back often!


[A Simple program]

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

Open your text editor.
  • <HTML>
  • <HEAD>
  • <TITLE>My First Web Page
  • </HEAD>
  • <META>
  • <BASE>
  • <BODY>
  • <CENTER> YOUR NAME GOES HERE</CENTER>
  • </BODY>
  • </HTML>

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. I mean that was so simple. If you didn't understand that, then take up bingo as a hobby and forget HTML.


TableOfContents


[Commands]

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> This skips a line (Line Spacing).
  • <P></P> Start and end of a paragraph.
  • <HR> Places a horizontal line across the page.
  • <STRIKE></STRIKE> Places a horizontal line across any surrounding text.
  • <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 smallest and 1 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. Where there’s
  • <SMALL></SMALL> Where there's <BIG> text there's <SMALL> text!
  • <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 overused tag of all! Blinking text.
  • <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> See the example below, but it only works in Microsoft Internet Explorer! <MARQUEE> </MARQUEE>

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.

TableOfContents


[Hyperlinks]

Web Pages are interconnected individual pages. I have three Web Sites that are all connected together through Hyperlinks[Fancy word for connected together]. Without Hyperlinksthe Internet would collapse. Suppose you have two Web Pages. The first is 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 code formula.

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

Let’s look at this a little closer.

The Hyperlink above will send the person who clicks Games to www.yoursite.com, which is not a real address, at least I think it isn't, so please don’t click it, you’ll go nowhere. Just in case it does though, let me know if it's a good site, and I'll link to it.

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. 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)

Now, we jump to linking elements of the same page. Take this page for example, it is filled with links, allowing you to jump from one section to another. How do you do this for your own page you ask. Well, it's relatively simple. First, you have to know what sections you want to link together. Let's start.

For additional information on links see the Frames section.

Hyperlinks...using Images. Unfinished, obviously.

Using images to link web pages is an attractive alternative to the standard text link only format. Most people seldom use images as hyperlinks because they think that it is to difficult to do, ahh...alas, in reality it is very simple. Here's how.

MyPage TableOfContents


[Add some Style to your Links]

What do all the links above have in common? That's right, they all have those 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.

This is your first taste of CSS, cascading style sheets. There will be more on them later.

  • <STYLE>
  • <!--
  • A{text-decoration:none}
  • </STYLE>

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 <STYLE></STYLE> command will affect the entire page. Thus, there will be no underlined links on the entire page.


[Body Parts]

I'm not talking about horror movies when I say Body Parts! You guys have a sick mind, but I do too! I'm talking about the "code" that will affect the way your Web Page looks to your visitors.

Let's take a look.
  • <BODY BGCOLOR="WHITE" TEXT="PURPLE" LINK="RED" ALINK="BLACK" VLINK="ORANGE">
  • </BODY>


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.


TableOfContents


[Tables]

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!

What is a Table? And I don’t mean the one in your kitchen that you eat breakfast on every morning. I don't eat breakfast, but when I do I usually don't eat at the table anyway. Oh well. An HTML Table is a way of presenting information and choices to your Web Page viewers in a uniformed manner.

This is an example of a simple Table.
  • <CAPTION>MY FIRST 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.

    So far your code should look like this.

  • <CAPTION>MY FIRST TABLE</CAPTION>
  • <TABLE BORDER="1" CELLSPACING="5" CELLPADDING="5"> Begin TABLE.
  • <TR> Begin TABLE Row.
  • <TD>HELLO
  • </TD> End TABLE Row CELL no.1
  • <TD>Hello no.2
  • </TD> End 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.

This is how the above code looks on a web page. Try experimenting with the code to gain some practice working with Tables.

MY FIRST TABLE
HELLO HELLO


Wait a second, where did that BORDER and CELLSPACING/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 able example above for instance. Try clicking on one of the cells. What happened? That’s right, nothing. I bet you feel stupid now for clicking on it don't you. 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, keep your voice down ok, here’s how you link Table cells.

  • <CAPTION>MY FIRST TABLE</CAPTION>
  • <TABLE>
  • <TR>
  • <TD> <A HREF="http://www.geocities.com/tarob01/">"HELLO</A>
  • </TD> This links the Hello cell with my homepage.
  • <TD><A HREF="http://www.anothersite.com">HELLO no.2</A>
  • </TD> This links HELLO no.2 with anothersite.com.
  • </TR>
  • </TABLE>

Again, this is how the above code will look on a web page.

MY FIRST TABLE
"HELLO HELLO


It’s that simple!

But… there's more. Don't start cursing just yet, 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>
  • <TABLE>
  • <TR>
  • <TD ALIGN="?????"> Where ????? is "CENTER" "RIGHT" OR "LEFT"
  • </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!
  • </TR>
  • </TABLE>

There is another alignment that is appropriate to discuss here. I will not talk much about it because it is really not that important. It is VALIGN (no spacing) or VERTICAL alignment. You declare it in the same place as you declare ALIGN only using "BOTTOM" or "TOP". This will place the contents of the cell either in the "top" portion of the cell or the "bottom" portion of the cell.

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.

This is an example of a multi row TABLE.

  • <TABLE BORDER="1">
  • <TR>TABLE row no.1
  • <TD BGCOLOR="BLUE"> Upper Left Cell
  • </TD>
  • <TD BGCOLOR="GREEN"> Upper Right Cell
  • </TD>
  • </TR>
  • <TR> TABLE row no.2
  • <TD BGCOLOR="ORANGE"> Middle Left Cell
  • </TD>
  • <TD BGCOLOR="RED"> Middle Right Cell
  • </TD>
  • </TR>
  • <TR> TABLE row no.3
  • <TD BGCOLOR="WHITE"> Lower Left Cell
  • </TD>
  • <TD BGCOLOR="Purple"> Lower Right Cell
  • </TD>
  • </TR>
  • </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. Simply Cut and Paste this code into a blank document and see how it looks, or view example-

This is how it will look.

HELLO HELLO
HELLO HELLO
HELLO HELLO

TableOfContents


Multi-Columns

This section of the tutorial is for those off you who live and die to use Netscape. Why anyone would purposely choose Netscape over MS Internet Explorer is beyond me though. Netscape is like driving a Volkswagon, MS Internet Explorer is like laying your hair back in a Mustang. I know I have a Mustang. Once you use MS Internet Explorer using Netscape is like, well, using Netscape. I think Netscape is the only Browser that supports the Multi Column command. Oh, who cares, it's a Netscape command, the people who gave us the <BLINK> </BLINK> tags! 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.

  • <Multicol>
  • cols="number of columns you want on your page"
  • width="overall width that the columns on your page will be"
  • </Multicol>

TableOfContents


[Forms]

So, you've mastered Tables and now you want to get feedback from 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.

This is an example of a simple Form.

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

  • <FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com"> Puh-leeaze don't use my e-mail address to spam me. I had the hell spammed out of me once and it sucked

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 my e-mail address 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.

  • <INPUT TYPE="text" NAME="name" SIZE="25">

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.

  • <FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com">
  • <INPUT TYPE="text" NAME="newsletter" SIZE="25">
  • </FORM>

Now, that really was easy!

What was that? You say you need a larger area than the above e-mail text box? Well, don't fret that can be achieved very easily. Look below.

  • <FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com">
  • <TEXTAREA NAME="suggestions"ROWS=5 COLS=25>
  • </TEXTAREA>
  • </FORM>

Where suggestions has replaced newsletter. The above text box will accept "5" rows or lines of text, each line holding "25" characters for a total of "125" characters. You can set the rows and characters to values to suit your needs. The text area box allows visitors to send you comments and suggestions or anything else for that matter, textually speaking, right to your e-mail.

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!

Below is the COMPLETE code, I promise.

  • <FORM METHOD="POST" ACTION="mailto:timrobertson01@hotmail.com">
  • <INPUT TYPE="text" NAME="newsletter" SIZE="25">
  • <INPUT TYPE="submit">
  • <INPUT TYPE="reset">
  • </FORM>
TableOfContents


[Horizontal Rule]

Sometimes you may find yourself wanting to separate text or images on a Web page. <HR></HR> is a nice tool to use to keep your pages nice and nifty, and it's simple to do. All this command does is place a Horizontal line across the screen, hence the name Horizontal Line. Here's the way you do that.

  • <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.

  • <HR SIZE=5 NOSHADE WIDTH=50%>

That's all there is to it!

TableOfContents


[Lists]

There are two basic kinds of lists ordered and unordered. Just like there are ordered and unordered people. Below is an example of each. The lists I mean, not the people.


Unordered List

  • <H3>MY LIST</H3> Text size
  • <UL> Start of Unordered list
  • <LI>Hi (Item no.1, no </LI> required)
  • <LI>Hello
  • <LI>Hey there
  • </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. Of course!.

MY LIST
  • Hi
  • Hello
  • Hey there!


Ordered List

  • <H3>MY LIST</H3> Text size
  • <OL>
  • <LI>Hi (Item no.1, no </LI> required)
  • <LI>Hello
  • <LI>Hey there
  • </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 which color you choose to make it.

MY LIST
  1. Hi
  2. Hello
  3. Hey there

Lists are not terribly difficult to get the hang of. 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. If you ever do please send me the URL, I would love to see it. lol

TableOfContents


[Frames]

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. 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
  • Here is where it can get tricky fast, so be patient!
  • <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. That's 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 rames on your Web Site.

Did I forget to mention Rows?

This is an example of a simple Frame using Rows. We'll have to start with the "instruction sheet" as we did for the columns.

This is the code for my old home Page.

  • <HTML>
  • <HEAD>
  • <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.
  • </FRAMESET>
  • </FRAMESET>
  • <NOFRAMES> This page uses Frames. You don't have the browser capacity to view this page. Please go here.
  • <A HREF="http://www.geocities.com/SiliconValley/Hub/1707/Tutorial.html"> TUTORIAL</A> (Sets up a link to allow the viewer to go to the full homepage.)
  • </NOFRAMES>
  • </HTML>

Please see the following example, of what the above code should look like in a web browser. [Frame example]

You may have noticed a new term in the above example Name. This is used for linking pages together. Say for example you had a link on the Navigational Bar.html that opened a new page for bicycles. When the person clicked on it, it would open that page in the same window. Remember from the example above that the navigational bar is only 25% of the page, so when the bicycle page opened it would be really scrunched into that page. Well, here's where the Name command comes into play, by allowing you to target where you want the links to open.

Do you want some friendly advice?

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 [here]. Please, ask me for assistance and I'll try to help.

TableOfContents


[Cascading Style Sheets]

So, now you want to learn a little more advanced stuff. Well, you've come to the right place. Style sheets are awesome for adding more life to your pages. You can do things with Style sheets that good old HTML alone can't. Here's the basic code for a Style sheet, but first a word of caution. Style sheets are very addictive, once you start you may not be able to stop.


Note: At the current time MS Internet Explorer 5 is the best browser for supporting CSS. Netscape supports some commands but, MS Internet Explorer 5 is by far the superior tool for CSS, and it's FREE, so why not get it. Please be aware that if you use Netscape, some commands may not work properly, if at all.


There's nothing new here. Just a regular HTML code page.

  • <HTML>
  • <HEAD>
  • <TITLE>My First Stylesheet</TITLE>
  • </HEAD>
  • <BODY>
  • <H1>Stylesheets: The most addictive Web Design Tool</H1>
  • <P>HTML simply does not compare!</P>
  • </BODY>
  • </HTML>


Style Sheets follow a simple rule: Selector{property: value;}

<STYLE TYPE="text/css"> Now, this is the new stuff. This code must be inserted between the <HEAD> tag and </HEAD> tag.
<!--
H1 { color: blue; font-size: 40px; font-family: courier }
P { text-indent: 2cm; background: red; font-family: courier }
-->
<STYLE>


Note: Please view example [css.html] to see what it looks like in your web browser. Also, please view [noncss.html] to see the same HTML document without the use of a Style sheet. Believe me you'll notice the difference!


Notice that the two middle lines of code are setting the details for what you prepared in the above HTML document. The first line of code sets the value of the Header <H1>and the second line sets the value of the paragraph.


Cascading Style Sheets are one of the hottest tools in Web Design right now, and it's easy to see why they are. You can do all sorts of good things with CSS.


[JavaScript]

JavaScript is an Internet design scripting language developed by Netscape, that can be interpereted by Netscape and MS IE web browsers [JScript, and VBScript were developed by Microsoft Corporation, and both are compatibale with MS Internet Explorer only]. You can use JavaScript for a great many things along with HTML. In fact there are so many uses for JavaScript that I will not even attempt to cover all the uses for this language. I will only try to cover a few basic things that JavaScript is most widely used for.

Before we go any further I should remind you that it will take a while before you learn how to use JavaScript. I'm stil learning about new things in the JavaScript language. I also have to use references occasionally because I forget a lot of things about JavaScript when I don't use it regularly. Ok, let's just jump right into it. If you drown in the syntax like I do, then come back when it's low tide, or stay with HTML.

Note: I will not try to teach you JavaScript, rather I will provide sample code and let you study it and use it on your pages.

To begin, if you haven't already, return to the [Table of Contents] and roll your mouse over the HTML 4 Beginners title at the very top of the page. Don't click it. What did you see? Or better yet, what happened when you ran the mouse over the title? That's right, the BG Color of the entire web page turned 'yellow'. Cool. Well, it is to me anyway. Now, how did I do that? Well, there's only one way to tell you, I'll show you.

Below is a simple HTML hyperlink. You can click it if you are nosy enough, but that's not what I'm after here. Run your mouse over the link and see what happens.

This is the JavaScript code that is responsible for the change in background.

<A HREF="http://www.primeline.com" onMouseover="document.bgColor='YELLOW'" onMouseout="document.bgColor='white'">[JavaScript BG Color Example]</A>

Technically, this is called an event handler in JavaScript. The event is the mouseover and mouseout.

  • Note: Remember to always use lower case letters to begin event handlers and capitalize the event itself, and there is no spacing! [e.g. 'Onmouseover' and 'onmouseover' are not the same as 'onMouseover' and will not work!].

Functions are a major concept in any programming language, and JavaScript is no different. Here is an example of a simple Function used to open a new web browser window by rolling your mouse over a hyperlink.

<SCRIPT LANGUAGE="JavaScript">

function openWin2() {

myWin= open("http://www.yahoo.com");

}

</SCRIPT>

This script should be placed between the <HEAD></HEAD> tags in your HTML document, although it doesn't have to.

All we need now is a way to call the above function. In other words how will we use the function openWin. Well, we can always use openWin with a hyperlink.

  • Note: The hyperlink below will open Yahoo's web site in another web browser and should be placed anywhere after the <BODY></BODY> tags, obviously!

<A HREF="http://www.geocities.com" onMouseover="openWin2()">Click here!</A>

More JavaScript examples are coming soon!

TableOfContents


Comments/Questions



Important-- Contrary to popular belief, I am NOT responsible for the content of the web sites I link to. This includes the [Bomis] web site. Thanks.

TableOfContents

http://www.geocities.com/tarob01/
Document last modified