By Bruce E. Methven
This page is dedicated to all those who would like to build--or improve on--a Web site. My hope is that it will save you some of the many hours I have spent learning things the hard way. This is the page I wish I'd had when I started! (If you ever have the need for legal articles helpful to businesses--or want to look up statutes, cases, government agencies etc.--visit our sister page, The Business Law Site.)
Now, onward!
Building a Web page is not as difficult as it might first seem. Web pages are created in a language called HTML (Hypertext Markup Language). However, HTML is really nothing more than a wordprocessor file saved in ASCII text format with additional codes thrown in. .
HTML works something like the codes you see if you use Reveal Codes in WordPerfect (or something similar in another wordprocessor): There are codes for bold, paragraph breaks etc.
All HTML codes are placed within angle brackets, and there are two types: paired (for example for bold or italics) and unpaired (for example for paragraph breaks). With the paired type, you use one code to start the formatting and one to end it; the ending code uses a slash to indicate that it is the ending code.
For example, the HTML codes in the following passage would make the word "mysterious" bold, place a line break (hard return) between the sentences and put the word "simplistic" in italics:
Many think that HTML is
<b>mysterious</b>, but it is
not as difficult as it seems. <br>
In fact, it is often
downright
<i>simplistic</i>.
In addition to formatting, HTML is used for controlling graphics and links in your page. It also provides codes that let Web Browsers know your document is an HTML file, and helps search engines catalogue your page.
In short, HTML is not tough. However, building a Web page does take time: there is just a lot to do to get your page looking the way you want. Be prepared to spend a goodly number of hours with your bottom parked in a chair in front of your computer.
Grab a Web Editor and Get Started!
One way or another, all HTML code that you want to use has to be inserted into the document that will be your Web page. You can do this through a regular wordprocessor (as I did with the first Web page I ever built), but it is much faster and easier to use a Web Editor like Netscape Navigator Gold (this is different than just plain Netscape Navigator) or AOLPress; click on either of these to be taken to its download page. You do not have to be an AOL user to download and use AOL Press. Both editors are free.
Each of these Web Editors has its own pluses and minuses. However, although I use both, I like AOLPress much better; if you are going to download only one, in my opinion that should be your choice. (Because your Web page is simply an ASCII file on your computer, you can use both--you can pull it up through either program.) Even with a Web Editor, though, you will find that you need to hand-adjust the HTML code to fine-tune the way your page looks. In other words, despite what you may hear, you really need to know something about HTML itself.
Remember to immediately save your page when you first get it started, and save it frequently while working on it. (On the other hand, remember if you do something that causes awful results and you can't figure out how to undo it, sometimes the easiest path is to exit without saving the document; when you re-enter it will be in the same state as when you last saved it.)
Be sure to create a new directory in which to put your Web page items: the main page, any subpages and the graphic images. If you do not have all of your items in one directory, then your Web editor (or browser, if you want to use it to examine your page) will not be able to load the graphics or find your subpages. Also, it is much easier when you go to upload your page if all the items are in the same directory.
Your main page and subpages should all end in .htm (or better yet, .html, if you can use that suffix), and your graphics should all end in .gif or .jpg.
The backgrounds, pictures, bullets and bars that you see in Web pages are just graphic images that have been added to the page. Each image is contained in a file. Images are added to your Web page by inserting code that is basically in this form; in this example "rose.gif" is the name of the image file.
<img src= rose.gif >
Not surprisingly, "img src" stands for "image source."
Both Navigator Gold and AOLPress have buttons that allow you to insert images--and to control the alignment (left, right, middle etc.) as well as the size of the image. (The size of an image can also be reset in an image manipulation application like PaintShop Pro.) Trying to get text to wrap around an image the way you want by hand can be tough: use the Editors for this.
Images for Web pages are either in the .gif or .jpg format. Do not change the suffix, or the image probably will not be read by a browser. (A browser, or "web browser" is software like Netscape Navigator or MicroSoft Explorer that can read Web pages.)
If you do not use a background image then the background will generally appear as a solid gray to viewers--which is O.K. but perhaps a trifle boring. Note that background images are a special type of image, laid out in tiles. In other words, you cannot use a regular image as a background (at least not without first manipulating it in something like PaintShop Pro.)
You can download background (and other) images or make your own. With AOLPress, insert a background with Format/Page Attributes. And with Navigator Gold, use Properties/Document/Appearance.
Free images are available at myriad sites on the Internet. Here are a few:
Also, if you are an AOL member, check the wonderful graphics resources there.
Although AOL has closed the Web Diner (sigh), try the following keywords:
Personal Publisher
Web Art
If you have access to a scanner, you can scan pictures, save them in .gif or .jpg format, take them home and use them in your Web site.
Also, you can download an image you see on the Web to your computer for future use by clicking on the image with your right mouse button and using "Save image as." (Obviously, you should do this only with images that are in the public domain.)
You can search for images in use on Web sites on the Internet by going to the Yahoo search engine and searching for "image: NAME" (without the quotes) where NAME is the name of the image you are looking for. For example "image: scales" will yield a list of Web sites using an image named scales.gif, scales.jpg etc. Peruse the Web sites one by one--you may have to look in the subpages too--and you should be able to find the image. Of course, this type of search will not locate images of scales that are called by some other name (justice.gif, for example). Still, it's a useful tool when one is looking for a hard-to-find image.
You can build customized lettering by using Pixelsite.
You can also modify images with a program like PaintShop Pro. PaintShop Pro is shareware and can be downloaded for free trial use for 30 days. By registering and paying the approximately $70 fee, you will also receive the manual for the program--which is quite helpful! You also may want to check out Paint Shop Pro 4.12 Tips & Tricks and Web Graphics on a Budget, which focuses on PaintShop Pro as well. .
If you start playing with colors, you may find it helpful to visit the RGB Hex Triplet Color Chart or download The Color Machine. Then again, you may not!
Images with Transparent Backgrounds. I only give this so much prominence because it has caused me such grief. For purposes of mere mortals, an image usually has two parts: the image itself and a background color. When you place an image in your Web page, odds are roughly 250,000,000 to one that the background color of the image and the background you are using for your Web page are not going to be the same--and that looks awful. Here is one example:
If you are using a solid color for your page background, it is not too difficult to make the image's background the same color. Go into PaintShop Pro and pull up the file you are using for a background. Click on the eyedropper, then move the cursor/eyedropper to the background image and click on it. That color will now appear in the foreground color box. (This is the upper left-hand box of the two overlapping boxes that are roughly 1/2" square; usually the two boxes are found toward the lower right of the screen.) Now pull up the image you want to use in your page. Click on the paint can, then click the cursor/paint can on the background of the target image. It should convert it to the same color as the background color. Save the image and use it in your Web page.
However...if you are using a multicolored background (like the one on this page), there is an obvious problem: if you click the eyedropper on any little part of the background tile you will get a different color. (This particular background has seven colors.) Worse yet, when you go to use the the paint can, it will substitute the closest color used in the target image--which generally is none too close.
What I have found seems to work the best is the following: Click on the background tile just to make sure you have it selected. (For me, at least, the active image has a turquoise title bar; inactive images have a grayed-out title bar.) Click on Colors, then Save Palette. Give it a distinctive name. Now click on the target image, then on Load Palette. Load the palette you just saved. Now go through the same steps as in the paragraph above about solid colors. You still will have the problem that with samplings in different places the color the cursor/eyedropper selects will change. However, at least those colors won't be further modified by the target's original palette. Sample with the cursor/eyedropper until you get the color closest to the overall color of the background, then use the paint can to insert that color as the background of the target image. Save the durn image!!!
Also, you may want to check out Transparent Background Images for other strategies.
Warning: Do not go overboard on graphics. If you place too many large (in terms of bytes) graphics in your page, it will take a long time to load--and you run the risk that visitors will move on before they have read your page.
There are HTML codes that must be used at the beginning and end of a Web page. These codes let someone else's Web browser know that your document is a Web page. They also allow you to designate a title and key words so that Web search engines can catalogue your page (and others can find you). Be sure your page contains this format, since the Web Editors may or may not set it up correctly. In any case, the Web Editor will not set up a description or keywords section for you. The basic HTML page layout is as follows:
Obviously your title, keywords, background graphic etc. will all be different.
Oh, all right, I won't keep you in suspense. First, it doesn't matter whether you use capital letters or not in your HTML codes; here I've been a bit sloppy and mixed them. The line breaks and spacing don't matter either: I've just put them in to make this easier for us humans to read.
The <head> section contains information that does not show on your Web page itself. However, the keywords subsection there will be used by search engines to catalogue your site. The keywords subsection here is unnaturally brief. You can use as many key words and phrases as you like; separate each word and phrase with a comma. Obviously, try to include those words that someone looking for sites like yours would be likely to use in a search. Generally, the more key words you have here, the better. If your page is business-related, be sure to list your city and state (along with your name) as key words, since someone may be looking for help that is close to home. With phrases, I list both the phrase and the main words in the phrase separately. I also list both singular and plural versions of the key words. (Although some search engines are supposed to do this automatically, I am not sure that all of them do.)
Tip: Try to keep your key words and phrases in alphabetical order. You'll find yourself adding to your key words list over time, and it is much easier to see if you already have a word or phrase included if your list is alphabetized.
When someone does a search and the search engine finds your site, your site (along with the others the search engine found) will be listed. The <title> and <description> section are what will show up for your site on that list. As a practical matter, you can use only about 25 words in the description section. If you use more, the search engine just shows the first 25 words (or whatever its cut-off limit is) and omits the rest.
The <BODY BACKGROUND="PAPER2.GIF"> has the page use paper2.gif as a background.
The <FONT FACE="Arial, Geneva"> line is optional. It is designed to show a font other than the cursed Courier. A nice font makes a page look vastly better, in my humble opinion. "Arial, Geneva" is a good combination, since virtually all browsers read one of the two. Note that since this is a paired code, </font> must appear at the end.
I am using the line <center><H2>Friends of the Aardvarks</H2></center> to set up a title that appears on the Web Page. It's also optional and, in any case, you may want to set up yours differently. Here the <H2> code says to show the title as a level two heading, which in this case means it will shown both in bold and in a larger font than the rest of the text. (You could do the same thing with <font> and <bold> codes. Again, a list of specific codes is provided below.)
The body section is where the contents of your Web page go, and will be far lengthier than what I have here.
A word of caution: it is O.K. to nest links, but
you will cause unpredictable results if you overlap them. In other
words,
<center>My Fabulous
<b>Cat</b></center>
works; but
<center>My Fabulous
<b>Cat</center></b>
may cause strange and bizarre things to happen.
Creating External and Internal Links--and Creating Sub-Pages for Your Site
With AOLPress, one way to add a link to your site is to type the name of another Web site (or the name you want to use to describe it), highlight it, then use the Link icon, where you type in the address (URL) of the site to create the link.
Navigator Gold allows you to activate the Link icon and then type in both the name of the site and its address from the one screen.
Of course, people sometimes use lousy names for their site--feel free to call it whatever you think is most informative!
You will likely use the Web Editors for setting links, but just so you know, the format is
<A HREF= "http://www.yahoo.com/search.html">Yahoo</A>
Here "Yahoo" is the text that, if clicked, leads to the Web address in the quotes..
You have probably already guessed that you treat links to your subpages just like links to other people's pages. This is true with one caveat: generally with links to your subpages you want to enter only the file name of your subpage and not the full path. The reason is that you want the links to find your subpages whether they are in a) the directory you are using for your Web page on your computer or b) in the directory where you upload your page for access by Internet browsers.
<A NAME="Lists">Lists, Tables, Frames and Indenting</A>
Here the phrase "Lists, Tables, Frames etc." has been designated as the anchor and been given the name "Lists".
<A HREF="#Lists">For more on formatting, click here.</A>
Here the phrase "For more on formatting, click here" is the text that, if clicked, leads to the "Lists" anchor.
<A HREF= "MailTo:bmethven@aol.com"> Click here to send e-mail to me</A>
which looks like this when active--Click here to send e-mail to me--and which you really can use to send e-mail to me. Please do feel free to send me suggestions, additions and comments to the site.
You can replace "Click here to send e-mail to me" with your name, an icon or whatever. Obviously you put your own e-mail address in after the "Mailto: and before the second quotation mark. You may be able to enter this as any other link while in your Web Editor; otherwise, enter this code in the HTML mode.
Well, finally, as promised, here are some basic HTML codes. This is not an exhaustive list, but it does contain the most-used codes.
| <b> </b> | Bold |
| <i> </i> | Italic |
| <u> </u> | Underline |
| <br> | Line break (hard return) |
| <p> | Paragraph (inserts blank line) |
| <center> </center> | Center |
| <Font face="Arial, Geneva"> </font> | Font: different fonts can be designated |
| <h2> </h2> | Heading: bold and large. H1 is the largest, H6 the smallest |
| <ul> <li> <li> </ul> | Bulleted list: <li> for each bullet |
| <ol> <li> <li> </ol> | Numbered list: <li> for each number |
| <dl> <dt> <dd> </dl> | Indent: <dt> for each first-level indent, <dd> for each second-level indent |
| <img align=right width="33" height="33" src= rose.gif > | Image with optional alignment and size codes; many variations are possible |
| <A HREF= "http://www.yahoo.com/search.html">Yahoo</A> | Link: Here "Yahoo" is the text that, if clicked, leads to the Web address in quotes |
| <A NAME="Lists">Lists, Tables, Frames and Indenting</A> | Anchor: Here the phrase "Lists, Tables, Frames etc." has been designated as the anchor "Lists" |
| <A HREF="#Lists">More Formatting Tips</A> | Internal Link: Here the phrase "More Formatting Tips" is the text that, if clicked, leads to the "Lists" anchor. |
Lists, Tables, Frames and Indenting
Both AOLPress and Navigator Gold have buttons that allow you to set up:
As you can see, I have enclosed the table of contents for this page in a table, and have used lists with bullet points and numbers in other places on this page. The bulleted and numbered lists can be nested too, so that you have an indented sub-level. (It is prudent not to have more than three levels, however.)
Tables can be created with or without borders. Without borders they also have some use for controlling margins. (To the best of my knowledge, there are no direct HTML margin codes!)
Two levels (only) of indenting can be handled by using:
<dl>
<dt>
<dt>
<dd>
<dd>
<dt>
</dl>
The <dl> codes indicate the section where the indenting is allowed and the <dt> and <dd> codes do the actual indenting (and are placed at the beginning of the line or paragraph to be indented). The <dl> code is paired with the </dl> code but the <dt> and <dd> codes are not paired. (Technically this method is another way to handles lists, but I find it easier to think of as indenting.)
Animation, Embossing and Sound
Animations (animated icons) are much like making cartoons: you
make several
slightly different versions of an icon (like different frames of a cartoon),
then assemble them with some special software that makes one image file that
you place in your Web page. If you are interested, you can download
the software needed from
GIF Animation.
You will need PaintShop Pro or something similar to make each variation
of the image. (FYI, animation works with the Netscape and MicroSoft
browsers, but AOL's will show only a still picture.)
Embossing can provide an interesting effect for images. Here is the rundown on how to do it from AOL:
Sound is treated just like images. You use the <img src= foghorn.wav> format, and the sound is released as your page loads. If you want the sound to occur only if the viewer clicks on a particular item, use the form <A HREF = "foghorn.wav">Yahoo</A>. In this example, the foghorn will sound only when the viewer clicks on the word "Yahoo". (The .wav ending is a common suffix for sound files, though not the only one.) Sound files can be located on the Internet, or you can make your own if you have a sound card for your computer that allows a microphone to be attached to it. (Special software that records the sound and saves it as a file generally comes with the sound card.)
This is really a "basics" page, so I cannot begin to address all of the fancy things one can do with a Web site.
If you spot a Web page with a feature you like but do not know how to duplicate, one option is to save the page to your computer (just use File/Save As). Then pull up the file in a Web Editor, text editor or word processor and examine the HTML code. You may find that there is coding you won't understand, but often you can discover some of the neatest HTML tricks this way.
As for tutorials, tips, manuals etc., there is more available on the Web than any one person can read. Here are some resources, but I am sure you will find others of your own.
Warning: Before you upload, make sure your page has the following sections in the Head portion: title, description, keywords. These are not seen when you view your page. However, they are critical for search engines. Many search engines will index your site based on your key words. Also, when a search engine displays the results of a search containing your site, these items will provide the title and description that appear for your site. See the section above titled The Basic Web-Page Format for more details.
These days most Internet Service Providers ("ISP's") give you a free Web-site space. You will need to check with your ISP to determine the Internet address (URL) for your site, so you know where to upload--and what address to give others for your page. (Your ISP may special uploading procedures as well.)
With AOL, your Web site is http://members.aol.com/NAME/PAGENAME, where NAME is your screen name and PAGENAME is the name of your Web page file. (Note that AOL is bit odd in this regard, because no "www" is used in the address.) Regardless of whether you use AOL or not, you can skip the /PAGENAME if, after uploading your main Web page, you rename it to "index.html" (without the quotes, of course). This is because browsers automatically pull up the index.html file in directory unless directed toward a different file. Taking this approach also gives you a shorter and nicer Web address for you business cards etc.
Actually, if you are using AOLPress to upload to your AOL site, this process is quite easy: Just pull up your home (or main) page in AOLPress and use File/Save As. Enter your AOL Web page path in "Page Location" and make sure to make the file name (the last part of the path) "index.html" (without the quotes, of course), regardless of what name you have given your home page on your computer. (When uploading your subpages, of course, save them the same way with the same path--but be sure to keep the file name the same as the name you have given your page; otherwise your links to your subpages won't work.) The other choice if you are uploading to an AOL site is to use "My Place"--and then use Utilities there to change the file name to "index.html" (again without quotes).
Navigator Gold also has an uploader. Go to the Edit screen and click on either the jagged upward arrow icon or File/Publish.
With AOLPress, exit AOLPress (if you are in it), sign on to AOL--make sure you sign on under the screen name you want to host your Web page--start AOLPress and pull up your Web page, then use File/Save As to upload to the address of your Web site. This Web address will be in the form
http://members.aol.com/YOURNAME
where YOURNAME is the screen name you are using to host your Web page. (AOL users can also sign on to AOL and then go to the keyword My Place to access the upload system there.)
Also, once you have uploaded your page, access it via your browser across the Internet--just like you would any other Web site--and see if it is working the way it should be. Also be sure to test any links you have in your page to make sure they are functioning correctly. (Remember that AOLPress has that Check Links feature.) If there are problems, you will need to edit your page(s) on your computer and upload them again.
Warning: different browsers may treat your Page differently! In particular, the AOL default browser often cannot handle the formatting in the standard fashion--which may be why AOL is now pushing its users to employ the Microsoft Internet Explorer browser instead. This is also why one sees the notice on many Web sites "This site best viewed with Netscape Navigator" or something similar. Even this Page gets mauled to some extent by the AOL default browser. If you are willing to play with the HTML code of your page and experiment, you can generally get your Page to look acceptable (not great, though) on the AOL browser as well.
Promoting Your Web Site--and Counters
Merely posting your Web site won't guarantee you many visitors. While some search engines actively search out new pages and catalogue them, many others do not. Also, it may take some of those active-type search engines months and months to find your page if you do not tell them where to look for it.
There are free services that will help announce your Web site and submit it to various search engines. (You can also pay companies to a more thorough promotion.) However, because the search engines all work differently, the multiple-search-engine submission schemes may not always work properly. As a result, it is best if you submit your page individually to the major search engines, and then use the multiple-submission vehicles for further promotion.
Be sure you have description and keywords sections in the <head> portion of your Web page, since some search engines rely heavily on these. (See the Basic Web Page Format section above for both of these. You can copy and paste into your Web page the description and keyword items shown there, and then edit them.)
The addresses for submission of your Web page to the major search engines follow below. You will probably save some time if you write up a 15-word, a 25-word and a 40-word description of your site that you can copy and paste into the submission forms. In the list below, I have indicate the usual amount of time it takes the search engine to post your site (so that others can find it when using that search engine)--at least where I have been able to obtain a figure.
Two general submission sites that are free are:
Submit It!: The Web Site Promotion Tool. Submit your site to 20 search engines and announcement services.
What's New Too Submit Page. Announce your Web site to many locations on the Net.
If you want to keep track of the number of visitors you have, you will want to install a Counter.
AOL users can do this by placing the line
<IMG src="/cgi-bin/counter?NAME">
in their Web page while in an HTML mode; NAME is the screen name being used to house your Web site. If you are using AOLPress, according to AOL the question marks must be omitted. I must tell you, however, that AOLPress did not look kindly on my many attempts to install a counter. I finally gave up and used WordPerfect for the task instead, being careful to save the file in ASCII format, then uploading via My Place--and it worked just fine. AOL users who want to play with the font of the counter should see Description of /cgi-bin/counter. If your browser will show it, here's how one of the AOL counter fonts looks:
(Note: because this is an AOL counter, other browsers may not be able to read it. AOL users can read it by pulling up their Web page via the AOL "default" browser.)
However, this counter only works for those with Web pages posted on AOL. Unfortunately the best free, non-AOL counter site, WebCounter Home Page (press the Create link in the upper right-hand corner of the title banner) has "disabled the creation of new free counters at this time until we can add additional hardware and bandwidth." One can only hope this feature is back soon. Meanwhile, you might try the WWW Homepage Access Counter. It is a bit technical and lengthy (just skip the programmer-type sections), but it works and is free.
Of course, if you really want numerous people to visit your site, you need to make it rewarding for them. Two relatively low-cost ways of doing this are posting useful articles you have written or providing selected links to other sites--or both. (It takes time to collect a list of good links--there are lots of abandoned and lousy sites out there--so people on the Web are always looking for them.) Depending on your company and the amount of money you have available, you may want to offer a free service of some kind. In any case, you will probably want to select a theme" for your site. And then, for pity's sake, make sure that your "attractor" items are listed in your key words, your description of your site, and perhaps even your title!
There are also various "banner exchange" programs too. These are often free (the large companies pay money for their banners) and require you to run ad banners on your site in return for having an ad banner for your site run on other pages. As for me personally, I think those ad banners junk up a site, so I've never used them--but you may feel differently about them.
Well, I trust this missive is helpful. I hope to see your page on the Web soon!