XML Attributes


XML Attributes

XML elements can have attributes in the start tag, just like HTML. From HTML you may remember:
<img src= "image_filename.jpeg"/>

In HTML (and in XML) attributes are name-value pairs that provide additional information about an element:

<img src="/modules/4COSC011W/flowers.jpeg"/>
<a href="/modules/4COSC011W/demo.html"></a>

Attributes often provide information that is not a part of the data. In the example below, the file type is irrelevant to the data, but important to the software that wants to manipulate the element: 

<file type="jpeg">flower.jpeg</file>

Use of elements vs. Attributes

Data can be stored in child elements or in attribute. Take a look at the following examples:

<person gender="female">
  <firstname>Anne</firstname>
  <lastname>Smith</lastname>
</person>
 
<person>
  <gender>female</gender>
  <firstname>Anne</firstname>
  <lastname>Smith</lastname>
</person>

In the first example gender is an attribute. In the last, gender is a child element. Both examples provide that same information.

There is no rule about when to use attributes, ane when to use child elements. Use child elements if the information feels like data. Use attributes when the information is data about data (further describes elements). Als, it is easier to carry our searches based on elements.

Viewing XML files

Raw XML files can be viewed in any browser. However, to make XML documents display as web pages, you have to add display infrmation with support software.

Open an XML file (by double clicking on the file). The XML document will be displayed with color-coded root and child elements. A plus (+) or minus sign(-) to the left can be clicked to expand or collapse the element structure. To view the raw XML source (without the + and - signs), select "View Page Source" oor "View Source" from the browser menu.

Look at this XML file: Example XML

Viewing an invalid XML file

If an erroneous XML file is opened, the browser will report the error.

Look at this XML file: Example XML with error

Other example XML files

An example CD catalogue.

An example breakfast menu.

Why does XML Display like this?

XML documents do not carry information about how to display the data

Since XML tags are "invented" by the author the XML document, browsers do not know if a tag like <table> describes an HTML tag or a dining table.

Without any information about how to display the data, most browsers will display the XML document as it is.

We wll take a look at using CSS to display the data.

Displaying XML with CSS

With CSS (Cascading Style Sheets) you can add display information to an XML document

Below there is an example of how to use CSS style sheets to format an XML document:

Look at the Book example XML file.

Look at the Book example CSS file.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="book.css"?>
    <book>
        <title>New Perspectives of XML</title>
        <author>Patrick Carey</author>
        <contents>
            <chapter>Creating an XML Document</chapter>
            <chapter>Binding XML Data with IE</chapter>
            <chapter>Creating a valid XML Document</chapter>
            <chapter>Working with namespaces and Schemas</chapter>
            <chapter>Working with Cascading Style Sheets</chapter>
            <chapter>Working with XSLT</chapter>
        </contents>
    </book>

Look at the Book example with CSS.

Note: If you want to carry out sophisticated selections you will need to use XSLT, but this is not covered in this module.

We wll take a look at using CSS to display the data.

Exercise

  1. Checking XML syntax: “well-formed” rules
    2. Examine the following xml file. Identify all of its syntactical errors and write in the corrections.
    1. Check for one root element.
    2. Check for properly opened and closed element tags.
    3. Check for case sensitive element naming.
    4. Check for properly nested elements.
    5. Check for quoted attribute values.
<name>Oyster Soup</name>
  <author>Jamie Oliver</author>
    <ingredients>
      <list>
        <item ingredient="optional">1 stalk of celery
        <item>1 onion
        <item>2 tablespoons of butter
        <item>2 cups of oysters and their liquor
        <item>2 cups of milk
      </item></item></item></item></item></list>
    </ingredients>
    <process>
    <p>Begin by sauteing the celery and onions in butter until soft.
    Add oysters, oyster liquor, and cream. Heat until the oysters float.
    Serve in warm bowls.</p>
    <p><i>Yummy!</i></p>
    </process>
  1. Task: Design a DTD for an address book that includes fields for name, email, and phone number
  2. Extend the DTD with Optional Fields: Modify the previous DTD to include optional fields for address and notes