Break Even Today, Or Get Your Money Back!
Global Exposure System (GES) - Your Ad Viewed By Millions!

For two reports on making your website profitable, click here. Learn How to Skyrocket your Online Sales by 837%
free offer
Click here to see the above free offer
Todays weather report for your town
Earn income hosting this banner

Help Systems Publications, Home of the HSPost Software Suite (and HSPost Online Demo)
proudly presents

Put Your Business on the World Wide Web

without paying outrageous fees or giving up control



by

Gerald A. Miller, Ph.D. 



Please note that some of what's here is already dated.
I hope to enhance this document as time permits, but I
hope you find it relatively useful in the meantime.

Until I get around to redoing those sections, I'll just
insert corrections as I find them necessary in the mean-
time.

Thanks for your patience!




















Another Educational,

Fun Book from

Help Systems Publications

Abingdon, MD

U.S.A.



TABLE OF CONTENTS





  1. Web Servers

  2. HTML Basics and Tricks

  3. Graphics

  4. How CGI Queries work

  5. JavaScript

  6. Search Engines and Directories

  7. The Itsy-Bitsy Spider

  8. Spam and Velveeta

  9. Classifieds and Reciprocal Links

  10. Freebies



    Chapter One: Web Servers

    If you're on one of the online services, chances are you have a directory for files that can include HTML and graphics for your personal Web page. Ironically, Microsoft Network doesn't seem to have reached that point yet, despite the perception that they're much more sophisticated than AOL or Prodigy.

    You'll probably soon outgrow the amount of storage they provide before long, so you'll be happy to learn that there are other places to get free Web storage. Check out: 

    http://www.hypermart.net

    1. http://www.myfreeoffice.com

    2. http://www.freeyellow.com

    3. http://www.tripod.com

    4. http://www.geocities.com

    5. http://www.angelfire.com

    These vary in generosity and reliability, but the order shown is roughly best first. In addition, joining a "pod" or two on Tripod just might help make your site visible to people with similar interests. Every little bit helps!

    Another advantage to spreading out your Web presence, besides having more storage space, is that people can find you through multiple routes via the search engines. If you dedicate each site to a specific facet of your business, you can concentrate more on variants (synonyms and spellings -- maybe even a few common misspellings!) of the keywords and phrases for that particular site, instead of duplicating a huge list for each site. Just be sure to keep the most important pages on the most reliable and friendly servers!

    In addition to these free sites, you can also create a single page, in combination with a link among those of all the other pages there, at http://www.joes.com/home and place up to 5 links on it to tie it to your other sites. As for the link on the "home" page, a later chapter will offer tips on how to get yours near the top.

    Most of these sites give you the choice between raw HTML or a page-building tool for the less programming-oriented. As a programmer, an impatient person, and an individualist, I despise these tools, especially the cookie-cutter types, just as I hate when word processors think they know better than I do about formatting a document. I can write faster in HTML and get what I want without a lot of irrelevant "bells and whistles" to confuse me and get in the way. I'm not going to insist that you follow in my rebellious footsteps, but I strongly recommend at least knowing enough HTML to work around glitches and limitations in these tools.

    There may, in fact, be times when you'll need to upload HTML. For instance, AOL's tool, which I made the mistake of using on my first visit, eventually lost track of my home page. The file was still there, but the tool had forgotten it existed! From that point on, I've edited all my files in a local copy and uploaded them to my online directory, and my only problem since then has been an occasional file lost by their flaky FTP server!

    For these reasons, the next chapter will introduce you to enough HTML for most purposes. It will also show you how any browser that has a "View Source" menu option can be an important learning tool. A later chapter will discuss CGI, which is not available in all its amazing power unless you pay extra for a virtual-domain package or some other premium service. Even though you may not want to spend that kind of money in the beginning, you should know that it exists, so that you can ask intelligent questions about a server you're considering using. If they don't offer CGI scripting access at all, you may end up having to switch to another server if and when you decide you're ready to add CGI queries to your repertoire. 

    After writing this last paragraph, I've run across
several sites, including Hypermart (listed earlier),
that provide full CGI capability at no charge.


    If you're a student or faculty member at a university, especially one who's involved with publishable research, you may find that you are not only able (even encouraged) to create your own Web pages at no cost, but you may be able (or even expected) to create CGI scripts for any number of purposes. While the learning experience is great, and one to be taken full advantage of, the likelihood of being able to publish business-related pages on a site like this without being asked to cease and desist is remote. (Trust me!)

    Back to top

    Back to Table of Contents



    Chapter Two: HTML Basics and Tricks

    HTML is similar in concept to early word processors, which surrounded text with formatting information. WordPerfect, in fact, still has the "Reveal Codes" option, which is helpful when WYSIWYG -- "What You See Is What You Get" -- becomes "What You Though You Saw Isn't What You Got". (A lot of word processors seem to be a little "WYSIWASI"!)

    The formatting elements in HTML are known as "tags." Except for special-character codes, which begin with an ampersand (&) and end with a semicolon (;), just about anything in HTML that isn't plain text will be a tag surrounded by "angle brackets," that is, they begin with the "less-than" symbol (<) and end with a "greater-than" (>). (For that reason, you can't use "<" in text without confusing the browser. Use "&lt;" in its place. If you ever discover that text is missing from your page, a stray "<" is the most likely culprit.)

    You can write simple HTML without ever using the tags "<HTML>," "<HEAD>," "<TITLE>," or "<BODY>," but these become important when you want to influence the search engines or include JavaScript functions on your pages. Besides, if they eventually become a required standard, you don't want to have to change everything. I still tend to forget from time to time, because Mosaic 2.0, my first browser, was based on an earlier HTML standard, but I recommend that you develop the habit right from the start.

    Here's a very simple Web page. It's totally useless except as an illustration:

    <HTML>

    <HEAD>

    <TITLE>This Is My Web Page</TITLE>

    </HEAD>

    <BODY>

    This is what you'll see on my Web page.

    </BODY>

    </HTML>

    Most of the text you enter will usually be paragraphs with no special formatting. For these, you need to know that extra spaces, tabs, and new lines (collectively called "white spaces") are all displayed as a single space and otherwise ignored. The browser will start a new line only when necessary to fit in the rest of the text. This is handy up to a point, but you don't want your whole document to be one long run-on paragraph, or nobody's going to want to look at it. There are also times when you want your text to look exactly the way you typed it in.

    You can start a new paragraph with the <P> tag. (The </P> tag at the end is still optional, unlike most tags that have a start and end version.) A common alternative to <P> is a pair of "break" tags (<BR><BR> -- like <P>, there is no </BR>). Note that it takes one break to start a new line and a second one to add a blank line. If you want more obvious divisions, such as between document sections, you can "etch" a line between them with <HR> ("horizontal rule" -- likewise no </HR>).

    Sometimes you will want to use a text document that's already set up the way you want it. In that case, you want to disable the browser's automatic formatting (and use of proportional fonts) by preceding that section with <PRE> (preformatted) and placing </PRE> at the end of it. The text will look typewritten, with fixed spacing, rather than typeset and proportionally spaced, and you can make the lines as long or as short as you want them. Since the text will line up in columns if you create it that way (using spaces -- tabs are too nonstandard and unpredictable), you can also create simple tables this way, at least until you learn to format fancier ones in HTML.

    For emphasis of certain words or phrases, you can surround them with <B>boldface</B>, <I>italics </I>, or <U>underlining</U>. All lines of text will be left-justified, unless you surround them with<CENTER>centered</CENTER>.

    (By now, you've probably noticed that the tags that come in pairs (such as <PRE></PRE>) are those that surround text, while those that stand alone either don't have separate starting and stopping points or, like <P>, are understood fine without them.)

    It's easy to make lists, either numbered or bulleted. A numbered (ordered) list goes between <OL> and </OL>, while a bulleted (unnumbered) list goes between <UL> and </UL>. Each item of a list is preceded by <LI> (list item -- </LI> at the end is optional). A list item can also include another list, enclosed in either <OL></OL> or <UL></UL>.

    Be careful to balance all of your tag pairs, or you may find the rest of your document in a format you thought you ended long before. A good practice is to type both tags right from the start and then type the text between them.

    Now that we've covered the most common formatting items, we can move on to the more impressive features of HTML. The two most important of these are links and graphics. The next chapter will deal with graphics in more detail, so this section will just show you how to display your images.

    A link is a highlighted section of text, or an image with a border, that when clicked calls up an Internet function, usually either opening a new page or setting up an e-mail message with an address and possibly a subject. The phrase to be linked is preceded by <A HREF="URL"> and followed by </A>. Replace "URL" with the URL (Universal Resource Locator) of the page (or the "mailto" command).

    Here's an example of a link to the HSP home page:

    Find home business resources at <A

    HREF="http://members.aol.com/HlpSystems/HELP.html">Help Systems Publications</A>.

    Note that you can start a new line after the "<A", because there's a space there, but you can't break anywhere between the "HREF" and the ">", and unless you want the space in front of "Help" underlined, don't break or put a space there either. (Some URL's may be abbreviated, leaving off the "http://www.domain.com" if they're on the same server as the current page, but it does no harm to use the full name, other than having a few more characters to load.)

    Here's an example of an e-mail link:

    Send mail to <A HREF="mailto:HlpSystems@aol.com">Help Systems Publications</A>.

    Here's another with a specific subject already set up:

    Send your inquiry about <A

    HREF="mailto:HlpSystems@aol.com?subject=Info on stocks">our

    stock speculation selections</A>.

    One difference here is that there is no "//" after "mailto:", because it's not a URL, that is, it doesn't bring up a new Web page or display an image. Those that do are "http://" (hypertext transfer protocol), "ftp://" (file transfer protocol), "file://" (a file to be downloaded, or HTML on your own local computer), "gopher://", and "wais://". Links to "telnet:" and "news:" will work with some browsers or systems, but not with others, so it's best to avoid them for most purposes.

    An image uses <IMG SRC="IMAGE">. Replace the word "IMAGE" with the URL of the image. For example, the HSP logo is displayed with:

    <IMG SRC="http://members.aol.com/HlpSystems/helplogo.gif">

    Besides the required "SRC=" part of the tag, you can include "ALT=" followed by a description in quotes that will appear in case the graphic doesn't load, or if the pointer stays in one place on the image for several seconds. Another option is "ALIGN=" followed by "TOP", "MIDDLE", "BOTTOM", "LEFT", or "RIGHT".

    Your page can have a background that is either a tiled image (like "wallpaper" in Windows) or a solid color. To use tiling, add the BACKGROUND attribute to your <BODY> tag, for example:

    <BODY BACKGROUND="http://www.domain.com/tile-img.gif"

    The image repeats over the entire browser screen. If the edges blend well, it will look continuous.

    You can change the color of the page's background in the <BODY> tag with the option BGCOLOR="black" or BGCOLOR="#000000". This color is black, whichever way you specify it. To get others, either use the name of a common color or change the red, green, and blue intensities to something other than zero. Each intensity is two hexadecimal ("hex") digits, so the values can be from 0 to 255 (00 to ff).

    A light yellow background might be:

    <BODY BGCOLOR="#ffffdf">

    Yellow is equal intensities of red (ff) and green (ff), and the fairly high intensity of blue (df) cancels out most of the red and green by combining into white (equal amounts of red, green, and blue).

    In case you don't understand hex, there's a table on the next page that shows the pairs of digits (the first, or left one vertically and the second, or right one horizontally). To be sure you understand how to use it, check that d7=215 and 7d=125...

    2nd digit

    1st digit

    		 0 1 2 3 4 5 6 7 8 9 a b c d e f
    0 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
    1 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
    2 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
    3 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
    4 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
    5 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
    6 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
    7 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
    8 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143
    9 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159
    a 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
    b 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191
    c 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207
    d 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223
    e 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239
    f 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255


    Before leaving this discussion of HTML, I'd like to cover a few more useful topics. Since I just got done showing you a table of hex-digit combinations, it seems appropriate to show you how to create simple tables, so that you can set up displays in rows and columns. The outer tag pair is <TABLE></TABLE>; for each row, you will use the pair <TR></TR>; and for each cell within the row, either <TH></TH> for a bold header or <TD></TD> for a cell containing data or ordinary text. Tables can be defined with or without borders, and they can use a different BGCOLOR from the rest of the page. Here's a simple example of a week on a calendar page:

    <CENTER>

    <H1>JULY 1998</H1><BR>

    <TABLE BORDER BGCOLOR="#ffffff" CELLPADDING=3>

    <TR><TH>S</TH><TH>M</TH><TH>T</TH><TH>W</TH><TH>T</TH><TH>F</TH>

    <TH>S></TH></TR>

    <TR><TD></TD><TD></TD><TD></TD><TD>1</TD><TD>2></TD><TD>3</TD>

    <TD>4<BR><BR>Independence<BR>Day</TD></TR>

    </TABLE>

    </CENTER>

    Another HTML tag pair I haven't mentioned yet is the comment. This starts with "<!--" and ends with "-->". Anything in between is ignored by the browser. Comments are useful for reminding yourself why you did something a certain way. They are also useful, as we'll see later, for hiding scripts from browsers that don't understand them. Finally, you can "comment out" some of your HTML instead of deleting it when you want to experiment with a change you're unsure of -- if you have to restore the original code, just remove the comment tags.

    Back to top

    Back to Table of Contents