This chapter is from the book
This chapter is from the book
This chapter is from the book
What Is XML?
XML organizes and structures data for the web. In many ways, it is like a database; in others, it is like a text file storing data. However, XML looks a lot like an HTML page as well, but with no built-in formatting tags. XML tags only order data. All of the tag names in XML are ones provided by the designer. For most XML pages, you can determine approximately what the structure is by examining the file. The following page is an example:
<?xml version="1.0" ?>
<writers>
<pen>
<name>Jane Austin</name>
</pen>
<pen>
<name>Rex Stout</name>
</pen>
</writers>
You can write this document in your favorite text editor, such as Notepad in Windows or SimpleText on the Macintosh. Save it as writers.xml. (All XML documents can be written and saved as text files.) If you load the XML page into IE5+ or NN6+, you will see this:
Jane Austin Rex Stout
XML is for structuring data, not formatting it, and you need something to show that data in a useful way. Most developers use Cascading Style Sheets (CSS). For example, the following CSS script provides formatting in the form of an 11-point bold navy Verdana font for the data in the XML file:
name {
display:block;
font-size: 14pt;
color: navy;
font-weight: bold
}
By saving the file as an external style sheet named scribe.css, you can use it to format the elements with the tag label name. Note that name is not a dot-defined class or an ID. It is the name of the label in the XML script.
XMLsee.xml
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="scribe.css"
?>
<writers>
<pen>
<name>Jane Austin</name>
</pen>
<pen>
<name>Rex Stout</name>
</pen>
</writers>
The output is now formatted, and your screen shows this:
Jane Austin Red Stout
You can use the same style sheet with your HTML/JavaScript pages as you do with XML. However, in creating the style sheet, this line in the CSS script has the effect of blocking the text on separate lines:
display: block;
The Rules of Writing XML
XML is a markup language that uses tags, like HTML, but you will find many differences as well. The following list shows what you must be aware of in creating XML files:
The user defines the element names. (An opening and closing tag constitute an element: <pen>...</pen>.) XML has no formatting tags of its own.
Internet Explorer 5+ and Netscape Navigator 6+ are required for displaying XML in a browser. Older browsers cannot display XML.
Like JavaScript, XML is case-sensitive. The tag <Pen> is not the same as <pen>.
All XML elements are containers and must have closing tags (for example, <pen> and </pen>). You could not have <p> without </p>, as with HTML.
Each XML element requires a document type definition (DTD) or schema to be well formed.
An element in XML is a self-contained mini-XML document.
Declaring an XML Document
To create an XML document, you need to first declare the document as an XML document. You do so with the following line:
<?xml version="1.0" ?>
You can add more information for different languages, but for the purposes at hand, just start off your XML scripts with this single line.
The Root Element
Following the XML document declaration, you need a root declaration. The root element encompasses everything that you put into the XML document. The other elements must be between the tags identifying the beginning and end of your root element. In the XML example that we've been using, the root element is <writers>. (Note that the comment tags are the same as those used in HTML.)
<?xml version="1.0" ?> <!--First the root element --> <writers> <!--Rest of the tags between the opening and closing root tags --> </writers>
The root element is important because it is a reference point used by JavaScript to identify the hierarchy that leads to different child elements.
Filling in the Root
The parent-child relationship in XML is one of containers. The root element contains child elements. If one of the root's child elements contains a container, it is the parent of the contained tags yet still the child of the root element.
<root> Parent to all elements
<child> Child of <root> Parent of <grandchild>
elements
<grandchild>Dashiell Hammett</grandchild> Child of
<child>
<grandchild>Toni Morrison</grandchild> Child of
<child>
</child>
</root>
The <root> element is the parent of all, and the <child> element is the child of the root element and parent of both of the <grandchild> elements. The two <grandchild> elements are siblings. In the JavaScript DOM objects, you will see methods referring to child, parent, and sibling; these methods address the set of parent and child elements references.