![Page 1: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/1.jpg)
1
Introduction
Extensible Markup Language (XML)– Uses tags to describe the structure of a
document– Simplifies the process of sharing
information– Extensible Stylesheet Language (XSL)– XML is a subset of Standard Generalized
Markup Language
![Page 4: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/4.jpg)
4
Introduction
Documents must be well-formed– Must adhere to the basic syntax rules for
XML and contain at least one root element
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
![Page 6: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/6.jpg)
6
Creating a Well-Formed XML DocumentProlog
– Contains declaration and processing instruction statements
Document instance– Contains the main content or elements of the
XML documentProcessing instruction
– One or more instructions passed to the application using the XML document
XML declaration– Processing instruction statement identifying the
version of XML used in the document
![Page 8: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/8.jpg)
8
Creating a Well-Formed XML DocumentDocument type declaration
– A processing instruction that tells the processor where to locate the Document Type Definition
Document Type Definition (DTD)– Defines the elements and attributes in an XML
documentValidity of XML documentsInstance
– Occurrence of XML elementsRoot element
– The main element in an XML document
![Page 14: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/14.jpg)
14
Creating the Document Instance in an XML DocumentGeneric Identifier (GI)
– The name that a developer provides for the tagsNamespace
– A unique identifier or prefix used to identify tags that have the same name
Relation– A collection of data
Schema– States the relation name and follows with a list of
attributes or fields in parentheses
![Page 17: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/17.jpg)
17
Linking a Cascading Style Sheet to Format an XML DocumentMakes XML easier to readStart a new Notepad documentClick line 1Enter the code shown on the following
slide
![Page 20: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/20.jpg)
20
Formatting and Manipulating an XML Document Using an XSL Style SheetExtensible Stylesheet LanguageBinding XML documents to HTML Web
pages
![Page 21: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/21.jpg)
21
Formatting and Manipulating an XML Document Using an XSL Style SheetTransforming an XML document
– The XSL style sheet tells the browser or parser to output the XML document in a completely different form, such as HTML
SourceResult tree
![Page 22: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/22.jpg)
22
Creating an XSL Style SheetStylesheet element
– Establishes a namespace, so the remaining elements can use names that will not be confused with other elements
![Page 23: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/23.jpg)
23
Creating an XSL Style SheetTemplate
– An instruction that identifies which elements in a document should be transformed, and how they should be transformed
![Page 26: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/26.jpg)
26
Adding XML Tags to a Template Element in an XSL Style SheetClick line 4Enter the code shown on the following
slide
![Page 29: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/29.jpg)
29
Adding XML Tags to a Template Element in an XSL Style Sheetfor-each element
– Makes each element of the XML document display in the table
![Page 30: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/30.jpg)
30
Adding XML Tags to a Template Element in an XSL Style Sheetvalue-of element
– Defines the display for each element within the PHONELIST
![Page 33: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/33.jpg)
33
Saving an XSL Style SheetWith your HTML Data Disk in drive A,
click File on the menu bar and then click Save As. Type xslalphaclublist.xsl in the File name text box. Save to the Project 11 folder on your HTML Data Disk
![Page 35: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/35.jpg)
35
Linking an XSL Style Sheetto an XML DocumentActivate the Notepad window
containing the XML document, clublist.xml
Click line 3Type <?xml-stylesheet type=“text/xsl” href=“xslalphaclublist.xsl”?> but do not press the ENTER key
![Page 37: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/37.jpg)
37
Saving and Testing an XML Document Formatted Using an XSL Style SheetWith your HTML Data Disk in drive A, click
File on the menu bar and then click Save As. Type clublist-xsl.xml in the File name text box. Save to the Project 11 folder on your HTML Data Disk
Activate the browserClick the Address bar. Type a:\Project 11\clublist-xsl.xml and then press the ENTER key
![Page 39: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/39.jpg)
39
Closing the Notepad Window Containing the XSL Style SheetActivate the Notepad window
containing the XSL style sheet, xslalphaclublist.xsl
Click the Close button on the Notepad title bar
![Page 40: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/40.jpg)
40
Using Paging to Display XML Data in a TableData binding
– Mapping the XML elements to a data format that preserves the hierarchy of the data and allows the data to be manipulated using different methods
![Page 42: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/42.jpg)
42
Using Paging to Display XML Data in a TableData island
– A set of data elements separate from the main HTML Web page
Data Source Object (dso)Recordset
– A collection of data records and their fields
![Page 44: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/44.jpg)
44
Creating an HTML Document to Display XML Data in a TableActivate the Notepad Window
containing the XML document, clublist-xsl.xml
With the HTML Data Disk in drive A, open the file, clubsponsor.htm
Save this file to the Project 11 Folder on your Data Disk with the name, clubsponsor-table.htm
![Page 46: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/46.jpg)
46
Entering Code to Bind an XML Document with an HTML Web PageWith the clubsponsor-table.htm
Notepad window active, click line 6Type <XML ID=“dsoClub” SRC=“clublist.xml”></XML> but do not press the ENTER key
![Page 49: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/49.jpg)
49
Entering Code to Add Navigation ButtonsClick line 12Enter the following code:
![Page 51: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/51.jpg)
51
Start Entering Code to Bind XML Elements to a TableClick line 16Enter the following code
![Page 53: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/53.jpg)
53
Finish Entering Code to Bind XML Elements to an HTML TableClick line 24Enter the following code:
![Page 55: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/55.jpg)
55
Saving the HTML File on the Data DiskWith your HTML Data Disk in drive A,
click File on the menu bar and then click Save
![Page 56: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/56.jpg)
56
Testing the HTML Web PageActivate your browser. If necessary,
maximize the windowClick the Address bar. Type a:\Project
11\clubsponsor-table.htm and then press the ENTER key
Click the Next Page button. Click the First Page button and then click the Last Page button
![Page 58: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/58.jpg)
58
Using JavaScript to Search an XML Document and Display Results on a Web Page
![Page 59: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/59.jpg)
59
Creating an HTML Document to Search an XML Document and Display ResultsIf necessary, click the Notepad button on the
taskbar to activate the Notepad windowWith the HTML Data Disk in drive A, open
the file, findclub.htmClick File on the menu bar and then click
Save As. Type findclubsponsor.htm in the File name text box. Save to the Project 11 folder on your HTML Data Disk
![Page 60: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/60.jpg)
60
Entering Code to Link an XML Document with an HTML Web PageWith the findclubsponsor.htm Notepad
window active, click line 6Type <XML ID=“dsoclublist” SRC=“clublist.xml”></XML> but do not press the ENTER key
![Page 62: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/62.jpg)
62
Entering Code to Add the <INPUT> and <BUTTON> ElementsClick line 11Type <INPUT TYPE=“TEXT” ID=“SearchText” SIZE=“20”> <BUTTON ONCLICK=‘FindClub()’>Search</BUTTON> but do not press the ENTER key
![Page 64: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/64.jpg)
64
Entering the <DIV> ElementClick line 14Type <DIV ID=SearchResults></DIV> but do not press the ENTER key
![Page 66: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/66.jpg)
66
The JavaScript User-Defined Function, FindClub()Converts the SearchText text box input
value into uppercase charactersValidates that the input value is not blank or
emptyMoves to the first record in the XML
documentCompares each element in the XML
document with the text box value until a match is found
Constructs an output text string with search results
![Page 67: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/67.jpg)
67
Entering Code to Start the FindClub() User-Defined FunctionClick line 15Type <SCRIPT LANGUAGE=“JavaScript”> and then press the ENTER key
Type <!-- Hide from old browsers and then press the ENTER key
Press the SPACEBAR four times to indent the function name. Type function FindClub() { and then press the ENTER key
![Page 69: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/69.jpg)
69
Entering Code to Start the FindClub() User-Defined FunctiontoUpperCase() method
![Page 70: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/70.jpg)
70
Entering the Conversion and Validation Statements in the FindClub() User-Defined FunctionClick line 18Enter the following code:
![Page 72: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/72.jpg)
72
Entering Code to Complete the FindClub() User-Defined FunctionClick line 23Enter the code shown on the following
slide
![Page 75: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/75.jpg)
75
Saving and Testing the HTML Document in the BrowserWith your HTML Data Disk in drive A, click
File on the menu bar and then click SaveClick the browser button on the taskbar to
activate the browserClick the Address bar. Type a:\Project 11\findclubsponsor.htm and then press the ENTER key
Enter the club name, spanish, and then click the Search button
Repeat the previous step using the test data on the following slide
![Page 78: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/78.jpg)
78
Verifying the Links in the Main Student Services Clubs Web PageClick the Address bar. Type a:\Project
11\club-index.htm and then press the ENTER key
Click the Browser alphabetic list link. After the Student Clubs List by Club Name Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page
![Page 79: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/79.jpg)
79
Verifying the Links in the Main Student Services Clubs Web PageClick the Search by club name link.
After the Find a Club Sponsor Web page displays, click the Back button on the browser toolbar to return to the main Student Services Clubs Web page
Click the Browse sponsor link
![Page 81: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/81.jpg)
81
Closing Notepad and Your BrowserClick the Close button on the browser
title barClick the Close button on the Notepad
window title bar
![Page 82: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/82.jpg)
82
Summary
Describe an XML documentState the W3C design goals for
creating XML tagsName 10 real-world uses for XMLState the syntax rules for a well-formed
and valid XML documentState the rules for creating a generic
identifier (GI)
![Page 83: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/83.jpg)
83
Summary
Define document prolog and document instance
Describe the purpose of processing instructions
Describe the purpose of Document Type Definitions (DTD)
Bind a CSS file to an XML documentDescribe the purpose of XSL style
sheets
![Page 84: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/84.jpg)
84
SummaryBind an XSL style sheet to an XML
documentDescribe the XSL template, for-each, order-
by, and value-of elementsBind an XML document to an HTML Web
pageDiscuss the build-in table element methodsCreate a JavaScript user-defined function to
search an XML documentDefine recordset and describe how the EOF
property is used
![Page 86: 1 Introduction Extensible Markup Language (XML) –Uses tags to describe the structure of a document –Simplifies the process of sharing information –Extensible](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f0a5503460f94c1e2fc/html5/thumbnails/86.jpg)
HTMLComprehensive Concepts and TechniquesSecond Edition
Project 11 Complete