html concepts and techniques fourth edition project 12 creating and using xml documents
TRANSCRIPT
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()“ /> 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