Web Page Authoring - Part 1

Forward

This document is, first and foremost, about helping you design exciting, readable Web pages. Its aim is to not only to help you cultivate new skills, but to show you how to leverage existing ones and mature tools in support of web-based content creation. In this tutorial -

Part 1: The Top-down Theory

Part 2: Page Layout and Design

Part 3: Assembling a Web Authoring Toolkit

Part 4: More Tools for Building Web Pages

Part 5: Adding Multimedia Features, Adding Audio

Part 6: 3D Graphics

Part 7: Other Graphics Formats

Part 8: Programming the Web

Part 9: Appendices

Hopefully, both the beginning Web page designer and those who already have some experience with HTML will find this document valuable. The overall structure of the content may be thought of as a continuum, with the design process at the front end (i.e., part 1), and the uploading phase and subsequent feedback at part 8. (There is also a Glossary of Terms in the Appendices, in case you run across terms you aren't familiar with.) With this system, both those who benefit from a structured learning type of environment and those who have specific design goals can benefit.

The examples and tutorials herein take a somewhat “two-tiered” approach to their lessons. First, I endeavor to present the essential facts ‘n’ figures; this is followed by explanatory text and hopefully enough figures and illustrations to make the point crystal clear. Thus, it is my hope that web authors and document publishers will be able to gain both skills and understanding. As a good friend of mine says, “an explanation is always more powerful than a description.” With this two-tiered approach, it is my hope that you can quickly find the “need to know” facts, and then fill in the pieces for a better understanding. It’s the interlaced GIF approach to learning!

By the way, if you found this page with the help of a search engine, I encourage you now to pause here and take a look at the the topical organization of the Table of Contents. With it, and the hyperlinks embedded therein, you should be able to quickly pull the precise information you need to solve a problem or implement features that will add appeal and functionality to your web site.

Although this document does not endeavor to be a basic HTML reference (there are plenty of those already, including one elsewhere on this site), it does include some discussion of the basics in part 2, for the sake of completeness. Before we delve into these matters, though, the first few sections discuss some design-oriented topics related more to style than technical underpinnings.

If you are not familiar with the fundamentals of the HTML language, you'll want to refer to the netlinks section in Appendix 2, where you’ll find a number of reference texts and freely accessible online tutorial sources (e.g., www.netscape.com, in the Creating Net Sites area). This course will provide you with the basics; the Web itself is your best resource for incorporating interactive and multimedia elements and advanced layouts, and for teaching philosophies and techniques of professional design, art, publishing, and music. As we shall see, there are times when the online paradigm is not like these other media forms, but more often than not, there is much to be gained by leveraging the tools and techniques of these older forms in the creation of the new.

Part 1 - The top-down theory

Even those who know practically nothing about computers have heard about how the Internet is changing the face of publishing; how virtually anyone can post their own pages on the World Wide Web. This course assumes that you fall into one of several categories of Internet users who are – or want to be -- creators, interested in taking Web-page publishing to "the next level" -- to create pages that are both creative and compelling. It also assumes that you have access to either a Windows PC or a Mac (both are featured throughout the text) and would rather use a range of good tools (many of which, of course, are freely available!) to get the job done quickly and efficiently rather than hack away at things the Hard Way. In other words, we have to go beyond NotePad and SimpleText here, folks.

In order to keep things clear, I will indicate when a tip or technique is Mac-specific, and a Windows icon to signify a PC-ism. My apologies to OS/2, BeOS, NeXTstep, Linux and others who run an “alternative OS” on their computer – to keep this text focused, I’ve had to narrow it down to Mac and Windows, which share an impressive number of similarities and well-known applications, such as Netscape Navigator, Internet Explorer, Microsoft Word, Fractal Painter, Adobe Photoshop, Acrobat and so on. These tools, and those that support technologies such as Java, ActiveX and VRML, form the core of this text’s emphasis.

With this course, I hope to encourage the principles of good design and typography and help you apply them to the Web, while adding multimedia and interactive elements that can help make your pages memorable. While Web-page publishing is still, relatively speaking, in its infancy, those who appreciate the subtleties of page layout and design, and those who have a background in other areas of the Media Arts will find a considerable heritage to be inspired by.

In fact, online publishing is both similar and remarkably different than its paper-based and "traditional media" progenitors. Similar, in that principles of classic form and clear communication are still the hallmarks of an elegant and effective page; different, in that the interactive nature of the online world dictates that what works in print in many cases does not automatically translate to something that works online. While all of these subjects deserve (and will be afforded) much more detail in coming modules, there are a few conceptual points worth making here before we delve into the technicalities of making Whiz-bang web pages.

For better or worse (and naturally, I like to think that it is for the better), this course takes what I call a "top-down" approach to web page publishing. To understand what that means, imagine for a moment, the "bottom-up" approach: the author creates pages that conform with the lowest common denominator, which, in the case of the Hypertext Markup Language, was HTML 1.0. This early version of the HTML spec is now widely considered obsolete, having been superseded by the 2.0, 3.0, and subsequent specifications. A page that conforms completely to the HTML 1.0 spec will look essentially the same in virtually all Web browsers. While there are definite advantages to such consistency, there is also the problem that such pages tend to be bloated by multiple tags, now-deprecated color tags and other vestiges of the days before cascading style sheets put an end to the need for such stuff. Just as damning, these old sites tend to be plain as an amish coat to look at. No colored backgrounds, columns, and/or centered text makes Jack's page a pretty dull place. With that said, I’ll be the first to advise you against adding effects for effects’ sake. To quote Baron Munchausen, “a modicum of snuff can be most efficacious.” Be judicious with your embellishments; all emphasis is no emphasis.

The top-down approach exploits one of the great features of the way all web browsers interpret the HTML language: when they encounter a command they don't understand, they simply skip over it. By exploiting this characteristic, Web browser developers have been able to add enhanced features to their products without botching up the ability for others to view a page. In other words, if a Web page has a special command that only Netscape Navigator can understand, other Web browsers simply ignore the code and go on to the next part. Thus, the top-down web page can have a certain base set of features that all web browsers can display, plus particular features that exploit advanced features of today’s most advanced browsers, such as Netscape Navigator/Communicator and Microsoft Internet Explorer, both of which continue to enjoy dominant market positions. These two products are discussed in these pages more than many of the less-popular web browsers not only for the obvious reason of their popularity, but also because they present so many exciting possibilities. I’ll resist the urge to wax eloquent about the New Papyrus, but you get the idea.

As we go along, I'll point out differences in the way browsers interpret certain commands, show how to code functions in so that the same page can look "Netscape-enhanced" when it is viewed by Navigator users, and "Enhanced for Internet Explorer" when viewed by users of the Microsoft browser, while still allowing users of other web browsers to view the content, at least in a basic form. On my desk(s) as I write this are an alarming number of computers, hard disks, and other trappings of this new medium. If setting up your own server, order form or interactive discussion group is the Next Step for you, it’s here, as are tutorials on everything from recording audio over a telephone to creating wallpaper. If nothing else, we’ll all come out of this a bit more multimedia-oriented and platform-agnostic.

The Golden Rule of the Web is that it is essentially platform-neutral. It is important that your pages display well on a Mac, a PC, or whatever other kind of device might be out there surfing the Web. Of course, you'll probably be using a PC or a Mac to create your text, graphics and web-page layouts. As such, I'll be referring to various tools on the PC and Macintosh platforms as we go along. The Web is an unbelievably rich source with tools and examples suitable for users of both PCs and Macs. Let's get started, shall we?

Content and Audience

The way we choose and use our computers tells a lot about us. There are those who bought a computer because it was A Computer. Then, there are those who bought one to get a job done, or to facilitate learning. Web pages, too, serve to reveal our personalities. Are you process-oriented or goal-oriented? In Web pages, if you are process-oriented, you probably tend to focus on the content; goal-oriented individuals tend to think about their audience. Is the latter strategy right or wrong? In fact, the “right” method might be to approach the matter as holistically as possible, developing your pages with both in mind.

What is the message/who is the audience?

Exercise #1: pause and consider the McLuhanesque implications of the above question.

Start by putting yourself in your users' shoes. Why are they coming to your site? If you look at most Web sites, you'd presume that the answer is "User is extremely bored and wishes to stare at a blank screen for several minutes while a flashing icon loads, then stare at the flashing icon for a few more minutes."
-Philip Greenspun

When I get feedback and e-mail about my own web site, I find these to be useful questions to ask. Even if you employ the Field Of Dreams principle (“if you build it...”), it is ultimately the feedback you receive from those who come that can best reveal the nature of your creation.

Indeed, there are many reasons to create a web page. Originally, the Web was used primarily by academics to distribute research papers, scientific data and other scholarly documents. As the Internet became more commercialized, companies both large and small saw the immense potential of this medium for advertising and marketing, and a host of companies put up their own "home pages" to publish press releases, product specifications, promotional events, and so on. (And along with them came the dark-side denizens, with gambling, porn, etc.)

As the mainstream media began singing the praises of the Internet, the general public began to realize that the Web was an enormously diverse resource with applications in education, home-based business, news gathering, or simple entertainment. Along the way, many end-users became Web publishers themselves, posting pages on whatever topics interested them. Indeed, having one's own home page is practically de rigeur among Internet users these days.

Many of these end-users discovered, as you undoubtedly have, that Internet service providers often made it possible -- and in many cases very inexpensive and relatively easy -- for users to publish their own web pages. Not only did this prove to be easy enough, at least at a basic level, for "average users" to cope with, but the Internet was -- and remains -- a nearly endless supply of free tools to build them with. I have tested an appalling number of these HTML authoring tools and thrown several hard-disks’ worth into the Trash over the years. Rather than simply mention all 10,000 here, I’ve picked the ones that I find most useful; ones that have helped me solve specific problems. The best of these tools and their applications are described in the ten modules of this course, along with the URL (uniform resource locator) addresses on where to get the latest versions.

Of course, as the technology grew, new things became possible: animation, audio, 3-D graphics, monetary transactions and so on are but a few of the ways the web has evolved since its inception.

This course covers all of these topics, focusing on the tools I have found to be the best in each area. In most cases, there are freely downloadable tools of the freeware or shareware varieties to serve a particular purpose. In a few cases, though, when a commercial tool is clearly the best solution, I'll recommend and describe it first.

The final phase, of course, is uploading your web pages onto the Net. There are a number of ways to do this.

If you have built a site using Microsoft FrontPage, the FrontPage Explorer handles uploading automatically. Netscape Navigator Gold can also upload pages directly from its editor.

But for Windows users who prefer to upload manually, WS_FTP or a similar FTP tool remains a popular solution (and, in fact, it is what I usually use).

For Mac users, a program such as Fetch 3.0 is a good tool for uploading web pages or other files to an FTP or web site. The techniques for posting your web pages to the Net are described in the section entitled “Uploading.”

If, as we go along, there are other terms or procedures you don't understand, please remember to look in the index at the back, or search the net for more information. While this course is intended for inexperienced web authors, even those with considerable HTML authoring experience will undoubtedly be unfamiliar terms here and there, due to the rapidly changing nature of the Internet. To keep things rolling along, I will assume a certain level of familiarity with the HTML language and the various browsers in common use on the Web. As I mentioned a little earlier, this course is mostly about putting together creative and compelling web sites. It is not intended to be a reference manual on the basics of HTML. There are plenty of those out there already that you can freely download and print (“A Beginner’s Guide to HTML” at the Netscape Creating Net Sites page is a good introductory text), and heaven knows the world doesn't need yet another one.

So, if you don’t have a basic HTML reference text, start by downloading A Beginner’s Guide to HTML from

http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html

Additional HTML references are at Netscape’s Creating Net Sites page at http://home.netscape.com/assist/net_sites/index.html
Also, look for the book Forward Compatibility: Designing & Building With Standards by Jeffrey Zeldman, to be published by New Riders in early 2003.

The point of the Big Question at the intro to this section is to encourage you, dear reader, to think carefully about two things: the nature of the medium, and who your audience is. If you are designing a web site, you should consider the following points:

• who are the readers?
• why would they visit your site?
• do they have common questions, needs or concerns?
• how can you best communicate with them?
• what would make them come back?

As an exercise, it might be useful to write down an answer to each of the above questions.

Of course, you must also consider that which would make them not come back. This suggests that we ought to contemplate some of the problems that could be encountered.

What would make you not return to a web site?

• page crashed your browser
• screen was difficult or impossible to read
• ugly or offensive design or content
• useless or inappropriate information
• stale or obsolete content

If you are not all “exercised out,” think of a few more reasons why you would not return to a web site. Write them down.

Without a doubt, what annoys you tells a lot about you. Did your own list of objections focus on page elements that annoy you: blinking text, too many advertisements, distracting animations, or whatever? Or, did you concentrate on the nuts and bolts of Net-based content delivery?

• bandwidth limitations and performance issues
• language barriers
• compatibility problems with plug-ins, helper apps, or other software issues.

These are all worth thinking about, and it is probably safe to say that you can't please everyone.

However, as the webmaster of Canada's largest computer magazine, The Computer Paper, I received enough feedback (literally, thousands of messages!) to get a sense what works and what doesn't. The 1,000,000 readers of that publication made it amply clear what items they value most, and what they didn't care for.

What attracts readers

In my experience, there are several categories of content that are consistently popular:

• bizarre or humorous content
• controversial or thought-provoking content
• "gee whiz" technologies
• fresh news
• timely coverage and in-depth analysis of almost any topic

On my web site, I keep statistics to show what is popular and what is not. Here are some conclusions based on feedback and usage patterns:

1. Most people will follow the first link that appears interesting and, in turn, follow other interesting-sounding links from it as they go. While this seems pretty obvious, it means that you ought to position your "important" links first. Apparently, web-surfers are an easily distracted lot.
2. Many people have trouble dealing with pages that rely on plug-ins or "helper applications." A link to a help page doesn't seem to help.
3. Very, very few people are willing to "sign up" to gain access to a page that requires some form of registration, no matter how interesting the content there is. If you want to keep traffic low for whatever reason (perhaps an experimental in-house server is running on your office's ISDN line?), putting a registered-users-only web page is one way to do it. Of course, not publishing the address anywhere is another way.
4. The number of complaints about Frames diminished greatly after Netscape released Navigator 3.0, with its Back button that worked properly on frames-enabled pages. Nevertheless, many people still don't like frames.
5. Another thing that many people don't like is colored text on a colored background, no matter how aesthetically pleasing it may seem to you. Although there's the obvious subjective issue of whether they like your choice of colors or not, there's are occasional technical issues, too. The problem is that you can never be sure of how many colors or how many pixels the user has on his or her display. Hence, you might have carefully optimized your page to use only 80 colors from a Windows and Mac-friendly palette of 216 hues, but the next user that comes along with a PC set to 16 colors (or monochrome!) ends up with a mess. This topic, incidentally, is discussed in considerable depth later in this course, but for now, let's just say that multicolored backgrounds and low-contrast text don't work for enough users that it's worth thinking about.
6. The vast majority of web surfers are now using Internet Explorer. However, the once-dominant Netscape continues to matter, as do several others. The open-source Mozilla (based in part on Netscape code) is slowly but surely winning converts.
   Here are some related statistics:
   • The majority of web surfers are using Windows 98, Windows Me and Windows XP, in that order.
   • around 96% of surfers are using a Microsoft browser
   • About 1 out of 20 are Mac users
   • 1 - 3% were using Unix
   • one year after the introduction of Windows 95, Microsoft only 40% of Windows users on the web were running Windows 95.
7. Again, this is an obvious issue, but it's worth mentioning that the perceived lack of speed of your web page can be a major source of complaints. Optimizing your site's web pages is a major theme of the next module.
8. I am continually amazed at how much feedback I get about the various gimmicks and "gee whiz" effects on my web pages (indeed, it is how I came to write this manual!). In fact, seemingly trivial or inane effects often generate more positive feedback than content which required much more effort to produce. Certainly, many web surfers are attracted by novelty of an effect they haven't seen -- or haven't seen done as well -- before. Therefore, it is a good idea to redesign your pages periodically, adding or changing Java, GIF animations, tables, and other effects that can help make your pages have that “Whiz-bang” quality.

Welcome to HTM Hell

Throughout this document, I'll be addressing this theme in a variety of ways, but here is my list of the top five downfalls of Whizzy Web Pages:

1. the page causes problems or error messages on the reader's computer.
2. plagiarized content
3. screen is difficult to read or navigate
4. ugly or offensive design or content
5. stale or obsolete content

While I don't mean to make a value judgment by naming plagiarism as less heinous a crime than bad programming, a page that creates a problem is at the root of both items. (MacWorld has an excellent article on copyright laws that can help you avoid unnecessary grief.)

Items 3 and 4 are essentially subjective, while #5 can be arguably a desirable situation for historical research or archival reference, but is usually not a site that surfers will come back to again and again.

Virtually everything in this manual relates to these five items in one way or another. Just because you can do something, doesn't mean you should. I call it The Ian Malcolm Principle, in honor of Michael Crichton's fictional character from Jurassic Park. As we shall explore in the next section, a good design should exist without question.