• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



The World Wide Web is the Gutenberg press of our time. Just about anyone can create their own Web site and then present it to the Internet public. Some Web pages belong to businesses with services to sell, others to individuals with information to share. You get to decide what your page will be like.

All Web pages are written with HTML. HTML lets you format text, add graphics, sound, and video, and save it all in a Text Only or ASCII file that any computer can read. (Of course, to project video or play sounds, the computer must have the necessary hardware.) The key to HTML is in thetags, keywords enclosed in less than (<) and greater than (>) signs, that indicate what kind of content is coming up.

Using the latest versions!

This book explains how to create Web pages using HTML 4 and Cascading Style Sheets, Level 2, which are currently the latest versions of each.

While there are many software programs that will create HTML code for you (see page 350), learning HTML yourself means you'll never be limited to a particular program's features. Instead you'll be able to add whatever you need without having to struggle with confusing software or wait for software updates.

In this book, you'll find clear, easy-to-follow instructions that will take you through the process of creating Web pages step-by-step. It is ideal for the beginner, with no knowledge of HTML, who wants to begin to create Web pages.

If you're already familiar with HTML, this book is a perfect reference guide. You can look up topics in the hefty index and consult just those subjects about which you need more information.

The Internet, the Web, and HTML

Sure, you've heard of the Internet, but what is it exactly? Simply put, the Internet is a collection of computers that are all connected to each other. Some people, typically at universities and large companies, have 24-hour connections, while others use a modem to link their home computers during a certain amount of time each day. Regardless of the type of connection, once you're on, you and your computer become a part of the Internet and are linked to every other computer that's also connected at that moment.

Figure i.1. Many pages, like the one shown, look almost the same on Internet Explorer for Windows 5 (top) and Netscape Communicator 4 for Macintosh. (You'll learn how to create layouts like these in Chapter 9, Tables.)

The World Wide Web, for its part, is much more ethereal. It is an ever-changing, kaleidoscopic collection of hundreds of millions of documents, all of which reside someplace on the Internet and are written in HTML.

HTML, or HyperText Markup Language, has two essential features—hypertext and universality. Hypertext means you can create a link in a Web page that leads the visitor to any other Web page or to practically anything else on the Internet. It means that the information on the Web can be accessed from many different directions. Tim Berners-Lee, the creator of the Web, wanted it to work more like a person's brain and less like a static source of data, such as a book.

Universality means that because HTML documents are saved as ASCII or Text Only files, virtually any computer can read a Web page. It doesn't matter if your visitors have Macintosh or Windows machines, or whether they're on a Unix box or even a hand-held device like a Palm. The Web is open to all.

Open but Not Equal

However, while HTML is available to all, that doesn't mean that everyone experiences it the same way. It's something like Central Park in New York City. You and I can both go take a walk there. However, if you live in a penthouse apartment on Fifth Avenue and I sleep on a bench, our view of the park will be quite different.

Figure i.2. Take a closer look. In Explorer for Windows (top), all of the text—especially the header— is much larger than in Netscape for Macintosh. Images generally change little from browser to browser and platform to platform.

So it is with HTML. While practically any computer can display Web pages, what those pages actually look like depends on the type of computer, the monitor, the speed of the Internet connection, and lastly, the software used to view the page: thebrowser. The most popular browsers today are Internet Explorer and Netscape Communicator. There are versions of each for both Windows and Mac. Unfortunately none of these displays a Web page exactly like the next (Figure i.2). So, in other words, it's not enough to design a beautiful park, you've also got to worry about your visitor's accommodations.

But as you worry, remember that your control is limited. While the New York City Tourist Board would like to ensure that everyone has a good time in their town, they're not handing out free vouchers for rooms at the Park Plaza Hotel. You can't either. You can only be aware that folks are viewing your pages with different setups and then create your pages accordingly—so that the largest number of visitors can view your page as close to the way you want them to as is possible. This book will show you how.

The Browser Wars

Now imagine what would happen if each hotel and apartment building on Fifth Avenue staked out a bit of Central Park and put a fence around it, limiting access to its own residents. It's bad enough that those of us on park benches can only glimpse in to "exclusive" areas. But, there's also the problem that folks from one hotel can't get to the piece of park that belongs to the other hotel. Instead of a rich, public resource, teeming with rollerbladers, hot dog carts, and strolling elders, the park is divided into small, sterile, isolated lots. This is what is happening on the Web.

In 1994, Netscape put up the first fences on the Web in the so-called browser wars. In order to attract users, they threw universality to the wind and created a set of extensions to HTML that only Netscape could handle. For example, Web surfers using Netscape could view pages with different size and color text, photographs (in JPEG format), background color and images, and in later versions, multiple pages in a single window, called frames. Surfers with any other browser would get errors and funny looking results. Or nothing at all.

But people liked those extensions so much that they flocked to Netscape's "hotel". By June of 1996, it had become the most popular computer program in the world with 38 million users.

Microsoft soon joined in and started fencing in its own chunk of the Web. Again, to attract users they added non-standard extensions to HTML that only Internet Explorer, Microsoft's browser, could recognize.

So who do you design for? Netscape users or Explorer users? It's a designer's nightmare. And the Web is suffering because of it.

The Push for Standards

The Web's United Nations is an organization called theWorld Wide Web Consortium (http://www.w3.org), often abbreviated as W3C, and directed by the Web's inventor, Tim Berners-Lee. Their aim is to convince the Web community of the importance of universality while attempting to satisfy its thirst for beautiful looking pages. They want to take down the fences.

Both Netscape Communications (now a part of America Online) and Microsoft are members of the W3C, as are other important Web-related companies, including Adobe and Macromedia (makers of some of the more important Web tools), and many others. The idea is that these companies come together and agree on the standards and then try to differentiate their products with speed, ease of use, price, or other features that don't turn the Web back into the tower of Babel.

Unfortunately, the W3C can not completely control the efforts of its members, it can only suggest compliance. And its members continue to strive for the biggest, baddest piece of software on the Web—and then to sell lots of copies of it.

According to TheWeb Standards Project (http://www.webstandards.org), founded by a coalition of top-flight designers disgusted with the increasing fragmentation of the Web, Web designers waste an incredible 25% of their time devising workarounds for proprietary tags, writing multiple versions of pages to satisfy each browser, and simply educating their clients about the impossibility of creating certain effects for all browsers.

The Current Battlegrounds

While support for the HTML 4 specification recommended by the W3C is almost complete, there continue to be skirmishes around several other key issues.

Cascading Style Sheets

One of the W3C's major efforts at peacekeeping was to develop Cascading Style Sheets (CSS), a system that separates the content of a page (written in HTML) from the format (written in CSS) and in so doing allows for more complete control over the design of a Web page while keeping the page universal. In addition, CSS can be applied to several pages at once, helping the designer save time by storing all the formatting in one file.

Figure i.3. Netscape Communicator 4's woefully inadequate support for Cascading Style Sheets (bottom) in comparison to Internet Explorer 5 (top) is one of the major factors leading to its loss in popularity on the Web. It also makes designing cross-browser pages something of a nightmare. (Both illustrations are from Windows machines.)

That was the theory, anyway. In practice, neither Microsoft nor Netscape, despite having participated in the development of CSS, has gotten around to fully implementing it in their browsers. In fact, the browser that best supports CSS is a newcomer to the battle: Opera, developed in Norway by a company whose chief technical officer is Håkon Lie, one of the major forces behind CSS at the W3C.

The lack of universal support for CSS has not discouraged designers from using it, however. CSS's powerful formatting and layout capabilities have attracted designers in much the same way that Netscape's extensions did in their day. With much the same problems: pages that work only on some browsers and that completely break down in others.

JavaScript, DOM, and DHTML

Advanced Web designers often use a scripting language called JavaScript and a system of naming the parts of the Web page—the Document Object Model, or DOM—together with HTML and CSS to create dynamic content on a page. These effects are sometimes called Dynamic HTML or DHTML.

While JavaScript has been standardized asECMAScript, (http://www.ecma.ch/stand/ECMA-262.htm), the major browsers have not come to an agreement about the DOM, despite the fact that the W3C has already issued a recommendation (http://www.w3.org/DOM/) about what it should look like.

What To Do?

The Web Standards Project (see page 15) is demanding that each browser support CSS1, the DOM, and ECMAScript before slapping on any additional proprietary features. Until that happens, however, each Web designer will have to think about what kind of browser and computer their public is likely to use and then design their pages accordingly.

For example, if your desired audience is a group of cutting-edge Web designers, you can probably get away with using fewer standard tags and proprietary extensions—those folks probably have the latest version of Explorer or Netscape. On the other hand, if you want to reach the widest public possible, you may want to design for the lowest common denominator, eschewing CSS and DHTML altogether, and making your pages sharp, fast, and above all else, universal.

In addition, you might want to take a look at Statmark's site (http://www.statmark.com), which offers statistics that reveal how many folks are using which browsers, on which platforms, with what kind of monitors, on which days of the week, and at what time of day (really!) You can use this incredibly rich source of data to help ensure that your pages are well designed for the majority of Web surfers.

This book explains all the standard HTML tags as well as the few non-standard extensions that are still supported only by Netscape or only by Explorer (which are marked with an appropriate icon). It also describes Cascading Style Sheets Level 2 in detail. Note that some versions and platforms of some browsers do not completely support the HTML 4 or CSS specifications.

Figure i.4. In this book, non-standard HTML code that is only recognized by Netscape is marked with the N only icon (left). Non-standard code that is only recognized when viewed with Internet Explorer is marked with the IE only icon (right).

The Future: XML

One of the problems with the Web is that there is so much information, it's sometimes hard to find what you're looking for. Even the search indexes like AltaVista and Yahoo have a hard time keeping track of all of the pages. At present, the best search engine has catalogued less than 15% of the Web.

Part of the W3C's answer to this problem is XML, Extensible Markup Language. XML, a sort of cousin to HTML, has two important features. First, it allows Web page creators to create their own tags according to their needs: A Wall Street broker's page might have <stockname> and <openbid> tags, while a Llama farm's page might have <sire> and <cria> tags.

Second, XML completely separates content from formatting through the use of style sheets. That means that there is no data in an XML document contained in tags that only give formatting instructions. Rather, all the data is identified by the XML tags in which it is enclosed. Pages written in XML will be much easier for computers to read and to catalog, making search engines more powerful and the Web a more useful tool.

The problems? First, at present, only Internet Explorer 5 can read XML files directly. Older browsers need XML to be converted to HTML before viewing. Second, and more importantly, XML is nowhere near as forgiving as HTML. In fact, it's downright persnickety. It fusses about upper- and lowercase letters, quotation marks, and closing tags, among other things. Since many Web designers won't directly feel the benefits of XML's advanced features, XML's pickiness may mean that most regular folks will stick with HTML—which should be fine. Browsers will continue to support HTML for years to come.

The HTML VQS Web Site

With the Web constantly changing, it seemed most appropriate to add a dynamic element to this book: the HTML VQS Web site. In fact, there are two.

At http://www.peachpit.com/vqs/html4 you can find the full table of contents, all of the example files, an excerpt from the book, and a list (hopefully short) of errata.

At http://www.cookwood.com, you'll find a gallery of pages created by folks who have read this and earlier versions of this book, links to reviews and comments, updates, and all of the example files.

You'll also find a lively Question and Answer board (http://www.cookwood.com/html4_4e/qanda) where you can post your most vexing questions—and easy ones too. I hang out there regularly and will do my best to answer. If you're so inclined, feel free to step in and answer questions yourself. Your help will be greatly appreciated.

And you can always write me directly at html@cookwood.com with any questions, suggestions, or even complaints that you may have.

See you on the Web!

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint