Introduction to XML Please use speaker notes for additional information!

Books in the hall bookcase Talking Animal Thorton Burgess The Adventures of Reddy Fox The Adventures of Peter Rabbit The Adventures of Lightfoot the Deer The Adventures of Buster Bear The Adventures of Jimmy Skunk Pioneer Life Laura Ingles Wilder Little House on the Prairie Colonial Times Alice Turner Curtis A Little Maid of Bunker Hill A Little Maid of Virginia

As you can see, I opened books1.xml from my A drive into Netscape. This is how it appears.

As you can see, I opened books1.xml from my A drive into Explorer. This is how it appears.

I clicked on the minus sign next to subtract and it reduced to just the element SUBJECT. If I click on the plus sign that is now there, the SUBJECT will expand to include the information beneath it.

I have now made the ELEMENT for Books in the hall bookcase

Books in the hall bookcase Talking Animal Thorton Burgess The Adventures of Reddy Fox The Adventures of Peter Rabbit The Adventures of Lightfoot the Deer The Adventures of Buster Bear The Adventures of Jimmy Skunk Pioneer Life Laura Ingles Wilder Little House on the Prairie Colonial Times Alice Turner Curtis A Little Maid of Bunker Hill A Little Maid of Virginia This XML code is seen using the bookscss.css style sheet. CATEGORY { color:navy; font-size:16pt; font-weight:bold; display:block; } SUBJECT { color:red; font-size:14pt; display:block; } Partial style sheet.

CATEGORY { color:navy; font-size:16pt; font-weight:bold; display:block; } SUBJECT { color:red; font-size:14pt; display:block; } AUTHOR { color:green; font-size:12pt; display:block; margin-left:10pt; } TITLE { color:black; font-size:12pt; text-decoration:underline; display:block; margin-left:30pt; }

This is from my hard drive. This is from the brinkster web site.

Stephen Daniels Sports Reporter Al Richards Engineering Consultant Jennifer Ames Foreign Consultant Sarah Grant Scientific Web Carl Hersey Foreign Consultant payroll.xml

Fall River Management body { background:beige; } #Page_Header { font-style:bold; font-size: 26pt; text-align:center; color:brown; } #Sub_Header { font-style:bold; font-size: 22pt; text-align:center; color:brown; } #List_Header { font-size:16pt; color:brown; border-bottom: solid 1 brown; } table { color:brown; border:solid thin brown; }

.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:300pt; }.forbutton { color:beige; background:brown; } Fall River Management 777 Elsbree Street Fall River, MA Personnel List First Name: Last Name: Department: This line establishes the link between what I will call Personnel_Data in my code and the actual data file which is called payroll.xml. For each table column where I want to put data from the XML file, I specify the connection to Personnel_Data and the name of the field on the XML data file.

Job: Salary: First <button class="forbutton" onClick="Personnel_Data.recordset.movePrevious(); if (Personnel_Data.recordset.BOF) Personnel_Data.recordset.moveFirst()"> Previous <button class="forbutton" onClick="Personnel_Data.recordset.moveNext(); if (Personnel_Data.recordset.EOF) Personnel_Data.recordset.moveLast()"> Next Last Note the if statement checking to see if moving back you go past the beginning of the file (BOF) and moving backward you go past the end of the file (EOF).

Fall River Management body { background:beige; } #Page_Header { font-style:bold; font-size: 26pt; text-align:center; color:brown; } #Sub_Header { font-style:bold; font-size: 22pt; text-align:center; color:brown; } #List_Header { font-size:16pt; color:brown; border-bottom: solid 1 brown; } table { color:brown; border:solid thin brown; }

th { border:solid thin beige; background: brown; color: beige; width:80pt; }.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:400pt; }.forcell { border:solid thin brown; text-align:center; width:80pt; }.forbutton { color:beige; background:brown; } Fall River Management 777 Elsbree Street Fall River, MA Personnel List

First Name Last Name Department Job Salary Note that I set up style for th in the style section - here is a copy: th { border:solid thin beige; background: brown; color: beige; width:80pt; } Each data field is listed in a separate cell on the same line. Binding the recordset to the table.

Fall River Management body { background:beige; } #Page_Header { font-style:bold; font-size: 26pt; text-align:center; color:brown; } #Sub_Header { font-style:bold; font-size: 22pt; text-align:center; color:brown; } #List_Header { font-size:16pt; color:brown; border-bottom: solid 1 brown; } table { color:brown; border:solid thin brown; }

th { border:solid thin beige; background: brown; color: beige; width:80pt; }.fortable { border:solid thin brown; bordercolordark:brown; bordercolorlight:brown; width:400pt; }.forcell { border:solid thin brown; text-align:center; width:80pt; }.forbutton { color:beige; background:brown; } Fall River Management 777 Elsbree Street Fall River, MA Personnel List

First Name Last Name Department Job Salary First <button class="forbutton" onClick="persTable.previousPage(); if (Personnel_Data.recordset.BOF) persTable.firstPage()"> Previous <button class="forbutton" onClick="persTable.nextPage(); if (Personnel_Data.recordset.EOF) persTable.lastPage()"> Next Last This gives the table an id name and establishes the datapagesize at 2. Navigating pages.