Contents
Overview 1
XML Technologies: The Big Picture 2
Viewing XML with Style Sheets 7
Binding XML to HTML 17
Accessing XML with the Document Object
Model 25
Validating XML 32
Review 43

Module 2: Overview of
XML Technologies Information in this document is subject to change without notice. The names of companies,
products, people, characters, and/or data mentioned herein are fictitious and are in no way intended
to represent any real individual, company, product, or event, unless otherwise noted. Complying
with all applicable copyright laws is the responsibility of the user. No part of this document may
be reproduced or transmitted in any form or by any means, electronic or mechanical, for any
purpose, without the express written permission of Microsoft Corporation. If, however, your only
means of access is electronic, permission to print one copy is hereby granted.

Microsoft may have patents, patent applications, trademarks, copyrights, or other intellectual
property rights covering subject matter in this document. Except as expressly provided in any
written license agreement from Microsoft, the furnishing of this document does not give you any

Group Product Manager: Steve Elston

Module 2: Overview of XML Technologies iii Instructor Notes
This module provides students with an overview of the principal technologies
associated with XML. The aim is to provide students with the big picture so that
they realize how all the pieces of the XML jigsaw fit together.
Apart from cascading style sheets (CSS) and Document Type Definitions
(DTDs), all the topics introduced in this module are revisited in greater depth in
subsequent modules. Therefore, there is no need to discuss topics exhaustively
here. All that students need at the moment is an appreciation of what’s possible,
and an awareness of some of the terminology such as style sheets, data binding,
DOM, and validation.
After completing this module, students will be able to:
!
Explain the use of style sheets.
!
Explain the use of binding XML data to HTML.
!
Describe the Document Object Model (DOM).
!
Explain the need for validation.
!
Describe the differences between DTDs and XML schemas.

Materials and Preparation
This section provides you with the required materials and preparation tasks that
you need to teach this module.

There is an animation that shows simplified examples of each topic; all you
need to do is briefly introduce the terms before you play the animation.
!
Viewing XML with Style Sheets
Begin by introducing cascading style sheets (CSS) as they relate to HTML.
(Some students may already be familiar with this.) Describe how CSS style
sheets can be applied to XML documents in a similar manner, but make it
clear that we are only providing a simple overview of CSS here.
Emphasize the limitations of CSS (for example, it doesn’t allow data
filtering, reordering, or scripting). Introduce the Extensible Stylesheet
Language (XSL) and show the effect of applying different style sheets to an
XML document. Do not attempt to describe XSL syntax yet; instead, refer
students to Module 4: Displaying an XML Document Using XSL.
!
Binding XML to HTML
Discuss the different ways in which a Web server can return information to
the browser: HTML, XML, or a combination of both. Then discuss the
disadvantages of the first two methods: HTML is portable but doesn’t allow
the client to manipulate the data intelligently; XML allows the client to
process the data, but provides limited means of scripting.
Introduce XML data islands as a solution that combines the benefits of
HTML and XML. Then briefly discuss data binding at a conceptual level.
Do not go into the detail; instead, refer students to Module 5: Embedding
XML Data in HTML.
!
Accessing XML with the Document Object Model
DOM is a broad subject. All students need to know at the moment is that it
is a programming interface to XML data. Use the opportunity to describe
how XML documents are read into an in-memory tree during parsing. Also,
compare DOM with other object models that students might be familiar with

Overview
!
XML Technologies: The Big Picture
!
Viewing XML with Style Sheets
!
Binding XML to HTML
!
Accessing XML with the Document Object Model
!
Validating XML
!
ReviewIn this module, you will learn about some of the supporting technologies that
allow XML documents to be displayed, manipulated in programs, and validated
for correct structure.
After completing this module, you will be able to:
!
Explain the use of style sheets.
!
Explain the use of data binding XML data to HTML.
!
Describe the Document Object Model (DOM).
!
Explain the need for validation.
!
Describe the differences between DTDs and XML schemas.


To provide an overview of
XML technologies and their
roles in the life cycle of an
XML document.
Lead-in
Some of the most commonly
used XML terms are
schemas, style sheets,
validation, and the DOM.
Module 2: Overview of XML Technologies 3 Introducing XML Terminology
Style sheets
Document Object
Model (DOM)
Validation
Data binding
XMLThe preceding illustration introduces some of the terms and technologies
associated with XML. Let’s examine each of these items in detail.
Style sheets
When a user opens an XML document in Internet Explorer 5, the browser
displays the document as a collapsible hierarchy of nodes, as shown in the
following sample XML document:
<?xml version="1.0"?>
<booklist>
<book>

middle of the slide.
2. The “style sheet” picture.
3. The “data binding”
picture.
4. The “DOM” picture.
5. The “validation” picture.
4 Module 2: Overview of XML Technologies When this document is loaded into Internet Explorer 5, it is displayed as
follows.

To make the information more presentable to the user, a style sheet can be
applied to the XML document to transform the XML into HTML elements. For
example, a style sheet can be written that transforms the XML data into an
HTML table as follows.

There are two ways of defining style sheets for an XML document:
!
Cascading style sheets (CSS)
!
Extensible Style Language (XSL)
Module 2: Overview of XML Technologies 5 We will introduce both techniques in this module, and then cover XSL in detail
in Module 4, “Displaying an XML Document Using XSL.”
Data binding
If you want the browser to display additional information, or to have dynamic
elements such as buttons and text fields, you can embed an XML document

XML document:
!
Document Type Definitions (DTDs)
!
XML schemas

We will introduce both techniques in this module, and then cover XML
schemas in more detail in Module 8, “Validating XML Data Using Schemas.”
6 Module 2: Overview of XML Technologies Animation: Life Cycle of an XML Document To see an animation on the life cycle of an XML document, run the “Life cycle
of an XML document” media element on the Student CD-ROM.

Lead-in
In this animation, you will
see how style sheets, data
binding, the DOM, and
validation all play a role in
the life cycle of an XML
document.

Delivery Tip
Play the animation Life
cycle of an XML
document,
1905A_02A005.avi, on the

XML documents. You will also learn about XSL style sheets and how to apply
them for formatting XML data.
Lead-in
When presenting data to
users, it is most effective
and efficient to present
formatted data.
The same is true with XML.
Although XML data is
inherently structured, it is
not suitable to display to the
user in its raw form.
Instead, the XML data can
be transformed into a more
presentable format such as
HTML, which browsers can
understand and display
properly.
8 Module 2: Overview of XML Technologies Introducing Cascading Style Sheets (CSS)
!
Style sheets can be used to define formatting for data
!
HTML can be styled by using cascading style sheets
<HEAD>
<STYLE TYPE="text/css">
H1 {font-family:Comic Sans MS; font-size:36pt}
P {font-family:Arial; font-size:16pt; color:red}

<HEAD>
<STYLE TYPE="text/css">
H1 {font-family:Comic Sans MS; font-size:36pt}
P {font-family:Arial; font-size:16pt; color:red}
</STYLE>
</HEAD>

<BODY>
<H1>This is my heading</H1>
<P>This is a paragraph.</P>
<P>This is another paragraph.</P>
</BODY>

In the following example, the <STYLE> element contains two entries:
!
The first entry defines the style rules for <H1> elements. It specifies that
<H1> elements should be displayed in Comic Sans MS, 36pt font style.
!
The second entry defines the style rules for <P> elements. It specifies that
<P> elements should be displayed in Arial, 16pt and red font style.

Slide Objective
To introduce the concept of
style sheets and cascading
style sheets in particular.
Lead-in
The need to format HTML
data led to the use of
cascading style sheets.
Module 2: Overview of XML Technologies 9

name {display:inline; font-family:Comic Sans MS;
color:red}
salary {display:inline; font-family:Arial;
font-size:24pt}
employee {display:block; margin:10px}
name {display:inline; font-family:Comic Sans MS;
color:red}
salary {display:inline; font-family:Arial;
font-size:24pt}Cascading style sheets were originally used for formatting HTML documents.
However, they can also be used to define formatting styles for XML
documents. By using cascading style sheets, you can achieve simple styling
effects on XML data.
Consider the XML document shown in the slide, which contains information
about employees in a company. Notice the processing instruction at the
beginning of the XML document:
<?xml-stylesheet type="text/css" href="Employees.css"?>

This processing instruction applies a cascading style sheet called Employees.css
to the XML document.
Employees.css is also shown in the slide. The cascading style sheet defines a set
of style properties for each element in the XML document, except for the
outermost <employees> element. Following is a brief description of these style
properties:
!
The first entry defines the style properties for <employee> elements. We
have specified that each employee should be displayed on a new line. (This
is the meaning of the display:block style property.)

To demonstrate how to
apply a cascading style
sheet to an XML document.
Lead-in
In this demonstration, you
will see the effect of
applying a cascading style
sheet to an XML document.
You will see how the style
sheet appears in the
browser without the style
sheet, and then see how the
cascading style sheet
improves the presentation
for the user.
Delivery Tip
1. In Notepad, open the file
Employees.xml from the
folder
\InetPub\WWWRoot\1905\D
emoCode\Mod02\Css.
2. Note the <employee>
elements and the <name>
and <salary> child
elements.
3. Launch Internet Explorer
5 and open Employees.xml.
The document is displayed
as a tree.
4. Edit Employees.xml. After

$
New elements/attributes to be added
$
Elements/attributes to be sorted and ordered
$
Loops, decision-making, and script to be used for extra
sophistication Although HTML programmers use cascading style sheets extensively, they are
quite limited in scope. Therefore, the preferred way of styling XML documents
is to use the Extensible Stylesheet Language (XSL).
The most common use of XSL style sheets is to translate XML tags into HTML
tags. The XML tags define the data itself, whereas the HTML tags define how
that data should be rendered in the browser.
Another use of XSL is to translate one set of XML tags into a different XML
format. This usage is more appropriate in a business-to-business (B2B) e-
commerce scenario. For example, consider the example of a Company A that
wishes to order more supplies from one of its suppliers. The supplier issues its
catalog in XML, which is a different format from the one used by Company A.
In this case, an XSL style sheet can be used to convert the supplier’s XML tags
into the format needed by Company A’s applications.
XSL style sheets consist of a set of rules that are applied to different elements
and attributes in an XML document. XSL uses pattern-matching syntax to pick
out specific elements and attributes.
For example, you can specify a pattern that matches all <employee> elements
in the XML document and displays these elements in an HTML table. Some of
the advantages of using XSL for styling XML documents are:
!
XSL allows new elements/attributes to be added, rather than just styling

<salary>23500</salary>
</employee>
</employees>
<?xml-stylesheet type="text/xsl" href="Employees.xsl"?>
<employees>
<employee>
<name>Roberts</name>
<salary>23500</salary>
</employee>
</employees>To attach an XML document to an XSL style sheet, add a processing instruction
such as the following to the XML document:
<?xml-stylesheet type="text/xsl" href="URL for XSL file" ?>

You can only attach a single XSL style sheet to an XML document. If you
attach more than one, only the first one is interpreted — the others are ignored.
When the XML document is loaded into an XML parser, the parser recognizes
the processing instruction and loads the XSL style sheet into the XSL
processor. The XSL processor then transforms the XML document according to
the transformation rules defined in the XSL style sheet.
If you have a style sheet named Employees.xsl, it can be attached at the
beginning of the Employees.xml document as follows:
<?xml-stylesheet type="text/xsl" href="Employees.xsl" ?>
<employees>
...
</employees>

For more information about creating and using XSL style sheets, refer to

will see the effect of
applying an XSL style sheet
to an XML document. You
will see how the document
appears in the browser
without the style sheet, and
then see how the XSL style
sheet improves the
presentation for the user.
Delivery Tip
For the demonstration, do
not show the students the
contents of the .xsl files.
Only tell them how to attach
the style sheets.
1. In Notepad, open the file
Employees.xml from the
folder
\InetPub\WWWRoot\1905\D
emoCode\Mod02\Xsl.
2. Note the <employee>
elements and the various
child elements.
3. Open Employees.xml in
Internet Explorer 5.
4. Edit Employees.xml and
attach the Employees1.xsl
style sheet:
<?xml-stylesheet
type="text/xsl"