So You Want to Build a Web Page

This is a page that will talk about the things I learned while building the dart pages, the mistakes I've made, and then the things I like/dislike about web pages out on the Internet. It will also include some links to places that I use for help.

First, let me give you some background on me. I've been a computer programmer for the United States Air Force since 1985. I've coded in COBOL, Mapper, Clipper, PowerBuilder, SQL, Basic, Pascal, and have even dabbled in Fortran and C. So my first mistake was the same as many programmers make, I decided I wanted to build a web page so the first thing I did was sit down at the computer and start typing in the code. Wrong!! I could have greatly reduced the time it took if I first would have sat down, draw up how I wanted the page to look, and organize my thoughts (gasp, could he be referring to a flowchart!). I had been looking at the HTML code on other pages for a number of days and thought "How Easy!". Let's face it, compared to other languages, HTML doesn't have that many commands. So after many weekends of typing, finding the 'right' background, and acquiring all those graphics, my first dart page was finished. It was a mess, but it was finished. Below is a list of what I've learned since then, how I would do this if I started all over again, and some of the tools/sites I use. If you have some pointers/tips that need to be added, email them to me and I'll include them (especially if it's something I need to do!).

Getting Started

If you're ready to build a page, I have to assume you've been surfing for awhile and have seen how other pages look and have an idea how you want yours to look. Sit down, away from the computer, and draw out how you want to organize your page(s). After you've done that, go out and find yourself an HTML editor. Sure, you can use Notepad or any other text editor, but why would you want to? There are many excellent editors out there that can make your job much easier. Stop by TUCOWS, go through the list of editors that are available, and find one you like. They offer a description of each editor, how they rate them, whether it's freeware/shareware/demo/etc., and a link to the editor's home page if you want more information. Now that you have an editor, there are a some sites you will want to bookmark for help: HTML Help by the Web Design Group and The Web Developer's Virtual Library. There are hundreds of other sites, but these are the two I use. Now for some hints:

Multiple Small Pages

"The smaller the page, the faster it will load", I learned that lesson the hard way. Instead of breaking the content into small logical pages, I just threw everything on one page. It took forever to load, to say the very least. I spent an entire weekend breaking that page into smaller individual pages. Would have been much easier if I had done this from the start! Back to that planning ahead strategy I mentioned above (hint, hint).

Graphics

Everyone loves graphics. They can really spruce up a web page and they can really mess up a web page. Here's some of the lessons I've learned the last year or so.

It's size in bytes: The smaller the graphic is in size, the faster it will load. There are two ways you can do this. First, you can go back to TUCOWS and download a graphics package (a very popular one is Paint Shop Pro). Load up the image and count how many colors are in it. Decreasing the number of colors in an image will also decrease it's size. There is also a tool on the Internet that you can use, it's GIF Wizard. It will go out to your site, look at your graphics, and shrink them down if it can.

Image attributes to use: There are three attributes in the <IMG SRC=URL> tag you will want to use. They are height, width, and alt. Remember the last time you went to a web page, and as it was loading you started reading the information on it, then all of a sudden it scrolled down on you? So you page down, get back to where you were at, just to have it scroll down on you again. If you're like me, you're getting annoyed. The reason this is happening is because the graphics above where you were at have loaded and the height/width tags were not used in the code. Using these tags will ensure that the space the graphic needs will be allocated as the page is loaded, not as the graphic is loaded.

The alt attribute will let the viewer know what the image is, or what it will do if you click on it. This is important for those surfers that turn off the graphics in their web browser. I'm still finding some graphics on my site that I haven't included the alt attribute, slowly but surely I'm getting to them.

Validating Your HTML Code

I would strongly recommend that you do this. This will help ensure that your page will look right no matter what the user is using as a browser. Just because it looks good in the newest Microsoft or Netscape browser doesn't mean it will look good in some of the older browsers that are still out there and will be for quite some time. Some editors come with a validator, but if your using one that doesn't, you can do one of two things. You can either go back to TUCOWS and download one, or even easier, go to Doctor HTML and let it look at your site. It will give you all kinds of information about your site including: HTML validation, image syntax/analysis, spelling, form/table/document structure, and will even verify your links. It has proven to be an invaluable tool to me in the past!

Spelling!

I'm the world's worse at typing along and not checking for spelling. After I first put up my site, a friend of mine strongly hinted that I needed a spell checker. I went back, and sure enough, there were all kinds of misspellings! How embarrassing! Having a lot of misspelled words can turn people off. Many of the HTML editors have them built in (fortunately the one I use has it!). If you do not have one, you can go back to Doctor HTML and let it check your spelling for you.

Using Tables

One day I decided I wanted to change my background. The first background I used was black marble. I discovered after a period of time that having a black background not only made it harder to read the information on the page, but it also limited the number of graphics I could use. So I located this background that looked like a notebook and replaced the marble one on all my pages (which also meant I had to change the color of all the text). Well now some of the words on the left side of the page was in the binder graphic and were very hard to read. So, in all my wisdom, I put everything in tables to ensure this would not happen. Oh how clever I was!! This did solve that one problem, but as I discovered later was that tables can greatly increase the time it takes for a page to load. This does depend on the size of the table, but everything on my site was in tables.

So one day I decided to play around with some graphics and came up with my own background (the one that is currently on the site). I then went in and stripped out the majority of the tables. I was amazed at how much faster everything loaded. I hate learning the hard way, but I guess it's better than not learning at all!!

Hopefully, the information above will not only help you, but will keep you from making the same mistakes I made. If you have some hints/lessons learned that I don't have listed, please email them to me and I'll include them here with credit given to you.

My Pet Peaves

Here's the section where I jump up on the old soap box and spout out my two cents worth. Now, before I get started, please remember that everyone is entitled to their own opinion and it doesn't necessarily mean that they are right (though in this case they are <VBG>). If you have something on your site that I have listed below, it doesn't mean I dislike your site. It just means I wouldn't include whatever it is on my site. Enough said.

Frames

I'm not a big fan of frames. When they're done right, they can work. They are just rarely done right. First off, they're slow. Secondly, if you go to a link that is in a frame, you have no idea where you are at. You look up, and you are still at the URL that had the link on it. For instance; I go to John Doe's site; it has a link to my dart site; I click on that link; my site pops up inside the frame; I look up at the address; it's still John Doe's address as opposed to mine. I have run across a page or two that sends you out of the frame prior to going to the new link, but VERY few sites do this because people don't want you to leave their page. If you just have to have frames, please include this code in the a href tag, ( TARGET="_top"). This will at least allow the user to know where he/she is at by breaking them out of your frame!

Another issue with frames is that search engine spiders have a problem indexing your site which means, in many instances, they will skip it. If you want you site to look similar to frames without using them, check to see if your web server can handle server side includes (SSI). If so, you might want to give that a try. For an example of site that I designed using SSI, check out Big River Darts

Sound Files

Why should I have to wait 20/30/60 seconds, sometimes even more, for someone's favorite song to load before any of the content on that page loads? If it's a music group's site, then OK. I should expect to hear a sound bite of their music, but not an entire song! Their are a number of dart sites out there that are full of excellent information and are very well done, the only problem is you have to wait on some song to load and play before you can get to anything. I really find this annoying, and on most occasions if I look down and see that I'm waiting for a MIDI file to load, I'll simply leave that page. My wife constantly reminds me that I'm not a very patient person (actually, she says I have no patience at all!). If you just have to have music, you can't imagine your page without it, give the person visiting your site the option to download and listen to it if they want to. In my humble opinion, this is one of those cases that proves the old adage of "Just because you can do it doesn't mean you should!".

Loud Obnoxious Backgrounds!

You know what I'm talking about. You get to a page, it loads up, but you can't read anything on that page without squinting and going blind. And, if you're like me and you think the greatest invention in recent years was the plastic eyeglass lens, you're not going to stay at this site. (For those of you too young to understand the eyeglass reference, before they were made of plastic they were made of glass. My old lenses use to be very thick and weighed about 20 pounds. Ok, not quite that much, but you get the picture.) I ran across a page the other day that had a real impressive purple and blue swirled background, that by itself looked good, but the text on that site were these real small yellow letters. I don't think so!

Now, if you feel like I'm picking on you or your site, and are thinking about sending me one big "You're an idiot and you don't have the foggiest idea what you're talking about" emails, please take a second and re-read the first paragraph in this section. Thanks!

My Home Page Main Dart Menu Email Me Page Me - ICQ