By Chuck Musciano, Bill Kennedy

Cover | Table of Contents | Colophon

Table of Contents

Chapter 1: HTML, XHTML, and the World Wide Web

Content preview·Buy reprint rights for this chapter

Though it began as a military experiment and spent its adolescence as a sandbox for academics and eccentrics, recent events have transformed the worldwide network of computer networks—also known as the Internet—into a rapidly growing and wildly diversified community of computer users and information vendors. Today, you can bump into Internet users of nearly any and all nationalities, of any and all persuasions, from serious to frivolous individuals, from businesses to nonprofit organizations, and from born-again Christian evangelists to pornographers.

In many ways, the World Wide Web—the open community of hypertext-enabled document servers and readers on the Internet—is responsible for the meteoric rise in the network's popularity. You, too, can become a valued member by contributing: writing HTML and XHTML documents and then making them available to web surfers worldwide.

Let's climb up the Internet family tree to gain some deeper insight into its magnificence, not only as an exercise of curiosity, but to help us better understand just who and what it is we are dealing with when we go online.

Although popular media accounts are often confused and confusing, the concept of the Internet really is rather simple. It's a worldwide collection of computer networks—a network of networks—sharing digital information via a common set of networking and software protocols. Nearly anyone can connect a computer to the Internet and immediately communicate with other computers and users that are on the Net.

Networks are not new to computers. What makes the Internet global network unique is its worldwide collection of digital telecommunication links that share a common set of computer-network technologies, protocols, and applications. So whether you use a PC with Microsoft Windows 2000 or Linux or have an ancient Apple IIe, when connected to the Internet, the computers all speak the same networking language and use functionally identical programs so that you can exchange information—even multimedia pictures and sound—with someone next door or across the planet.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Internet, Intranets,and Extranets

Content preview·Buy reprint rights for this chapter

Although popular media accounts are often confused and confusing, the concept of the Internet really is rather simple. It's a worldwide collection of computer networks—a network of networks—sharing digital information via a common set of networking and software protocols. Nearly anyone can connect a computer to the Internet and immediately communicate with other computers and users that are on the Net.

Networks are not new to computers. What makes the Internet global network unique is its worldwide collection of digital telecommunication links that share a common set of computer-network technologies, protocols, and applications. So whether you use a PC with Microsoft Windows 2000 or Linux or have an ancient Apple IIe, when connected to the Internet, the computers all speak the same networking language and use functionally identical programs so that you can exchange information—even multimedia pictures and sound—with someone next door or across the planet.

The common and now quite familiar programs people use to communicate and distribute their work over the Internet have also found their way into private and semi-private networks. These so-called intranets and extranets use the same software, applications, and networking protocols of the Internet. But unlike the Internet, intranets are private networks, usually unconnected to outside institutional boundaries and with restricted access to only members of the institution. Likewise, extranets restrict access, but use the Internet to provide services to members.

The Internet, on the other hand, seemingly has no restrictions. Anyone with a computer and the right networking software and connection can "get on the Net" and begin exchanging their words, sounds, and pictures with others around the world, day or night: no membership required. And that's precisely what is confusing about the Internet.

Like an oriental bazaar, the Internet is not well organized, there are few content guides, and it can take a lot of time and technical expertise to tap its full potential.That's because . . .

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Talking the Internet Talk

Content preview·Buy reprint rights for this chapter

Every computer connected to the Internet (even a beat-up old Apple II) has a unique address: a number whose format is defined by the Internet Protocol (IP), the standard that defines how messages are passed from one machine to another on the Net. An IP address is made up of four numbers, each less than 256, joined together by periods, such as 192.12.248.73 or 131.58.97.254.

While computers deal only with numbers, people prefer names. For this reason, each computer on the Internet also has a name bestowed upon it by its owner. There are several million machines on the Net, so it would be very difficult to come up with that many unique names, let alone keep track of them all. Recall, though, that the Internet is a network of networks. It is divided into groups known as domains, which are further divided into one or more subdomains. So, while you might choose a very common name for your computer, it becomes unique when you append, like surnames, all of the machine's domain names as a period-separated suffix, creating a fully qualified domain name.

This naming stuff is easier than it sounds. For example, the fully qualified domain name www.oreilly.com translates to a machine named "www" that's part of the domain known as "oreilly," which, in turn, is part of the commercial (com) branch of the Internet. Other branches of the Internet include educational institutions (edu), nonprofit organizations (org), U.S. government (gov), and Internet service providers (net). Computers and networks outside the United States may have a two-letter abbreviation at the end of their names: for example, "ca" for Canada, "jp" for Japan, and "uk" for the United Kingdom.

Special computers, known as name servers, keep tables of machine names and their associated unique IP numerical addresses and translate one into the other for us and for our machines. Domain names must be registered and sometimes paid for through the nonprofit organization InterNIC. Once registered, the owner of the domain name broadcasts it and its address to other domain name servers around the world. Each domain and subdomain has an associated name server, so ultimately every machine is known uniquely by both a name and an IP address.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

HTML: What It Is

Content preview·Buy reprint rights for this chapter

HTML is a document-layout and hyperlink-specification language. It defines the syntax and placement of special, embedded directions that aren't displayed by the browser, but tell it how to display the contents of the document, including text, images, and other support media. The language also tells you how to make a document interactive through special hypertext links, which connect your document with other documents—on either your computer or someone else's, as well as with other Internet resources, like FTP.

The basic syntax and semantics of HTML are defined in the HTML standard, currently Version 4.01. HTML has matured in barely eight years, having gone through at least four iterations in as many years. At one time, a new version would appear before you had a chance to finish reading this book. Today, the pace of change has slowed. Now the wait is for browser manufacturers to implement the standards.

Browser developers rely upon the HTML standard to program the software that formats and displays common HTML documents. Authors use the standard to make sure they are writing effective, correct HTML documents.

However, the standard is not always explicit; manufacturers have some leeway in how their browser might display an element. And to complicate matters, commercial forces have pushed developers to add into their browsers nonstandard extensions meant to improve the language.

In this book, we explore in detail the syntax, semantics, and idioms of HTML Version 4.01, along with the many important extensions that are supported in the latest versions of the most popular browsers, so that any aspiring HTML author can create fabulous documents with a minimum of effort.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

XHTML: What It Is

Content preview·Buy reprint rights for this chapter

You've certainly heard of HTML, but did you know that it is one of many other markup languages? Indeed, HTML is the black sheep in the family of document markup languages. HTML is based on SGML, the Standard Generalized Markup Language. The powers-that-be created SGML with the intent that it be the one and only markup metalanguage from which all other document markup elements would be created. Everything from hieroglyphics to HTML can be defined using SGML, negating any need for any other markup language.

The problem with SGML is that it is so broad and all-encompassing that mere mortals cannot use it. Using SGML effectively requires very expensive and complex tools that are completely beyond the scope of regular people who just want to bang out an HTML document in their spare time. As a result, HTML and other language standards adhere to some, but not all SGML standards, eliminating many of the more esoteric features so that HTML is readily useable and used.

Recognizing that SGML is unwieldy and not well-suited to describing the very popular HTML in a useful way, and that there was a growing need to define other HTML-like markup languages to handle different network documents, the W3C defined the Extensible Markup Language (XML). Like SGML, XML is a separate formal markup metalanguage that uses select features of SGML to define markup languages. It eliminates many features of SGML that aren't applicable to languages like HTML and simplifies other SGML elements in order to make them easier to use and understand.

HTML Version 4.01 is not XML-compliant. Hence, the W3C offers XHTML, a reformulation of HTML to be compliant under XML. XHTML attempts to support every last nit and feature of HTML 4.01 using the more rigid rules of XML. It generally succeeds but has enough differences to make life difficult for the standards-conscious HTML author.

Confused? Don't be. Learning HTML is still the way to go for most authors and Web developers. The native language endures. Besides, by learning HTML, you learn the working bits of XHTML, effectively the same things. There are some differences, which we explore in Chapter 16, XHTML. But the differences should not affect your work in the foreseeable future.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

HTML and XHTML: What They Aren't

Content preview·Buy reprint rights for this chapter

With all their multimedia-enabling, new page layout features, and the hot technologies that give life to HTML/XHTML documents over the Internet, it is also important to understand the languages' limitations. They are not word-processing tools, desktop publishing solutions, or even programming languages. That's because their fundamental purpose is to define the structure and appearance of documents and document families so that they may be delivered quickly and easily to a user over a network for rendering on a variety of display devices. Jack of all trades, but master of none, so to speak.

Before you can fully appreciate the power of the language and begin creating effective documents, you must yield to one fundamental rule. These markup languages are designed to structure documents and make their content more accessible, not to format documents for display purposes.

HTML and its progeny XHTML do provide many different ways to let you define the appearance of your documents: font specifications, line breaks, and multicolumn text are all features of the language. And, of course, appearance is important, since it can have either detrimental or beneficial effects on how users access and use the information in your documents.

But with HTML and XHTML, content is paramount; appearance is secondary, particularly since it is less predictable, given the variety of browser graphics and text-formatting capabilities. Besides, these markup languages contain many more ways for structuring your document content without regard to the final appearance: section headers, structured lists, paragraphs, rules, titles, and embedded images are all defined by the standard languages without regard for how these elements might be rendered by a browser. Consider, for example, a browser for the blind, wherein graphics on the page come with audio descriptions and alternative rules for navigation. The HTML 4 standard defines such a thing: content over visual presentation.

If you treat HTML or XHTML as a document-generation tool, you will be sorely disappointed in your ability to format your document in a specific way. There is simply not enough capability built into the languages to allow you to create the kind of documents you might whip up with tools like FrameMaker or Microsoft Word. Attempts to subvert the supplied structuring elements to achieve specific formatting tricks seldom work across all browsers. In short, don't waste your time trying to force HTML and XHTML to do things they were never designed to do.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Nonstandard Extensions

Content preview·Buy reprint rights for this chapter

It doesn't take an advanced degree in the obvious to know that many people vie for distinction to draw the attentions of others. So, too, with browsers. Extra whizbang features can give the edge in the otherwise standardized market. That can be a nightmare for authors. A lot of people want you to use the latest and greatest gimmick or even useful HTML extension. But it's not part of the standard, and not all browsers support it. In fact, on occasion, the popular browsers support different ways of doing the same thing.

Every software vendor adheres to the technological standards; it's embarrassing to be incompatible and your competitors will take every opportunity to remind buyers of your product's failure to comply, no matter how arcane or useless that standard might be. At the same time, vendors seek to make their products different and better than the competition's offerings. Netscape's and Internet Explorer's extensions to standard HTML are perfect examples of these market pressures.

Many document authors feel safe using these extended browsers' nonstandard extensions because of their combined and commanding share of users. For better or worse, extensions to HTML made by the folks at Netscape or Microsoft instantly become part of the street version of the language, much like English slang creeping into the vocabulary of most Frenchmen, despite all the best efforts of the Académie Française.

Fortunately, with HTML Version 4.0, the W3C standards caught up with the browser manufacturers. In fact, the tables turned somewhat. The many extensions to HTML that originally appeared as extensions in Netscape Navigator and Internet Explorer are now part of the HTML 4 and XHTML 1.0 standards, and there are other parts of the new standard that are not yet features of the popular browsers.

In general, we urge you to resist using an extension unless you have a compelling and overriding reason to do so. By using them, particularly in key portions of your documents, you run the risk of losing a substantial portion of your potential readership. Sure, the Internet Explorer community is large enough to make this point moot now, but even so, you are excluding several million people who use Netscape from your pages.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Tools for the Web Designer

Content preview·Buy reprint rights for this chapter

While you can use the barest of barebones text editors to create HTML and XHTML documents, most authors have a bit more elaborate toolbox of software utilities than a simple word processor. You also need a browser, so you can test and refine your work. Beyond the essentials are some specialized software tools for HTML document preparation and editing, and others for developing and preparing accessory multimedia files.

At the very least, you'll need an editor, a browser to check your work, and ideally, a connection to the Internet.

Section 1.7.1.1: Word processor or WYSIWYG editor?

Some authors use the word-processing capabilities of their specialized HTML/XHTML editing software. Others use the WYSIWYG (what-you-see-is-what-you-get) composition tools that come with their browser or the latest versions of the popular word processors. Others, such as ourselves, prefer to compose their work on a general word processor and later insert the markup tags and their attributes. Still others include markup as they compose.

We think the stepwise approach—compose, then mark up—is the better way. We find that once we've defined and written the document's content, it's much easier to make a second pass to judiciously and effectively add the HTML/XHTML tags to format the text. Otherwise, the markup can obscure the content. Note, too, that unless specially trained (if they can be), spellcheckers and thesauruses typically choke on markup tags and their various parameters. You can spend what seems to be a lifetime clicking the Ignore button on all those otherwise valid markup tags when syntax- or spell-checking a document.

When and how you embed markup tags into your document dictates the tools you need. We recommend that you use a good word processor, such as WordPerfect or Word, which comes with more and better writing tools than simple text editors or the browser-based markup-language editors. You'll find, for instance, that an outliner, spellchecker, and thesaurus will best help you craft the document's flow and content well, disregarding for the moment its look. The latest word processors encode your documents with HTML, too, but don't expect miracles. Except for boilerplate documents, you will probably need to nurse those automated HTML documents to full health. And it'll be a while before you'll see XHTML-specific markup tools in the popular word processors.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 2: Quick Start

Content preview·Buy reprint rights for this chapter

We didn't spend hours studiously poring over some reference book before we wrote our first HTML document. You probably shouldn't, either. HTML is simple to read and understand, and it's simple to write, too. And once you've written an HTML document, you've nearly completed your first XHTML one, too. So let's get started without first learning a lot of arcane rules.

To help you get that quick, satisfying start, we've included this chapter as a brief summary of the many elements of HTML and its progeny, XHTML. Of course, we've left out a lot of details and some tricks that you should know. Read the upcoming chapters to get the essentials for becoming fluent in HTML and XHTML.

Even if you are familiar with the languages, we recommend you work your way through this chapter before tackling the rest of the book. It not only gives you a working grasp of basic HTML and its jargon, but you'll also be more productive later, flush with the confidence that comes from creating attractive documents in such a short time.

Use any text editor to create an HTML or XHTML document, as long as it can save your work on disk in ASCII text file format. That's because even though documents include elaborate text layout and pictures, they're all just plain old ASCII documents themselves. A fancier WYSIWYG editor or a translator for your favorite word processor are fine, too—although they may not support the many nonstandard features we discuss later in this book. You'll probably end up touching up the source text they produce, as well.

While not needed to compose documents, you should have at least one version of a popular browser installed on your computer to view your work, preferably Netscape Navigator or Microsoft's Internet Explorer. That's because the source document you compose on your text editor doesn't look anything like what gets displayed by a browser, even though it's the same document. Make sure what your readers actually see is what you intended by viewing the document yourself with a browser. Besides, the popular ones are free over the Internet.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Writing Tools

Content preview·Buy reprint rights for this chapter

Use any text editor to create an HTML or XHTML document, as long as it can save your work on disk in ASCII text file format. That's because even though documents include elaborate text layout and pictures, they're all just plain old ASCII documents themselves. A fancier WYSIWYG editor or a translator for your favorite word processor are fine, too—although they may not support the many nonstandard features we discuss later in this book. You'll probably end up touching up the source text they produce, as well.

While not needed to compose documents, you should have at least one version of a popular browser installed on your computer to view your work, preferably Netscape Navigator or Microsoft's Internet Explorer. That's because the source document you compose on your text editor doesn't look anything like what gets displayed by a browser, even though it's the same document. Make sure what your readers actually see is what you intended by viewing the document yourself with a browser. Besides, the popular ones are free over the Internet.

Also note that you don't need a connection to the Internet or the World Wide Web to write and view your HTML or XHTML documents. You may compose and view your documents stored on a hard drive or floppy disk that's attached to your computer. You can even navigate among your local documents with the languages' hyperlinking capabilities without ever being connected to the Internet, or any other network, for that matter. In fact, we recommend that you work locally to develop and thoroughly test your documents before you share them with others.

We strongly recommend, however, that you do get a connection to the Internet if you are serious about composing your own documents. You may download and view others' interesting web pages and see how they accomplished some interesting feature—good or bad. Learning by example is fun, too. (Reusing others' work, on the other hand, is often questionable, if not downright illegal.) An Internet connection is essential if you include in your work hyperlinks to other documents on the Internet.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

A First HTML Document

Content preview·Buy reprint rights for this chapter

It seems every programming language book ever written starts off with a simple example on how to display the message, "Hello, World!" Well, you won't see a "Hello, World!" example in this book. After all, this is a style guide for the new millennium. Instead, ours sends greetings to the World Wide Web:

<html>
<head>
<title>My first HTML document</title>
</head>
<body>
<h2>My first HTML document</h2>
Hello, <i>World Wide Web!</i>
 <!-- No "Hello, World" for us -->
<p>
               Greetings from<br>
<a href="http://www.ora.com">O'Reilly & Associates</a>
<p>
Composed with care by: 
<cite>(insert your name here)</cite>
<br>&copy;2000 and beyond
</body>
</html>

Go ahead: type in the example HTML source on a fresh word-processing page and save it on your local disk as myfirst.html. Make sure you select to save it in ASCII format; word processor-specific file formats like Microsoft Word's .doc files save hidden characters that can confuse the browser software and disrupt your HTML document's display.

After saving myfirst.html (or myfirst.htm if you are using archaic DOS- or Windows 3.11-based filenaming conventions) onto disk, start up your browser, locate, and then open the document from the program's File menu. Your screen should look like Figure 2-1.

Figure 2-1: A very simple HTML document

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Embedded Tags

Content preview·Buy reprint rights for this chapter

You have probably noticed right away, perhaps in surprise, that the browser displays less than half of the example source text. Closer inspection of the source reveals that what's missing is everything that's bracketed inside a pair of less-than (<) and greater-than (>) characters. Section 3.3.1

HTML and XHTML are embedded languages: you insert their directions or tags into the same document that you and your readers load into a browser to view. The browser uses the information inside those tags to decide how to display or otherwise treat the subsequent contents of your document.

For instance, the <i> tag that follows the word "Hello" in the simple example tells the browser to display the following text in italics. Section 4.5

The first word in a tag is its formal name, which usually is fairly descriptive of its function, too. Any additional words in a tag are special attributes, sometimes with an associated value after an equal sign (=), which further define or modify the tag's actions.

Most tags define and affect a discrete region of your document. The region begins where the tag and its attributes first appear in the source document (a.k.a. the start tag ) and continues until a corresponding end tag. An end tag is the tag's name preceded by a forward slash (/ ). For example, the end tag that matches the "start italicizing" <i> tag is </i>.

End tags never include attributes. In HTML, most tags, but not all, have an end tag. And, to make life a bit easier for HTML authors, the browser software often infers an end tag from surrounding and obvious context, so you needn't explicitly include some end tags in your source HTML document. (We tell you which are optional and which are never omitted when we describe each tag in later chapters.) Our simple example is missing an end tag that is so commonly inferred and hence not included in the source that some veteran HTML authors don't even know that it exists. Which one?

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

HTML Skeleton

Content preview·Buy reprint rights for this chapter

Notice, too, in our simple example source that precedes Figure 2-1, the HTML document starts and ends with <html> and </html> tags. Of course, these tags tell the browser that the entire document is composed in HTML. The HTML and XHTML standards require an <html> tag for compliant documents, but most browsers can detect and properly display HTML encoding in a text document that's missing this outermost structural tag. Section 3.6.1

Like our example, all HTML and XHTML documents have two main structures: a head and a body, each bounded in the source by respectively named start and end tags. You put information about the document in the head and the contents you want displayed in the browser's window inside the body. Except in rare cases, you'll spend most of your time working on your document's body content. Section 3.7.1 Section 3.8.1

There are several different document header tags you may use to define how a particular document fits into a document collection and into the larger scheme of the Web. Some nonstandard header tags even animate your document.

For most documents, however, the important header element is the title. Standards require that every HTML and XHTML document have a title, even though the currently popular browsers don't enforce that rule. Choose a meaningful title, one that instantly tells the reader what the document is about. Enclose yours, as we do for the title of our example, between the <title> and </title> tags in your document's header. The popular browsers typically display the title at the top of the document's window onscreen. Section 3.7.2

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

The Flesh on an HTML or XHTML Document

Content preview·Buy reprint rights for this chapter

Except for the <html>, <head>, <body>, and <title> tags, the HTML and XHTML standards have few other required structural elements. You're free to include pretty much anything else in the contents of your document. (The web surfers among you know that authors have taken full advantage of that freedom, too.) Perhaps surprisingly, though, there are only three main types of HTML/XHTML content: tags (which we described previously), comments, and text.

A raw document with all its embedded tags can quickly become nearly unreadable, like computer-programming source code. We strongly recommend that you use comments to guide your composing eye.

Although it's part of your document, nothing in a comment, including the body of your comment that goes between the special starting tag <!-- and ending tag delimiters --> gets included in the browser display of your document. Now you see a comment in the source, like in our simple HTML example, and now you don't on the display, as evidenced by our comment's absence in Figure 2-1. Anyone can download the source text of your documents and read the comments, though, so be careful what you write. Section 3.5.3

If it isn't a tag or a comment, it's text. The bulk of content in most of your HTML/XHTML documents—the part readers see on their browser displays—is text. Special tags give the text structure, such as headings, lists, and tables. Others advise the browser how the content should be formatted and displayed.

What about images and other multimedia elements we see and hear as part of our web browser displays? Aren't they part of the HTML document? No. The data that comprise digital images, movies, sounds, and other multimedia elements that may be included in the browser display are in documents separate from the document. You include references to those multimedia elements via special tags. The browser uses the references to load and integrate other types of documents with your text.

We didn't include any special multimedia references in the previous example simply because they are separate, nontext documents you can't just type into a text processor. We do, however, talk about and give examples of how to integrate images and other multimedia in your documents later in this chapter, as well as in extensive detail in subsequent chapters.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Text

Content preview·Buy reprint rights for this chapter

Text-related HTML/XHTML markup tags comprise the richest set of all in the standard languages. That's because the original language—HTML—emerged as a way to enrich the structure and organization of text.

HTML came out of academia. What was and still is important to those early developers was the ability of their mostly academic, text-oriented documents to be scanned and read without sacrificing their ability to distribute documents over the Internet to a wide diversity of computer display platforms. (ASCII text is the only universal format on the global Internet.) Multimedia integration is something of an appendage to HTML and XHTML, albeit an important one.

And page layout is secondary to structure. We humans visually scan and decide textual relationships and structure based on how it looks; machines can only read encoded markings. Because documents have encoded tags that relate meaning, they lend themselves very well to computer-automated searches and also to the recompilation of content—features very important to researchers. It's not so much how something is said as what is being said.

Accordingly, neither HTML nor XHTML are page-layout languages. In fact, given the diversity of user-customizable browsers as well as the diversity of computer platforms for retrieval and display of electronic documents, all these markup languages strive to accomplish is to advise, not dictate, how the document might look when rendered by the browser. You cannot force the browser to display your document in any certain way. You'll hurt your brain if you insist otherwise.

For instance, you cannot predict what font and what absolute size—8- or 40-point Helvetica, Geneva, Subway, or whatever—will be used for a particular user's text display. Okay, so the latest browsers now support standard Cascading Style Sheets and other desktop publishing-like features that let you control the layout and appearance of your documents. But users may change their browser's display characteristics and override your carefully laid plans at will; quite a few of the older browsers out there don't support these new layout features; and some browsers are text-only with no nice fonts at all. What to do? Concentrate on content. Cool pages are a flash in the pan. Deep content will bring people back for more and more.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Hyperlinks

Content preview·Buy reprint rights for this chapter

While text may be the meat and bones of an HTML or XHTML document, the heart is hypertext. Hypertext gives users the ability to retrieve and display a different document in their own or someone else's collection simply by a click of the keyboard or mouse on an associated word or phrase (hyperlink ) in the document. Use these interactive hyperlinks to help readers easily navigate and find information in your own or others' collections of otherwise separate documents in a variety of formats, including multimedia, HTML, XHTML, other XML, and plain ASCII text. Hyperlinks literally bring the wealth of knowledge on the whole Internet to the tip of the mouse pointer.

To include a hyperlink to some other document in your own collection or on a server in Timbuktu, all you need to know is the document's unique address and how to drop an anchor into your document.

While it is hard to believe, given the millions, perhaps billions, of them out there, every document and resource on the Internet has a unique address known as its uniform resource locator (URL; commonly pronounced "you-are-ell"). A URL consists of the document's name preceded by the hierarchy of directory names in which the file is stored (pathname ), the Internet domain name of the server that hosts the file, and the software and manner by which the browser and the document's host server communicate to exchange the document (protocol ):

protocol://server_domain_name/pathname

Here are some sample URLs:

http://www.kumquat.com/docs/catalog /price_list.html
price_list.html
http://www.kumquat.com/
ftp://ftp.netcom.com/pub/

The first example is an absolute or complete URL. It includes every part of the URL format: protocol, server, and the pathname of the document.

While absolute URLs leave nothing to the imagination, they can lead to big headaches when you move documents to another directory or server. Fortunately, browsers also let you use

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Images Are Special

Content preview·Buy reprint rights for this chapter

Image files are multimedia elements you may reference with anchors in your document for separate download and display by the browser. But, unlike other multimedia, standard HTML and XHTML have an explicit provision for image display "inline" with the text, and images can serve as intricate maps of hyperlinks. That's because there is some consensus in the industry concerning image file formats—specifically, GIF and JPEG—and the graphical browsers have built-in decoders that integrate those image types into your document.

The HTML/XHTML tag for inline images is <img>; its required src attribute is the URL of the GIF or JPEG image you want to insert in the document. Section 5.2.6

The browser separately loads images and places them into the text flow as if the image were some special, albeit sometimes very large, character. Normally, that means the browser aligns the bottom of the image to the bottom of the current line of text. You can change that with the special <img> align attribute whose value you set to put the image at the top , middle, or bottom of adjacent text. Examine Figures Figure 2-2 through Figure 2-4 for the image alignment you prefer. Of course, wide images may take up the whole line, and hence break the text flow. Or you may place an image by itself, by including preceding and following division, paragraph, or line-break tags.

Figure 2-2: An inline image aligned with the bottom of the text (default)

Figure 2-3: An inline image specially aligned with the middle of the text

Figure 2-4: An inline image specially aligned with the top of the text

Experienced HTML authors use images not only as supporting illustrations, but also as quite small inline characters or glyphs, added to aid browsing readers' eyes and to highlight sections of the documents. Veteran HTML authors commonly add custom list bullets or more distinctive section dividers than the conventional horizontal rules. Images, too, may be included in a hyperlink, so that users may select an inline thumbnail sketch to download a full-screen image. The possibilities with inline images are endless.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Lists, Searchable Documents, and Forms

Content preview·Buy reprint rights for this chapter

Thought we'd exhausted text elements? Headers, paragraphs, and line breaks are just the rudimentary text-organizational elements of a document. The languages also provide several advanced text-based structures, including three types of lists, "searchable" documents, and forms. Searchable documents and forms go beyond text formatting, too; they are a way to interact with your readers. Forms let users enter text and click checkboxes and radio buttons to select particular items and then send that information back to the server. Once received, a special server application processes the form's information and responds accordingly, e.g., filling a product order or collecting data for a user survey.

The syntax for these special features and their various attributes can get rather complicated; they're not quick-start grist. So we mention them here and urge you to read on for details in later chapters.

The three types of lists match those we are most familiar with: unordered, ordered, and definition lists. An unordered list—one in which the order of items is not important, such as a laundry or grocery list—gets bounded by <ul> and </ul> tags. Each item in the list, usually a word or short phrase, is marked by the <li> (list-item) tag and, with XHTML, the </li> end tag. When rendered, the list item typically appears indented from the left margin. The browser typically precedes each item with a leading bullet symbol. Section 7.1.1 Section 7.3

Ordered lists, bounded by the <ol> and </ol> tags, are identical in format to unordered ones, including the <li> tag (and </li> end tag with XHTML) for marking list items. However, the order of items is important—equipment assembly steps, for instance. The browser accordingly displays each item in the list preceded by an ascending number. Section 7.2.1

Definition lists are slightly more complicated than unordered and ordered lists. Within a definition list's enclosing

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Tables

Content preview·Buy reprint rights for this chapter

For a language that emerged from academia—a world steeped in data—it's not surprising to find that HTML, and now its progeny XHTML, support a set of tags for data tables that not only align your numbers, but can specially format your text, too.

Five tags enable tables, including the <table> tag itself and a <caption> tag for including a description of the table. Special tag attributes let you change the look and dimensions of the table. You create a table row by row, putting between the table row (<tr> ) tag and its end tag (</tr>) either table header (<th> ) or table data (<td>) tags and their respective contents for each cell in the table (end tags, too, with XHTML). Headers and data may contain nearly any regular content, including text, images, forms, and even another table. As a result, you can also use tables for advanced text formatting, such as for multicolumn text and sidebar headers (see Figure 2-5). For more information, see Chapter 10.

Figure 2-5: HTML tables let you perform page layout tricks, too

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Frames

Content preview·Buy reprint rights for this chapter

Anyone who has had more than one application window open on their graphical desktop at a time can immediately appreciate the benefits of frames. Frames let you divide the browser window into multiple display areas, each containing a different document.

Figure 2-6 is an example of a frame display. It shows how the document window may be divided into many individual windows separated by rule lines and scroll bars. What is not immediately apparent in the example, though, is that each frame may display an independent document, and not necessarily HTML or XHTML ones, either. A frame may contain any valid content that the browser is capable of displaying, including multimedia. If the frame's contents include a hypertext link the user selects, the new document's contents, even another frame document, may replace that same frame, another frame's content, or the entire browser window.

Figure 2-6: Frames divide the window into many document displays

Frames are defined in a special document in which you replace the <body> tag with one or more <frameset> tags that tell the browser how to divide its main window into discrete frames. Special <frame> tags go inside the <frameset> tag and point to the documents that go inside the frames.

The individual documents referenced and displayed in the frame document window act independently, to a degree; the frame document controls the entire window. You can, however, direct one frame's document to load new content into another frame. Selecting an item from a table of contents, for example, might cause the browser to load and display the referenced document into an adjacent frame for viewing. That way, the table of contents is always available to the user as he or she browses the collection. For more information on frames, see Chapter 11.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Style Sheets and JavaScript

Content preview·Buy reprint rights for this chapter

Browsers also have support for two powerful innovations to HTML: style sheets and JavaScript. Like their desktop-publishing cousins, style sheets let you control how your web pages look—text font styles and sizes, colors, backgrounds, alignments, and so on. More importantly, style sheets give you a way to impose display characteristics uniformly over the entire document and over an entire collection of documents.

JavaScript is a programming language with functions and commands that let you control how the browser behaves for the user. Now, this is not a JavaScript programming book, but we do cover the language in fair detail in later chapters to show you how to embed JavaScript programs into your documents and achieve some very powerful and fun effects.

The W3C—the putative standards organization—prefers that you use the Cascading Style Sheets (CSS) model for document design. Since version 4, both Netscape and Internet Explorer support CSS and JavaScript. Netscape alone also supports a special JavaScript-based Style Sheet ( JSS) model which we describe in Chapter 12 , but we do not recommend that you use it. CSS is the universally approved, universally supported way to control how your documents might (not will) usually get displayed on users' browsers.

To illustrate CSS, here's a way to make all the top-level (H1) header text in your HTML document appear in the color red:

<html>
<head>
<title>CSS Example</title>
<!-- Hide CSS properties within comments so old browsers
don't choke on or display the unfamiliar contents. -->
  <style type="text/CSS">
    <!--
    H1 {color: red}
    -->
  </style>
</head>
<body>
<H1>I'll be red if your browser supports CSS</H1>
Something in between.
<H1>I should be red, too!</H1>
</body>
</html>

Of course, you can't see red in this black & white book, so we won't show the result in a figure. Believe us or prove it to yourself by typing in and loading the example in your browser: the <H1>-enclosed text appears red on a color screen.

JavaScript is an object-based language. It views your document and the browser that displays your documents as a collection of parts ("objects") that have certain properties that you may change or compute. This is some very powerful stuff, but not something that most authors will want to handle. Rather, most of us probably will snatch the quick and easy, yet powerful JavaScript programs that proliferate across the Web and embed them in our own documents. We will tell you how in Chapter 12.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Forging Ahead

Content preview·Buy reprint rights for this chapter

Clearly, this chapter represents the tip of the iceberg. If you've read this far, hopefully your appetite has been whetted for more. By now you've got a basic understanding of the scope and features of HTML and XHTML; proceed through subsequent chapters to expand your knowledge and learn more about each feature.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Chapter 3: Anatomy of an HTML Document

Content preview·Buy reprint rights for this chapter

Most HTML and XHTML documents are very simple, and writing one shouldn't intimidate even the most timid of computer users. First, although you might use a fancy WYSIWYG editor to help you compose it, a document is ultimately stored, distributed, and read by a browser as a simple ASCII text file. That's why even the poorest user with a barebones text editor can compose the most elaborate of web pages. (Accomplished webmasters often elicit the admiration of "newbies" by composing astonishingly cool pages using the crudest text editor on a cheap laptop computer and performing in odd places like on a bus or in the bathroom.) Authors should, however, keep several of the popular browsers on hand and alternate among them to view new documents under construction. Remember, browsers differ in how they display a page, not all browsers implement all of the language standards, and some have their own special extensions.

Documents never look alike when displayed by a text editor and when displayed by a browser. Take a look at any source document from the World Wide Web. At the very least, return characters, tabs, and leading spaces, although important for readability of the source text document, are ignored for the most part. There also is a lot of extra text in a source document, mostly from the display tags and interactivity markers and their parameters that affect portions of the document, but don't themselves appear in the display.

Accordingly, new authors are confronted with having to develop not only a presentation style for their web pages, but a different style for their source text. The source document's layout should highlight the programming-like markup aspects of HTML and XHTML, not their display aspects. And it should be readable not only by you, the author, but by others as well.

Experienced document writers typically adopt a programming-like style, albeit very relaxed, for their source text. We do the same throughout this book, and that style will become apparent as you compare our source examples with the actual display of the document by a browser.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Appearances Can Deceive

Content preview·Buy reprint rights for this chapter

Documents never look alike when displayed by a text editor and when displayed by a browser. Take a look at any source document from the World Wide Web. At the very least, return characters, tabs, and leading spaces, although important for readability of the source text document, are ignored for the most part. There also is a lot of extra text in a source document, mostly from the display tags and interactivity markers and their parameters that affect portions of the document, but don't themselves appear in the display.

Accordingly, new authors are confronted with having to develop not only a presentation style for their web pages, but a different style for their source text. The source document's layout should highlight the programming-like markup aspects of HTML and XHTML, not their display aspects. And it should be readable not only by you, the author, but by others as well.

Experienced document writers typically adopt a programming-like style, albeit very relaxed, for their source text. We do the same throughout this book, and that style will become apparent as you compare our source examples with the actual display of the document by a browser.

Our formatting style is simple, but it serves to create readable, easily maintained documents:

• Except for the document structural tags like <html>, <head>, and <body>, any element we use to structure the content of a document is placed on a separate line and indented to show its nesting level within the document. Such elements include lists, forms, tables, and similar tags.
• Any element used to control the appearance or style of text is inserted in the current line of text. This includes basic font style tags like <b> (bold text) and document linkages like <a> (hypertext anchor).
• Avoid, where possible, the breaking of a URL onto two lines.
• Add extra newline characters to set apart special sections of the source document, for instance, around paragraphs or tables.

The task of maintaining the indentation of your source file ranges from trivial to onerous. Some text editors, like Emacs, manage the indentation automatically; others, like common word processors, couldn't care less about indentation and leave the task completely up to you. If your editor makes your life difficult, you might consider striking a compromise, perhaps by indenting the tags to show structure, but leaving the actual text without indentation to make modifications easier.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Structure of an HTML Document

Content preview·Buy reprint rights for this chapter

HTML and XHTML documents consist of text, which defines the content of the document, and tags, which define the structure and appearance of the document. The structure of an HTML document is simple, consisting of an outer <html> tag enclosing the document head and body:

<html>
<head>
<title>Barebones HTML Document</title>
</head>
<body>
This illustrates, in a very <i>simp</i>le way,
the basic structure of an HTML document.
</body>
</html>

Each document has a head and a body, delimited by the <head> and <body> tags. The head is where you give your document a title and where you indicate other parameters the browser may use when displaying the document. The body is where you put the actual contents of the document. This includes the text for display and document control markers (tags) that advise the browser how to display the text. Tags also reference special-effects files, including graphics and sound, and indicate the hot spots (hyperlinks and anchors) that link your document to other documents.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Tags and Attributes

Content preview·Buy reprint rights for this chapter

For the most part, tags—the markup elements of HTML and XHTML—are simple to understand and use, since they are made up of common words, abbreviations, and notations. For instance, the <i> and </i> tags tell the browser respectively to start and stop italicizing the text characters that come between them. Accordingly, the syllable "simp" in our barebones example above would appear italicized on a browser display.

The HTML and XHTML standards and their various extensions define how and where you place tags within a document. Let's take a closer look at that syntactic sugar that holds together all documents.

Every tag consists of a tag name, sometimes followed by an optional list of tag attributes, all placed between opening and closing brackets (< and >). The simplest tag is nothing more than a name appropriately enclosed in brackets, such as <head> and <i>. More complicated tags contain one or more attributes, which specify or modify the behavior of the tag.

According to the HTML standard, tag and attribute names are not case-sensitive. There's no difference in effect between <head>, <Head>, <HEAD>, or even <HeaD>; they are all equivalent. With XHTML, case is important: all current standard tag and attribute names are in lowercase.

For both HTML and XHTML, the values that you assign to a particular attribute may be case-sensitive, depending on your browser and server. In particular, file location and name references—or uniform resource locators (URLs)—are case-sensitive. Section 6.2

Tag attributes, if any, belong after the tag name, each separated by one or more tab, space, or return characters. Their order of appearance is not important.

A tag attribute's value, if any, follows an equal sign (=) after the attribute name. You may include spaces around the equal sign, so that width=6, width = 6, width =6, and width= 6 all mean the same. For readability, however, we prefer not to include spaces. That way, it's easier to pick out an attribute/value pair from a crowd of pairs in a lengthy tag.

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Well-Formed Documents and XHTML

Content preview·Buy reprint rights for this chapter

XHTML is HTML's prissy cousin. What would pass most beauty contests as a very proper and complete HTML document, done according to the book including end-paragraph tags, would get rejected by the XML judges as a malformed file.

To conform with XML, XHTML insists that documents be "well-formed." Among other things, that means every tag must have an ending tag, even the ones like <br> and <hr> that the HTML standard forbids the use of an end tag. With XHTML, the ending is placed inside the start tag: <br />, for example. Section 16.3.3

It also means that tag and attribute names are case-sensitive, and according to the current XHTML standard, must be in lowercase. Hence, only <head> is acceptable, and it is not the same as <HEAD> or <HeAd>, as it is with the HTML standard. Section 16.3.4

And, too, well-formed XHTML documents, like HTML standard ones, conform to proper nesting. No argument there. Section 16.3.1

In its defense, the XML standard and its offspring XHTML emphasize extensibility. That way, <p> can mean the beginning of a paragraph in HTML, whereas another variant of the language may define the contents of the <P> tag to be election-poll results, whose display is quite different, perhaps in tabular form with red, white, and blue stripes and accompanying patriotic music.

More about this in Chapter 15 and Chapter 16, in which we detail XML and XHTML standards (and the Forces of Conformity).

Additional content appearing in this section has been removed.
Purchase this book now or read it online at Safari to get the whole thing!

Document Content

Content preview·Buy reprint rights for this chapter

Nearly everything else you put into your HTML or XHTML document that isn't a tag is by definition content, and the majority of that is text. Like tags, document content is encoded using a specific character set, the ISO-8859-1 Latin character set, by default. This character set is a superset of conventional ASCII, adding the necessary characters to support the Western European languages. If your keyboard does not allow you to directly enter the characters you need, you can use character entities to insert the desired characters.

Perhaps the hardest rule to remember when marking up an HTML or XHTML document is that all the tags you insert regarding text display and formatting are only advice for the browser: they do not explicitly control how the browser will display the document. In fact, the browser can choose to ignore all of your tags and do what it pleases with the document content. What's worse, the user (of all people!) has control over the text-display characteristics of his or her own browser.

Get used to this lack of control. The best way to use markup to control the appearance of your documents is to concentrate on the content of the document, not on its final appearance. If you find yourself worrying excessively about spacing, alignment, text breaks, and character positioning, you'll surely end up with ulcers. You will have gone beyond the intent of HTML. If you focus on delivering information to users in an attractive manner, using the tags to advise the browser as to how best to display that information, you are using HTML or XHTML effectively, and your documents will render well on a wide range of browsers.

Besides common text, HTML and XHTML give you a way to display special text characters that you might not normally be able to include in your source document or that have other purposes. A good example is the less-than or opening bracket (<) symbol. In HTML, it normally signifies the start of a tag, so if you insert it simply as part of your text, the browser will get confused and probably misinterpret your document.

Additional content appearing in