Module 2: Overview of XML Technologies

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

license to these patents, trademarks, copyrights, or other intellectual property.

 2000 Microsoft Corporation. All rights reserved.

Microsoft, ActiveX, PowerPoint, Visual C++, Windows, and Windows NT are either registered
trademarks or trademarks of Microsoft Corporation in the U.S.A. and/or other countries.

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.

Other product and company names mentioned herein may be the trademarks of their respective
owners.


Program Manager: Steve Merrill
Instructional Designers: Sangeeta Nair (NIIT), Vijayalakshmi Narayanaswamy (NIIT)
Subject Matter Experts: Andy Olsen (QA Training), Andy Longshaw (Content Masters)
Content Lead: Janet Robinson
Graphic Artist: Scott Serna (Creative Assets)
Media Management: David Mahlmann
Media Production: Dean Connolly (Art Source), Timothy Demmon (:timebomb Media)
Editing Manager: Jennifer Linn
Editor: Dennis Rae (Wasser)
Production Manager: Miracle Davis
Print Coordinator: Marlene Lambert (Online Training Solutions, Inc)
Build Manager: Julie Challenger
Build Coordinator: Jenny Boe
Test Lead: Eric Myers
Manufacturing Manager: John Williams

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.

Required Materials
To teach this module, you need the following materials:
!
Microsoft PowerPoint
®
file 1905a_02.ppt
!
Module 2, “Overview of XML Technologies”
!
Animation, “Life Cycle of an XML Document,” in file 1905a_02A005.avi

Preparation Tasks
To prepare for this module, you should:
!
Read all of the materials for this module.

Presentation:
180 Minutes

Lab:
00 Minutes
iv Module 2: Overview of XML Technologies


Module Strategy
Use the following strategies to present this module:
!
XML Technologies: The Big Picture
The purpose of this section is to introduce some XML terminologies — style
sheets, data binding, the Document Object Model (DOM), and validation.

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

(for example, Microsoft Excel, ActiveX Data Objects).
In the demonstration, do not dwell on the script that uses the DOM. Just
discuss the example at a conceptual level and show the effects of running
the example in the browser. For more details about DOM, refer students to
Module 6: Manipulating XML Data on the Client Using DOM.
!
Validating XML
This section contains three main themes: to describe what validation is and
why it’s needed, to provide a brief overview of DTDs, and to introduce
XML schemas as the preferred validation technique.
Module 2: Overview of XML Technologies v


This is the only place in the course where DTDs are discussed, but they are
covered only briefly. Be careful not to dismiss DTDs as irrelevant because
they are used widely in the XML community even now. However, you also
need to make students understand why we are concentrating on XML
schemas (for example, technical advantages, the BizTalk factor, and
Microsoft’s commitment to XML schemas).
For more details about XML schemas, refer students to Module 8:
Validating XML Data Using Schemas.


Module 2: Overview of XML Technologies 1


#
##
#

Overview
!
XML Technologies: The Big Picture
!
Viewing XML with Style Sheets
!
Binding XML to HTML
!
Accessing XML with the Document Object Model
!
Validating XML
!
Review


In 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.

Slide Objective
To provide an overview of
the module topics and
objectives.
Lead-in
In this module, you will learn
about some of the XML
technologies currently in
use.
Delivery Tip
This is the only section in
the entire course in which
DTDs will be covered.
2 Module 2: Overview of XML Technologies


#
##
#

XML Technologies: The Big Picture
!
Introducing XML Terminology
!
Animation: Life Cycle of an XML Document


In this section, you will be introduced to some of the terminology used by the
XML community, and see how the various XML technologies fit together.
Slide Objective

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
XML


The 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>

<title>The Gourmet Microwave</title>
<isbn>72-80081-082</isbn>
<publisher>New Moon Books</publisher>
<price>9.95</price>
</book>
<book>
<title>Sushi, Anyone?</title>
<isbn>72-80081-024</isbn>
<publisher>New Moon Books</publisher>
<price>14.99</price>
</book>
</booklist>

Slide Objective
To introduce some of the
terms and technologies
associated with XML.
Lead-in
Let’s look at some of the
important technologies
associated with XML.
Delivery Tip
This slide is animated so
that it shows each part of
the illustration in stages.
The slide is empty initially.
Click the icons to reveal the
following parts of the
illustration:
1. The “XML” text in the

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

within an HTML page. This is known as an XML data island. It is even
possible to bind HTML elements directly to the data in an XML data island.
This is known as data binding.
For example, you can define an HTML page that contains an XML data island
representing a booklist, plus various HTML labels to display the details for
each book in the list. You can bind each label to a separate element or attribute
in the XML data island so that the book details are displayed in the browser.
You can also define HTML buttons to let the user navigate through the books in
the data island. For example, you can provide a Next button that causes the next
book to be displayed in the HTML labels, and a Previous button to move to the
previous book.
We will show the effects of data binding in this module, and then discuss data
binding in greater detail in Module 5, “Embedding XML Data in HTML.”
The Document Object Model (DOM)
The Document Object Model (DOM) defines a programming interface that
allows you to write programs or script to read, modify, extend, or delete data in
an XML document.
For example, you can write script that runs on the Web server and uses the
DOM to create an XML document to send to the browser. Alternatively, you
can write client-side script that builds an XML document at the client and then
submits the XML data to the Web server when appropriate.
We will introduce the basic concepts of DOM in this module. For more detailed
information, refer to Module 6, “Manipulating XML Data on the Client Using
DOM.”
Validation
One of the aims of XML is to enable data to be exchanged between applications
and organizations in a meaningful and self-describing manner. One issue that
often arises is the need to validate the content and structure of an XML
document to ensure that it contains the elements and attributes you expect.
At the time of this writing, there are two ways of performing validation on an

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

Student CD-ROM.
Module 2: Overview of XML Technologies 7


#
##
#

Viewing XML with Style Sheets
!
Introducing Cascading Style Sheets (CSS)
!
Using Cascading Style Sheets with XML
!
Demonstration: Applying a Cascading Style Sheet
to an XML Document
!
XSL Style Sheets for XML
!
Applying XSL Style Sheets
!
Demonstration: Applying an XSL Style Sheet to an
XML Document
!
Practice: Attaching Style Sheets to an XML
Document


In this section, you will learn how to format XML data.
You will learn about cascading style sheets (CSS) and how they are used with

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}

</STYLE>
</HEAD>
<BODY>
<H1>This is my heading</H1>
<P>This is a paragraph.</P>
<P>This is another paragraph.</P>
</BODY>
<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>


HTML was originally designed to eliminate the need to use specific display
characteristics such as font names and font sizes. HTML uses more generic
elements such as <H1> and <EM> to represent details such as headings and
emphasis. However, it soon became apparent that document authors did need to
format data and therefore required styling and formatting features.
Cascading style sheets (CSS) provide one way of defining the formatting styles
for elements in an HTML document. The following example shows how
cascading style sheets are used to define formatting rules for <H1> and <P>
elements in an HTML document. The styles are defined by using a <STYLE>
element, which is usually placed in the <HEAD> of the document.

<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

Instead of defining the style sheet rules within the HTML document, you can
also create a separate .css file (for example MyStyles.css) and link the style
sheet to the HTML document as follows:
<LINK REL="STYLESHEET" TYPE="text/css" HREF="MyStyles.css">

10 Module 2: Overview of XML Technologies


Using Cascading Style Sheets with XML
!
Formatting XML documents with cascading style sheets
!
Attaching the style sheet to an XML document
<?xml-stylesheet type="text/css" href="Employees.css"?>
<employees>
<employee>
<name>Roberts</name>
<salary>23500</salary>
</employee>
</employees>
<?xml-stylesheet type="text/css" href="Employees.css"?>
<employees>
<employee>
<name>Roberts</name>
<salary>23500</salary>
</employee>
</employees>
employee {display:block; margin:10px}

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.)

!
The second and third entries define the style properties for the <name> and
<salary> elements, respectively. In each case, we specify “display:inline”,
so that the elements are displayed on the same line. We have also specified
the desired font face, font size, and color for these elements.

For more information about cascading style sheets, visit the Web site
/>.
Slide Objective
To provide an overview of
how to use cascading style
sheets for formatting XML
data.
Lead-in
You can use cascading style
sheets on XML documents
as well as HTML
documents.
Module 2: Overview of XML Technologies 11


Demonstration: Applying a Cascading Style Sheet to an XML
Document


In this demonstration, you will see the effects of applying a cascading style
sheet to an XML document. First, you will view an XML document in Internet
Explorer 5 without a style sheet attached. You will then attach a style sheet and
see how it affects the document as it is displayed in the browser.
Slide Objective

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

the statement
<?xml version="1.0"?>,
add the following statement:
<?xml-stylesheet
type="text/css"
href="Employees.css"?>.
This is the same style sheet
that we used in the previous
topic.
Save the file.
5. Return to Internet
Explorer 5 and refresh the
view of Employees.xml.
Each employee should now
be displayed on a different
line, as specified in the
cascading style sheet.
12 Module 2: Overview of XML Technologies


XSL Style Sheets for XML
!
XSL style sheets
$
Define rules for transforming XML elements/attributes into a
different format
$
Are more powerful and flexible than cascading style sheets
!
XSL allows

$
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

existing content.
!
XSL allows elements/attributes to be sorted and reordered, rather than being
restricted to their original order.
!
XSL allows loops, decision-making, and script to be used for extra
sophistication.

Slide Objective
To describe XSL style
sheets.
Lead-in
Cascading style sheets
have several limitations.
Module 2: Overview of XML Technologies 13


Applying XSL Style Sheets
!
Attach an XML document to an XSL style sheet
!
Example: Employees.xml includes Employees.xsl
<?xml-stylesheet type="text/xsl"
href="URL for XSL file" ?>
<?xml-stylesheet type="text/xsl"
href="URL for XSL file"?>
<?xml-stylesheet type="text/xsl" href="Employees.xsl"?>
<employees>
<employee>
<name>Roberts</name>

<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

Module 4, “Displaying an XML Document Using XSL.”
Slide Objective
To describe how to apply
XSL style sheets for
formatting data.
14 Module 2: Overview of XML Technologies


Demonstration: Applying an XSL Style Sheet to an XML Document


In this demonstration, you will see the effects of applying various XSL style
sheets to an XML document. The XML document contains information about
different employees.
!
The first XSL style sheet displays the employees in separate rows in the
browser.
!
The second XSL style sheet displays the employees in an HTML table.
!
The third XSL style sheet filters and reorders employees in the HTML table.
The table now contains only employees earning more than 50,000, with the
employees ordered by first name.

Slide Objective
To demonstrate how to
apply an XSL style sheet to
an XML document.
Lead-in
In this demonstration, you

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"

href="Employees1.xsl"?>.
5. Refresh the view in
Internet Explorer 5 and then
view the source.
6. Edit Employees.xml so
that it uses Employees2.xsl.
7. Refresh the view in
Internet Explorer 5 and then
view the source.
8. Edit Employees.xml so
that it uses Employees3.xsl.
9. Refresh the view in
Internet Explorer 5 and then
view the source.