Introduction

Welcome to HTML, XHTML, and CSS Bible, Fifth Edition. This book was conceived, designed, and written to provide a comprehensive overview of the two largest Web technologies, HyperText Markup Language (HTML) and Cascading Style Sheets (CSS).

This book serves as an introduction and reference to the information you need to create documents—simple and complex—for the World Wide Web.

A Brief History of the Internet and the World Wide Web

The World Wide Web is omnipresent in our lives today, and most computers and computerized devices are connected to it. However, the Web and its underlying Internet infrastructure had a very different childhood that betrays the consumer and commercial base it has today.

The Internet has its roots in the U.S. Department of Defense Advanced Research Project Agency (ARPA) project begun in or around 1960. Among the project's goals was the ability to network computers quickly and across great distances. The network was to be designed to be almost fail-safe, enabling connected computers to continue communicating even if assorted routes between them were to fail.

In 1969, the ARPANet was born, connecting several key universities. The network continued to grow, with more and more universities coming online. One of the goals of the initial project—robust, nearly fail-safe performance—was realized via the Internet Protocol (IP). This protocol enabled communication packets to find various routes to a destination in case one or more of the routes became unstable. This communication protocol became the backbone of today's Internet, and is how the Internet got its name.

The Transmission Control Protocol was joined with the IP to provide a robust transmission suite, a marriage of two protocols to offer more flexibility and the ability to create better communications applications for the Internet.

In the 1980s, the Internet went through several transitions. Although it was highly populated by educational institutions, the U.S. military hadn't forgotten its original project. Other government agencies also took notice and joined the crowd online; and the military decided to create its own network, MILNET, lessening the load slightly.

By 1992, the Internet was far and away the most popular network in the world. During this time, Tim Berners-Lee, a British software engineer and computer scientist, created HyperText Markup Language to create documents, a protocol—HyperText Transfer Protocol (HTTP)—to send such documents, and the first browser editor, called the World Wide Web. The "Web" soon came to the attention of the National Center for Supercomputing Applications (NCSA), where a programming team decided to create a better browser. Thus was Mosaic born, the first browser to support a high degree of multimedia. Mosaic helped usher in the crop of modern browsers we use today.

As the Web continued to be adopted outside of the government and educational sectors, it became more consumer-savvy. Many companies began using the Web infrastructure for marketing and support purposes, while many Web developers began to target a wider, nontechnical, audience.

By the early 2000s, the Web was accessible by almost any network-connected computer, many electronic devices, and some unlikely consumer devices such as automobiles. Each of these connected devices uses the same type of connection, the same languages to define documents, and the same protocols to send the information.

As more and more nontechnical users began using the Web, web "pages" began to look more like high-quality printed documents—resembling newspapers, brochures, magazines, and the like. This movement in content signaled how far the Web had come from its inception—from technical, text-only pages to full-color, heavily designed documents.

During the entire evolution of the World Wide Web, and especially in the last few years, standards, tools, and related applications have changed and evolved, sometimes at a very rapid pace. This gives Internet books a wide realm to cover.

What This Book Covers

What exactly is covered in this book? The easy answer is HTML and CSS, just as the title suggests; but with four plus notable versions of HTML, three plus notable versions of CSS, and a bevy of connected technologies, the answer is not so cut and dried.

The more exact answer is as follows:

• HTML 4.01/XHTML 1.1

• CSS 2.1

• JavaScript

• A few supporting applications to create and troubleshoot Web documents

• A few multimedia formats (graphics, video, and so on) and supporting applications

The following sections explain how these diverse sets of applications converge.

HTML 4.01/XHTML 1.1

HTML 4.01 is the latest version of HTML. This version is very stable, having been released in December 1999. Although HTML version 5 (HTML5) is in draft stage as of this writing, the specification is probably a good year (or so) away from actual release.

Note, however, that this book promotes and uses XHTML 1.1 standards. This includes standards such as the following:

• Every tag needs to be explicitly closed, whether by a matching closing tag or a slash at the end of a tag (if it has no matching closing tag).

• Every tag must be in lowercase; in other words, use <p> instead of <P>.

• Every tag attribute needs to be enclosed in quotes.

• Every tag attribute must have a value—for example, the attribute selected should be selected ="selected" instead.

Although these standards are not a mandatory part of HTML 4.01, they are covered in this book because the XHTML standards are stricter, don't hamper HTML, and prepare you for authoring documents in other XML-based languages.

CSS 2.1

The latest CSS version is 2.1. Although version 3.0 is in development, its release might still be years away. Therefore, this book concentrates on CSS 2.1 due to its maturity. CSS version 2.0 has been around for almost a decade, is used for millions of Web pages, and is well understood by most Web designers. CSS version 2.1 combines some bug fixes, exact specifications where there was some ambiguity, and a few more properties and values. At its core, however, it is very much like version 2.0.

Although the CSS version 3.0 specification exists in draft form and has certain features adopted into certain user agents, it is far from being viable for a wide audience. As such, it is safer to stick with the existing 2.1 standard.

User Agent (Browser) Coverage

As mentioned earlier in this introduction, in 1993 Mosaic was the first widely used browser for effectively browsing the Internet. Over the years many other browsers were developed—the list is long and varied. For example, the text-only browser Lynx was developed mostly for Unix/Linux use when graphics were scarce. Other browsers such as Opera were developed to remain a pure environment, rigidly supporting the current HTML and CSS standards.

The two staples of browser-dom, IE and Firefox, continue to dominate today's market but also continue to adopt their own standards in various ways that frustrate even the most seasoned Web developer.

Over the last few years, Mac users have had Safari, a Mac-native browser. Safari hasn't been known for its speed or adherence to standards, but it does give Mac users an alternative to Microsoft Internet Explorer.

In 2009, Google's Chrome browser was released, adding yet another platform to the mix. Chrome provides many enticing features, such as a robust security framework and decent compatibility, although it is still in its infancy despite being the fourth most widely used browser. As it matures it will no doubt go through its own growing pains, including support of standard XHMTL and CSS.

So, with all these browser options, which browser(s) are specifically covered in this book? Specifically, none of the above. Rather than cover the technology of any particular browser(s), this book concentrates on the current standards of XHTML and CSS. The technologies are presented in their ratified standard form. Browser support is mentioned where appropriate, but browser-specific hacks or workarounds are not covered.

This decision regarding what to include keeps the book content from being too confusing while trying to cover the various quirks of various browsers, and keeps the book a manageable size.

Web 2.0

In 2004, a new World Wide Web was heralded: "Web 2.0." This new age of the Web was to facilitate interactive information sharing, interoperability, user-centered design, and collaboration.

In the next few years several outlets for this new frontier were born. They included blogs, web-based communities, hosted services, and a bevy of social-networking and collaborative sites. It seemed as though the new Web was coming into its own. Except, this new Web was nothing new.

Web 2.0 is built on the same technologies as the original and normal Web: (X)HTML, CSS, JavaScript, etc. The only difference was that the new application of the technology was much more focused on social and collaborative features. If one were to follow the evolution of the web—from academia, through business marketing, through personal use—social uses would be the next step of the evolution of the Web. This step would be a natural evolution, not the technical revolution foretold. This book takes the position that Web 2.0, as defined back in 2004, never actually took root. Instead the spirit of the use of technology on the Web reached a natural point in its evolution, using the same tools and technologies that created the Web. As such, you will not find any specific Web 2.0 coverage within this book, but will be able to employ the building blocks that are covered for a wide range of purposes, including social and collaborative online tools.

Terminology

To stay progressive with the evolution of the Web and its direction today, this book uses less technical and more progressive terminology.

For example, you will seldom, if ever, see the words "page" or "Web page" used to refer to Web content in this book. That's because as the Web has matured as a publishing medium, words such as "document" are much more apt for describing content on the Web.

Similarly, the word "browser" is a bit passé, and is therefore rarely used. In the past, applications such as Mosaic, Mozilla, Firefox, Opera, and Internet Explorer were the only game in town when it came to accessing the Web. Such applications, which were primarily used to "browse" content on the Web, were aptly dubbed "browsers."

However, the devices and applications used to access Web content today are much broader:

• Personal electronic devices

• Onboard vehicle systems

• Entertainment system controllers

• Mall kiosks

Many of these Web-enabled applications are not like traditional browsers. They may access data differently, present data differently, and might be controlled differently than a browser. A better term for these applications is user agent, which basically means "something that enables a user to access data," which is what each of these does. For that reason, get used to seeing user agent instead of browser.

Who Should Read This Book?

This book is geared toward a wide audience. Readers who are just getting started with HTML and Web content will benefit the most, as this book provides both a solid learning foundation as well as ample reference material for later perusal. Experienced users will find the chapters covering new standards and technologies to be the most useful, but also will appreciate having a comprehensive reference for consultation.

Although the Web is technical in nature, this book boils down the technology into simple and straightforward terms. Whether you qualify as a computer scientist or as a computer neophyte, you will be able to understand, adopt, and deploy the information throughout this book.

This Is Not a Web Design Book

This book teaches the basics of HTML elements, how to integrate said elements, and finally how to layer CSS over the top. Design books generally skimp on the building-block detail, only covering how to best use the elements to achieve cosmetically pleasing results. While each type of book does cover principles of the other, the cross-over content is not comprehensive.

Typically, both approaches do not appear in the same book due to size constraints. The other reason why the two approaches are different has to do with the separation of content and design. This book concentrates on the content portion of Web design, whereas other design-centric books cover the design (visible attributes).

Wiley publishes many Web design books that can be paired with this book to provide a wide range of skills and techniques for creating technically correct and visually pleasing documents. Two such recommendations include: Creating Web Sites Bible, Third Edition, by Philip Crowder and David A. Crowder (2008). Beginning CSS Cascading Style Sheets for Web Design, 2nd Edition, by Richard York (Wrox, 2007). Visit the Wiley website (www.wiley.com) and search on "web design" to find other books applicable to your needs.

What Is Contained in This Book?

This book is divided into four major sections, plus five appendixes.

Part I: Creating Content with HTML

This part of the book covers the basics of HTML—the tags, attributes, and structure that make up the language. You learn how to structure a document, format text, and incorporate multimedia. You also learn basic and advanced scripting to lend a dynamic edge to your documents.

Part II: HTML Tools and Variants

This part of the book covers utilities to help you author, validate, and troubleshoot your documents. A few useful HTML variants and extensions—including XML and XHTML Basic—are also covered.

Part III: Controlling Presentation with CSS

This part of the book covers the basics of CSS, the syntax of CSS selectors, valid properties and values, and how to use CSS properties to effectively format the various portions of your document. You will also learn how to format a document for printing using CSS media types.

Part IV: Additional CSS Tools

The last part of this book covers additional CSS topics, including advanced layout, user interface styles, testing and validating CSS, and some CSS tips and tricks.

Reference Appendixes

The appendixes provide a quick reference to the material covered in detail throughout the rest of the book.

See the Table of Contents for a breakdown of chapter topics in each part.

How to Use This Book

This book can be used in a variety of ways depending upon your skill level and intent.

The sequential read

If you need to learn HTML and CSS from beginning to end, then a sequential read—reading the chapters in order from beginning to end—is for you. The chapters are designed to introduce topics in a particular order to get you started and build toward more advanced topics.

For a tutorial approach, choose a sequential read.

A targeted or random read

If you need only a refresher of certain material or want to learn in a different order than the chapters provide, then a targeted or random read—finding a topic in the table of contents or index to read, or reading chapters in a different order than numbered—is for you. Although the chapters were written to build on one another, they also are topical and encapsulate individual subjects. Find a chapter with information you need to learn and read it, or find a section within a chapter and read it alone.

For a referential approach, choose a targeted or random read.

Conventions and Features

Many different organizational and typographical features are used throughout this book to help you get the most from the information contained within.

Tips, Notes, and Cross-References

Whenever the author wants to bring something important to your attention, the information appears in a Tip, Note, or Cross-Reference. These elements are formatted as follows:

This information is important and is set off in a separate paragraph with a distinct look.

Tips generally are used to provide information that can make your work easier—special shortcuts or methods for doing something more easily than the norm.

Notes provide additional, ancillary information that is helpful but somewhat outside the scope of the material presented.

Cross-references indicate other places in the book you'll find information pertinent to the topic at hand.

Code

It is often necessary to display code (HTML tags, JavaScript commands, script listings) within the text. This book uses two distinct conventions, depending on where the code appears.

Code in text

A special font is used to indicate code within normal text. For example:

<body id="COMPONENT-body-0001" onLoad =" displaygraphics();">.

Code listings

This code is set apart and indented from regular text, as follows:

Code listings appear in specially formatted listings, in a different
font, similar to these lines.***

Companion Website

A companion website has been created to help support this book. It contains code from the book and examples within, as well as extra material not contained in this book. The website can be found at www.wiley.com/go/htmlbible5e.