• 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 some form of 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 the tags, keywords enclosed in less than (<) and greater than (>) signs, that indicate what kind of content is coming up.

While there are many software programs that will create HTML code for you (see page 462), 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.

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 some form of 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 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.

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: the browser. The most popular browsers today are Internet Explorer, Netscape Communicator, and Opera, with handhelds and PDAs on the way. Unfortunately, none of these displays a Web page exactly like the next. So it turns out 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, and some people wouldn’t accept them even if they did, preferring instead a bed and breakfast or their sister’s house. You get the idea. The moral is this: People will be viewing your pages with vastly different setups. 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 colored text, photographs, and other improvements. 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 1996, it had become the most popular computer program in the world. Microsoft started fencing in its own chunk of the Web. Again, to attract users they added non-standard extensions that only Internet Explorer, Microsoft’s browser, could recognize.

According to The Web Standards Project (www.webstandards.org), founded by a coalition of top-flight designers disgusted with the increasing fragmentation of the Web, Web designers wasted 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. It was a mess.

The Push for Standards

The Web’s United Nations is an organization called the World Wide Web Consortium (www.w3.org), often abbreviated as W3C, and directed by the Web’s inventor, Tim Berners-Lee. Its 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 Webrelated 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.

HTML 3.2: Standardization begins

The W3C’s first answer to the Web’s balkanization was to standardize the proprietary extensions, including some in the official specifications and removing others altogether. At the same time, they encouraged browser manufacturers to support the official HTML specifications as closely as possible, so that a Web page written to standards would behave the same way across browsers.

HTML 4 and CSS

The W3C’s next move was much more bold. The old version of HTML joined content, structure, and formatting instructions in a single document, which was simple but not very powerful. The W3C envisioned a new system in which formatting instructions could be saved separately from the content and structure and thus could be applied not just to a single paragraph or Web page but to an entire site, if so desired. So, in the new HTML version 4, the W3C marked most of the formatting elements for future removal from the specifications. These elements would henceforth be deprecated, and their use discouraged. At the same time, they created the new system for formatting instructions—called Cascading Style Sheets, or CSS— to fill the gap.

The original specifications for Cascading Style Sheets mostly limited themselves to recreating HTML effects. CSS Level 2, published in 1998, however, brought new capabilities, in particular the ability to position elements on a Web page with great precision. CSS could now not only recreate HTML’s formatting, it could make professional looking layouts.

However, between proprietary extensions and just plain sloppy code, HTML pages themselves were still a mess. Most browsers bent over backward to accommodate them, always in slightly different ways, which just made the whole situation worse. And there was still no standard system for adding new features. HTML was simply not a sturdy enough platform upon which to build. The W3C decided that we all needed a bit of structure. Their answer was XML, or Extensible Markup Language.


From the outside, XML looks a lot like HTML, complete with tags, attributes, and values. But rather than serving as a language just for creating Web pages, XML is a language for creating other languages. You can use XML to design your own custom markup language which you can then use to format your documents. Your custom markup language will contain tags that actually describe the data that they contain.

And herein lies XML’s power: If a tag identifies data, that data becomes available for other tasks. A software program can be designed to extract just the information that it needs, perhaps join it with data from another source, and finally output the resulting combination in another form for another purpose. Instead of being lost on an HTML-based Web page, labeled information can be reused as often as necessary.

But, as always, power comes with a price. XML is not nearly as lenient as HTML. To make it easy for XML parsers—software that reads and interprets XML data—XML demands careful attention to upper- and lowercase letters, quotation marks, closing tags and other minutiae. In addition, there are billions of Web pages already written in HTML and millions of servers and browsers that already know how to read them.

The solution was quite clever. The W3C rewrote HTML in XML. This new language has all of the features of HTML and thus can be understood by every browser on the planet. And since its entire lexicon comes from HTML, people who already know HTML only have to learn a few basic syntax rules before they’re off and running. And at the same time, since it uses XML’s syntax, it gains all of XML’s power and flexibility and is a perfect foundation for CSS. It is the best of both worlds. It’s name? XHTML.

The Real World

While XHTML and CSS are a powerful combination, there is one small wrench in the works: browser support. While it didn’t seem to be much of a problem to add extensions willy-nilly, when it came down to serious and full support of the specifications, no browser has yet been up to the task. At the same time, it’s important to note that they’ve come a long way.

Netscape 6, completely reformed from its extension madness days, now boasts the most complete support for CSS. Opera 6, though lesser known, is a fast, lean browser with excellent CSS support. And the market frontrunner, Internet Explorer 6, is not far behind, although it still has a number of glaring bugs.

However, while current browsers finally support most of CSS, not everyone uses a current browser. While estimates vary, perhaps 10% of the Web-surfing public still use a browser with marginal CSS support, which may not sound like a lot until you translate it to the 50 million people it represents.

At the same time, we can’t wait forever. One option, espoused by the folks at A List Apart[1], a leading Web design online magazine, is to write XHTML/CSS based pages that look brilliant on standards-compliant browsers and reasonable, if a bit simpler, on older browsers. A note appears in the pared down version explaining the situation and suggesting an upgrade. Whether that solution works for you depends on your circumstances and perhaps your boss.

[1] http://www.alistapart.com/stories/tohell/

What Should You Use?

And now an admission. I liked HTML. I thought it was great that you didn’t have to obsess over punctuation. Maybe I’m just lazy, but I honestly believe that the Web’s popularity is due in part to the fact that browsers cut us all some slack. It made it easy to write Web pages, and so all of us did. Now, two billion pages later, perhaps it’s time to change our ways. Or perhaps not.

There are a lot of people out there that will tell you that HTML is evil and XHTML is the only solution. I think that’s silly. XHTML is a great improvement over HTML. It’s stronger, more flexible, more powerful, more likely to be supported in the future, and can be expanded to fit any need. But I’ll tell you something. Sometimes you don’t need to fill every need. Sometimes, you just want to publish a simple page without stressing over every last quotation mark.

Luckily there is a lot of middle ground. There are actually three standard flavors of both HTML and XHTML. The first, called transitional, allows the use of the deprecated tags. The second, called frameset, allows both the use of deprecated tags and the use of frames, which we’ll discuss later in this book. The third flavor,strict, prohibits the use of any of the deprecated tags. You can combine each of these flavors in varying degrees with CSS. Which combination you choose may depend on several factors. (Keep reading.)

Deciding between HTML, XHTML, and CSS

While I don’t recommend using proprietary extensions—since they leave out part of your audience—there are a lot of other options. Here are some guidelines.

  • The bigger the site, the more important it is that you use CSS and XHTML. The former makes it easy to apply, edit, and update formatting across the entire site; the latter gives your page the structure it needs to make sure it lasts into the future.

  • Many companies and government agencies, including the U.S. government, require that your Web page fulfill specific accessibility requirements in order to make their sites available to people with disabilities. In these cases, you should adhere as closely as possible to XHTML strict, with CSS for formatting. And be sure to check the company’s or agency’s pertinent guidelines for details in your particular case.

  • Large commercial sites that want to reach the widest audience may opt for transitional XHTML, taking advantage of some deprecated tags’ practically universal support, while banking on XHTML’s rock-solid stability. These kinds of sites will very likely shift to the more powerful CSS as support continues to increase.

  • Small or personal sites may want to take advantage of HTML’s easy going syntax along with CSS’s powerful formatting and an occasional deprecated tag where necessary.

  • My personal choice is to use XHTML and CSS and a bare minimum of deprecated tags.

How This Book Works

If you’ve ever been to a different part of your country than where you’re from, you’ve probably noticed how the folks there talk, well, a little funny. They use different words or they say them with a different accent. And yet, you understand them just fine even if you chuckle about it in the car afterwards. That’s the way it is with HTML and XHTML. In their case, they share precisely the same vocabulary (to the letter) but have a slightly different syntax.

Since they are so similar, I’ll teach you HTML and XHTML at the same time. I’ll start by explaining the syntax differences that distinguish them. And then throughout the book I will explain the vocabulary that they share. In those explanations, I use the stricter XHTML syntax. You can either use it as is (to write XHTML), or opt for the looser HTML syntax (to write HTML). The choice is yours.

It would be tiresome to have to refer to HTML and XHTML all the time, so I have chosen to use the abbreviated (X)HTML to refer to both at once. In the few instances I use one of the individual names, you’ll know that the information pertains to that language only and not to the other.

CSS is incorporated into the descriptions of (X)HTML—again, that means, both HTML and XHTML—as a natural extension and yet a separate tool. While the information about CSS is concentrated in Chapters 811, you’ll find bits and pieces throughout the book, next to the part of (X)HTML to which it is most applicable.

I have taken pains to offer illustrations from all of the major browsers, on both platforms. While you may stick with one browser on your computer, there’s no telling what your visitors will use. It’s a good idea to get used to how other browsers treat (X)HTML.

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 5th edition Web site (http://www.cookwood.com/html/).

On my site, you’ll find the full source code for every one of the examples in this book, including the (X)HTML and the CSS (http://www.cookwood.com/html5ed/examples/), a list of errata, updates, articles, reviews and comments, a complete discussion of the new features in this edition, and even the full table of contents and index.

There are also several resources available on my site that I hope you’ll enjoy, including color tables, symbol and character tables, pixel shims, and complete lists of both (X)HTML elements and attributes and of CSS properties and values.

Next, as I was writing this book, I amassed a collection of lesser tips and tricks that simply didn’t fit on the appropriate page. I’ve made them all available on the site.

Finally, you’ll find a lively Question and Answer board (www.cookwood.com/html/qanda) where you can post your most vexing questions—and easy ones too. While I hang out there and will do my best to answer, there is a dedicated team of Web designers who usually beat me to the punch. If you’re so inclined, feel free to step in and answer questions yourself. Your help will be greatly appreciated.

See you on the Web!

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