Enhancements: XML & DOM
The W3C found many problems with HTML. There was a need to define other HTML like languages to handle different network documents. As a result, the W3C defined the Extensible Markup Language or XML. Below are some key features.
- XML is a separate formal markup metalanguage that uses select features of SGML to define markup languages
- XML eliminates many features of SGML that aren't applicable to languages like HTML and simplifies other SGML elements in order to make them easier to use and understand. You don't use XML to directly create and mark up web documents. Use XML technology to define a new markup language
- XML is a standard upon which you can develop you own markup language to suit your needs
- XML is also being used as a standard to define tiny languages that are used as data exchange protocols between different applications
- HTML Version 4.01 is NOT XML compliment - so the W3C offers XHTML (a reformulation of HTML) to be compliment under XML
- With HTML you can't handle nontraditional content like chemical formulae, musical notation or mathematical expressions
- HTML doesn't support alternative display media such as handheld computers and intelligent cell phones
In effect, XHTML - bridges the gap between HTML and XML
- XHTML 1.0 attempts to support every feature of HTML 4.01 using the rigid rules of XML
- Much of XHTML is identical to HTML Version 4.01
- XHTML comes in the same 3 variations HTML does:
Strict - forces authors to use only those features that are fully supported in HTML - i.e. no deprecated tags
Transitional - includes all the deprecated tags
Frames - uses frame elements
XML Basics
XML (eXtensible Markup Language) is an Internet standard for representation of information content. A subset of SGML (Standard Generalized Markup Language), XML is a metalanguage for defining an unlimited number of markup languages. Each of these languages can contain an unlimited number of tags.
"XML defines a specific method for creating text formats for data so that files are program independent, platform independent, and support internationalization (able to be read in different languages, etc.). In fact, because XML is an extensible language, you don't even have to have a browser to interpret the page. Applications can parse the XML document and read the information without any human intervention. XML, unlike HTML, is concerned with the identity, meaning, and structure of data (text and pictures). XML is extensible because it lets Web site developers create their own set of customized tags for documents. This ability to define your own tags is the main feature of XML, and it is what gives developers more flexibility. By defining your own markup tags, you can explicitly define the content in the document. This makes XML a more intelligent markup language than HTML." Miller, Dick R. (2000) XML: Libraries' Strategic Opportunity. Library Journal Net Connect.
We won't be doing much with XML, but you might be interested in learning more about it. Try the following activity. What is the difference between the two following types of markup?
--------------------------------------------------------------------------------
<h1>Pickeled Prunes</h1>
<p>Source: The Joy of Cooking</p>
<p>3 cups water</p>
<p>1 cup cider vinegar</p>
<p>2 cups brown sugar</p>
<p>2 cups dried prunes</p>
<p>1 teaspoon whole cloves</p>
<p>1 teaspoon whole allspice</p>
<p>1 1/2 sticks cinnamon</p>
<ol>
<li>Simmer 45 minutes.</li>
<li>Place the prunes in a jar.</li>
<li>Strain out the spices.</li>
<li>Pour the liquor over the prunes.</li>
</ol>
<p>Keep refrigerated</p>
--------------------------------------------------------------------------------
<recipe>
<recipetitle>Pickeled Prunes</recipetitle>
<source>Source: The Joy of Cooking</source>
<ingredient>3 cups water</ingredient>
<ingredient>1 cup cider vinegar</ingredient>
<ingredient>2 cups brown sugar</ingredient>
<ingredient>2 cups dried prunes</ingredient>
<ingredient>1 teaspoon whole <spice>cloves</spice></ingredient>
<ingredient>1 teaspoon whole <spice>allspice</spice></ingredient>
<ingredient>1 stick <spice>cinnamon</spice></ingredient>
<steps>
<step1>Simmer 45 minutes.</step1>
<step2>Place the prunes in a jar.</step2>
<step3>Strain out the spices.</step3>
<step4>Pour the liquor over the prunes.</step4>
</steps>
<warning>Keep refrigerated</warning>
</recipe>
XML DOM
DOM, short for Document Object Model, is the specification for how objects in a Web page (text, images, headers, links, etc.) are represented. The DOM defines what attributes are associated with each object, and how the objects and attributes can be manipulated. In other words, DOM determines how an XML document will be accessed, manipulated, and displayed.
DHTML, short for Dynamic HTML, uses the DOM to dynamically change the appearance of pages after they have been downloaded to a user's browser.
For years web developers have had to deal with the different proprietary object models of Netscape and Internet Explorer. The W3C produced a DOM level 1 (DOM1) in 1998 and finalized it in late 2000. The latest version is now DOM2. Netscape 6.x and Internet Explorer 5.5 and above began to embrace the new standard. Other browsers (Opera and Mozilla, for example) are popular partly because they are designed to be standard-compliant. Although some differences among the browsers' adoptions of the standard may still exist, it is more possible today than at any time to code without having to cater to proprietary formats. The chances for true interoperability on the Web have come closer.
To learn more about DOM, read the Document Object Model page from wikipedia.
Complete the XML DOM Tutorial at W3Schools. Explore XML DOM Examples from W3Schools.
In brief, the DOM is a map of all objects found on a Web page starting with the browser window at the top of the hierarchy. The document object is thus one level below the the window object. And the document itself has objects.
window.document.form
Use this link to view the DOM of your browser (by Mike Hall): DOM viewer
Examples
Here are some samples of how you can combine your knowledge of HTML, CSS, and JavaScript to write DHTML.
sample 1 - Aligning text
sample 2 - Underlining text
sample 3 - Creating background color
sample 4 - Changing font family
sample 6 - Changing the background color of a table cell
sample 7 - Making text disappear
sample 8 - Making text change color
sample 10 - Changing the background color of noncontiguous text (variation of sample 9)
sample 11 - Changing the background color of noncontiguous text (variation of sample 9)
CHALLENGE: Modify and/or combine some of the preceding scripts to make a real-life usage. For example:
Learn More
XML
- XML Tutorial at W3Schools
- XML Examples at W3Schools.
- XML Quiz at W3Schools.
- The Web's future: XHTML 2.0 by Nicholas Chase
DOM
- W3C DOM Introduction at Quirksmode
- Introduction to the Document Object Model by Mike Hall at BrainJar.com.
- What Shall We Do With The W3C DOM? by Peter-Paul Koch in Evolt.org.
- Forms, Usability and the W3C DOM by Peter-Paul Koch in Digital Web Magazine.