The XML Project: An Introduction to XML
Students enrolled in Wednesday labs have a Tuesday March 29 at 11:59am due date.
Students enrolled in the Friday labs have a Thursday March 31 at 11:59am due date.
Students enrolled in Monday labs have a Friday April 1 at 11:59am due date.
IN ORDER FOR YOUR SUBMISSION TO BE CONSIDERED “ON-TIME”, your printouts and file submission must be
made by the day/time listed above.
 First, make some sort of folder containing your own first and last name, as well as
the words XML. You will store all of your work for this project in this folder.
 Prior to starting this activity, you need to download the activity files from KSU
Online. After logging in, visit Files, then locate the XML Project folder. This
folder contains all of the files to download for this XML project. Download ALL
OF THE FILES that you see into your named folder.
 Once you are finished, you should see 4 files (two instance documents and two
stylesheets).
The full names of the files that you just downloaded are:
o inventory.xml
o inventoryTable.xsl
o ProductTable.xsl
o universities.xml
 Verify that those 4 files are indeed in your named folder. All of the files that you
create or modify as part of this project need to be in
that named folder. If you don’t have everything in
this folder, future problems will result (and who
wants that).
As you work through the tutorial, do the activities and
exercises that you encounter. PLEASE READ
EVERYTHING CARFULLY.
As mentioned in the XML pre-lab tutorial, it is important that you are able to use your web browser to see errors when they
occur in XML documents. Therefore, when using a web browser to work with XML documents, it is important that you use
the right browser. Here are recommended browsers:
 All versions of FireFox. FireFox is best for this.
 Use Internet Explorer 8.0 or earlier. Do not use IE 9.0 or afterwards.
 All versions of Google Chrome will work. However, some of our tasks will be difficulty to complete since Chrome
does not have easily accessible menus.
Please check your web browser at this point in time, making sure that you are using one of the recommended browsers listed
above.
You can download FireFox at: http://www.getfirefox.com
1
Exercise #1 – Create an Instance Document
Now, it is time to actually create your first XML instance document. Prior to doing that, you need to determine what you want to
store data about. Seen below are four different things that you want to use as the basis of your instance document, along with
suggested tags. Please look them over and select one as the basis for your work in this activity (or you can create your own from
scratch using these as a guide).
Root Element
Element
Attribute Tags
My Class Schedule
Class
Name
Number
Instructor
Meeting Time
Meeting Location
Subject Type
My Friends
Friend
Last Name
First Name
Age
Gender
Hair Color
College Major
My Favorite Books
Book
Book Title
Author
Genre
Publisher
Price
Main Character
Sports Equipment
Item
Name
Sport
Price
Color
Size
Equipment Type
Regardless of what you decide to use to make your instance document, the following conditions must be met:
 All instance documents must contain one root element
 Each of the things that you are storing in the instance document must use the same element tag.
 Each instance document must contain at least 6 elements.
 Each “thing/element” stored in the instance document must have at least 6 attributes.
 Each “thing” will have the same tags, although the data stored within each tag will be different
On the right is an instance document (as seen in a web browser). Let’s pretend I
am selling Universities in the Big 12. My root element is
SelectedBig12Universities (recall that XML tags can’t have spaces in them). My
element tag is University (generic in nature). Following each university are the
attribute tags used to describe the university, along with specific data content.
Each university is turned on, its data and data tags are added, and then the
university is turned off (all tags are turned off). Then, I turn on the next
university and continue the process. When I am all done, all tags must be turned
off.
After having seen an instance document and selecting the topic of your own
instance document, it is time to begin coding the instance document in
Notepad. When coding the instance document, don’t forget the rules regarding
well-formed instance documents that you saw as part of your pre-lab activity.
 First, you need to open or start a new document in Notepad. Before you
begin typing code, you need to save the file you are creating into the
named project folder that you created at the start of this activity. You
can give the file you create whatever name you wish, but the extension
for the file MUST BE .xml
When you are ready to begin coding the XML instance document, the first line of
code should be:
<?xml version="1.0"?>
This line of code is the declaration that indicates that the file uses version 1.0 of XML.
 Continue working on the instance document, making sure that your tags are consistent and the result is a well-formed
instance document. Your instance document should contain information about a minimum of 6 different things
(elements). Each thing/element needs to be described by a minimum of 6 different attribute tags as well.
One thing to remember: Even though the element names cannot contain spaces, data content (which is not surrounded by < or
>) can have spaces. Thus, Kansas State University and University of Kansas are acceptable examples of data content.
 After you create the code for your XML instance document (or as you are coding it), open the XML file that you are
creating in your web browser. Your final result should be a WELL-FORMED XML document.
2
 Once you have a well-formed XML instance document:
1. Make a printout of your XML code, as seen in Notepad.
2. Make a screenshot of your well-formed XML instance document, as seen in the web browser.
3. Label both of your printouts as Exercise #1
XSL Stylesheets: Presentation and Transformation
Bank
Account
Account
Holders
Account
ID
Balance
Account
Holder
Holder
Name
Account
Holder
Account
Holder
Holder
Tax ID
Holder
Name
Holder
Name
Holder
Tax ID
Holder
Tax ID
Presentation of information on the web is one common application
of
XML. As you saw in prior XML sections (pre-lab and this
activity), by default, today’s web browsers are capable of processing XML and they display the XML document in a hierarchical,
text format. Above is a picture of the Bank Account schema and its corresponding XML document, displayed in Internet
Explorer.
Although this format may be acceptable for simple XML documents, this format is not appropriate for complex XML
documents. XSL provides a means of formatting XML data for easier use. With XSL, the web browser displays a more
meaningful view of this same data, as seen to the right.
Data Transformation: In addition to presenting information on the web, the XSL stylesheet provides a means to transform data
as needed so that different applications can examine the same data in whatever way they need the data. One XML document
may have many XSL stylesheets, one stylesheet for each user. The user can be a person or an application.
Multiple XSL Stylesheets for One XML Document
XML
Document
As a simple illustration, a person interested in
information about his or her bank account may
prefer the view in the illustration; however, a
computer program would have a great deal of
difficulty understanding this format. Instead, the
computer program might prefer the data in a
comma-separated format, seen as pictured.
3
In the stylesheet exercises that you will complete as part of this tutorial, you will create one stylesheet from scratch, and then
modify two stylesheets that I have already created. When you are finished, the instance document (that you created earlier) will
be formatted as needed (according to the code contained in the stylesheet).
At this point in time, you have been working with an XML instance document that
has been displaying data, that you can expand and collapse. That raw inventory
data will now be formatted, using the stylesheets, so that the inventory data is
displayed in a bulleted list, and then it will be formatted to display that same data
as a table. In order for your instance document to use either of the stylesheets, a
new line of code must be added to the instance document, “calling” or invoking the
stylesheet’s code and indicating that the stylesheet code should be used to format
the instance document.
To the right, you can see a sample XML instance document displayed in Internet
Explorer. Let’s also open that document in your browser.
 Go to the location on your storage media where your XML files are being
stored. Double click on the file called universities.xml.
You should see the well-formed XML instance document seen pictured.
 After opening the file, expand and collapse the different items to get a
better feel for the data content of this file.
This instance document contains data related to selected universities in the Big 12
(just pretend these are the products I am selling). Based on the display, you can see that three of the universities being “sold” are
Kansas State University, the University of Kansas and the University of Nebraska. You can also see the attributes of each
university -- name, city, state, mascot, abbreviation and color.
Rather than just displaying raw XML data, you can create different XSL stylesheets to display the data in different ways for
different purposes.
Creating an XSL Stylesheet: A Bulleted List of XML Data
We will create our first stylesheet, which will be used to allow you to view the universities in the instance document in the form
of a bulleted list. Here is what you must do.
 First, you need to open or start a new document in Notepad. The file that we will create will be called
UniversityList.xsl. Whenever you create a XSL stylesheet, the file that you create must have an extension of .xsl.
 You will next need to type in the code that follows. Along with each line of code, I will describe what that line of code
does. You MUST TYPE IN THE CODE PERFECTLY for this to work. The first time that I made an XSL
stylesheet, I made 5 or 6 errors, and it took me a LONG TIME to track those down and fix them.
On the first two lines of your new file, you will type in:
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
(IMPORTANT: THERE IS A SPACE IN BETWEEN Transform” and version)
Line #1 declares that the file uses version 1.0 of XML. Line #2 declares the contents of the file as an XSL stylesheet based on
the 1999 XSL standard.
Next, skip a line and then type in the following:
<xsl:template match="/">
This line establishes the initial point in the XML document for processing nodes/elements. The slash (/) at the start of
match=”/” establishes the root node/element as the starting point for processing the XML document.
Next, we will add some HTML tags to this stylesheet document in order to create a basic bulleted list.
Skip a line. Indent a few spaces, and then type in <HTML>
4
On the next line down, indent a few spaces, and then type in <ul>
This tag begins an unordered/bulleted list. Why are we indenting as we begin a new element in our document (the list)? It
makes it easier for us to read our code and both track down and find errors that we might make. Students in programming
classes learn pretty early on that it is best to indent their computer programming code.
On the next line down, indent a few spaces, and then type in
<xsl:for-each select=" SelectedBig12Universities/University">
This line starts a repetitive process. For each university that we have, we will do something. That something that we will do
later is to take all of the data content for that university and place it in one cell of one row of our table. IMPORTANT: even
though you see SelectedBig12Universities/University in this example, its general form is RootElement/ElementName (and
you will substitute in your own root element and the element for those words). The general form is important when you
modify the stylesheets that I give you later on.
On the next line down, indent a few spaces, and then type in <li>
We have now created a bullet item (list item) for each university that we have in our XML instance document.
On the next line down, indent a few more spaces, and then type in <xsl:value-of select="." />
Notice the /> end of the line. Make sure that your line also ends in />
The period (.) inside the quotation marks refers to an entire university/record. This is where we take all of the data content for
each item and place it as a list item. When you view your result later on, you will see the next line in your list for Kansas State
University:
Kansas State University Manhattan Kansas Wildcats KSU Purple
Now, we will start to turn off
commands. The turn off commands
line up vertically (up and down) with
the prior turn on commands that you
typed in.
Line up with the <li> command and
type in </li>
Line up with the <xsl:for-each select>
command and type in
</xsl:for-each>
Line up with the <ul> command and type in </ul>
Line up with the <HTML> command and type in </HTML>
Line up with the <xsl:template> command and type in </xsl:template>
Line up with the <xsl:stylesheet> command and type in </xsl:stylesheet>
We need to save our work under the file name of UniversityList.xsl. The contents of your file should match the coding seen
previously.
Before attempting to look at our results in a web browser, we also need to add a line of code to our universities.xml instance
document.
Open universities.xml in Notepad. You want to add a new line between <?xml version="1.0"?> and
<SelectedBig12Universities>.
The new line that you will add will be:
<?xml-stylesheet type="text/xsl" href="UniversityList.xsl"?>
This line of code is said to “call” the XSLT program (UniversityList.xsl), with the result being a listing of the universities in the
instance document.
 Save your work in Notepad. Now,
open the file called universities.xml in
your web browser. The list seen to the
right should appear in the browser.
5
 Make a printout of the actual bulleted list, as displayed in the browser. Label the printout as University Listing.
Next, we will modify one of my stylesheets so that you can display your inventory data in a table, with the individual data
content/attributes for each item in its own cell in the table.
Modifying an XSL Stylesheet: An Inventory Table
 Open the file called inventory.xml in Notepad.
 Bring up a second instance/version of Notepad. Open the file called inventoryTable.xsl in Notepad. Stylesheets have
file extensions of .xsl.
This stylesheet is similar to the stylesheet that you just made. However, it uses the HTML commands of <table border>, <tr>,
<th> and <td> to display individual data content in its own cell.
Notice the line of code:
<xsl:for-each
select="RootElement/ElementName">
 You will need to replace the words
RootElement and ElementName with the
actual root element and element name that
is found in the inventory.xml instance
document. In the instance document that
you are wanting to format, the root
element is inventory and the element
name is item. Replace RootElement and
ElementName with those two words (like
you did on the stylesheet that you typed
earlier).
Notice the lines that contain the words value-of
select=
The words inside the quotation marks (name, cost,
qoh) are all attributes. When you modify your next stylesheet, you will replace the words inside the quote marks with the
attribute tags found in the instance document.
Notice the following line of code:
<td><xsl:value-of select="cost * qoh" /> </td>
Inside one of your cells in the table, this line of code will perform a calculation, taking the cost of the item times the quantity on
hand for that item. In addition to formatting data, stylesheets can also be used to perform a calculation, prior to the data being
displayed.
Once you have made the required modification, your stylesheet code should match the previously seen picture.
 Next, save your work.
Before attempting to look at our results in the web browser, we also need to add a line of code to our instance document,
inventory.xml (which should already be open in Notepad). This line of code “tells” the instance document to use/call the
stylesheet.
 You want to add a new line between <?xml version="1.0"?> and <inventory>.
The new line will be:
<?xml-stylesheet type="text/xsl" href="inventoryTable.xsl"?>
This line of code is said to “call” the XSLT program (inventoryTable.xsl), with the result being a listing of your inventory now
showing up in a table, with each cell containing different data content related to the items that you are selling.
6
 Save your work.
 Now, open the file called inventory.xml in your web browser. The table seen
to the right, which is an inventory table, should appear in the web browser.
 Make a printout of the table, as displayed in the browser. Label the printout as
Inventory Table.
As you have now seen using the two XSL Stylesheets, eXtensible Stylesheet Language
(XSL) is used to process/format XML documents into other forms.
XSL
Stylesheet
XML
Document
Data
Data
Formatted
Using HTML
 Return to your storage media and the folder where you have all of your XMLfiles stored.
Note: the next part of this activity is optional extra credit. If you are not going to do the extra credit,
THEN MAKE SURE THAT YOU SKIP OVER THIS SECTION AND CONTINUE ON WITH THE
WRITTEN QUESTIONS THAT FOLLOW. The written questions are required components for all
students.
Extra credit exercise begins here
 Your next step is to make a copy of the instance document that you made in exercise #1. After you have found the
instance document you made in exercise #1, right-click the file and select the Copy option. After selecting the Copy
option, click somewhere else in that same folder (as where your instance document is) and then select the Paste option.
 You now should see the original file that you made in exercise #1 and you should also see the copy that you just made,
probably similar to the following: “Copy of original file name”. Rename this copy so that its new name is
ExtraCredit, making sure that the file is still a .xml file.
Now, it is time to format the instance document data that you created in exercise #1 using a stylesheet. Your task is to modify
another one of my stylesheets so that it can be used to display the XML instance document that you made in Exercise #1 in the
form of a table.
 Examine the XSL code
seen in the picture below.
The modifications that
you will make include:
1. Replacing
RootElement with
your own root
element wording
2.
Replacing Element
with your own
element tag wording.
3.
Replacing each
Attribute with the
attributes that you
used to describe each
of the products
.
IMPORTANT: for each
of these
7
modifications that you do, make sure that the wording that you add to the stylesheet EXACTLY
MATCHES the spelling and capitalization found in your instance document.
 Now, it is time to begin to make your modifications. To begin, you will need to open the ProductTable.xsl file in
Notepad.
 After making those basic modifications, go to the section where you see the <th> commands. Capitalize the first letter
of each word that serves as one of your attributes. If more than one word appears within the <th> tags, then
space the words out so that they are separate. For example, if you see LastName appearing in this section, modify
the <th> section so that it appears as Last Name (with the space).
 Don’t forget that you need to add a line of code to your instance document that “calls” the stylesheet (similar to the code
that you added to the other instance documents when you made their stylesheets). Remember that the name of the
stylesheet being called or used by your instance document is ProductTable.xsl

Once you are successful, you will see each of your products showing up in a table, with each cell containing different
data content related to the each individual product. Additionally, each attribute will show up as a bold heading in your
table (as a result of using the <th> command.
Once you have a result that displays your instance document data in a table, with each data point in its own cell:
1. Make a printout of your stylesheet code, as seen in Notepad.
2. Make a printout of your instance document code, as seen in Notepad (so that I can see that you did make the “call”)
3. Make a printout of instance document after applying the stylesheet (so I can see the actual table that you made)
4. Label each of your printouts as Extra Credit.
REQUIRED QUESTIONS THAT ALL STUDENTS MUST ANSWER
In addition to the printouts listed above, you will also need to answer the following questions in a word processing document.
EACH QUESTION CONTAINS MULTIPLE PARTS, and in order to receive full credit for the question, YOU MUST
ANSWER ALL PARTS OF EACH QUESTION WHEN CREATING YOUR RESPONSE. Make sure that you think
about your response to each question before writing/typing. When I evaluate your answers, I will evaluate the correctness of
the answer and the quality of the answer, looking at completeness of the answer, evidence of learning and not simply repeating
something that is found in the tutorial, spelling, and just the overall thought and effort behind your answer. None of the
following questions can be answered in 1-2 sentences. It will take more than that to have a “high-quality answer.”
NOTE: The answers to these questions can be found in this packet, the XML pre-lab tutorial and your notes from class.
1.
What is the difference between XML and HTML? Make sure that your answer addresses what each one is, how each is
used, tag differences, and what you can do with one that you can’t do with the other.
2.
What is the rule regarding having spaces in your XML tags and how might you handle a situation where you wanted to have
Last Name as one of your tags?
3.
In addition to the rule regarding having spaces in your XML tags, list two or more additional rules regarding the
requirements of a well-formed instance document (more than 2 rules is better in the event that your first two items
mentioned aren’t really XML rules) .
4.
What is the BASIC PURPOSE and USE of an instance document versus a schema versus a stylesheet? What do you use
each one for?
5.
What is XBRL and what is it used for? Is XBRL considered to be a stylesheet or a schema (and why)?
HANDING IN THE ACTIVITY
1) When you are ready to turn in your work, make sure that you place or have ALL OF YOUR ACTIVITY FILES IN A
NAMED FOLDER/DIRECTORY. Submit ALL OF THE FILES to the appropriate KSU Online Canvas
Submission Location.
2) Please assemble your packet of printouts. The printouts should be stapled and arranged in the following order:
 A cover page containing the required information (outlined in the class syllabus).
 A printout of your word processing write-up where you answered the written questions.
 A printout of the exercise #1 code from Notepad.
8
 A screenshot of exercise #1, as seen in a web browser.
 The University Listing printout (results of applying the stylesheet as seen in the web browser)
 The Inventory Table printout (results of applying the stylesheet as seen in the web browser)
If you did the extra credit, then you also need to include the following printouts
 The extra credit stylesheet code, as seen in Notepad.
 The extra credit instance document, as seen in Notepad.
 The printout that you made showing the extra credit table, as seen in a web browser after applying the stylesheet.
When assembling your packet, make sure that the printouts are arranged in the order listed above.
9