REMARKS

W-h-a-a-t??
Ever find yourself reading about html and discovering that some crucial bit of information was missing...and saying to yourself; "w-h-a-a-t"? We sure did, and spent countless hours digging out the details. Stick with us, and we'll share what we've learned over the months in the School of Hard Knocks.

Of course, everything we tried worked...NOT!! What we'll try to do here is share with you the pitfalls we tumbled into and the tricks we learned, and perhaps help to speed your journey.

We want to be friendly, reasonably understandable, and at least a little fun...but to give you enough depth to do an excellent job with your html. Examples are explained in considerable depth to give beginners a leg up from the outset. We'll frequently say the same thing in different ways in an attempt to provide better clarity for different readers. Don't be offended if the language is beneath your own level of understanding!

WHAT IT ISN'T
This isn't intended to be a complete html reference. Lots of others are doing it, and we'd only add to the confusion. However, its contents are sufficient to allow you to get a fairly sophisticated page online. The tips and suggestions focus on providing extra notes to help explain some fine points that aren't easily understood from the other (sometimes slightly obtuse) online literature, and to help the new folks get off to a quicker start.

A STUDY SUGGESTION
It's all too easy to "read" instructions like these and "get the stares"...so that everything seems to make sense, but none of it soaks in. We urge you to experiment with each of the topics as they're presented, and stay with each one until you're able to reproduce what's suggested in the article. Your learning curve will be the most natural if you'll follow the numbered discussion sequence.

KEEP YOUR GOALS IN SIGHT
Publishing on the internet is not about HTML - it's about presenting a picture of yourself, your interests, or your company. HTML is just the required collection of tools to do the job - like a printing press is to a newspaper. When you read the paper, you see its content, not the machinery that went into printing it. It's the same for us. HTML is just the machinery, and we must constantly get our noses above the waterline to keep track of what we're trying to do with it! This tutorial is devoted to the task of filling your toolbox - how well you use them is your own decision and responsibility, in which we wish you great success.

Before we go on...	[ home ]

ETIQUETTE:
THE RULES IN THIS SANDBOX

1. Work hard. You have to really want to do it. It can be frustrating at times, but if you'll provide the energy, there are really nice people out there willing to help you help yourself. Dig. Study. Make yourself crazy...then ask.

2. Courtesy is the rule. Period. Every "surfing trip" is a visit to someone else's turf, and it's our responsibility to make the first move a friendly one. It's amazing how many people neglect the small courtesies. It's always a surprise and a pleasure when one shows up in the form of a short note or "thank you", and most recipients will respond with a nice note... which could lead to interesting and ongoing 'net relationships.

• If you visit someone's pages, sign the guest register (if there is one.) If you take someone's freely offered graphics, e-mail a "thank-you.".
• If someone offers help in straightening out a problem you're having, let 'em know you're grateful. No one of those folks is paid to help out - the only thing they get out of it is the knowledge that they contributed and, hopefully, your recognition of their effort in your behalf.
• To establish links, request the other page-holder's permission. It lets them know what you're up to, and may culminate in a very friendly cyber-relationship.
• Eventually, you'll include links to others' websites. Please don't be guilty of directly linking to graphics, music, and other content for use in your own pages. It just takes the other guy's bandwidth, and may even overload a busy server. If you want to use content from another page, get the owner's permission and post it on your own server.

3. Pay your dues. It's not measurable, or a tit-for-tat kind of deal, but every time we get a freebie, we owe someone a favor. Usually, the folks helping don't need much of what we could give them, at least with regard to html. Find some other way...help someone else in one way or another.

4. Pay your fees honestly. There's a lot of free software on the 'net, not surprisingly called freeware. There are also tremendous numbers of highly useful programs, tools, and conveniences in the form of shareware...which means there's a cost involved. You can frequently steal the stuff and not pay for it. The people who wrote it put it out there with trust in our honesty. Pay 'em. For the most part, fees are only in the $10-$20 range, and if you need the software, you'll get that out of it many times over.

5. Don't spend a lot of money. Virtually everything you need to create great-looking pages is out there for free...or is incredibly inexpensive!

6. If you're not using the latest version of the top browsers - NetScape or Internet Explorer - don't complain if you have difficulty making our tricks work.

7. Be good to yourself. This isn't a breeze, but it's a blast! Grab a cuppa, pull up a chair, and let's have some fun.

'Nuff of the rules. If we've offended anyone with these, too bad. Find another sandbox.

NOW...ON TO THE GOOD STUFF...!	[ home ]

INTRODUCING HTML

What's called "html" - Hyper Text Markup Language - is much more than that. It's really the set of codes - called "tags" - for creating an entire internet browser presentation, including the parts that aren't "hyper." HTML is not a programming language, and an HTML document - your webpage - is not a program. It's much simpler than all of that, and is a well-devised collection of tags and markers which will allow you to turn ordinary text into instructions that a browser can interpret. The use of html to mark up a document for browser presentation is an act of "writing", and is not properly referred to as "programming."

"Hypertext" is the jumping frog portion. A hyperlink can jump to any place within your own page(s) or literally to anyplace in the world with a 'net address (URL, or Uniform Resource Locator.) It's a small part of the html language, but is the reason for our effort. (Why in the world would you want to fiddle with html if it didn't have the linking capabilities?) Thankfully, it's reasonably easy to get started.

The remainder of the language has been created to allow us to do all of the other fancy stuff, like adding backgrounds, graphics, and text. You can spend years becoming expert, but don't need to be to publish successfully. We probably included some things in our markings that the real experts would giggle at, but it works, and you can do it too.

For the more literal-minded history buffs, HTML is is defined as Standard Generalized Markup Language (SGML), and was originated at IBM in the 1960s as Generalized Markup Language (GML) in an effort to solve the problem of transporting information across differing computer platforms. Standardized and accepted by the International Standard Organization (ISO) in Geneva, Switzerland, it became SGML, which encompasses several variations in document types and markup languages. However, all browsers are devised to interpret a specific group of markup tags chosen as HTML, and all assume the same document type: thus, fortunately, we need only focus on the tags specifically interpreted as HTML. (Invented by Tim Berners-Lee at CERN, Geneva's particle-physics laboratory.) The accepted and "official" set of html tags is maintained and updated at CERN, and is formally noted as Standardized HTML (SHTML.)

HTML is based on an 8-bit ASCII Latin-1 character set, and includes characters for most western languages. Although we write HTML in plain English, these characters may be invoked when occasionally needed with the convention of typing an ampersand (&) followed by the number or name of the character, followed by a semicolon. (More later.)

Basic level HTML is known as HTML 1, and is the minimum mandatory instruction set for all browsers. As needs and capabilites have evolved, there have been additions to the basic set, called extensions. Level 2 adds tags for defining user-input fields, and is the current standard. Level 3 adds mathematical equations, tables, and figures, and is being finalized for Standard acceptance. Netscape and MSIE already support many Level 3 tags. These browser developers have become quite aggressive in developing HTML extensions, and are continually introducing new levels of capability, even before the tags are formally recognized as "standard." HTML site developers respond enthusiastically, and author new documents which can only be fully interpreted by newer browsers. For this reason, it's important and worthwhile to frequently upgrade to the latest browser edition. As those new tags are adopted and agreed upon, they are incorporated into Standard HTML (SHTML) as part of a newly-evolved Extension.

In the remainder of the article, we'll look at resources, tools, html-writing pointers, and traps to avoid. Finally, we'll spend a little time on graphics and construction of tables. In structure, we'll start with overviews, then move to html detail in each topic area.

A great way to learn html is to use your browser's View_Document_Source option, which will display the actual html code used to create the page. Find a few pages on the WWW that you really like, and see how their authors did it!

You may print the html as written for any web page. In your browser, select File_Save_As and save the file to your chosen directory. Open the (ASCII) file in your word processor, and print.

	[ home ]

RESOURCES & TOOLS

~ RESOURCES ~

THE WEB DESIGNER
In our opinion, there's only one place to start...and probably finish. Nelson Laviolette's "The Web Designer" has enough information, guidelines, tools and pointers to satisfy your needs for years. He's also good-humored and absolutely dedicated to helping anyone (even us poor newbies) participate in the 'net successfully.

As you advance, another excellent resource is "The Web Developer's Virtual Library", operated under Alan Simpson's direction. These folks are in the forefront of html development and education, and offer highly technical resources.

There are lots of other useful places, many with links at The Web Designer or The Web Developer's Virtual Library. Much of Netscape's help turns out to be taken from The Web Designer's pages (or he contributed them.) You'll find articles on "netiquette," introduction to html, programming techniques, advanced html, counters, tables, forms, links to other tutorials...you name it. We printed out about an inch of paper to get started (we're in the anti-online-help league...can't teach old dogs new tricks....:-) Be sure to review the articles at the Web Designer to get all of the html-standard documentation...the article you're reading now just amplifies and helps to remove some of the cobwebs from those outstanding reference materials.

~ TOOLS ~

With regard to all software, please see our caveats.

HTML EDITORS
The ability to write and save documents in HTML format is critical. You will need either a good HTML editor, or a word processor capable of saving in ASCII format. Unfortunately, most HTML editors insist upon imposing their own automated formats, which can make your writing a real task, and may result in errors or lack of control of your document's appearance. In any event, learning these tutorials' contents will enable you not only to create good pages, but to correct an Editor's entries with the word processor. Our experience is that correcting Editor errors takes about as long as typing from scratch because the Editors generally introduce tags that are unecessary or downright weird. The learning curve for creating pages of professional quality with an Editor is so long and confusing, that we honestly believe that bare-bones from-the-ground-up typed entry is actually far more efficient in the long run.

NEW 7/7/98
There's a new, free Notepad replacement constructed by Jan Goyvaerts in Belgium called Edit Pad, which is perfect for HTML, with adjustable tabs, line breaks, and word wrap (lots of other simple but effective features make it what Notepad should have been!) There's a copy for you ready for the taking in the Software section. Be sure to send Jan a "Thanks!" Edit Pad saves in the correct formats, so all you need to do is add the ".htm" extension when you first save (Save_As) your typed HTML page.

Whether you use an editor or not, we suggest you become familiar with the word-processor concepts below.

WORD PROCESSOR
Whatever word processor you're using to type letters will be just fine for writing html, and will be your most important tool. All html documents are interpreted properly if you save them (Save_As...) in ASCII protocol. If your word processor does not offer ASCII options, your html may work OK on your machine, but not on all platforms. The safest bet is to work in ASCII, and acquire a compliant word processor program. (See alternate Save formats below.)

ASCII is a universally recognized character protocol recognized by all computers. Yours will save and interpret ASCII with no intervention or understanding needed on your part. All you have to do is remember to tell the machine you want to work in ASCII. It'll look just like your usual typewritten work.

So what's different about it? Every word processor has its own internal set of invisible "signals" to achieve centering, bold face, font size and face, table arrangement, etc., and they're all different. Browsers have a set of common signals all their own, and will be confused by any inserted by a word processor. Therefore, we want to save files from your word processor in "plain vanilla" so that the only characters in your document, visible or not, are the text characters you type - and nothing else. (Though they may have sophisticated automatic functions, HTML Editors are in essence specialized ASCII processors, and will not insert the page-wrecking formatting errors induced by standard word-processing programs.)

Your word processor should offer you the option to choose ASCII, probably from a pull-down menu. We use Lotus AmiPro, and simply click on the "file type" choice box to get a list offering ASCII as one of its Save_As or Open_File_Type selections. (The equivalent in your word processor may be called a "DOS Document", or "Text Only." Try the different Save options - you want the one that saves no text formatting information, such as centering, paragraph notation, tables, etc.)

Be sure to add the ".htm" extension to your file when you save it, e.g., "mydoc.htm" so your browser can recognize it as an html document.

You can use Windows Notepad, if you wish (its natural format is ASCII.) There's a drawback because Notepad lines can go on endlessly across the page, and a <return> mark (carriage return, or CR) can foul up your html. BBEdit works well on Macintosh.

Let us be sure we're clear. You simply type your text in your word processor, adding html tags as you go. (Just like you were typing a letter, except you're also adding all the html tags.) Then save your work as an ASCII file. When you retrieve it to work on it again, it'll still come back to your screen in "English." Document formatting details, such as centering, bold, font size, etc., are controlled in browsers by tags, which are the basis for html and will be discussed in detail as we progress through the tutorial.

BROWSER
Your second most important tool will be your browser. Ever notice how many 'net pages have conversation about being written for Netscape or the new and powerful Microsoft Internet Explorer (IE)? Netscape is the most forgiving, and will do tricks easily. IE is more sophisticated, offers the best user-friendly support and information and most plugins, but doesn't respond as freely to some html as does Netscape. Both are free. Why anyone would use something else is beyond us. Out best advice is to get both NetScape and Internet Explorer so you can evaluate the effects of your html in both systems.

Addendum (11/3/97) confirmed 2/3/2000
We have had a miserable experience with MSIE intrusions into our operating sytem. In addition, MSIE does not support all standard HTML tags, cgi, and javascript. As a result, MSIE is banned from our computers - we rely on and program exclusively for Netscape.

You can do all of your html testing within your own machine. Leave your modem out of it (that is, don't start whatever socket program you use to connect your computer with the 'net.) Just start the browser by itself. It may return a warning box about connecting. Acknowledge it and keep going. Click the little red "stop" button at the top of the screen so it doesn't hang and try to contact your host server forever.

Choose File_Open from the browser menubar, select the html ASCII file you saved, and load it. You'll see the results of your word-processing efforts immediately. Keep both browser and word processor open, and you can alternate between saving html changes and viewing them in the browser (refresh or reload.) In the beginning, you should check your work frequently to confirm that you're "doing it right" before you've typed pages and pages.

GRAPHICS EDITORS
You do NOT need an expensive graphics program to successfully manage graphics in your web page. Corel Draw and the like are for serious creative artists. If you can create your own graphics, great!...but if not, you can easily find what you need on the 'net and modify them to suit your needs with a program like L-View Pro (look for the "Pro" edition.) It's available on the 'net, and very reasonably priced...like, cheap. You'll have to spend some hours with it to learn what it can do for you, then exercise your imagination! As you become more sophisticated, you may wish to acquire the likes of Paint Shop Pro, Picture Manager (PicMan), Illusion, or even Future Splash (vector graphics.) We highly recommend the inexpensive Xara 3D for highly sophisticated yet simple-to-make text banners. For a considerable leap in capability, we recommend Ulead's PhotoImpact, which offers features usually found only in programs costing 5-8 times as much.

CHECKING YOUR WORK
As you begin to write and check the appearance of your html in your own browser, bear in mind that your visitors' equipment may range from relatively simple to extremely sophisticated, and may include one of a variety of browsers. The sophisticated equipment will download faster and display more color, and only Netscape and Internet Explorer will respond completely (albeit a little differently from one another) to the power of HTML2 and HTML3 language extensions.

Best advice: program for the two major browsers, and advise visitors that's what you've done ("This site is best viewed...blah, blah".) Get both Netscape and IE and check your work in both. Visit the Netscape and MSIE websites to learn of new extensions enabled in the latest browser versions. Finally, set your own computer to 600x480 and 16 colors to see what the most common system will present. Narrow the browser window to about10-1/2" to emulate 14" monitor size.

Let's go on to HTML Basics!

There is a comprehensive list of resources for both html and graphics at our website Links page:
[ http://www.primeshop.com/linklist.htm ]

[ home ]

Please proceed to the "HTML BASICS" page...