Datasheet
This is a correctly nested H1 tag
</h1>
</div>
The following is incorrect nesting:
<div>
<h1>
This is an incorrectly nested H1 tag
</div>
</h1>
Although it might seem to go against the grain of HTML’s easygoing and easy-to-code nature, if a page
isn’t correctly constructed, then you won’t be able to perform the kind of Ajax techniques discussed in
this book. To use the DOM, the page has to be correctly formed. Otherwise, you won’t be able to access
the different parts of the page.
Cascading Style Sheets (CSS) are the templates behind HTML pages that describe the presentation and
layout of the text and data contained within an HTML page. CSS is of particular interest to the developer
because changes made to the style sheet are instantly reflected in the display of the page. The style
sheets are linked into the document commonly with the HTML
<link> tag, although it is possible (but
not preferable) to specify style attributes for each individual HTML tag on a page. You can also access
CSS properties via the DOM.
In the design of any web site or web application, you should make the division between the content/
structure of the page and the presentation as clear as possible. Suppose you have 100 pages and you
specify the font size on all 100 pages as a style attribute. When you’re forced to change the font size you
will have to change it on each individual page, instead of changing it just once in the style sheet.
Having a style sheet isn’t 100 percent essential, but to keep good organization, style sheets are an indis-
pensable aid.
The Document Object Model (DOM)
The DOM is a representation of the web page as a hierarchy or tree structure, where every part of the
page (the graphics, the text boxes, the buttons, and the text itself) is modeled by the browser.
Before IE 4 and Netscape Navigator 4, not every part of the web page was accessible to code. In fact,
changing text on a web page had to be done by using server-side technologies or not at all. The whole
page was termed a document, and that document contained all the HTML tags and text that made up the
page. The DOM is specified as a standard by the World Wide Web Consortium, also known as W3C
(www.
w3.org), and so it is a standard way for all browsers to represent the page. You can pretty much
guarantee that when you use JavaScript to alter the background color of a page in IE, it will correctly do
so in Mozilla, Safari, or Opera as well. There are exceptions to the rule, though. There are several non-
standard methods in IE, and items such as ActiveX controls can’t be used in the other browsers.
You can add items to the DOM or alter them using a scripting language (such as JavaScript or VBScript),
and they will appear on the page immediately. They are typically addressed in the format that addresses
the page in hierarchical format, such as the following code, which addresses a button called “button” on
a form and changes the text of that button. Note that in this code fragment, the form element has the
name attribute set to
form1:
10
Chapter 1: Introducing Ajax
04_106754 ch01.qxp 2/9/07 6:15 PM Page 10