Webmaster in a Nutshell | O'Reilly Media

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The first edition of this book was published in 1996, when the Web was young and its possibilities were endless. As we write this third edition, the Web has since matured, and many of its possibilities have long been realized. Although the excitement of those early days has tempered and the technology has for the most part stabilized, it remains an integral part of our everyday lives. Venture capitalists might have moved on to newer ways to make a killing, but the Web's importance has not diminished, and its technology remains both vital and vibrant.

In this chapter, we give the world's quickest introduction to web technology. This book is by impatient writers for impatient readers, so don't expect much history or analysis here, just a basic tour of how everything fits together.

The tool most people use on the Web is a browser, such as Netscape Navigator, Internet Explorer, Opera, Mozilla, or Lynx. Web browsers work by connecting over the Internet to remote machines, requesting specific documents, and then formatting the documents they receive for viewing on the local machine.

The language, or protocol, used for web transactions is Hypertext Transfer Protocol, or HTTP. The remote machines containing the documents run HTTP servers that wait for requests from browsers and then return the specified document. The browsers themselves are technically HTTP clients.

One of the most important things to grasp when working on the Web is the format for URLs. A URL is basically an address on the Web, identifying each document uniquely (for example, http://www.oreilly.com/products.html). Since URLs are so fundamental to the Web, we discuss them here in a little detail. The simple syntax for a URL is:

http://host/path

host: The host to connect to: www.oreilly.com or www.google.com. (While many web servers run on hosts beginning with www, the www prefix is just a convention.)
path: The document requested on that server. This is not the same as the filesystem path, as its root is defined by the server.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The tool most people use on the Web is a browser, such as Netscape Navigator, Internet Explorer, Opera, Mozilla, or Lynx. Web browsers work by connecting over the Internet to remote machines, requesting specific documents, and then formatting the documents they receive for viewing on the local machine.

The language, or protocol, used for web transactions is Hypertext Transfer Protocol, or HTTP. The remote machines containing the documents run HTTP servers that wait for requests from browsers and then return the specified document. The browsers themselves are technically HTTP clients.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

One of the most important things to grasp when working on the Web is the format for URLs. A URL is basically an address on the Web, identifying each document uniquely (for example, http://www.oreilly.com/products.html). Since URLs are so fundamental to the Web, we discuss them here in a little detail. The simple syntax for a URL is:

http://host/path

host: The host to connect to: www.oreilly.com or www.google.com. (While many web servers run on hosts beginning with www, the www prefix is just a convention.)
path: The document requested on that server. This is not the same as the filesystem path, as its root is defined by the server.

Most URLs follow this simple syntax. A more generalized syntax, however, is:

            scheme://host/path/extra-path-info?query-info

scheme: The protocol that connects to the site. For web sites, the scheme is http; for FTP, the scheme is ftp.
extra-path-info and query-info: Optional information used by CGI programs. See Chapter 12.

HTML documents also often use a "shorthand" for linking to other documents on the same server, called a relative URL. An example of a relative URL is images/webnut.gif. The browser knows to translate this into complete URL syntax before sending the request. For example, if http://www.oreilly.com/books/webnut.html contains a reference to images/webnut.gif, the browser reconstructs the relative URL as a full (or absolute) URL, http://www.oreilly.com/books/images/webnut.gif, and requests that document independently (if needed). Often in this book, you'll see us refer to a URI, not a URL. A URI (Universal Resource Identifier) is a superset of URL, in anticipation of different resource naming conventions being developed for the Web. For the time being, however, the only URI syntax in practice is URL; so while purists might complain, you can safely assume that "URI" is synonymous with "URL" and not go wrong (yet).

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

While web documents can conceivably be in any format, the universal standard is Hypertext Markup Language (HTML), a language for creating formatted text interspersed with images, sounds, animation, and hypertext links to other documents anywhere on the Web. Chapter 2-Chapter 8 cover the current version of HTML.

In 1996, a significant extension to HTML was developed: Cascading Style Sheets (CSS). Cascading Style Sheets allow web site developers to associate a number of style-related characteristics (such as font, color, spacing, etc.) with a particular HTML tag. This enables HTML authors to create a consistent look and feel in a set of documents. Chapter 9 provides an overview of and a reference to CSS.

While HTML remains the widespread choice for web site development, there is an heir apparent called XML (Extensible Markup Language). XML is a meta-language that allows you to define your own document tags. Chapter 10 covers XML.

When static documents aren't sufficient for a web site's needs, you can use tools such as CGI, JavaScript, mod_perl, and PHP. CGI is a way for the web server to call external programs instead of simply returning a static document. Chapter 12 through Chapter 15 are intended for CGI programmers and mod_perl programmers using the Perl programming language. JavaScript and PHP are both programming languages embedded directly into HTML documents, but that's where the similarities end: JavaScript is used primarily for client-side scripting, and PHP is used primarily for database access. See Chapter 11 and Chapter 16.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

In between clients and servers is the network, which uses TCP (Transmission Control Protocol) and IP (Internet Protocol) to transmit data and find servers and clients. On top of TCP/IP, clients and servers use the HTTP protocol to communicate. Chapter 17 gives details on the HTTP protocol, which you must understand for writing CGI programs, server scripts, web administration, and just about any other part of working with a server.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The runaway leader among Unix-based web servers is Apache. Chapter 18 deals with configuring Apache, while Chapter 19 discusses the various Apache modules. Regardless of the type of server you're running, there are various measures you can take to maximize its efficiency. Chapter 20 describes a number of these server optimization techniques for both the server side and the client side.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

So if that's the Web in a nutshell, who are the webmasters? The title "webmaster," or "web developer", vaguely means a person who works on the content end of the web. When you examine what webmasters actually do, there are many different definitions. On a typical web site, the responsibilities can be broken into four general groups:

Content providers: Work on the data itself—creating or editing HTML documents, incorporating images and forms, and maintaining the integrity of the links.
Designers: Create the images and also define the "look" of the site.
Programmers: Write CGI, Java, JavaScript, and other programs to incorporate to the web site.
Administrators: Make sure that the server is running properly and efficiently at all times. They might also be responsible for establishing new content development areas, writing new scripts, and maintaining the security of sensitive documents and of the site in general.

On a large site, you might have a staff of 50 content providers, a group of five designers, 3 or 4 programmers, and 2 administrators. On a small site, one person might do it all herself.

Each of these people might justifiably call themselves "webmasters." And while a programmer may not be especially interested in HTML syntax or server configuration, and someone who works only in HTML markup may not need to know anything about HTTP, this book should be useful to all.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This is a reference book for looking up things you already know. But what if you don't already know it? At the risk of blatant self-promotion, here are some books published by O'Reilly & Associates that we recommend heartily:

Web content providers will find HTML and XHTML: The Definitive Guide, written by Chuck Musciano and Bill Kennedy, to be an essential reference. Dynamic HTML: The Definitive Reference by Danny Goodman contains just about everything you need to know to create dynamic web content.
Designers who are getting started on the Web will find the basics of creating graphics and simple web pages in Web Design in a Nutshell and Learning Web Design, both by Jennifer Niederst. Designers who are interested in learning JavaScript should try Designing with JavaScript by Nick Heinle and Bill Peña.
Programmers on web sites should flock to CGI Programming with Perl by Scott Guelich, Shishir Gundavaram, and Gunther Birznicks; Perl in a Nutshell by Ellen Siever, Stephen Spainhour, and Nathan Patwardhan; as well David Flanagan's JavaScript: The Definitive Guide and Programming PHP by Rasmus Lerdorf and Kevin Tatroe. For a Perl tutorial, we recommend Learning Perl by Randal Schwartz and Tom Phoenix, and Perl for Web Site Management by John Callendar; for more complete Perl documentation, we recommend the classic "Camel" book, Programming Perl, by Larry Wall, Tom Christiansen, and Jon Orwant. mod_perl programmers should also check out Writing Apache Modules with Perl and C by Lincoln Stein and Doug MacEachern.
Anyone who works with HTTP directly, both programmers and administrators, will find HTTP: The Definitive Guide to be an absolutely indispensible.
Web site administrators might also consider the following references for their shelves: Apache: The Definitive Guide by Ben Laurie and Peter Laurie, Web Security and Commerce by Simson Garfinkel (with Gene Spafford), and Web Performance Tuning by Patrick Killelea.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Hypertext Markup Language (HTML) is the language that encodes World Wide Web documents. It is a document-markup and hyperlink-specification language that defines the syntax and placement of special, embedded directions that aren't displayed by a web browser but tell it how to display the contents of the document, including text, images, and other supported media. The language also tells you how to make a document interactive through special hypertext links, which connect your document with other documents on the network.

The syntax and semantics of HTML are defined in the HTML standard specification. The HTML specification and all other web-related standards issues are developed under the authority of the World Wide Web Consortium (W3C). Standards specifications and drafts of new proposals can be found at http://www.w3.org.

The latest HTML specification approved by the W3C is HTML 4.01. The latest generation of browsers have implemented the new standard almost fully. Although some support is still buggy, very few features of the specification remain unsupported. In the past, some browser makers implemented nonstandard extensions that could only be used on limited platforms. These extensions have been mostly done away with, although some platform-specific support still exists.

This section of the book summarizes the current state of HTML in seven chapters, as listed below. For more information on HTML, we recommend O'Reilly's HTML and XMTML: The Definitive Guide, by Chuck Musciano and Bill Kennedy.

The current chapter introduces you to the background and general syntax of HTML. It also gives a brief introduction to XHTML, the XML-compliant version of HTML
Chapter 3 describes the syntax of HTML tags and documents with descriptions of all the HTML tags in current use.
For authors who want to use frames in HTML, Chapter 4 covers the frame tags in more detail and shows examples of using them.
For authors using tables, Chapter 5 covers the table tags in more detail.
Chapter 6 covers the form tags and shows examples of how to use them.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

An HTML document consists of text, which comprises 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 header and body:

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

Each document has a head and a body, delimited by the <head> and <body> tags. The head is where you give your HTML document a title and where you indicate other parameters the browser may use such as script and style sheets. The body is where you put the actual contents of the HTML document. This includes the text for display and document control markers (tags) that describe the text elements. Tags also reference media files like graphics and sound, and indicate the hot spots (hyperlinks or 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!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

For the most part, HTML document elements are simple to understand and use. Every HTML element consists of a tag name, sometimes followed by an optional list of attributes, all placed between opening and closing brackets (< and >). The simplest elements are nothing more than the tag name enclosed in brackets, such as <head> and <i>. More complicated tags have attributes, which may have specific values defined by the author to modify the behavior of an element.

Attributes belong after the tag name, each separated by one or more tab, space, or return characters. The order of attributes in a single tag is not important. An attribute's value, if it has one, follows an equal sign after the attribute name. If an attribute's value is a single word or number, you may simply add it after the equal sign. All other values should be enclosed in single or double quotation marks, especially if they contain several words separated by spaces. The length of an attribute's value is limited to 1,024 characters. Here are some examples of tags with attributes:

<a href="http://www.ora.com/catalog.html" >
<h1 align="right">
<input name="filename" size="24" maxlength="80">
<link title="Table of Contents">

Tag and attribute names are not case-sensitive, but attribute values can be. For example, it is especially important to use the proper capitalization when referencing the URLs of other documents with the href attribute.

Most HTML elements consist of start and end tags that enclose a block of content. An end tag is the same as a start tag except it has a forward slash (/) before the tag name. End tags never contain attributes. For example, to italicize text, you enclose it within the <i> tags:

<i>This text in italics.</i>

You should take care when nesting elements in a document. You must end nested elements by starting with the most recent one and working your way back out. In this example, a phrase in bold (<b>) appears in the text of a link (<a href=...>) contained in a paragraph:

<p>
This is some text in the body, with a
<a href="another_doc.html">link, a portion of which
is <b>set in bold</b></a>
</p>

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

When the W3C defined the Extended Markup Language (XML), they also defined XHTML as a more rigorous, XML-compliant version of HTML. XHTML is designed to satisfy XML rules while still remaining legitimate HTML.

For example, although HTML specifies the <p> tag to start a paragraph, and the </p> tag to end it, you can easily omit the </p>, because HTML browsers will generally infer them. However, XHTML requires both <p> and </p> tags for all paragraphs, without exceptions.

The goal of the W3C is that eventually, HTML will migrate completely over to XHTML. However, that migration is likely to be slow. As long as people who write HTML documents manually can get away with omitting </p> tags and still have browsers parse them without complaint, they will continue to do so.

Most HTML authors today don't really need to worry about XHTML if all they're interested in is having their documents parsed by a web browser. But if you write tools that generate HTML, or if you expect that one day your document might be used in a venue other than the Web, you should take the time to learn XHTML. The differences between XHTML and HTML are trivial compared to the benefits of writing XML-compliant documents.

For more information on XHTML, refere to www.w3.org, or to the book HTML and XHTML: The Definitive Guide.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

One of the most important features provided by web page scripting is the ability to detect and react to events that occur while a document is loaded, rendered, and used. Web page authors can set up scripts that will be triggered by such events as a cursor passing over an image, clicking on a link, or even leaving a page. The scripting code that responds to these events may be placed within the <script> element or loaded from a separate file. A special set of common element attributes point to a script when their event is triggered. These attributes are called event handlers.

For example, you might want to invoke a JavaScript function when the user passes the mouse over a hyperlink in a document. You simply add a "mouse over" event handler for the <a> tag called onMouseOver

<a href=doc.html DEFANGED_OnMouseOver="document.status='Click me!'; return 
true">

When the mouse passes over the example link, the browser executes the JavaScript statements. (Here, the JavaScript itself is embedded in the attribute, since it is so simple. Notice that the statements are enclosed in quotes and separated by a semicolon, and that single quotes surround the text-message portion of the first statement.)

While a complete explanation of this code is beyond our scope, the net result is that the browser places the message "Click me!" in the status bar of the browser window. Commonly, HTML authors use this simple JavaScript function to display a more descriptive explanation of a hyperlink, in place of the often cryptic URL the browser traditionally displays in the status window.

HTML supports a rich set of event handlers through related "on" event attributes. The value of any event handler attribute is either the name of a function defined elsewhere in the document, or a quoted string containing one or more script statements separated by semicolons. Extremely long statements can be broken across several lines, if needed.

At the lowest level, HTML event handlers are simply hooks defined by the browser manufacturer to access the Document Object Model of the browser. The DOM models the structure of the client as an interface for controlling it via scripting. For example,

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

This section lists the tags and attributes in HTML 4.01.

Prior to HTML Version 4, there were few attributes that could be used consistently for all HTML tags. HTML 4 changes this, defining a set of 16 core attributes that can be applied to almost all the tags in the language. For brevity, we list these core attributes in this section and spare you the redundancies in the table that follows:

class=name: Specify a style class controlling the appearance of the tag's contents.
dir=dir: Specify the rendering direction for text, either left to right (ltr) or right to left (rtl).
id=name: Define a reference name for the tag that is unique in the document.
lang=language: Specify the human language for the tag's contents with an ISO639 standard two-character name and optional dialect subcode.
onclick=applet: Specify an applet to be executed when the user clicks the mouse on the tag's contents display area.
ondblclick=applet: Specify an applet to be executed when the user double-clicks the mouse button on the tag's contents display area.
onkeydown=applet: Specify an applet to be executed when the user presses down on a key while the tag's contents have input focus.
onkeypress=applet: Specify an applet to be executed when the user presses and releases a key while the tag's contents have input focus.
onkeyup=applet: Specify an applet to be executed when the user releases a pressed key while the tag's contents have input focus.
onmousedown=applet

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Prior to HTML Version 4, there were few attributes that could be used consistently for all HTML tags. HTML 4 changes this, defining a set of 16 core attributes that can be applied to almost all the tags in the language. For brevity, we list these core attributes in this section and spare you the redundancies in the table that follows:

class=name: Specify a style class controlling the appearance of the tag's contents.
dir=dir: Specify the rendering direction for text, either left to right (ltr) or right to left (rtl).
id=name: Define a reference name for the tag that is unique in the document.
lang=language: Specify the human language for the tag's contents with an ISO639 standard two-character name and optional dialect subcode.
onclick=applet: Specify an applet to be executed when the user clicks the mouse on the tag's contents display area.
ondblclick=applet: Specify an applet to be executed when the user double-clicks the mouse button on the tag's contents display area.
onkeydown=applet: Specify an applet to be executed when the user presses down on a key while the tag's contents have input focus.
onkeypress=applet: Specify an applet to be executed when the user presses and releases a key while the tag's contents have input focus.
onkeyup=applet: Specify an applet to be executed when the user releases a pressed key while the tag's contents have input focus.
onmousedown=applet: Specify an applet to be executed when the user presses down on the mouse button when pointing to the tag's contents display area.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

<a>

Create a hyperlink (href attribute) or fragment identifier (name attribute) within a document.

Attributes

accesskey =char: Define the hot-key character for this anchor.
charset =encoding: Specify the character set used to encode the target.
coords =list: Specify a list of shape-dependent coordinates.
href =url: Specify the URL of a hyperlink target (required if not a name anchor).
hreflang =language: Specify the language encoding for the target.
name =string: Specify the name of a fragment identifier (required if not a hypertext reference anchor).
rel =relationship: Indicate the relationship from this document to the target.
rev =relationship: Indicate the reverse relationship of the target to this document.
shape =shape: Define the region's shape to be circ, circle, poly, polygon, rect, or rectangle.
tabindex =value: Define the position of this anchor in the document's tabbing order.
target =name

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

HTML frames allow you to divide the main browser window into smaller subwindows (frames), each of which simultaneously displays a separate document. Links in one frame can open in another frame by specifying its name as a target. All of the latest graphical browsers support frames.

Two tags are used to make frame documents: <frameset> and <frame>. The <noframes> element provides alternative content for nonframes browsers. This is a requirement for HTML 4.0 and later and should contain functional content, or a link to it, instead of telling someone to get a browser that supports frames.

A frameset is simply a collection of frames that occupy the browser's window. Column and row definition attributes for the <frameset> tag let you define the number and initial sizes for the columns and rows of frames. The <frame> tag defines what document—HTML or otherwise—initially goes into the frame, and is where you may give the frame a name to use for hypertext link targets.

Here is the HTML source for a simple frame document, which is displayed by the browser in Figure 4-1.

<html>
<head>
<title>Frames Layout</title>
</head>
<frameset rows="60%,*" cols="65%,20%,*">
  <frame src="frame1.html">
  <frame src="frame2.html">
  <frame src="frame3.html" name="fill_me">
  <frame scrolling=yes src="frame4.html">
  <frame src="frame5.html">
  <frame src="frame6.html">
  <noframes>
    You are using a browser that does not support frames.
    <a href="frame1.html">Take this link</a> to the first
    HTML document in the set.
  </noframes>
</frameset>
</html>

Figure 4-1: A simple six-panel frame layout in Netscape

The first thing to notice in the sample document is that Netscape fills the frames in the frameset in order across each row. Second, Frame 4 sports a scrollbar because we told it to, even though the contents may otherwise fit the frame without scrolling. (Scrollbars automatically appear if the contents overflow the frame's dimensions, unless explicitly disabled with

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The <frameset> tag defines the collection of frames or other framesets in a document. Framesets may be nested, providing a richer set of layout capabilities. The <frameset> tag replaces the <body> tag in a document. You may not include any other content except valid <head> and <frameset> content.

The <frameset> tag uses two attributes to let you define the size and number of columns (cols) and rows (rows) of either frames or nested framesets to display in the document window. These attributes divide a frameset in a grid-like or tabular format. Both attributes accept a quote-enclosed, comma-separated list of values that specify either the absolute or relative width (for columns) or height (for rows) for the frames. The number of attribute values determines how many rows or columns of frames the browser displays in the document window.

Each value in the rows and cols attributes can be specified in one of three ways: as an absolute number of pixels, as a percentage of the total width or height of the frameset, or as a portion of the space remaining after setting aside room for adjacent elements.

The browser matches the size specifications as closely as possible. However, the browser will not extend the boundaries of the main document window or leave blank space outside of frames. Space is allocated to a particular frame in reference to all other frames across the row or down the column, and the entire document window is filled. Also, the main document window for a frame document does not have scrollbars.

Here is an example of setting row heights in pixels:

<frameset rows="150,300,150" >

This creates three frames, each stretching across the entire document window. The top and bottom rows are set to 150 pixels tall; the middle is set to 300 pixels. Unless the browser window is exactly 600 pixels tall, the browser automatically and proportionally stretches or compresses the top and bottom rows so that each occupies one-quarter of the window space. The middle row occupies the remaining half of the window. This frameset could be expressed with percentages like this:

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You can achieve more complex layouts by using nested <frameset> tags. Any frame within a frameset can contain another frameset.

For example, Figure 4-2 shows a layout of two columns, the first with two rows and the second with three rows. This is created by nesting two <frameset> tags with row specifications within a top-level <frameset> that specifies the columns:

<frameset cols="50%,*" >
  <frameset rows="50%,*">
    <frame src="frame1.html">
    <frame src="frame2.html">
  </frameset>
  <frameset rows="33%,33%,*">
    <frame src="frame3.html">
    <frame src="frame4.html">
    <frame src="frame5.html">
  </frameset>
</frameset>

Figure 4-2: Staggered frame layouts using nested <frameset> tags

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

A frame document contains no displayable content (except for the contents of the <noframes> tag, if applicable). The <frame> tags provide URL references to the individual documents that occupy each frame. <frame> tags are standalone elements, and therefore do not require a closing tag.

Frames are placed into a frameset column by column, from left to right, and then row by row, from top to bottom—so the sequence and number of <frame> tags inside a <frameset> are important.

Netscape displays empty frames for <frame> tags that do not contain an src document attribute and for those trailing ones in a frameset that do not have an associated <frame> tag. Such orphans, however, remain empty; you cannot put content into them later, even if they have a target name attribute for display redirection.

Listed below are the basic attributes that can be used in the <frame> tag.

src= document_name: The value of the src attribute is a URL of the document that is to be displayed in the frame. The document may be any valid HTML document or displayable object, including images and multimedia. The referenced document may itself be another frame document.
name= frame_name: The optional name attribute labels the frame for later reference by a target attribute in a hypertext link anchor <a> tag. If a link that targets a frame's name is selected, the document is displayed in the named frame. The value of the name attribute is a text string enclosed in quotes.
noresize: Even though you may explicitly set their dimensions with attributes in the <frameset> tag, users can manually alter the size of a column or row of frames. To suppress this behavior, add the noresize attribute to the frame tags in the row or column whose relative dimensions you want to maintain.
scrolling=[yes,no,auto]: Normally, the browser displays vertical and horizontal scrollbars for frames whose contents exceed the allotted space. If there is sufficient room for the content, no scrollbars appear. The

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The <frame> tag includes an attribute that allows you to name the frame. A hypertext link in another frame can load its referenced document into the named frame by using the target attribute in the <a> tag. For example:

<frame src="frame.html" name="display_frame">

describes a frame that displays frame.html and is named display_frame. If another frame or window (or even the same frame) contains this link:

<a href="file.html" target="display_frame">

and this link is selected, the file file.html replaces the file frame.html in the frame named display_frame. This is the basic use of targeting frames. A useful example is a book with a table of contents. The table of contents is loaded into a frame that occupies a narrow column on the left side of the browser window. The table of contents contains a list of links to each chapter in the book. Each chapter link targets the frame that occupies the rest of the window. You can then view the chapters while keeping the table of contents available for further navigation.

It can be tedious to specify a target for every hyperlink in your documents, especially when most are targeted at the same window or frame. To alleviate this problem, you can use the target attribute for the <base> tag in the <head> of your document. Adding a target to the <base> tag sets the default target for every hypertext link in the document that does not contain an explicit target attribute.

There are a couple of things to note about the use of targets and named frames:

If a link without a target is contained within a frame, the referenced document replaces the current contents of the same frame if it is selected.
If a link contains a target that does not exist, a new window is opened to display the referenced document, and the window is given the target's name. That window can thus be used by other links that target it.

Four reserved target names for special document redirection actions are listed below. They all begin with the underscore ( _ ) character. You should not use the underscore character as the first letter of any name that you assign a frame, as it will be ignored by the 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!

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

The recommended method for defining frame borders is to set the various border style attributes in the <frame> or <frameset> via a CSS stylesheet or inline style. Internet Explorer and Netscape Navigator both support attributes that adjust the style of the borders that surround frames. These attributes were introduced in earlier browsers prior to a standardized specification. Although they have the same functions, the attributes are slightly different for each browser.

Netscape uses the frameborder attribute to toggle between 3D borders and simple rules for borders. The default is to use 3D borders; a value of no gives simple borders. This attribute can be placed in either the <frameset> tag or in a <frame> tag. A setting in an individual <frame> overrides an outer <frameset> setting.

You can also set the color of the borders in both <frameset> and <frame> with the bordercolor attribute.

In the <frameset> tag, you can set the width of the borders in a whole frameset with the border attribute. The default width is 5 pixels. To achieve borderless frames in Netscape, set border=0 and frameborder=no.

Internet Explorer does all the same things, only with different attributes. It also uses frameborder in the <frameset> and <frame> tags, but the values are 1 for 3D borders and 0 for simple ones. In the <frameset> tag, you can set the amount of space between frames with the framespacing attribute. By setting framespacing=0 and frameborder=0, you can achieve borderless frames.

Another feature in Internet Explorer is the floating frame. This has all the abilities that a regular frame does, but it is placed within a document like an <img> would be. The tag for a floating frame is <iframe>, and it requires a closing tag. The attributes include all of the regular <frame> attributes, and the sizing, alignment, and placement attributes of <img>.

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

HTML tables offer a detailed way to present data, as well as a creative way to lay out the information in your web documents. The standard HTML model for tables is straightforward: a table is a collection of data arranged and related in rows and columns of cells. Most cells contain data values; others contain row and column headers that describe the data.

The HTML 4.01 table specification defines a number of tags and attributes for creating tables. Newly supported tags allow you to organize and display table data with great detail, and with the application of CSS-style elements, table styles can be standardized across your documents.

The main tags that describe tables are: <table>, <caption>, <tr>, <th>, and <td>. The <table> tag surrounds the table and gives default specifications for the entire table such as background color, border size, and spacing between cells. The optional <caption> tag is placed within the <table> tags and provides a caption for the table. <tr> tags denote each row of the table and contain the tags for each cell within a row. <th> and <td> describe the table cells themselves, <th> being a header cell and <td> being a regular cell. <th> and <td> tags surround the information that is displayed within each table cell.

Table cells are defined across each row of a table. The number of cells in a row is determined by the number of <th> or <td> tags contained within a <tr>. If a table cell spans more than one row (using the rowspan attribute), the affected rows below it automatically accommodate the cell, and no additional cell tag is needed to represent it in those rows.

Figure 5-1 shows an HTML table rendered in two different browsers. Note how differently each browser displays the same table. You should keep these differences in mind when designing tables and test to see how your table looks in different browsers (as with all of your HTML documents).

Figure 5-1: HTML table rendered by Navigator (top) and by Explorer (bottom)

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

Tables are normally treated as floating objects within a browser window. They're aligned in the browser window to match the text flow, usually left-justified (or centered). Unlike inline images, however, text normally floats above and below a table but not beside it. Internet Explorer and Netscape allow you to set the alignment of a table and float text around it with the align attribute. align accepts two values, left and right. These values instruct the browser to align the table with either the left or right margin of the text flow around it. Text then flows along the opposite side of the table, if there is room.

The hspace and vspace attributes add extra space between the table and surrounding content. hspace adds space to the left and right sides of the table; vspace adds space above and below it. The value of each attribute is given as an integer number of pixels.

The width attribute can give you some control over the width of a table. Tables are normally rendered at the width that fits all the contents. The width attribute allows you to widen the table beyond the default size to occupy a set number of pixels or a percentage of the window's width. For example:

<table width="100%" >

always stretches the table to the full width of the browser window. This is a conditional instruction, however. The size of a table cell is always determined by the size of the biggest "fixed" content, such as an image or a nonbreaking line of text. Therefore, a table may need to be wider than you wish it. If the table cells contain mostly wrapping text elements such as paragraphs (<p>), the browser usually accommodates your request.

The border attribute to <table> controls the borders within and around the table. Simply using border with no attributes adds default borders to a table, which are not rendered the same in any two browsers. You can set border width by giving the attribute an integer number of pixels as a value. The

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

Content preview·Buy PDF of this chapter|Buy reprint rights for this chapter

You can add a title or caption to your table by using a <caption> tag within a <table>. The default placement of the caption for Netscape and Internet Explorer is above the table and centered with it. The placement and alignment of the caption is controlled by special alignment attributes that differ between the browsers.

In Netscape, the align attribute accepts two values: top and bottom. These allow you to put the caption above or below the table. The default value is top.

Internet Explorer, on the other hand, uses the align attribute for horizontal placement of the caption. It accepts values of left, right, and center (the default). The vertical positioning of the caption in Internet Explorer is controlled by a special valign attribute, which ac