1. XML A Standard for organizing data. Used for Exchanging data between systems. Used to define XHTML. For organizing Hierarchical data. XML tags don't have pre-defined meaning.

2. Tree Structured Information Root element child element siblings multiple children parent of Web site – XML CSS DTD Link - like student5.xml

3. HTML Page

4. student-body name major address street zipcode city state Venn Diagram View student

5. Hierarchical data Defines XML structure Access XML data XML DTD HTML eXtended Markup Language Document Type Definition XML Web site – CSS and XML Examples - under XML CSS DTD Link Eg: Live xml or RSS feeds

6. SAMPLE xml FILE root element 5 th Avenue 00707 NY Harry Houdini IT more students... tag opens tag closes tag opens tag closes children of address element be careful !

7. DTD – Document Type Definition Define Structure of xml file by

8. DTD governing file xml data file xml - lists data (tree-like) DTD defines underlying structure (of xml data) Cross-referenced File

9. * 0 or more times Frequency Notation exactly once + one or more addresses ? 0 or once exactly once

10. root element of tree Endpoint – no children Subordinate fields DTD -governs structure consists of one or more students more subordinates Multiplicity notation 0 or 1 majors allowed

11. B.dtd A.xml XML refers to DTD DTD refers to XML root Cross-references

12. Html syntax to access xml data

13. html file DTD file xml data file CSS file html file can access data in xml file Html file refers to style sheet Multiple cross-references

14. easier to access from html harder to access from html Level 0 Level 1 Level 2 Level 3 xml (tree structured) data Html access to xml data

15. How does Html access xml data?

16. dataFld attribute Accessing name & major Link to xml data: Data Island Local name for xml file data element to retrieve Student's name: Student's major: Identifies data source for table (or other element ) only 1 template row template Table: - 1 row per student - 2 cells per row Web site –XML CSS DTD Link - like student6.xml

17. id internal name for file dataFld xml element accessed Student's major: src external xml file datasrc internal reference to xml file Student's name: HTML Syntax See CSS XML Topics.doc

18. A.html D.dtd B.xml C.css To reference xml file in html To reference css in html @import "C.css" ; To reference DTD in xml Cross-references

19. DTD Errors Alter: - triggers no error - same if add an extra gpa Omit 44 from student 5.xml - triggers no diagnostic error - but html retrieval now fails – even though address not requested Omit a from student 6.xml - again triggers no error - but retrieval still fails in html – even though major not requested - browser says can't find resource Omit NY from student4.xml wrong name Web site – CSS and XML Examples - under XML-and-CSS menu

20. Viewing XML html for accessing CSS and XML Examples - under XML-and-CSS menu - like student7.html xml data as records viewed sequentially

21. function movenext ( ) { r=stuff.recordset ; Name: if (r.absoluteposition < r.recordcount) { r.movenext( ) } function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } Major: Move xml records thru element windows Navigation buttons Web site – CSS and XML Examples - under XML-and-CSS menu – student7.html xml data island

22. function movenext ( ) { r = stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext ( ) } function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } data island's xml records are available in r test if scan past r's last record advance view to next record in data island ( span & div )

23. function movenext ( ) { r = stuff.recordset ; if (r.absoluteposition < r.recordcount) { r.movenext( ) } function moveprevious ( ) { r=stuff.recordset ; if (r.absoluteposition > 1) { r.moveprevious ( ) } records from external xml source #stuff current r record number of records in r move next record from data island into view don't fall past right end

24. r = stuff.recordset r.absoluteposition r.recordcount r.movenext ( ) datasrc = internal name for xml file dataFld = element's name <span <div built-in properties & methods for navigating thru xml records <xml id = "stuff" src = "student5.xml" Html tags & attributes <table

25. Live XML data feeds accessing xml data on the Internet

26. Location: Temperature: Humidity: Windspeed: XML element name in KNYC.xml updated every 15 minutes - Live CSS and XML Examples - XML-and-CSS menu - Kroge00.html – also Kroge01,02,03

27. http://www.nws.noaa.gov/data/current_obs/KNYC.xml Relatively flat XML file

28. student5.html student5.xml student5.dtd CSS-XML-Examples images.html.xml student7.html student5.xml student5.dtd student3.xml http://www.w3schools.com/xml/xml_applications.asp http://www.nws.noaa.gov/data/current_obs/KNYC.xml http://www.nws.noaa.gov/data/current_obs/KMIA.xml

29. Miscellaneous XML Access Problems

30. firstNameHarry lastName JonesGPA2.5 firstNameBert lastName SmithGPA firstNameBill lastName GatesGPA1.2 firstNameJohn lastName NewmanGPA4.0 HTML table below pulls data from XML file and Shows Student Names & GPAs. Cascading Style Sheet governs paragraph, body, and Table tags. Document Type definition file defines XML syntax. data from different levels in the tree Challenge Variation Replace endpoint element Name with:

31. Notes on Challenge cell: dataFld=firstName table datasrc=roster datasrc=name cell: dataFld=lastName cell: dataFld=GPA table datasrc = roster Outer table - with single row - has cell for the GPA - like in basic example. Nested inner table is inside 2nd cell in the single row of the outer table.The inner table itself has same format as the outer table…but with the extra datasrc attributes shown.

32. Some key examples: HTML - exampleF03b1.html - exampleF03b3.html - exampleF03b5.html & sheet2.css XML - student1,2,3,4.xml XML data binding - partsList.xml, parts.html DTD - student5.xml, student5DTD.dtd Sebesta: XML pages CSS pages McHugh: See Notes on CSS and XML on web site Also links to w3schools etc.

33. ...label......label... remarks Simple html data capture file: Link to style class Style classes referenced single row element – others generated automatically by browser Note tags