HTML Beginners Tutorial

HTML Tutorial --Table of Contents-- [Disclaimer] [HTML] [Web Hosting] [Begin] [Cut and Paste] [Viewing Your Page] [HTML Comments] [The Basics] [Forms] [Simple Program] [Horizontal Rule] [Commands] [Lists] [Hyperlinks] [Frames] [Tables] [JavaScript] [Disclaimer] This tutorial is presented to give you help writting your own web pages. There is no warranty associated with the suitablity of this work for a particular application. Be aware that not all things work the same in all web browsers. 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 similar 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 repetition and a little imagination 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. [Things You Will Need] You will need a simple text editor. I suggest Notepad. It comes with all the Windows Operating systems. However, any editor will be fine. (Remember that HTML files must be saved with the file.html, or file.htm extension). html is th e prefered extension. You need a computer. Access to the Internet and a web browser. 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, then why are you reading this? 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. Note:This tutorial is broken down over several articles beginning with the easiest parts first, then the more complex. [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. 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. Question: What Web Hosting? Answer: Well, this is the real easy part. BMIC.NET, your ISP [Internet Service Provider] provides Five [5] Megabytes of their own server [Computer Hard Drive] for you to post your HTML pages on the Internet. The address to your website on the internet is http://www.bmic.net/~your-email-login for example, if your e-mail address is jshmoe@bmic.net, then your website's URL (Uniform Resource Locator) or address is http://www.bmic.net/~jshmoe Question: How do I put my web page on BMIC.Net's server? First you need FTP software. There are several to choose from. If you installed your BMIC.Net software from a post 1999 CD, that cd contains FTP software for you to install. Otherwise, you can download WS FTP LE and install it. It is a freeware program that will allow you to transfer files to your directory on BMIC.Net's server. Question: Ok I got WS FTP LE and installed it. What now? Open WS FTP LE Click the 'New' button Click in the Profile name box and type in My BMIC PAGE Click in the 'Host Name/Address' box and type in home.bmic.net Click in the 'User ID' box and type in the first part of your e-mail address. example, If your e-mail address is jshmoe@bmic.net type in jshmoe Click in the 'Password' box and type in your e-mail password. Click on 'Save PWD' so that you do not have to type this information in again Click 'Apply' to save the settings on this setup page Click on the 'Startup' Tab Click in the 'Initial Remote Site Folder' box and type in web Click in the 'Initial local Folder' box and type in the path to where you save your pages example C:\My Documents\web page Click 'Apply' to save the settings on this setup page Click 'Ok' to connect That's it! in the future when you start WS FTP LE, all you will have to do is click ok to connect and start transfering files. [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 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 its current place choose Cop y 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. [Viewing Your Page] Looking at your page in your web browser is very easy, the first thing you do is to give your HTML file a name such as index.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. 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. [Comments]  Once you start getting your hands dirty and begin to work with HTML long enough, you'll find yourself using the HTML  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 borrow 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. If you forget to include one of the <> tags or the exclamation point it would become very visible. Note: By the way, you CANNOT use comments within other comments. i.e. --> This is not legal in HTML and will really create havoc on your code. So be wise, and avoid it. [The Basics] <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> This is what every Html page MUST have in order to work effectively, not just effectively, but, to work at all. Let's break it down. The <HTML> tag signifies the start of your Web page. That's all it does. Oh now the <HEAD> tag is used for holding the <TITLE> and </TITLE>tags. 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 upper left-hand corner of your Web browser's title bar, 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. 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. Remember, the <BODY> tag must end with</BODY> then </HTML> which ends the HTML document. [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</TITLE> </HEAD> <META> <BODY> <CENTER> YOUR NAME GOES HERE</CENTER> </BODY> </HTML> Click for Example 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. [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 forces a line to end (like return in a text document). <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"> Specifies color of background. <BLOCKQUOTE></BLOCKQUOTE>Mainly used for indenting 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. [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 Hyperlinks the 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. 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? Always include them to or your gonna be sitting on your page infinitely, forever, an eternity. A means (Anchor) HREF means (Hyper Reference). 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? Well, it's relatively simple. First, you hav e to know what sections you want to link together. Let's start. You would start by putting a Anchor Name Tag in your page like this: <A NAME="Links"> this gives a reference spot for you to jump to when you click on the link. Then you create a link that points to the Anchor Name: <A HREF="#Links">Go To Links</A> note the # before Links, this tell your browser to look for the Anchor Name "Link" within this page, not to look for a page or directory named Link. Hyperlinks...using Images. 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, in reality it is very simple. Here's how. <A HREF="http://www.bmic.net"><IMG SRC="images/logomark.gif"></A> Which looks like this: Ok Some new stuff here. We already know what <A HREF="http://www.bmic.net"> and </A> are (opening and closing link tags). So what is <IMG SRC="images/logomark.gif">? It is a reference to an image. It tells the browser to display an image where it encounters that tag. When you put it between the <A HREF="http://www.bmic.net"> and </A> tags, it makes the image that appears the link. If you don't want the line around the graphic, add border="0" to the IMG SRC statement. <A HREF="http://www.bmic.net"><IMG SRC="images/logomark.gif" border="0"></A> Which then looks like this: For additional information on links see the Frames section. [Tables] 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 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 1 </TD> End TABLE Row CELL no.1 <TD>Hello 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 1 HELLO 2 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 1, and Hello 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. 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? Here’s how you link Table cells. <CAPTION>MY FIRST TABLE</CAPTION> <TABLE> <TR> <TD> <A HREF="http://www.bmic.net/">"HELLO 1 </A> </TD> This links the Hello cell with our main page. <TD><A HREF="http://www.anothersite.com">HELLO 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 1 HELLO 2 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 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. It is VALIGN (no spacing) or VERTICAL alignment. You declare it in the same place as you declare ALIGN only using "BOTTOM", "MIDDLE" or "TOP". This will place the contents of the cell in the "top" portion of the cell, the "middle" portion of the cell, or the "bottom" portion of the cell respectively. 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 [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:webmaster@bmic.net"> 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 the 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:webmaster@bmic.net"> <INPUT TYPE="text" NAME="information" 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:webmaster@bmic.net"> <TEXTAREA NAME="suggestions"ROWS=5 COLS=25> </TEXTAREA> </FORM> Where suggestions has replaced information. 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 (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:webmaster@bmic.net"> <INPUT TYPE="text" NAME="Information" SIZE="25"> <INPUT TYPE="submit"> <INPUT TYPE="reset"> </FORM> [Horizontal Rule] Sometimes you may find yourself wanting to separate text or images on a Web page. <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! [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 Hi Hello 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 [Frames] This section dealing with Frames will no doubt be the most difficult to learn, because it’s the most difficult to write! What is a Frame? A Frame is a collection of several different Web pages on the same page. 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. It's just called 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. 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 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 too bad 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 a Frame Page. <HTML> <HEAD> <TITLE>Frame Page</TITLE> <FRAMESET COLS="10%,90%"> Divides screens into right and left columns. Remember? FRAME columns are read from left to right. <FRAME SRC="bar.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.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="bottom.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://support.bmic.net/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. Be careful, don't overuse FRAMES, too many drags the appearance of a page down. Usually two FRAMES are enough for any normal Web site. 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. Only Netscape browsers 2.0 and greater, or Internet Explorer 3.0 and greater have the capacity to support FRAMES. There is a way to handle that problem though <NOFRAMES></N OFRAMES> which is in the example above. [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 compatable with MS Inter net 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 JavaS cript 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 still 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, then come back when it's low tide. 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. Changing a documents BG Color [background color] using JavaScript. Below is a simple HTML hyperlink. You can click it if you like, but that's not what I'm after here. Run your mouse over the link and see what happens. [JavaScript BG Color Example] This is the JavaScript code that is responsible for the change in background. <A HREF="http://www.bmic.net" 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.bmic.net"); } </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 BMIC's web site in another web browser and should be placed anywhere after the <BODY></BODY> tags. <A HREF="http://www.bmic.net" onMouseover="openWin2()">Click here!</A> [JavaScript Function example Click here!] More JavaScript examples are coming soon! Document last modified