HTML, XHTML, and CSS

Chapter 12

Creating and UsingXML Documents

Chapter 12: Creating and Using XML Documents 2

Chapter Objectives

• Describe how XML differs from HTML• Describe an XML document instance, and rules

for creating a well-formed and valid XML document

• Define the purpose of the processing instruction, the document prolog, and the document instance

• Describe an XML Schema Definition (XSD) language file

Chapter 12: Creating and Using XML Documents 3

Chapter Objectives

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

• Discuss the uses of an XML data island• Discuss the built-in table element methods for

displaying an XML document in a table• Create a JavaScript user-defined function to

search an XML document

Chapter 12: Creating and Using XML Documents 4

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, 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, navigate to the Chapter12\ChapterFiles folder on your storage device

• Type chapter12-1classic_books.xsd in the File name text box

• Click the Save button in the Save As dialog box to save the Schema Definition file

Chapter 12: Creating and Using XML Documents 5

Starting Notepad++ and Creating a New XML Document

Chapter 12: Creating and Using XML Documents 6

Entering the Code for the Prolog, Root, Annotation, and Documentation Elements

• Click line 1• Enter the XML code shown in Table 12–11 to

create the beginning of the XML Schema Definition with the prolog, root, annotation, and documentation elements

Chapter 12: Creating and Using XML Documents 7

Entering the Code for the Prolog, Root, Annotation, and Documentation Elements

Entering Code for the <classic_books> Element

• Click line 10 and press the ENTER key once to place the insertion point on a blank line 11

• Enter the XML code shown in Table 12–12 to add the classic_books element tags

• Press the ENTER key twice after line 17

Chapter 12: Creating and Using XML Documents 8

Entering Code for the <classic_books> Element

Chapter 12: Creating and Using XML Documents 9

Entering Code for the <complexType> Element

• If necessary, click line 19• Enter the XML code shown in Table 12–14 to

enter the <complexType> element to define the group elements

• Press the ENTER key twice after line 21 and position the insertion point at the beginning of line 23

Chapter 12: Creating and Using XML Documents 10

Entering Code for the <complexType> Element

Chapter 12: Creating and Using XML Documents 11

Chapter 12: Creating and Using XML Documents 12

Entering Code for the Child Group Elements

• If necessary, click line 23• Enter the XML code shown in Table 12–15 to

enter the <group> element to define the childElements, pressing the ENTER key once after line 32

Chapter 12: Creating and Using XML Documents 13

Entering Code for the Child Group Elements

Chapter 12: Creating and Using XML Documents 14

To Save and Validating the XML Schema Definition File

• With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to re-save the chapter12-1classic_ books.xsd file

• Close the chapter12- 1classic_books.xsd file, but don’t close Notepad++

• Start your browser and type www.w3.org/2001/03/webdata/xsv in the Address box and press the ENTER key

• Scroll down to find the section that begins with “Use this form only if you are behind a firewall or have a schema to check which is not accessible via the Web”

Chapter 12: Creating and Using XML Documents 15

To Save and Validating the XML Schema Definition File

• Click the Browse button and navigate to your USB drive

• Double-click the chapter12-1classic_books.xsd file to select the XML Schema definition file for the validation Web page

• Click the Show warnings and Keep Going check boxes, but not the Check as complete schema check box

• Click the Upload and Get Results button. A valid XML Schema Definition will have no error messages

Chapter 12: Creating and Using XML Documents 16

To Save and Validating the XML Schema Definition File

Creating a New XML Document and Entering the Prolog Code

• If necessary, activate the Notepad++ window• Click File on the menu bar, then click New to

create a new Notepad++ document• 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, navigate to the Chapter12\ChapterFiles folder on UDISK (G:)

Chapter 12: Creating and Using XML Documents 17

Creating a New XML Document and Entering the Prolog Code

• Type chapter12-1classics.xml in the File name text box

• Click the Save button in the Save As dialog box• If necessary, click line 1• Enter the XML code shown in Table 12–17 to

create the prolog and press the ENTER key twice

Chapter 12: Creating and Using XML Documents 18

Creating a New XML Document and Entering the Prolog Code

Chapter 12: Creating and Using XML Documents 19

Starting Entering a Document Instance in an XML Document

• If necessary, click line 4• Enter the XML code shown in Table 12–19 to

create the root and first document instance. Press the ENTER key after line 13

Chapter 12: Creating and Using XML Documents 20

Starting Entering a Document Instance in an XML Document

Chapter 12: Creating and Using XML Documents 21

Finishing Entering a Document Instance in an XML Document

• If necessary, click line 14, indented as shown in Figure 12–15

• Enter the XML code shown in Table 12–20 with the error on line 29 to finish creating the document instance and do not press the ENTER key

Chapter 12: Creating and Using XML Documents 22

Finishing Entering a Document Instance in an XML Document

Chapter 12: Creating and Using XML Documents 23

Saving and Testing an XML Document in a Browser

• With a USB drive plugged into your computer, click the Save Icon on the Notepad++ toolbar to save the completed chapter12-1classics.xml document

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

• Click the Address bar• Type g:\Chapter12\ChapterFiles\chapter12-1classics.xml and then press the ENTER key to display the completed document

Chapter 12: Creating and Using XML Documents 24

Saving and Testing an XML Document in a Browser

Chapter 12: Creating and Using XML Documents 25

Chapter 12: Creating and Using XML Documents 26

Correcting a Tag Error and Retesting the XML Document

• Click the Notepad++ button on the taskbar

• Click line 29

• Delete the uppercase </BOOK> tag

• Type </book> as the new tag in place of the deleted tag to correct the closing book tag

• Click the Save icon on the Notepad++ toolbar to save the corrected file

• Activate the browser

Correcting a Tag Error and Retesting the XML Document

• Click the Refresh button on the browser toolbar to display the corrected page

• If necessary, click the security bar under the tabs, and then click Allow Blocked Content on the shortcut menu

• If necessary, click Yes in the Security Warning dialog box

• Click the minus sign in front of the second <book> tag to collapse the individual instance in the list

• Click the plus sign in front of the second <book> tag to expand that instance

Chapter 12: Creating and Using XML Documents 27

Chapter 12: Creating and Using XML Documents 28

Correcting a Tag Error and Retesting the XML Document

Chapter 12: Creating and Using XML Documents 29

Validating XML and XSD Files

• If necessary, activate your browser• Click the Address bar• Type tools.decisionsoft.com/schemaValidate/index.jsp and then press the ENTER key to load the Web page

• Click the Browse button next to the XML Schema text box• Navigate to your storage device and locate the XML

Schema Definition file, chapter12-1classic_books.xsd• Click the Open button on the Choose File to Upload

dialog box

Chapter 12: Creating and Using XML Documents 30

Validating XML and XSD Files

• Click the Browse button next to the XML Instance text box

• Navigate to your storage device and locate the XML document instance file, chapter12-1classics.xml

• Click the Open button on the Choose File to Upload dialog box

• Click the Validate button on the XML Schema Validator to upload the files

• When the Web page indicates the XML instance and XML schema are present, click the Click here link to see the results

Chapter 12: Creating and Using XML Documents 31

Validating XML and XSD Files

Chapter 12: Creating and Using XML Documents 32

Opening an XML Document and Saving It with a New Name

• 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, navigate to the Chapter12\ChapterFiles folder on the USB drive. Click All types (*,*) in the Save as type: drop-down list

• Double-click chapter12-1classic_more.xml in the list of files

Chapter 12: Creating and Using XML Documents 33

Opening an XML Document and Saving It with a New Name

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

• If necessary, navigate to the Chapter12\ChapterFiles folder on UDISK (G:)

• Type chapter12-1classic_books.xml in the File name text box

• Click the Save button in the Save As dialog box

Chapter 12: Creating and Using XML Documents 34

Starting Creating an XSL Style Sheet

• If necessary, activate the Notepad++ window

• Click File on the menu bar, and then New to start a new Notepad++ document

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

• If necessary, navigate to the Chapter12\ ChapterFiles folder on UDISK (G:)

• Type chapter12-1author_solution.xsl in the File name text box

• Click the Save button in the Save As dialog box to save the chapter12-1author_solution.xsl style sheet

• Enter the code shown in Table 12–23 to start the XSL style sheet, and then press the ENTER key once after line 3

Chapter 12: Creating and Using XML Documents 35

Starting Creating an XSL Style Sheet

Chapter 12: Creating and Using XML Documents 36

Entering HTML Code to Display the Banner and Text Title in a Web Page

• Click line 4• Enter the code shown in Table 12–24 to enter the

HTML tags to center the banner and format the title text. Press the ENTER key after line 8

Chapter 12: Creating and Using XML Documents 37

Entering HTML Code to Display the Banner and Text Title in a Web Page

Adding XSL Style Sheet Tags

• If necessary, click line 9• Enter the code shown in Table 12–28, indenting

as shown, to complete the XSL style sheet

Chapter 12: Creating and Using XML Documents 38

Adding XSL Style Sheet Tags

Chapter 12: Creating and Using XML Documents 39

Saving an XSL Style Sheet

• With your USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to re-save the XSL style sheet chapter12-1author_solution.xsl

Chapter 12: Creating and Using XML Documents 40

Chapter 12: Creating and Using XML Documents 41

Linking an XSL Style Sheet to an XML Document

• Click the chapter12- 1classic_books.xml tab in Notepad++

• Click at the beginning of line 3, then press the ENTER key once

• On line 4, type <?xml-stylesheet type="text/xsl" href=”chapter12-1author_solution.xsl”?> to enter the code to link the XSL style sheet to the XML document, then press the ENTER key once

Chapter 12: Creating and Using XML Documents 42

Linking an XSL Style Sheet to an XML Document

Chapter 12: Creating and Using XML Documents 43

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

• With the USB drive plugged into your computer, click the Save icon on the Notepad++ toolbar to save the chapter12- 1classic_books.xml file

• Activate the browser• Click the Address bar• Type g:\Chapter12\ ChapterFiles\chapter12-1classic_books.xml, and then press the ENTER key to display the XML document formatted by the XSL style sheet in author order

Chapter 12: Creating and Using XML Documents 44

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

Chapter 12: Creating and Using XML Documents 45

Closing the XML and XSL Files in Notepad++

• With the Notepad++ window active, right-click the chapter12-1classic_books.xml file tab, and click Close on the shortcut menu

• Right-click the chapter12-1classics.xml file tab and click Close on the shortcut menu

• Right-click the chapter12-1author_solution.xsl file tab, and click Close on the shortcut menu

Chapter 12: Creating and Using XML Documents 46

Creating an HTML Document to Display XML Data in a Table

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

open the file chapter12-1table.html from the Chapter12\ChapterFiles folder

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

• Type chapter12-1tablesolution.html in the File name text box

• Click the Save button in the Save As dialog box to save the file with a new name

Chapter 12: Creating and Using XML Documents 47

Creating an HTML Document to Display XML Data in a Table

Chapter 12: Creating and Using XML Documents 48

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

• With the chapter12- 1tablesolution.html Notepad++ window active, click line 6

• Type <xml id=“dsoBooks” src=“chapter12-1 classic_titles.xml”></xml> to link the XML document to the HTML Web page. Do not press the ENTER key

Chapter 12: Creating and Using XML Documents 49

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

Entering Code to Add Navigation Buttons

• Click line 15• Enter the code shown

in Table 12–32 on the previous page and press the ENTER key twice after line 18

Chapter 12: Creating and Using XML Documents 50

Entering <table> Table Header and Row Tags

• If necessary, click line 20• Enter the code shown in Table 12–33 to create

the table header and press the ENTER key once after line 29

Chapter 12: Creating and Using XML Documents 51

Entering <table> Table Header and Row Tags

Chapter 12: Creating and Using XML Documents 52

Entering <tr> Tags and Attribute Values to Bind XML Elements to a Table

• If necessary, click line 30

• Enter the code shown in Table 12–34 to bind the XML elements to the table rows. Do not press the ENTER key

Chapter 12: Creating and Using XML Documents 53

Chapter 12: Creating and Using XML Documents 54

Saving the HTML File and Testing the Web Page• With the USB drive plugged into your computer, click the Save

icon on the Notepad++ toolbar

• Activate your browser. If necessary, maximize the window

• Click the Address bar

• Type g:\Chapter12\ChapterFiles\chapter12 1tablesolution.html and then press the ENTER key so the Web page is displayed in the browser

• If necessary, click the security bar under the tabs, click Allow Blocked Content, then click Yes in the Security Warning dialog box

• Click the Next Page button

• Click the First Page button and then click the Last Page button to scroll through the table

Chapter 12: Creating and Using XML Documents 55

Saving the HTML File and Testing the Web Page

Chapter 12: Creating and Using XML Documents 56

Opening an HTML Document and Saving It with a New Name

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

• Close the chapter12-1tablesolution.html document window

• With the USB drive plugged into your computer, open chapter12-1fi ndauthor.html, from the Chapter12\ChapterFiles folder

• Save the file as chapter12-findauthorsolution.html

Chapter 12: Creating and Using XML Documents 57

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

• With the chapter12findauthorsolution.html Notepad++ window active, click line 6

• Type <xmlid=“dsoBooks”src=“chapter12-1classic_titles.xml”></xml>, but do not press the ENTER key, to bind the XML document with the HTML code

Chapter 12: Creating and Using XML Documents 58

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

Chapter 12: Creating and Using XML Documents 59

Entering Code for the <input> and <button> Elements

• Click line 27• Enter the code in Table 12–35 on the previous

page. Do not press the ENTER key after line 29

Chapter 12: Creating and Using XML Documents 60

Entering Code for the <input> and <button> Elements

Chapter 12: Creating and Using XML Documents 61

Entering an HTML <div> Tag Container

• Click line 34• Type <divid=“SearchResult”style=“marginleft:10%”> and press the ENTER key

• On line 35, type </div> and do not press the ENTER key

Chapter 12: Creating and Using XML Documents 62

Entering an HTML <div> Tag Container

Entering Code for the findAuthor() User-Defined Function

• Click line 10• Enter the code shown in Table 12–36 on the

previous page and then press the ENTER key after line 17 to enter the findAuthor() user-defined function

Chapter 12: Creating and Using XML Documents 63

Entering Code to Search the Recordset Values and Build the Output String

• If necessary, click line 18

• Enter the code shown in Table 12–37 to search the recordset values and build the output string. Press the ENTER key after line 30

Chapter 12: Creating and Using XML Documents 64

Chapter 12: Creating and Using XML Documents 65

Entering Code to Complete the findAuthor() Function

• If necessary, click line 31• Enter the code shown in Table 12–38 to complete the

findAuthor() function and then press the ENTER key twice at line 35

Entering Code for the keyPressed() Function

• If necessary, click line 37• Enter the code shown in Table 12–39 to create

the keyPressed() function. Press the ENTER key twice after Line 40

Chapter 12: Creating and Using XML Documents 66

Entering Code for the clearField() Function

• If necessary, click line 42• Enter the code shown in Table 12–40 on the

previous page to create the clearField() function. Do not press the ENTER key after line 49

Chapter 12: Creating and Using XML Documents 67

Entering Code for the clearField() Function

Chapter 12: Creating and Using XML Documents 68

Chapter 12: Creating and Using XML Documents 69

Saving and Testing the HTML Document in the Browser• With your USB drive plugged into your computer, click the Save

icon on the Notepad++ toolbar• Click the browser button on the taskbar to activate the browser• Click the Address bar. Type g:\Chapter12\ChapterFiles\

chapter12-1findauthorsolution.html, and then press the ENTER key so the Web page is displayed in the browser

• If necessary, click the security bar under the tabs, click Allow Blocked Content, then click Yes in the Security Warning dialog box

• Enter the data values in the Author’s Name column in Table 12–41 in the input text box, and then click the Search button to test this Web page

Chapter 12: Creating and Using XML Documents 70

Saving and Testing the HTML Document in the Browser

Chapter 12: Creating and Using XML Documents 71

Verifying the Links on the Classic Books Home Page

• Click the Address bar• Type g:\Chapter12\ChapterFiles\chapter12-1homesolution.html, and then press the ENTER key to display the Web page in the browser

• Click the Books in Author Order image hot spot link• After viewing the Web page, click the Back button on the

browser toolbar to return to the Classic Books Web home page

• Click the Books in Title Order image hot spot link

Chapter 12: Creating and Using XML Documents 72

Verifying the Links on the Classic Books Home Page

• After viewing the Web page, click the Back button on the browser toolbar or click the Home link to return to the Classic Books Web page

• Click the Find Books image link• Type dickens in the search text field, and then

click Search to search for books written by Charles Dickens

Chapter 12: Creating and Using XML Documents 73

Verifying the Links on the Classic Books Home Page

Chapter 12: Creating and Using XML Documents 74

Quitting Notepad++ and the Browser

• Notepad++, click the File menu, then Close All• Click the Close button on the Notepad++ title bar• Click the Close button on the browser title bar. If

necessary, click the Close all tabs button

Chapter 12: Creating and Using XML Documents 75

Chapter Summary

• Describe how XML differs from HTML• Describe an XML document instance, and rules

for creating a well-formed and valid XML document

• Define the purpose of the processing instruction, the document prolog, and the document instance

• Describe an XML Schema Defi nition (XSD) language file

Chapter 12: Creating and Using XML Documents 76

Chapter Summary

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

• Discuss the uses of an XML data island• Discuss the built-in table element methods for

displaying an XML document in a table• Create a JavaScript user-defined function to

search an XML document

HTML, XHTML, and CSS

Chapter 12 Complete

Creating and UsingXML Documents