to Design a Great Web Site
If you're trapped in someone's frames click HERE to break out!
[an error occurred while processing this directive]
a good web page takes three basic talents...creativity, common
sense and technical knowledge. Anyone can download a shareware
HTML editor and throw a page on the web. If you want to have
a site that people bookmark, one that you can be proud of, you
have to make the commitment to learn the basics. After all,
anything worth doing is worth doing right!
we begin, let me just say that the the following information
is based purely on my opinions and personal experience. The
links, references and tips may be my favorites, but you've got
to be willing to explore and experiment to find your own style!
are many, many pages on the net about the specifics of writing
HTML code but this isn't one of them. Although I will give you
some HTML code for a couple of special little tricks I've learned,
this page is mainly focused on the design aspect of your page.
My goal is to help you make your page as attractive and interesting
how HTML works
BEFORE you download that editor!
recommend that you write your
first page in a standard word processor like "Notepad" or "Word"
or whatever else you use. I know there are lots of great programs
out there to help you write pages, I'm using FrontPage right
now to create this page you're reading. The problem is that
no matter which page editing program you end up using, you always
have to know how to fix the codes that your editor just can't
fix by itself.
I first started learning HTML, I read a book called How
to Use HTML3 by Scott Arpajian, published by Ziff Davis Press.
Now I know what you're saying..."I can't learn anything
from a darn computer book!" Well, we're in the same boat. I
am not a fan of computer manuals either. This is more of a step
by step tutoring session. There are pictures of ,
every step you take is clearly explained in "real people" language.
by now this book is pretty out dated and I'm not certain if
you'll be able to find it.
walks you through creating a web page from start to finish including
forms, tables, and frames and even give you a taste of Java
at the end. If you can find it in your public library on Friday,
you'll probably have a web page on Monday. If you can't find
it, (and don't want to buy it) then here are a few online ways
to get started. They are not nearly as easy, but if you're persistent
you'll get the same results.
Crash Course on Writing HTML Good starting
point, although it can be pretty dry reading. This is an older
document using HTML 2 for people who are not interested in the
finer points of writing codes. Use your word processor to test
things while you read because if you're anything like me you'll
never remember it just by reading this.
The Bare Bones Guide to HTML
This is one of the newest reference pages I've found. It is
well done and has a nice complete list of HTML 3.2 tags HERE and their descriptions.
Netscape's "Frames: An Introduction" Yes, it
tells you all about writing frames, but to be honest, I had
to have a friend help me learn by giving me some example code
to play with. I just couldn't understand frames well enough
by reading about them.
The Art of Frames
Now THIS is
a good place to learn frames! Unfortunately I found it after
I needed it. It is where I send anyone now who needs frames
The HTML Writer Guild Website a wonderful organization
where experts answer questions from newbies. If you're serious
about learning HTML or you just hit a snag and don't know how
to fix it you've got to check this one out!
what you love
is it you love to do? What are you really good at? What makes
you smile? I happen to love to design web pages and collect
graphics which should be obvious by all the information in my
WizHat site. This is the part of myself that I chose to share
with the world. What will you share? It doesn't matter if it's
cooking, scuba, engineering or telling jokes. Don't be afraid
to be original but stick to what you know.
and design are just as important as content
have to face facts...this is the information age and there are
too many interesting resources on the web for people to take
the time to wade through a poorly laid out site. You could be
telling the world the secret to eternal life but if it's black
text on a standard gray background with standard blue links
they will surf away before they get to the punch line.
doesn't mean you should put every graphic you can find in your
page either...if the page is so full of graphics that it loads
too slowly not many folks out there are patient enough to find
out if it's worth the wait. Here are a few tips on design basics.
Most are just plain common sense but I'd rather tell you something
you already know, than leave out something you might need.
what you like and stick to it...everyone has
different tastes, the point of designing your page is to let
your own personality come through. It's more important that
YOU like your page
your background first...you can go with a solid
color background (anything except gray, PLEASE!) or a textured
background, but choose it first. The background you choose makes
a big difference in your colors, graphics and text. It can save
time, energy and frustration to get this decision over with
the background simple...have you ever tried to
read text on a psychedelic background? Gives you a headache,
and I guarantee you won't be back. Fancy backgrounds are
only useful to hide poor content.
on a color scheme...Light text on dark background,
dark text on light background. Using the medium range of colors
fade the text no matter if you use light or dark and makes your
reader uncomfortable. I recommend using medium range colors
only in pages with very little text, or very large bold text.
TOO many colors of text...Keep your text (including
link/visited link colors) to no more than four on any given
page. Easier on the reader's eyes, and your graphics and background
will provide plenty of color by themselves.
rule #1: Quality over Quantity...If you fill
your page with graphics just because you can, the page will
load so slowly most people won't wait to see it, and even if
they do wait you'll lose your message in the jumble of images.
Graphics rule #2: Design your own graphics whenever
possible...I realize that not all of us are graphic
artists, or have the software capable of doing good, clean pictures.
If you do have the capability to do some custom work, take the
time to do it! At least do your own titles, it gets pretty boring
to go from page to page and see the same graphics over and over.
rule #3: Use transparent images...I have to admit
that this is one of my pet peeves. Seeing that little colored
box behind the picture ALWAYS detracts from the image you are
trying to present. It's a very simple process to make an image
transparent. If you don't already have software to make gif
images transparent, try Gif
Construction Set. Not only can you make single image graphics
transparent, it's also a powerful animation tool.
rule #4: Choose the right images for your page...Take
the time to look for graphics that enhance your ideas. If your
page is about cooking, search for graphics that show food items
or cooking tools; if it's about scuba diving look for tropical
fish or other sea life. I guarantee no matter what the subject
is, you can find the right graphics to get your message to the
reader in a lively way.
Rule #5: Use Animation! (sparingly)...I love
gif animation and you can use it as easily as a non-animated
image with the same <IMG SRC> tag, but the files are larger
than standard gif files. It's better to repeat a small number
of really good animations throughout your page than force the
surfer to wait on many different ones to load. Another danger
with animations is confusion to the eye. If you have too much
motion in a small space the human eye does not know where to
focus and you'll lose your reader.
blank space to your advantage...The blank areas
on your page gives your visitor a chance to rest, separates
important sections or ideas, and makes your graphics stand out.
are useful for more than you think
are one of my favorites tools. They are a great way to sort
and separate important data, and very easy for the eyes to focus
on. Here are a few quick table tricks for you to try.
to the EXAMPLE PAGE
to see what they look like:
a table with no borders to make perfect columns...easier
than trying to get images and text perfectly aligned with HTML
tags alone. Playing with the number of columns and their width
can give you lots of great effects that you can't get any other
tables vrs. color tables...Which type you choose
mainly depends on your page's background and what you want inside
the table. If you must use a "busy" background, using a colored
table can make text readable. Color can also make a very eye
catching "reverse image" to grab your visitor's attention. On
the down side, not all browsers are going to recognize the color
codes so it won't necessarily work for everyone
as a picture frame...you
can use a table with one column and one row to put a nice frame
around any picture. Make sure you use a wider border (the example
is set to 15) to make it look more like a true "frame". The
down side is that you can only use this trick with one picture
at a time, and you can't put anything to the left or right of
did they do that?
you ever seen something really cool on another page and want
to know how they did it? With Netscape,
on the menu bar hit "View" then "Source" and it will show you
all of the coding for the page your looking at. If it's a long
code and you don't trust your memory (or pen and paper) you
can exit the viewing screen and hit "File" and "Save As" and
save the page as an HTML document on your hard drive. Then just
cut and paste the code to your document, and adjust it the way
you want it. Here are a few quick tips on some of the basics.
Jump to the EXAMPLE PAGE
to find the following:
you'd like to add music to your pages?
You have a graphic
that you really love but it's too small / large for the space
on your page...
Does it take your
images a long time to load? Help out the viewer
You're using a graphic
with a URL link, and you don't like the little box around it?
You load your page
and lots of the images are showing as broken links...