Sams Teach Yourself XML in 21 Days, 3rd Edition

Sams Teach Yourself XML in 21 Days

By

Extending XHTML

The name Extensible Hypertext Markup Language might give you the impression that XHTML is designed to be extended. That's true. However, although you can technically extend XHTML, HTML browsers won't understand what you're doing. Let's take a look at an example.

In this example, you'll extend XHTML by adding to it a new element, <bold>, that will display its text in bold. Here's how you might declare this element in a DTD:

<!ELEMENT bold (#PCDATA)>

You also need the rest of the XHTML 1.0 Transitional DTD, so you start by creating a new parameter entity, which you can call XHTML1.0DTDEntity:

<!ELEMENT bold (#PCDATA)>
<!ENTITY % XHTML1.0DTDEntity PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Now to include the entire XHTML 1.0 Transitional DTD in the new DTD, you just use a reference to this parameter entity. Listing 12.11 shows how this works.

Example 12.11. Extending the XHTML 1.0 Transitional DTD (ch12_11.dtd)

<!ELEMENT bold (#PCDATA)>
<!ATTLIST bold boldattribute CDATA #IMPLIED >
<!ENTITY % XHTML1.0DTDEntity PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
%XHTML1.0DTDEntity;

Now you have a new DTD that supports not only the <bold> element, but also the rest of XHTML 1.0 Transitional. So you've extended XHTML. You can see this new DTD at work in Listing 12.12.

Example 12.12. Extending XHTML 1.0 Transitional as HTML (ch12_12.html)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html SYSTEM "ch12_11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Extending XHTML
        </title>
        <link rel="stylesheet" href="ch12_13.css" />
    </head>

    <body>
        <p>
            This version of XHTML can make text <bold>bold</bold>.
        </p>
    </body>
</html>

To style the new <bold> element, you can use a CSS, such as the one in Listing 12.13.

Example 12.13. A Style Sheet for Extending XHTML 1.0 Transitional (ch12_13.css)

bold {font-weight: bold}

However, neither Internet Explorer nor Netscape Navigator will understand what to do with your extended XHTML. The reason for this is that you've given the XHTML document, ch12_12.html, the extension .html, which means that browsers will assume the fixed HTML element set and not even try to read in the DTD.

You can do a better job in this case if you treat ch12_12.html as XML instead of HTML. Listing 12.14 shows how that might work. In this version of the document, you're using an internal DTD (so as not to confuse Internet Explorer, which can't handle the DTD here as an external one) and the <?xml-stylesheet?> XML processing instruction to include a new version of the style sheet, ch12_15.css (to make sure the text in the <title> element will also be formatted for display), which is shown in Listing 12.15.

Example 12.14. Extending XHTML 1.0 Transitional as XML (ch12_14.xml)

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="ch12_15.css"?>
<!DOCTYPE html [
<!ELEMENT bold (#PCDATA)>
<!ENTITY % XHTML1.0DTDEntity PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
%XHTML1.0DTDEntity;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Extending XHTML
        </title>
    </head>

    <body>
        <p>
            This version of XHTML can make text <bold>bold</bold>.
        </p>
    </body>
</html>

Example 12.15. A Style Sheet Used to Extend XHTML 1.0 Transitional as XML (ch12_15.css)

bold {font-weight: bold}
title {display:block; font-size: 24pt}

Figure 12.7 shows the results of Listings 12.14 and 12.15. in Internet Explorer. Internet Explorer indeed downloads the XHTML 1.0 Transitional DTD, extends it with the new <bold> element, and produces the results shown in Figure 12.7.

12fig07.gif

Figure 12.7 Extending XHTML.

By treating the markup as XML, you are able to extend XHTML. That's not too bad because the XHTML DTDs still contain all the XHTML rules, such as which elements can contain which other elements and which attributes are required. The drawback is that you need to define from scratch all the formatting you want to use; you do this by defining your own style sheets or using someone else's.

Share ThisShare This