My goal with this guide is to help you design a good web site. In this chapter, I'll try to ease you into some basic ideas without getting very technical. In fact, a lot can be said without getting into details about specific technologies.
HTML stands for Hypertext Markup Language. "Hypertext" refers to the way links on web pages cross-reference other pages, while a markup language consists of a set of text commands which, when interpreted by software (Netscape Navigator or Internet Explorer, for example), result in a visual document. HTML is the markup language that web pages are made with, and it's loosely based on SGML (not to be confused with SHTML). We'll get into more specifics about HTML later, but for the moment we can ignore it and look at your future web site in terms of content and aesthetics.
Most people have forgotten the fact that useful web sites must provide useful information. Thousands of new web sites are created every day, but how many are useful for more than a dozen people? Most web searches end at information which is inaccurate, outdated, or no longer available. I think it's a rare treat to stumble across something useful these days.
In this guide, I hope to teach you how to make web pages from scratch, but it's up to you to decide what you want to convey to the world. Of course, you may be making a page only for yourself or your friends, and that's fine. If you want your page to be somewhat popular, however, you'll face the challenge of making content that will bring in the readers.
Since I have no idea what you'll end up designing, I can't say much more about content, but keep in mind that it's the most important element of a web page. Lofty designs do not make up for thin content.
Yes, content is the most important part of any page, but pages are initially judged by organization, visual elements, and loading time. First, you must decide how to organize your content in a logical manner, perhaps making use of your ability to spread content out among a number of pages and build your own web of information. Next, you can incorporate visual elements, such as graphics and typefaces, and define the overall "look" of your pages. After you add the visuals, you may need to look at how long the pages take to show up on the average viewer's screen, but we'll discuss that later.
Organization is key. You want to present people with the right options at the right time, but you don't want to overwhelm them with lots of buttons and menus. In other words, keep it simple. You may want to start with a front page to direct readers to different parts of your content, then have a number of secondary pages which contain the gory details of your site. Find sites on the web that are similar to your idea, and look at how they're organized.
If you're planning on making a large site, you may want to draw an outline or a diagram to decide how your content will flow through your site. You don't need to know anything about HTML to do this; just make a map of your proposed web site on a piece of paper.
Once you have the general layout done, you should come up with a design for individual pages. Most sites benefit from uniform design across many pages. It helps the reader navigate the site and it reassures them that they're still looking at your content. This method is especially easy for you, the author, since you only need to create one basic design and slightly alter it for each page. Even large sites like CNN use this principle of design, though it's valuable on any scale.
Again, take out a piece of paper or your favorite desktop publishing program. This time, draw out a general mockup for your site. HTML may make your mockup difficult to actually create on a page, but for now don't think about it; let the piece of paper impose no limits. Be sure to include room for a menu of some sort, perhaps with links to the major topics of your site.
If your content involves graphics or photographs, you'll need to incorporate them. This may involve scanning and touching up images or creating them with a graphic design program. I encourage you to keep things simple, however, since lots of graphics can easily clutter up a page.
In fact, you don't have to have graphics to creating a visually pleasing web site. HTML is pretty flexible in terms of formatting documents, as it should be. You can use typefaces of different shapes, sizes, and colors, tables for laying out information in a grid or column, bulleted lists, and so on. With a little creativity and the right combination of HTML elements, you can have a beautiful web page with few or no graphics.
An "ideal" web site combines useful, well organized content with visually pleasing aesthetics. Rather than attempt to define it beyond that, lets look at some examples.
If you want to do e-commerce, you should be ready to offer something especially interesting on your web site. Since your business depends on getting hits, you need to draw people in and have a web page that stands out. If you have products for sale, potential customers should have access to a wealth of information on those products as well as other services to boost the level of interaction with your readers.
I think Amazon.com is an excellent commerce site, for example. They take e-commerce to the next level; rather than a simple "on-line shopping cart" for books, amazon.com is a community of readers. Anyone can read critiques on a book, look at a cover picture and table of contents, get book recommendations, and browse best seller lists. The site goes far beyond a simple search engine.
Amazon.com has a bit of an advantage, though. They're a big Internet-based company with millions of dollars to spend on their web site. For a fraction of the cost of keeping physical storefronts open, they've been able to pay a few programmers to develop a complex system that, for the most part, runs itself. Successful Internet-based companies always have beautiful, elegant web sites. Too bad they're all trying to sell you something.
You may notice that the page source looks like gibberish interspersed with writing. You probably noticed a lot of '<'s and '>'s, for example. They are fundamental to the language because HTML commands are always <enclosed by them>. For example, if I want a bold typeface, I would use the <B> (for Bold) command. For italics, I would use <I>. These commands are called HTML tags, and they are the basic units of document formatting in HTML. Tags in HTML are standardized, so there are a limited number of commands which work inside the '<'s and '>'s.
Now you can make bold and italicized text, but how do you turn off bold and italics? It's simple: </B> and </I>. Generally, the presence of a '/' character before any command in HTML, as in </B>, denotes an end tag, while its absence denotes a start tag, as we have seen with <B>.
Many tags take extra options, too. For example, the <DIV> tag can be used to justify text, but you must specify left, center, or right justification. Lets try centering some bold text, for example. If we wrote
<DIV ALIGN=center><B>Hello, World</B>, how are you?</DIV>we would get
In HTML, no tags are case sensitive; you can use any combination of uppercase or lowercase characters. I usually type everything in lowercase, but some folks like their tags to stand out, so they use uppercase.
This guide attempts to explain much of HTML through examples. Since you just learned <B> and <DIV> you can already start writing all sorts of things in HTML. HTML is highly structured, and therefore very predictable. The basics are pretty easy to learn, once you get the hang of it, but as you go beyond the basics, things start to get a little hairy.
With web page design, there are technical considerations which take into account the time it takes to download a page, whether it will look the same on all computers, and so on. These factors are very important and are often overlooked. After you've gone through all the effort and frustration of creating a perfect web page, you may be further frustrated to find out you still have a lot of work to do before the page will work well on everyone's computer.
I'm going to restate what I hinted at above, since it's so important: HTML is subject to various interpretations by different web browsers. This "feature" is more of a curse than a blessing for the exacting web page author, since your web page will definitely not look the same on everyone's computer. You are often forced to cater to the "lowest common denominator."
For example, you can't put an enormous photograph on your web page just because it looks great on your 24" monitor. You have to consider that most viewers own 15" or 17" monitors and will be unable to see your image in all its glory. While HTML has some features which allow you to determine the sizes of page elements relative to the size of the web browser (i.e. "I want this graphic to fill 50% of the width of the web browser"), these features seem like an afterthought; they don't help much.
I highly recommend that you experiment as you read. This guide isn't meant to be read without any participation on your part, so prepare to dive in. You should write web pages to utilize new topics as you learn--going through the effort of making web pages on your own will reinforce the concepts and ultimately be more valuable than anything I could write.
While you must struggle with the language a lot in order to mold it to your will, once you have created a page that is well structured, elegant, good looking, and quick to load, it reflects the time and effort put into the design process. People may not appreciate it as much as they should, but at least they won't be annoyed when your page takes many seconds or minutes to show up on their computer screen.
This guide assumes that you want to write your web pages in straight HTML, not with one of the dozens of WYSIWYG web design programs such as Netscape Composer or Microsoft FrontPage. You should throw these programs into your virtual trash can, or you will end up with web pages that look bland, ugly, and unoriginal.
You may consider using an actual HTML editor. The distinction between an HTML editor and a design program is that the editor allows you to modify the HTML source of your document, while a design program only lets you work with what you'll get when you load it in your web browser. You may want assistance from an HTML editor's "wizards" in writing the basic components of a web page, but you will need the ability to edit your pages directly in HTML and add a personal touch to them.
I rarely use HTML editing software, and I never use web design software. I use an old fashioned text editor similar to the Windows Notepad. Recently, on a friend's suggestion, I've started to use Allaire's HomeSite editor, but the process has remained the same--I still build pages in HTML from scratch.
Read other people's web sites. Read them often. If someone is doing something really slick and you think "Wow, I want that on my page," don't forget that you can always use the View Source option in your web browser to see exactly how their page is constructed. Even the best web designers still look at other people's HTML now and again, though they may not want to admit it.
You'll notice that this site has a number of examples. Try them out on your own! Don't be afraid to experiment!
Now lets get down to the nitty gritty...