This is a public service announcement that I was inspired to write after I visited the web page of my old school, Los Alamos High. I found a page full of links to students who had created their own web pages. I mean no offense to the fine students of LAHS, but a lot of their web pages do, in fact, suck. Now don't take that as a personal insult: designing a non-sucky web page is a skill that most people don't have a chance to acquire. You must either learn this skill yourself through experience, or find someone to teach you; and let's face it, the high schools are not exactly brimming with teachers who can offer any wisdom on this subject. I've written this page to correct that oversight and tell you how a well-designed web page looks.
When I was in high school (1988-1992), the internet was not something anybody had ever heard of except in the government and graduate schools. High school students did not write web pages. When I entered college, the internet was a semi-familiar thing, but mostly it was used only by extreme hard-core computer science geeks. I myself did not learn what the internet was for until my Junior year was almost over. By that time, the internet was becoming sort of mainstream, in the sense that non-technical magazines and newspapers would occasionally write about it, and some formerly non-computer-oriented people were starting to get into reading and writing web pages.
Here in the year 2000, the internet is everywhere. You can't buy a donut without seeing a "www" address stamped on the side. Most newspapers now have a regular technology section, which was very rare in my school days. New movies get hyped more by their web pages than they do in the theaters. And more to the point, every high school and college student who touches a computer is struck with the uncontrollable urge to create a personal home page.
Now I personally view this as a good thing, except that you guys are amateurs, and your first web page is going to suck. Don't be embarrassed about it: it's inevitable. You don't pick up a basketball for the first time and sink a three point shot. It takes practice, right?
There are plenty of books and web sites out there that teach you how to write HTML (I am going to assume that you have already read some), but there is precious little reference material about how to write good HTML. If there were a little more information available to new page authors, the number of really awful web sites would decline.
I wrote my first web page (which sucked) in 1995, but I managed to improve it gradually as I looked at and imitated examples of good web pages. Time is on my side. Today I am a computer professional, and I have developed several other web sites that don't suck. Now I'm hoping to pass on some of my experience to other first-time HTML authors.
So without further ado, I present you with:
On the other hand, if you DON'T create an index page, typing the same web address would cause the server to become confused. If your main page is called "welcome.html" and the person who's viewing or linking to your webpage typed the above instead of "http://www.lahs.losalamos.k12.nm.us/~rglasser/welcome.html", we have a real problem. "There's no filename!" says the server. "I guess I'll just give the user a complete listing of this directory instead." If your web page doesn't already have a default or index page, try viewing your web page this way. You'll see.
This is a bad thing for two reasons. Reason 1: It allows users to see ALL the files that you have stored in your web directory, including pages that are under construction, pages that you don't want people to see yet, and "links_to_my_favorite_porn_sites.html". Basically, you have given up control over how people view your web site. Reason 2: It makes people confused. Your average web surfer is not someone who has been using a computer for years. Your average web surfer bought his or her first computer in the last few months, signed up with AOL, only recently discovered the internet, and doesn't know the difference between a directory listing and a textbook on nuclear physics. Directory listings look scary. The user will say "AIEEEEEEE!!! Which one of these files do I pick first? What if I pick wrong?" Write this down: Scaring and/or annoying your users is bad.
Call your main page index.html or default.html, and everybody will be happier.
Nothing is more annoying. First of all, lots of different pictures on the same page, especially animated pictures, can clash with each other and become an eyesore. Second of all, users do not all have super powerful computers and high speed modems. Some of them bought a used five year old computer with a 14K modem for 200 bucks. Every picture you put on one page means a little extra time that they have to sit there and watch the little grey bar wave back and forth while they wait for your page to load. Web surfers hate waiting, no matter how experienced they are.
How do you solve this? Simple: SPLIT YOUR PAGES UP. Decide on a motif for each page. Your index page need not be anything more than an actual index listing the important pages you want people to look at. Click here to hear about my likes and dislikes... Click here to read about how much I hate school... Click here to learn about my favorite bands... My review of The Pokemon Movie... and so on. Then each one of those things becomes a new HTML document by itself.
Hyperlinks are your friends. No need to cram all your good stuff on one page. Each one of those new pages you create can contain some of the pictures that you like, without clogging up too much bandwidth and wasting people's time. If you absolutely must include a page that takes a long time to load (like the 27 photos of your bedroom that you put into your scanner), be nice to your readers and WARN them. "Click here for my picture page. WARNING: this takes a long time to load, please be patient!" That's very simple. Better yet, do not load all your pictures at the same time; divide them into individual pages of two or four pictures and have a separate page that links all of those individual pages. The best solution of all is to use a thumbnail utility to display small copies of each picture, then let the user click on them for a larger image. However, that is an advanced technique that I am not going to explain here.
Your fan page should have a link at the bottom that says "Go back to my home page" and takes you back to the index. If you don't have that, your user will get to the bottom of the page and be stuck with nowhere to go. "But Russell!" you say. "Why doesn't this user just hit the 'BACK' button?" A good point, but there's a problem. Not everybody started on your home page. Some of them were searching on Yahoo! for the phrase "Ricky Martin rocks" and clicked directly onto this page that you wrote. Some of them were reading your friend's web page, and they saw a link that said "Click here to see my friend's awesome page about Ricky Martin!" In this case, they will not get back to your index by clicking "Back"; they will go back to the search engine or back to your friend's page. Then everybody will miss out on reading your other material. That's tragic. Take ten seconds and fix it. Put a "Return to [some other] page" link on every single page besides the index. As a rule of thumb, always make sure that a user can somehow get to the index in no more than three clicks.
The proper time to use an "Under Construction" symbol is if you have a page that's really incomplete. Like it's a title and an outline and nothing more. And if you're not planning to fix it up for a while, you shouldn't have a link to it at all. Delete the link and no one will see your construction work. And if your main page is called "index.html" (see tip #1) then they can't read your directory listing, so no one will get to it until you want them to.
If you can't live without funky colored pages, take a look at your pages in a web browser and make sure they don't look awful. For instance, dark blue text on a slightly-less-dark blue background is unreadable, for obvious reasons. Black on dark red is also pretty nasty, for less obvious but similar reasons. White on cyan doesn't work either: they're both too light. You get the picture. With that in mind, you can see why the WORST choice for a background image is one that uses many different colors, such as a rainbow or a colorful fractal. I'm sorry if you really like rainbows, but you have to face the cold hard facts: By putting rainbow colors in your background, you are guaranteeing that some of your text will be unreadable. This is true no matter what color you use. So don't do it, okay?
In addition, some color schemes may be readable but they'll still be unpleasant.
| Blue on red is a really bad choice! |
Remember, the longer your page is, the more obnoxious it is to have to read a bad color scheme. So long pages with lots of text, like this one, should be kept as simple as possible. Feel free to get cute and experiment with pages that will only be looked at for a minute or two. But not with long pages.
One last note before we move on. Believe it or not, not everybody can see your background images at all. Some browsers are primitive enough not to support them. Some people actually choose to turn off images in order to speed up their page loading time. This can have unpleasant side effects if you don't include a background color along with your images. For example, let's say that you found an image of outer space for your background. Last time I checked, outer space is black. So you will probably want to use white text or some other light color on this page. But suppose someone comes along with their images turned off? Depending on what kind of defaults their browser has, they will probably see white text on a white background. That's right: a huge blank page. That is confusing and annoying. Annoying is bad.
This is easy to fix. Rather than having a tag in your page saying:
<body background="outerspace.gif" color="ffffff">
Try this instead:
<body background="outerspace.gif" color="ffffff" bgcolor="000000">
That way you force your background color to be black, which will be seen regardless of browser options.
On the other hand, you should not overdo this technique. Too many blue words on the screen can be distracting, and a click-happy user shouldn't have too many opportunities to wander off your page and never come back again. Don't get them lost, just nudge them at things you think are interesting. It's all part of the web surfing experience.
Another thing that you can steal is images. When you see a picture that you like, all you have to do is right-click on it, then select "save" from the resulting menu, and voila! The image is yours, and you can add it to your page. The only reason I would exercise caution about this method is a legal issue. Some images are trademarked by some very large companies who own a lot of money to sue you with. Some images are original artwork done by people who do not want you to steal their material. You should be VERY careful about using a company's official logo, and it's polite to ask permission before you take an artistic image. Even so, trademark infringement is difficult to track down if the offender is a small-time, no account web page maintainer (i.e., you). So probably nothing will happen. But you should give this issue a little thought, and check to see whether a web page tells you that the images are private.
Those are enough tips for now. I hope they will help you get started, and also raise your interest in developing a good web page that people will want to read. The world of non-sucking web pages awaits you.
Now, because I obey my own tip #3, you can...