The graphics designer does the upfront work with the customer, designing
a mockup site with static HTML.
2. The initial mockup of the the site is handed off to the programmer
(i.e. checked into the source tree), who goes about developing the
dynamic presentation logic.
3. The graphics designer continues to refine the look and feel of
the site and checks the modified site into the source tree.
4. Both parties can continue to work in parallel, as long as the
interface between them, defined by standard id and class attributes
in the HTML, remains unchanged, as described below.
Defining Dynamic Components of HTML Pages
Two mechanisms, both part of the HTML 4.0 specification, are used
to identify elements (tags) for the creation of dynamic content.
The id attribute, valid on most elements, is a document-unique identifier
of a particular element. Elements may be grouped using the the class
attribute. The class name can then be used to find multiple elements
on which to perform an operation. A given element may belong to
multiple classes by giving multiple class attributes. While both
of these attributes are defined in HTML 4.0, most HTML software
ignores attributes that are not understood and their use does not
cause problems. Examples of these attributes are:
These identifiers serve as the formal interface between the designer
of a document and the programmer writing code to generate dynamic
content from that page. When the designer and programmer carefully
work out these identifiers, both may proceed with full development
The use of these id and class attributes does not conflict with
Style Sheet (CSS). All an id does it give that element a unique
name, it does not define the usage, the same id can be accessed
attribute is a white-space separated list of names, so it possible
for an element to belong to more than one class.
Identifying Elements for Modification
The main reasons for giving elements unique identifiers using the
id attribute are:
· Locating text to replace. When the DOM is generated, the resulting
text will not be contained directly in an Element object. but in
a Text node. To find the text, a containing element is given a unique
· For modifying structural components of the page. An idcan be attached
to a list or table and used to locate it for adding entries or rows.
· For modifying the attributes of specific elements.
When one wants to modify text embedded in a block of text, the
tag with an id attribute may be used to access a portion of text
within a larger text block.
Some of the useful reasons for grouping multiple elements using
the class attribute are:
· Deleting mockup entries in lists or rows in tables to make way
for adding the actual data.
· Modifying the attributes of multiple elements, such as changing
the color of several, disjoint blocks of text.