HTMLConcepts and Techniques

Fourth Edition

Project 12

Creating and UsingXML Documents

Project 12: Creating and Using XML Documents 2

Project Objectives

• Describe an XML document• State the syntax rules for a well-formed and valid

XML document• State the rules for creating a generic identifier

(GI)• Define document prolog and document instance• Describe the purpose of processing instructions

Project 12: Creating and Using XML Documents 3

Project Objectives

• Describe the purpose of Document Type Definitions (DTD)

• Create and bind a CSS style sheet and an XSL style sheet file to an XML document

• Describe the XSL template, for-each, order-by, and value-of elements

• Bind an XML document to an HTML Web page

Project 12: Creating and Using XML Documents 4

Project Objectives

• Discuss the built-in table element methods• Create a JavaScript user-defined function to

search an XML document• Use the onkeypress event handler to accept input

from a text box• Define recordset and describe how the EOF

property is used

Project 12: Creating and Using XML Documents 5

Introduction

• Extensible Markup Language (XML) is a markup language that uses tags to describe the structure of a document and its content, not the format

• Extensible Stylesheet Language (XSL) is a language utilized to create style sheets for formatting structured XML data

• A parser is an XML processor that verifies the document follows the syntax rules for a well-formed document and converts the document into a tree of elements

Project 12: Creating and Using XML Documents 6

Design Goals for XML

Project 12: Creating and Using XML Documents 7

Starting Notepad and Creating a New XML Document

• Start Notepad, and if necessary, maximize the Notepad window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it

• With the USB drive plugged into your computer, click File on the menu bar and then click Save As on the File menu

• If necessary, click the Look in box arrow and then click UDISK (G:)

Project 12: Creating and Using XML Documents 8

Starting Notepad and Creating a New XML Document

• Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders

• Type bellvideo.xml in the File name text box• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 9

Starting Notepad and Creating a New XML Document

Project 12: Creating and Using XML Documents 10

Entering the Prolog in an XML Document

• Click line 1• Enter the XML code shown in Table 12-7 on

pages HTM 555 and HTM 556

Project 12: Creating and Using XML Documents 11

Entering the Prolog in an XML Document

Project 12: Creating and Using XML Documents 12

Starting to Enter the Document Instance in an XML Document

• Enter the following XML code, beginning on line 18

Project 12: Creating and Using XML Documents 13

Finishing Entering the Document Instance in an XML Document

• Click line 29• Enter the XML code shown in Table 12-10 on

pages HTM 559 and HTM 560

Project 12: Creating and Using XML Documents 14

Finishing Entering the Document Instance in an XML Document

Project 12: Creating and Using XML Documents 15

Saving the XML Document and Testing in the Browser

• With a USB drive plugged into your computer, click File on the menu bar and then click Save

• Start your browser. If necessary, click the Maximize button

• Click the Address bar• Type g:\Project12\ProjectFiles\bellvideo.xml and then press the ENTER key

Project 12: Creating and Using XML Documents 16

Saving the XML Document and Testing in the Browser

Project 12: Creating and Using XML Documents 17

Correcting the Tag Error and Retesting the XML Document

• Click the Notepad button on the taskbar• Click line 38• Delete the uppercase tag, </MOVIE>• Type </Movie> as the new tag in place of the

deleted tag

Project 12: Creating and Using XML Documents 18

Correcting the Tag Error and Retesting the XML Document

• Click File on the menu bar and then click Save• Activate the browser• Click the Refresh button on the browser toolbar

Project 12: Creating and Using XML Documents 19

Correcting the Tag Error and Retesting the XML Document

Project 12: Creating and Using XML Documents 20

Creating an External Style Sheet Using CSS

• Start a new Notepad document, and if necessary, maximize the window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it

• Click line 1• Enter the code shown in Table 12-11on page

HTM 64

Project 12: Creating and Using XML Documents 21

Creating an External Style Sheet Using CSS

• Click File on the menu bar and then click Save As

• Type bellvideo-css.css in the File name text box. If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders

• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 22

Creating an External Style Sheet Using CSS

Project 12: Creating and Using XML Documents 23

Linking an External CSS Style Sheet to an XML Document

• Click the Close button to close the bellvideo-css.css file and the Notepad window

• Activate the Notepad window containing the XML document, bellvideo.xml

• Click the beginning of line 2

Project 12: Creating and Using XML Documents 24

Linking an External CSS Style Sheet to an XML Document

• Press the ENTER key once. Position the insertion point on the blank line created

• Type <?xml-stylesheet type="text/css" href="bellvideo-css.css"?> but do not press the ENTER key

• Click File on the menu bar and then click Save

Project 12: Creating and Using XML Documents 25

Linking an External CSS Style Sheet to an XML Document

Project 12: Creating and Using XML Documents 26

Testing an XML Document Formatted Using an External CSS Style Sheet

• Activate the browser • Click the Refresh button on the Standard Buttons

toolbar

Project 12: Creating and Using XML Documents 27

Opening and Saving an XML Document with a New File Name

• If necessary, click the Notepad button on the status bar to activate the Notepad window

• With the USB drive plugged into your computer, click File on the menu bar and then click Open on the File menu

• If necessary, click the Look in box arrow and then click UDISK (G:)

• Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders

• If necessary, click the Files of type box arrow and then click All Files

Project 12: Creating and Using XML Documents 28

Opening and Saving an XML Document with a New File Name

• Double-click bellvideoall.xml in the list of files

• With the bellvideoall.xml file open, click File on the menu bar and then click Save As

• Type bellvideo-year.xml in the File name text box. If necessary, click

• UDISK (G:) in the Save in list. Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders

• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 29

Starting Creating an XSL Style Sheet

• Start a new Notepad document from the Start button and, if necessary, maximize the window. If the Word Wrap feature is not enabled, click Format on the menu bar and then click Word Wrap to enable it

• Enter the following code, beginning on line 1

Project 12: Creating and Using XML Documents 30

Adding XML Tags to a Template Element in an XSL Style Sheet

• Enter the following code, beginning on line 4

Project 12: Creating and Using XML Documents 31

Finishing Creating an XSL Style Sheet

• Enter the following code, beginning on line 10

Project 12: Creating and Using XML Documents 32

Saving an XSL Style Sheet

• With your USB drive plugged into your computer, click File on the menu bar and then click Save As

• Type bellvideo-year.xsl in the File name text box

• If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder. Double-click the ProjectFiles folder

• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 33

Linking an XSL Style Sheet to an XML Document

• Activate the Notepad window containing the XML document, bellvideo-year.xml

• Click at the beginning of line 3• Type <?xml-stylesheet type="text/xsl" href="bellvideo-year.xsl"?> but do not press the ENTER key

Project 12: Creating and Using XML Documents 34

Linking an XSL Style Sheet to an XML Document

Project 12: Creating and Using XML Documents 35

Saving and Testing an XML Document Formatted Using an XSL Style Sheet

• With the USB drive plugged into your computer, click File on the menu bar and then click Save

• Activate the browser• Click the Address bar• Type g:\Project12\ProjectFiles\bellvideo-year.xml and then press the ENTER key

Project 12: Creating and Using XML Documents 36

Saving and Testing an XML Document Formatted Using an XSL Style Sheet

Project 12: Creating and Using XML Documents 37

Closing the Notepad Window and the XSL Style Sheet

• Activate the Notepad window containing the XSL style sheet, bellvideo-year.xsl

• Click the Close button on the Notepad title bar

Project 12: Creating and Using XML Documents 38

Creating an HTML Document to Display XML Data in a Table

• Activate the Notepad window• With the USB drive plugged into your computer,

open the file, bellvideo-table.htm, from the Project12\ProjectFiles folder

• Click File on the menu bar and then click Save As

Project 12: Creating and Using XML Documents 39

Creating an HTML Document to Display XML Data in a Table

• Type bellvideo-typetable.htm in the File name text box

• If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder and then double-click the ProjectFiles folder in the list of available folders

• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 40

Creating an HTML Document to Display XML Data in a Table

Project 12: Creating and Using XML Documents 41

Entering Code to Link an XML Document with an HTML Web Page

• With the bellvideo-typetable.htm Notepad window active, click line 5

• Type <xml id="dsoVideo" src="bellvideo-type.xml"></xml> but do not press the ENTER key

Project 12: Creating and Using XML Documents 42

Entering Code to Link an XML Document with an HTML Web Page

Project 12: Creating and Using XML Documents 43

Entering Code to Add Navigation Buttons

• Click line 16• Enter the following code and do not press the

ENTER key when finished

Project 12: Creating and Using XML Documents 44

Entering the Code to Bind XML Elements to an HTML Table Header

• Enter the following code, beginning on line 21

Project 12: Creating and Using XML Documents 45

Entering the Code to Bind XML Elements to HTML Table Rows

• Enter the following code, beginning on line 28

Project 12: Creating and Using XML Documents 46

Saving the HTML File and Testing the Web Page

• With the USB drive plugged into your computer, click File on the menu bar and then click Save

• Activate your browser. If necessary, maximize the window

• Click the Address bar

Project 12: Creating and Using XML Documents 47

Saving the HTML File and Testing the Web Page

• Type g:\Project12\ProjectFiles\bellvideo-typetable.htm and then press the ENTER key

• Click the Next Page button• Click the First Page button and then click the Last

Page button

Project 12: Creating and Using XML Documents 48

Saving the HTML File and Testing the Web Page

Project 12: Creating and Using XML Documents 49

Creating an HTML Document to Search an XML Document and Display Results

• If necessary, click the Notepad button on the taskbar to activate the Notepad window

• With the USB drive plugged into your computer, open the file, findmovie.htm, from the Project12\ProjectFiles folder

• Click File on the menu bar and then click Save As

Project 12: Creating and Using XML Documents 50

Creating an HTML Document to Search an XML Document and Display Results

• Type findmovietitle.htm in the File name text box

• If necessary, click UDISK (G:) in the Save in list. Double-click the Project12 folder, and then double-click the ProjectFiles folder in the list of available folders

• Click the Save button in the Save As dialog box

Project 12: Creating and Using XML Documents 51

Entering Code to Bind an XML Document with an HTML Web Page

• With the findmovietitle.htm Notepad window active, click line 12

• Type <xml id="dsovideo" src="bellvideo-year.xml"></xml> but do not press the ENTER key

Project 12: Creating and Using XML Documents 52

Entering Code to Bind an XML Document with an HTML Web Page

Project 12: Creating and Using XML Documents 53

Entering Code to Add the <input> and <button> Elements

• Click line 18 and position the insertion point after, <p>Movie Title:

• Type <input type="text" id="searchtext" size="20“ onkeypress="keyPressed()“ />&nbsp; and press the ENTER key

• Type <button onclick="findMovie()">search</button> but do not press the ENTER key

Project 12: Creating and Using XML Documents 54

Entering Code to Add the <input> and <button> Elements

Project 12: Creating and Using XML Documents 55

Entering the <div> Element

• Click line 22• Type <div id="searchresult"> and then

press the ENTER key• Type Results: and then press the ENTER key• Type </div> and then press the ENTER key

Project 12: Creating and Using XML Documents 56

Entering the <div> Element

Project 12: Creating and Using XML Documents 57

Entering Code for the keyPressed() User-Defined Function

• Enter the following code, beginning on line 25

Project 12: Creating and Using XML Documents 58

Entering the Conversion and Validation Statements in the findMove() User-Defined Function

• Enter the following code beginning on line 32, and then press the ENTER key

Project 12: Creating and Using XML Documents 59

Entering Code to Search an XML Document for a Movie Title

• Enter the following code, beginning on line 39

Project 12: Creating and Using XML Documents 60

Saving and Testing the HTML Document in the Browser

• With your USB drive plugged into your computer, click File on the menu bar and then click Save

• Click the browser button on the taskbar to activate the browser

• Click the Address bar. Type g:\Project12\ProjectFiles\findmovietitle.htm and then press the ENTER key

• Enter the title Munich in the input text box and then click the search button

• Repeat the previous step using the test data sets 2, 3, and 4 shown in Table 12-31 on page HTML 593

Project 12: Creating and Using XML Documents 61

Saving and Testing the HTML Document in the Browser

Project 12: Creating and Using XML Documents 62

Verifying the Links in the Bell Video Web Page

• Click the Address bar. Type g:\Project12\ProjectFiles\bellvideoindex.htm and then press the ENTER key

• Click the Browse by Type link• After the Movie Video Listing by Type Web page is

displayed, click the Back button on the browser toolbar to return to the Bell Video Web page.

• Click the Search by Title link

Project 12: Creating and Using XML Documents 63

Verifying the Links in the Bell Video Web Page

• After the Find a Movie by Title Web page is displayed, click the Back button on the browser toolbar to return to the Bell Video Web page

• Click the Browse by Year link• When the Bell Video - Browse by Year Web page

is displayed, scroll down to view more movies in the list

Project 12: Creating and Using XML Documents 64

Verifying the Links in the Bell Video Web Page

Project 12: Creating and Using XML Documents 65

Closing Notepad and the Browser

• Click the Close button on the browser title bar• Click the Close button on the Notepad window

title bar

Project 12: Creating and Using XML Documents 66

Project Summary

• Describe an XML document• State the syntax rules for a well-formed and valid

XML document• State the rules for creating a generic identifier

(GI)• Define document prolog and document instance• Describe the purpose of processing instructions

Project 12: Creating and Using XML Documents 67

Project Summary

• Describe the purpose of Document Type Definitions (DTD)

• Create and bind a CSS style sheet and an XSL style sheet file to an XML document

• Describe the XSL template, for-each, order-by, and value-of elements

• Bind an XML document to an HTML Web page

Project 12: Creating and Using XML Documents 68

Project Summary

• Discuss the built-in table element methods• Create a JavaScript user-defined function to

search an XML document• Use the onkeypress event handler to accept input

from a text box• Define recordset and describe how the EOF

property is used

HTMLConcepts and Techniques

Fourth Edition

Project 12 Complete

Creating and UsingXML Documents