The Tools
If I have used any words or acronyms unfamiliar to you, and not clearly defined them.
Then write them down and visit :
Your Internet Dictionery
This is sort of an on-line dictionary to the Internet and your computer. If you can't find
it there, then I misspelled it. In this case, please Click Here and let me know.

    First we need to find you the two necessary tools to write and view your pages. You most likely have them on your system already, we will need:

        A) An Editor
        B) A Viewer (uh, like the browser your viewing this page with!)
   
    Since we now know where item 'B' is, let's look for the editor you will be writing in. Do you have Note Pad, MS Word, Simple Text, Front Page Express, or something similar on your computer?
(Have one but not sure how to use it? Click Here and I will attempt to get you started.)

    Here's the scoop on editors, there are basically two different types:
        The Basic Text Editor
        The WYSIWYG Editor
 
    The Basic text editor like Note Pad that comes with Windows or Simple Text that comes with Mac (or something similar on your OS). You write in the raw HTML code and visualize what the page will look like until you actually open it up in your browser.
 
    Then there is the "WYSIWYG" or "What You See Is What You (hope) You Get". OK, so I threw in the "hope" part. All in all this is what you will most likely be using. My web site was first created in MS Word and Front Page Express but later their limitations with dHTML (the newer HTML standards) and a few other draw backs forced me to learn how to build in a Text editor. But by that time I had a bit of a grasp on what HTML was doing by peeking at the code my WYSIWYGs where writting for me.

    So let's take a look at the "WYSIWYG" type of editors. I'm not about to begin explaining how to use even the two I have already mentioned but let's just say that if you know how to use a typical word processor than you can use any of these 'point and click' type of web page builders. When you are done typing your text and inserting your images (we are not even discussing HTML at this point) just click on "FILE" "SAVE AS" and save your document as index.html. You have just created a Web Page! - Really!!
(and if your still hung up on all this "File"/"Save As" stuff, refer back to my explaination of "Tool Bars")
    You have saved it as 'index.html' as the two providers I have used both insist that this is the Main Home Page for all us freebie web site owners, so check with your particular ISP (oops, an internet term that stands for Internet Service Provider) to see what name you have to use. Usually you can name any secondary pages anything you like but you should stick with the 8-character format and try to use only lower case with no spaces. These couple of considerations in naming should maintain compatibility for most ISP provided servers where your web site will soon live.
 
    So, it's that simple. Just type a document in one of those "WYSIWYG" editors, stick in your pictures (a small note here: use .jpg or .gif images) and save your document as "index.html". If you don't have an expensive program like MS Word, check your system for Front Page Express. If you don't have either or something similar that will allow you to save your document as an "xxx.html" than you can download Front Page Express free from Microsoft or go to http://www.ZDnet.com or http://www.CNet.com and browse their downloads using the key word search 'WYSIWYG', find one you like (remember, I said we are doing this "For Free").

    Now I mentioned "peeking at the code" these program editors are writting. Most of these programs, as well as the browsers, will show you the code by clicking on "View" "Source" or Right click your mouse and look for "View Source" or perhaps "View Code". Go ahead and try these on this page now, you should be able to view the HTML code I wrote in Arachnophilia to create this page. Go ahead, I'll wait...



    This little preview brings us back to the Basic Text Editors. Trust me, you will need to learn the basic HTML tags, as you will want to make changes to your pages some day. And your not always going to want to wait for that 6 year old kid next door to finish his/her Nintendo game to do it for you!
    If you have Note Pad, Simple Text, or a similar text editor already on your system then your set. But let me recommend a couple better editors that, if nothing else, will have your friends thinking your turning all tech head guru on them.

    First let me mention Note Tab, a fantastic little free editor that can handle all your scripting needs and has lots of cool little features to help you out. With a single click of your mouse it will launch your HTML document in your browser so you can instantly see what you have done.
   
    Now remember, I said I wasn't advertising for any one here. I'm just passing along information I have dug up and found very useful in putting my site together. So now let me roll out the big gun; Arachnophilia!
    Thanks to Sven's Stationery Help Pages I found this little gem. It's free (the author prefers the term "CareWare") and it even color codes your document for you! You can think of it as an HTML Tutor as you will easily see the 'tags' in blue, the 'tag parameters' in green, and the 'text' in black. Again, with a click of a button you are viewing your work in your browser. And if that's not enough, download some of the extra tool bars both from Arachnophilia's site and from Sven's Stationery site to have many of the most used tags already typed out for you. When you first start Arach and click on "File" "New File" "HTML File", a pop up menu will ask you to input the background and text colors and Arach will fill in these basic perimeters with a click of your mouse. All you have to do now is decide what you want to fill the page with!
   
    Once you have something like this breaking the text and code out for you, it will start becoming very easy to see what is going on. Actually it wasn't until I started playing with stationery that I began to see what a mess some of the WYSIWYG programs can make out of HTML. Plus, using a text editor you can then play with some fun stuff like dHTML, Java, and Visual Basic and not have to go through a maze of procedures to keep that other program from destroying your work. One example I can give is that if you write a scrolling marquee script using dHTML tags (we'll talk about that in the advanced section #3) and try saving it in MS Word, it will insist on re-writing your code and scroll the entire page! I have also read some pretty lengthy tutorials on embedding these types of scripts using Front Page Express, all you have to do in the text editor is type, cut and paste, and hit the "Save" button. Then hit the "Preview" button, sit back and admire your creation.

    Now, before we take a look into this wacky language called HTML (the language of the World Wide Web) let's take another look at that browser of yours.
    When was the last time you have upgraded that old timer? Weather you are using Microsoft IE, Netscape, AOL or any other Internet browser you should really be upgrading your software on a regular basis. The World Wide Web is still just a child and constantly evolving. If you haven't upgraded, and in most all cases it's FREE (the key word here), then 'your' version of the World Wide Web is shrinking! Most browsers offer some form of upgrade, security fix, or new free plug-in about every 6 months. I check all my software sites about once every month or two just to keep current and avoid having to perform a large download because my system became too outdated.
    Many changes have taken place with HTML and Java in just the last two years. Changes that would prevent my browser from accessing many web sites today that I had visited just last year. And these changes won't stop, that is just one thing that keeps the Internet so interesting. Also, if you are still surfing with an out dated version of your browser, this may explain certain 'Security Errors' and browser 'lock ups' you may have recently experienced when trying to go to some web site a friend told you about. Some browsers choose to blame their own simple miss-understanding of innocent HTML as a security error or just lock up and crash.

    Microsoft, Netscape, and AOL all offer software updates for free all you have to do is find the tool bar command that will automatically take you to their upgrade web page. I am not going to give you a link here for this, just check your own browser, it is usually located under "Help" or "Tools" and look for the words "Update" or "Home Page". Make sure you get all the latest and greatest, why not, it's free!

    Now if your an AOL user than I have found one of your follow AOL members with a wonderful guide to unlock your browser's potentials: Anniereb at http://anniereb.com. Ann offers an easy to follow guide to your browser's settings and welcomes any questions you may have if you can't quite figure it out.
    Another note here, if you have a PC with Microsoft's Internet Explorer already on it, log on to AOL and them minimize it without logging off and open Internet Explorer. The first time you do this it will attempt to walk you through a set up wizard, at the first or second screen simply tell the wizard you want to "Use An Existing Account" and your set. Now go upgrade that old thing! And you can also do this with just about any browser you choose if you have enough disk space to maintain multiple browsers.

    Now that your armed with an editor and your browser has been updated, lets go take a look at that HTML language: Section 2 "Basic Understanding of HTML"

 


How to build.... | Generic Tool Bars | Section 2 | Section 3 | Section 4 | Index {Resourse Links} | My Home Page

 

HTML Page 2 of 8