Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development

  • Print
  • + Share This

What Does XML Look Like in a Browser?

It turns out that a browser such as Microsoft Internet Explorer version 5 or later lets you display raw XML documents directly. For example, if I saved the XML document just created in a document named ch01_02.xml and opened that document in Internet Explorer, I'd see something like Figure 1-2.

Figure 1-2Figure 1-2 An XML document in Internet Explorer.

You can see the complete XML document in Figure 1-2, but it's nothing like the image you see in Figure 1-1; there's no particular formatting at all. So now that we've created our own markup elements, how do you tell a browser how to display them?

In fact, many people who are new to XML find the claim that you can use XML to create new markup languages very frustrating—after all, what then? It turns out that it's up to you to assign meaning to the new elements you create, and you can do that in two main ways. First, you can use a stylesheet to indicate to a browser how you want the content of the elements you've created formatted. The second way is to use a programming language, such as Java or JavaScript, to handle the XML document in programming code. We'll see both ways throughout this book, and I'll take a look at them in overview in this chapter as well. I'll start by adding a stylesheet to the XML document we've already created.

There are two main ways of specifying styles when you format XML documents: Cascading Style Sheets (CSS) and the Extensible Stylesheet Language (XSL). We'll see both in this book; here, I'll apply a CSS stylesheet using the XML processing instruction <?xml-stylesheet type="text/css" href="ch01_04.css"?>, which tells the browser that the type of the stylesheet I'll be using is CSS and that its name is ch01_04.css (and because I'm not giving any path to the stylesheet, the browser will assume that it's in the same directory as the XML document itself):

Listing ch01_03.xml

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type="text/css" href="ch01_04.css"?>
<DOCUMENT>
  <GREETING>
    Hello From XML
  </GREETING>
  <MESSAGE>
    Welcome to the wild and woolly world of XML.
  </MESSAGE>
</DOCUMENT>

Here's what ch01_04.css itself looks like. In this case, I'm customizing the <GREETING> element to display its content in red, centered in the browser and in 36-point font, and the <MESSAGE> element to display its text in black 18-point font. The display: block part indicates that I want the content of these elements to be displayed in a block, which translates here to being displayed on its own line:

Listing ch01_04.css

GREETING {display: block; font-size: 36pt; color: #FF0000; text-align:  _center}
MESSAGE (display: block; font-size: 18pt; color: #000000}

You can see the results in two browsers that support XML in Figures 1-3 and 1-4. Figure 1-3 shows this XML document in Netscape 6, and Figure 1-4 shows the same document in Internet Explorer. As you can see, we've formatted the XML document as we like it using stylesheets—in fact, this result is already an advance over HTML because we've been able to format exactly how we want to display the text, not just rely on predefined elements such as <H1>.

Figure 1-3Figure 1-3 An XML document in Netscape Navigator.

Figure 1-4Figure 1-4 An XML document in Internet Explorer.

That gives us a taste of XML. Now we've seen how to create a first XML document and how to use a stylesheet to display it in a browser. We've seen what it looks like—so what's so great about XML? Take a look at the overview, coming up next.

  • + Share This
  • 🔖 Save To Your Account

Related Resources

There are currently no related titles. Please check back later.