Transcript Project 12 - SUNY Orange - Applied Technology Department

HTML
Concepts and Techniques
Fifth Edition
Chapter 12
Creating and Using
XML Documents
Chapter Objectives
• Describe an XML document, and rules for a wellformed and valid XML document
• Define the purpose of processing instructions,
document prolog, and document instance
• Describe the purpose of a Document Type
Definition (DTD)
• Create and bind CSS and XSL style sheet files to
an XML document
Chapter 12: Creating and Using XML Documents
2
Chapter Objectives
• 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
3
Introduction
• Extensible Markup Language (XML) uses tags to describe
the structure of a document and its content, not just the
format for display as with an HTML document
• Extensible Stylesheet Language (XSL) is used 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
Chapter 12: Creating and Using XML Documents
4
Design Goals for XML
Chapter 12: Creating and Using XML Documents
5
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, navigate to the Chapter12\
ChapterFiles folder on UDISK (G:)
Chapter 12: Creating and Using XML Documents
6
Starting Notepad and Creating
a New XML Document
• Type apartmentlist-dtd.xml in the File
name text box
• Click the Save button in the Save As dialog box
Chapter 12: Creating and Using XML Documents
7
Starting Notepad and Creating
a New XML Document
Chapter 12: Creating and Using XML Documents
8
Entering the Prolog
in an XML Document
• Click line 1
• Enter the XML code shown in Table 12-7 to
create the prolog and press the ENTER key
Chapter 12: Creating and Using XML Documents
9
Entering the Prolog
in an XML Document
Chapter 12: Creating and Using XML Documents
10
Starting to Enter the Document
Instance in an XML Document
• If necessary, click line
15
• Enter the XML code
shown in Table 12–9
on page HTML 56 to
create the first
document instance
Chapter 12: Creating and Using XML Documents
11
Finishing Entering the Document
Instance in an XML Document
• Click line 24
• Enter the XML code shown in Table 12-10 on
pages HTML 561 with the error on line 39 to
finish creating the document instance
Chapter 12: Creating and Using XML Documents
12
Finishing Entering the Document
Instance in an XML Document
Chapter 12: Creating and Using XML Documents
13
To Save and Test the XML Document
• With a USB drive plugged into your computer,
click File on the menu bar and then click Save to
save the completed apartmentlist-dtd.xml
document
• Start your browser. If necessary, click the
Maximize button
• Click the Address bar
• Type G:\Chapter12\ChapterFiles\
apartmentlist-dtd.xml and then press the
ENTER key to display the completed document
Chapter 12: Creating and Using XML Documents
14
To Save and Test the XML Document
Chapter 12: Creating and Using XML Documents
15
Correcting the Tag Error and
Retesting the XML Document
•
•
•
•
Click the Notepad button on the taskbar
Click line 39
Delete the lowercase </listing> tag
Type </LISTING> as the new tag in place of
the deleted tag to correct the closing listing tag
Chapter 12: Creating and Using XML Documents
16
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 to display
the corrected page
• If necessary, click the security bar under the tabs, and
then click Allow Blocked Content… on the menu
• If necessary, click Yes in the Security Warning dialog box
• Click the minus signs in front of the <LISTING> tags to
collapse the individual instances in the list
• Click the plus sign in front of the second <LISTING> tag
to expand that instance
Chapter 12: Creating and Using XML Documents
17
Correcting the Tag Error and
Retesting the XML Document
Chapter 12: Creating and Using XML Documents
18
Creating an External Style Sheet
Using CSS
• Start a new Notepad document, keeping the
original Notepad document open. If necessary,
maximize the new Notepad 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–11 to create
an external CSS
Chapter 12: Creating and Using XML Documents
19
Creating an External Style Sheet
Using CSS
• Click File on the menu bar and then click Save As
• Type apartmentlist-css.css in the File name text
box. If necessary, navigate to UDISK (G:). Double-click
the Chapter12 folder and then double-click the
ChapterFiles folder in the list of available folders
• Click the Save button in the Save As dialog box
Chapter 12: Creating and Using XML Documents
20
Creating an External Style Sheet
Using CSS
Chapter 12: Creating and Using XML Documents
21
Linking an External Cascading Style
Sheet to an XML Document
• Activate the Notepad window containing the XML
document, apartmentlist-dtd.xml
• Click line 2 and change the file name from
apartmentlist-dtd.xml to apartmentlist-css.xml
• Click the beginning of line 3
• Press the ENTER key once. Position the insertion
point on the blank line created, line 3
Chapter 12: Creating and Using XML Documents
22
Linking an External Cascading Style
Sheet to an XML Document
• Type <?xml-stylesheet type=”text/css”
href=”apartmentlist-css.css”?> on the
blank line, but do not press the ENTER key
• Click File on the menu bar and then click Save As
• Type apartmentlist-css.xml in the File name
text box. If necessary, navigate to UDISK (G:).
Double-click the Chapter12 folder and then doubleclick the ChapterFiles folder in the list of available
folders
• Click the Save button in the Save As dialog box
Chapter 12: Creating and Using XML Documents
23
Linking an External CSS Style Sheet
to an XML Document
Chapter 12: Creating and Using XML Documents
24
Testing an XML Document Formatted
Using an External CSS
• Activate the browser.
Enter the URL
G:\Chapter12\
ChapterFiles\
apartmentlist-css.xml
to display the XML
document formatted
using an external style
sheet
Chapter 12: Creating and Using XML Documents
25
Opening and Saving an XML
Document with a New File Name
• Click the apartmentlist-css.xml 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 Files in the Files of type drop-down list
• Double-click apartmentlist.xml in the list of files
Chapter 12: Creating and Using XML Documents
26
Opening and Saving an XML
Document with a New File Name
• With the apartmentlist.xml file open, click File on
the menu bar and then click Save As
• Type apartmentlist-bedroom.xml in the File
name text box
• Click the Save button in the Save As dialog box
to save the file with the new name
Chapter 12: Creating and Using XML Documents
27
Starting Creating an XSL Style Sheet
• Click the apartmentlistcss.css Notepad button to
activate the Notepad
window
• Click File on the menu
bar, and then New to start
a new Notepad document
• Enter the code shown in
Table 12–15 to start the
XSL style sheet and then
press the ENTER key
Chapter 12: Creating and Using XML Documents
28
Adding XML Tags to a Template
Element in an XSL Style Sheet
• Click line 4
• Enter the code shown
in Table 12–18 to add
the XML template
element tags and then
press the ENTER key
Chapter 12: Creating and Using XML Documents
29
Finishing Creating an XSL Style
Sheet
• Click line 11
• Enter the code shown in
Table 12–20 to complete
the XSL style sheet
Chapter 12: Creating and Using XML Documents
30
Saving an XSL Style Sheet
• 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 chapter12xslsolution.xsl in the File
name text box
• Click the Save button in the Save As dialog box
to save the chapter12xslsolution.xsl style sheet
Chapter 12: Creating and Using XML Documents
31
Linking an XSL Style Sheet
to an XML Document
• Activate the Notepad window containing the XML
document, apartmentlist-bedroom.xml
• Click line 2 and change the file name,
NAMElist.xml, to apartmentlist-bedroom.xml
• Click at the beginning of line 3
• Press the ENTER key to create a blank line, and
then click the blank line
• Type <?xml-stylesheet type=”text/xsl”
href=”chapter12xslsolution.xsl”?> but
do not press the ENTER key to enter the code to
link the XSL style sheet to the XML document
Chapter 12: Creating and Using XML Documents
32
Linking an XSL Style Sheet
to an XML Document
Chapter 12: Creating and Using XML Documents
33
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:\Chapter12\ChapterFiles\
apartmentlist-bedroom.xml and then press
the ENTER key to display the formatted XML
document formatted by the XSL style sheet
Chapter 12: Creating and Using XML Documents
34
Saving and Testing an XML Document
Formatted Using an XSL Style Sheet
Chapter 12: Creating and Using XML Documents
35
Closing the Notepad Window
and the XSL Style Sheet
• Activate the Notepad window containing the XSL
style sheet, chapter12xslsolution.xsl
• Click the Close button on the Notepad title bar
Chapter 12: Creating and Using XML Documents
36
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 chapter12table.html from the
Chapter12\ChapterFiles folder
• Click File on the menu bar and then click Save As
Chapter 12: Creating and Using XML Documents
37
Creating an HTML Document
to Display XML Data in a Table
• Type chapter12tablesolution.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
38
Creating an HTML Document
to Display XML Data in a Table
Chapter 12: Creating and Using XML Documents
39
Entering Code to Link an XML
Document with an HTML Web Page
• With the chapter12tablesolution.html Notepad
window active, click line 4
• Type <xml id=”dsoApartments”
src=”apartmentlistbedroom.xml”></xml> but do not press the
ENTER key to link the XML document to the
HTML Web page
Chapter 12: Creating and Using XML Documents
40
Entering Code to Link an XML
Document with an HTML Web Page
Chapter 12: Creating and Using XML Documents
41
Entering Code
to Add Navigation Buttons
• Click line 18
• Enter the code shown
in Table 12–24 and do
not press the ENTER
key to enter the
navigation buttons for
the HTML table
Chapter 12: Creating and Using XML Documents
42
Entering the Code to Bind XML
Elements to an HTML Table Header
• Click line 23
• Enter the code shown
in Table 12–25 and
then press the ENTER
key to bind the XML
elements to the table
header
Chapter 12: Creating and Using XML Documents
43
Entering the Code to Bind XML
Elements to HTML Table Rows
• If necessary, click line
31
• Enter the code shown
in Table 12–26 to bind
the XML elements to
the table rows
Chapter 12: Creating and Using XML Documents
44
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
• Type G:\Chapter12\ChapterFiles\
chapter12tablesolution.html and then
press the ENTER key so the Web page is
displayed in the browser
Chapter 12: Creating and Using XML Documents
45
Saving the HTML File
and Testing the Web Page
• If necessary, click the security bar under the tabs,
and then click Allow Blocked Content… on the
menu
• If necessary, 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
46
Saving the HTML File
and Testing the Web Page
Chapter 12: Creating and Using XML Documents
47
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, chapter12findapartment.html, from
the Chapter12\ChapterFiles folder
• Click File on the menu bar and then click Save As
Chapter 12: Creating and Using XML Documents
48
Creating an HTML Document to Search an
XML Document and Display Results
• Type
chapter12findapartmentsolution.html in
the File name text box
• If necessary, click UDISK (G:) and navigate to the
Chapter12 folder, and then double-click the
ChapterFiles folder in the list of available folders
• Click the Save button in the Save As dialog box
Chapter 12: Creating and Using XML Documents
49
Entering Code to Bind an XML
Document with an HTML Web Page
• With the chapter12findapartmentsolution.html
Notepad window active, click line 4
• Type <xml id=”dsoApartment”
src=”apartmentlist.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
50
Entering Code to Bind an XML
Document with an HTML Web Page
Chapter 12: Creating and Using XML Documents
51
Entering Code to Add the <input>
and <button> Elements
• Click line 27 and position the insertion point before the
closing </p> paragraph tag
• Type <input type=”text” id=”SearchText”
size=”5” onkeypress=”keyPressed()”/>&nbsp;
and do not press the ENTER key to enter the search text
field
• On the same line, type <button onclick=
”findApartment()”>Search</button> but do not
press the ENTER key to enter the onclick event handler to
call the user defined function
Chapter 12: Creating and Using XML Documents
52
Entering Code to Add the <input>
and <button> Elements
Chapter 12: Creating and Using XML Documents
53
Entering the <div> Element
• Click line 32
• Type <div id=”SearchResult”
style=”marginleft:10%”></div> and do
not press the ENTER key to create the output
area for the search results
Chapter 12: Creating and Using XML Documents
54
Entering the <div> Element
Chapter 12: Creating and Using XML Documents
55
Entering Code for the findApartment()
User-Defined Function
• Click line 8
• Enter the code shown
in Table 12–27 and
then press the ENTER
key to enter the
findApartment() userdefined function
Chapter 12: Creating and Using XML Documents
56
Entering Code to Search the Recordset
Values and Build the Output String
• If necessary, click line
16
• Enter the code shown
in Table 12–28 to
search the recordset
values and build the
output string. Press
the ENTER key
Chapter 12: Creating and Using XML Documents
57
Entering Code to Complete the
findApartment() Function
• Click line 29
• Enter the code shown in
Table 12–29 on previous
page and then press the
ENTER key to enter the
code to complete the
findApartment() function
Chapter 12: Creating and Using XML Documents
58
To Enter the Code for the
keyPressed() Function
• Click line 35
• Enter the code shown
in Table 12–30 and
then press the ENTER
key to enter the code
for the keyPressed()
function
Chapter 12: Creating and Using XML Documents
59
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:\Chapter12\ChapterFiles\
chapter12findapartmentsolution.html and then
press the ENTER key so the Web page is displayed in the
browser
• Enter the data values shown in Table 12–31 in the input
text box and then click the Search button to test this Web
page
Chapter 12: Creating and Using XML Documents
60
Saving and Testing the HTML
Document in the Browser
Chapter 12: Creating and Using XML Documents
61
Verifying the Links
on the Statewide Realty Web Page
• Click the Address bar. Type G:\Chapter12\
ChapterFiles\chapter12homesolution.html and
then press the ENTER key to display the Web page in the
browser
• Click the Browse by Complex image hot spot link
• After viewing the Web page, click the Back button on the
browser toolbar to return to the Statewide Realty Web
home page
• Click the Browse by Vacancy image hot spot link
Chapter 12: Creating and Using XML Documents
62
Verifying the Links
on the Statewide Realty Web Page
• After viewing the Vacancy Web page, click the
Back button on the browser toolbar or click the
Home link to return to the Statewide Realty Web
page
• Click the Search by Bedrooms image hot spot
link
• When the Statewide Realty – Search by
Bedrooms page is displayed, enter a 2 in the
search text field and then click Search to search
for apartments with two bedrooms
Chapter 12: Creating and Using XML Documents
63
Verifying the Links
on the Statewide Realty Web Page
Chapter 12: Creating and Using XML Documents
64
Validating a Web Page
• Open Internet Explorer and navigate to the Web
site validator.w3.org
• Click the Validate by File Upload tab
• Click the Browse button
• Locate the chapter12homesolution.html file on
your storage device and then click the file name
• Click the Open button in the Choose file dialog
box and the file name will be inserted into the File
box
Chapter 12: Creating and Using XML Documents
65
Validating a Web Page
• Click the Check button
• Click the Browse button
• Locate the apartmentlist-dtd.xml file on your
storage device and then click the file name.
• Click the Open button in the Choose file dialog
box and the file name will be inserted into the File
box
• Click the Revalidate button
Chapter 12: Creating and Using XML Documents
66
Closing Notepad and the Browser
• Click the Close button on the browser title bar
• Click the Close button on the Notepad window
title bar
Chapter 12: Creating and Using XML Documents
67
Chapter Summary
• Describe an XML document, and rules for a wellformed and valid XML document
• Define the purpose of processing instructions,
document prolog, and document instance
• Describe the purpose of a Document Type
Definition (DTD)
• Create and bind CSS and XSL style sheet files to
an XML document
Chapter 12: Creating and Using XML Documents
68
Chapter Summary
• 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
69
HTML
Concepts and Techniques
Fifth Edition
Chapter 12 Complete
Creating and Using
XML Documents