Sams Teach Yourself XML in 21 Days

Sams Teach Yourself XML in 21 Days

By Steven Holzner

Looking at XML in a Browser

Some browsers, such as Microsoft Internet Explorer version 5 or later, let you display XML documents directly. For example, if you download the code for this book, you can browse to ch01_02.xml in Internet Explorer, as you see in Figure 1.2. As you see in the figure, the whole XML document we've created is displayed. You can even click the – sign in front of the <document> element to collapse all the contents of that element into a single line (which will have a + sign in front of it, indicating that that line may be expanded). In this way, you can display a raw XML document in Internet Explorer.

01fig02.gif

Figure 1.2 Viewing an XML document in Internet Explorer.

Note, however, that Internet Explorer hasn't done anything more than display our raw XML here—it hasn't interpreted that XML in any way, because browsers are specialists at displaying data, not interpreting XML tags.

In fact, if you're only interested in displaying your data, you can use your XML tags to tell the browser how to do that by using style sheets. For example, you might want to create an element named <red> that specifies to the browser that all enclosed text should be displayed in red. Using style sheets, you can let a browser interpret your XML if you just want to use that XML to tell a browser how to display your data visually.

NOTE

One of the most popular reasons for using style sheets with XML is that you store your data in an XML document, and specify how to display that data using a separate document, the style sheet. This separates your data from the presentation details, unlike HTML, where the tags that specify how to display your data are mixed in with that data. By separating the presentation details from the data, you can change the entire presentation with a few changes in the style sheet, instead of making multiple changes in your data itself.

There's plenty of support for working with XML documents and style sheets in both Internet Explorer and Netscape Navigator. There are two kinds of style sheets you can use with XML documents—cascading style sheets (CSS), which you can also use with HTML documents, and Extensible Stylesheet Language style sheets (XSL), designed to be used only with XML documents.

We'll cover both CSS and XSL in this book (see Days 8–10), but you'll also get an idea of what you can do using style sheets today. As an example, we'll use CSS to format our XML sample document. To do that, we'll use an XML processing instruction, <?xml-stylesheet?>, supported by both Internet Explorer and Netscape Navigator, to associate a CSS style sheet with an XML document.

As you can guess from their name, processing instructions are instructions to the software processing the XML; all XML processing instructions like this one start with <? and end with ?>. Processing instructions might appear throughout an XML document, and like XML elements themselves, they may have attributes. As with XML elements, you're free to make up your own processing instructions—the <?xml-stylesheet?> processing instruction is not built into XML, it just happens to be one supported by both Netscape Navigator and Internet Explorer. More on processing instructions tomorrow.

In this case, this processing instruction will have its type attribute set to "text/css" to indicate that we're using a CSS style sheet, and its href attribute set to the location of the CSS style sheet (much like the way the href attribute of an HTML <a> element specifies the target of a hyperlink), as you see in ch01_03.xml in Listing 1.3.

Example 1.3. An XML Document Using a Style Sheet (ch01_03.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="ch01_04.css"?>
<document>
    <heading>
        Hello From XML
    </heading>
    <message>
        This is an XML document!
    </message>
</document>

In this case, we've named the CSS style sheet ch01_04.css, and you can see the entire contents of this file in Listing 1.4. In ch01_04.css, we're telling the browser how to display our XML elements' content. In particular, we're saying that we want the text content of <heading> elements to appear centered in the browser, 24 points high (a point is 1/72 of an inch), and colored red (you specify colors as you would in an HTML page—#ff0000 is bright red, for example; more on setting colors like these when we discuss CSS in detail in Day 8, "Formatting XML with Cascading Style Sheets"), and the text content of <message> elements in centered 18 point blue text.

Example 1.4. A CSS Style Sheet (ch01_04.css) 

heading {display: block; font-size: 24pt; color: #ff0000; text-align: center}
message {display: block; font-size: 18pt; color: #0000ff; text-align: center}

You can see the results in Netscape Navigator in Figure 1.3, and in Internet Explorer in Figure 1.4. In this way, we've been able to tell a browser how we want our data formatted, using XML elements to format that data, and a style sheet to tell the browser how to interpret those XML elements.

01fig03.gif

Figure 1.3 Viewing an XML document in Netscape Navigator.

01fig04.gif

Figure 1.4 Viewing an XML document in Internet Explorer.

That's about as far as a browser can go with XML unless you do more yourself. However, using XML to indicate how your data should be displayed is only the beginning. You can extract data from an XML document yourself, and we'll see how to do that in detail toward the end of this book. For example, you might use a scripting language like JavaScript to tell a browser how to extract data from the elements in an XML document, and we'll take a look at how that might work next.

Share ThisShare This

Informit Network