XML namespace: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(53 intermediate revisions by 2 users not shown)
Line 1: Line 1:
== Definition ==
{{Incomplete}}
{{web technology tutorial|Intermediate}}


## '''Introduction'''
== Introduction ==


----
<div class="tut_goals">
; Learning goals
* Understand why Namespaces are needed
* Learn how to use namespace declarations
* Learn how to create combined XHTML/SVG/MathML/etc documents
; Prerequisites
* Some [[XML]]
; Moving on
* [[DTD tutorial]]
* [[XML Schema tutorial - Basics]]
* [[SVG]] and [[MathML]]
* [[IMS]] e-learning standards
; Level and target population
* Beginners
; Remarks
* This tutorial provides a short overview about XML namespaces. It includes minimal knowledge needed for an XML class. Most parts also can be used in introductory web technologies class. Technical web authors also must understand namespaces, since they are used in XHTML and combined profiles.
</div>


####### '''Why namespaces ?'''
'''XML namespaces have two purposes:'''
# Clearly identify a markup language and its version. Schema declarations like DTDs or XML Schema are not mandatory in many XML applications
# Allow to mix two or more languages in a single document.


----
XML Namespaces allow to fully/uniquely qualify XML element and attribute names to prevent confusing two elements that have the same name but mean different things. Various [[XML]] vocabularies (languages/applications) may be mixed. E.g. in a standards compliant web browser like Firefox or Opera you may include [[SVG]] and [[MathML]] code with the same [[XHTML]] page. But then we can run into naming conflicts, i.e. different vocabularies (DTDs) can use the same names for elements ! Namespaces are a W3C standard since Jan 1999. That means that namespaces have been introduced after XML has been invented.


# Various XML vocabularies (languages/applications) can be mixed.
Since DTDs are not mandatory for most W3C XML languages, the W3C requires namespace definitions within root elements, e.g. XHTML and SVG must include a namespace declaration:


----
The following was mandatory in for valide XHMTL 1.x files:


# But then we can run into naming conflicts, i.e. different vocabularies (DTDs) can use the same names for elements !
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
# Namespaces allow to fully/uniquely qualify XML element and attribute names to prevent from confusing two elements that have the same name but mean different things.


----
Basically this statement says that within the html element all child elements belong to XHTML, unless they are explicitly part of another namespace.


# Since DTDs are not mandatory for most W3C languages, the W3C requires namespace definitions within root elements, e.g. XHTML must have one:
The following example shows how to declare SVG files or fragments with an example (this is also valid for inclusion in HTML5)
<nowiki><</nowiki>html xmlns="http://www.w3.org/1999/xhtml"<nowiki>></nowiki>
<svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
</svg>


'''Standards'''
== Standards involved ==


----
The Namespace standard:
* http://www.w3.org/TR/REC-xml-names/


# Namespaces are a W3C standard since Jan 1999
Namespaces are identified with URIs
# that means that namespaces have been introduced after XML has been invented)
* http://www.rfc-editor.org/rfc/rfc3986.txt


<font color="#0000FF"><u>'''----'''</u>
A URI is either a URL or a URN
* http://www.rfc-editor.org/rfc/rfc2141.txt


# <u>'''http://www.w3.org/TR/REC-xml-names/'''</u>
Compound W3C documents
</font>
* http://www.w3.org/2004/CDF/


----
See also: The [[standard]]s overview article. Most XML-based standards in education (e.g. [[IMS Content Packaging]] make heavy use of namespaces ! In addition most [[IMS]] and [[SCORM]] standards use [[XML Schema]] which are associated to XML contents via namespace declarations.


# Namespaces are identified with URIs (see  " "  <nowiki>[</nowiki>7<nowiki>]</nowiki> for details)
== Namespaces ==


<font color="#0000FF"><u>'''----'''</u>
=== An example demonstrating the need for namespaces ===


# <u>'''http://www.rfc-editor.org/rfc/rfc3986.txt'''</u>
Here is an XML fragment using title within a bibliography element:
</font>
<source lang="xml">
<book>
<title>A true story</title>
<description>A real cool publication</description>
</book>
</source>


----
A 2nd XML fragment uses title in a employees record:
<source lang="xml">
<record>
<name>Miller</name>
<title>Dr. </title>
<publications> ... </publications>
</record>
</source>


# A URI is either a URL or a URN (<font color="#0000FF"><u>'''http://www.rfc-editor.org/rfc/rfc2141.txt'''</u></font>)
If these two XML fragments were added together, there would be a name conflict because both contain a <title>< element with different meaning. In one case we mean ''book title'' and in the other ''something like "none", PhD, etc.''. A style-sheet would have to render these elements very differently. But we can solve this problem by adding prefixes, like this:
# Compound W3C documents


<font color="#0000FF"><u>'''----'''</u>
<source lang="xml">
<employees:record>
  <employees:name>Miller</employees:name>
  <employees:title>Dr. </employees:title>
  <employees:publications>
    <biblio:book>
      <biblio:title>A true story</biblio:title>
      <biblio:description>A real cool publication</biblio:description>
    </biblio:book>
  </employees:publications>
</employees:record>
</source>


# <u>'''http://www.w3.org/2004/CDF/'''</u>
=== A real world example ===
</font>


----
The ''The Open Packaging Format''. Below is the content of an *.opf file that must be included within [[ePub]] "zip" file (a popular [[e-book]] format. It defines the structure of the book using assets and includes metadata.


####### '''Why XML namespaces - ambiguity of an element name'''
''OPF example copied with minor modifications from [http://en.wikipedia.org/wiki/EPUB#Open_Packaging_Format_2.0 Wikipedia] (nov 30 2010).
First XML fragment using title within a bibliography element:
<source lang="XML">
<?xml version="1.0"?>
<package version="2.0"
        xmlns="http://www.idpf.org/2007/opf"
        unique-identifier="BookId">
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/"
            xmlns:opf="http://www.idpf.org/2007/opf">
    <dc:title>Pride and Prejudice</dc:title>
    <dc:language>en</dc:language>
    <dc:identifier id="BookId" opf:scheme="ISBN">123456789X</dc:identifier>
    <dc:creator opf:file-as="Austen, Jane" opf:role="aut">Jane Austen</dc:creator>
  </metadata>
  <manifest>
    <item id="chapter1" href="chapter1.xhtml"
          media-type="application/xhtml+xml"/>
    <item id="chapter2" href="chaptertwo.xhtml"
          media-type="application/xhtml+xml"/>
    <item id="stylesheet" href="style.css"
          media-type="text/css"/>
    <item id="ch1-pic" href="ch1-pic.png"
          media-type="image/png"/>
    <item id="myfont" href="css/myfont.otf"
          media-type="application/x-font-opentype"/>
    <item id="ncx" href="book.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
  <spine toc="ncx">
    <itemref idref="chapter1" />
    <itemref idref="chapter2" />
  </spine>
  <guide>
    <reference type="loi" title="List Of Illustrations"
              href="appendix.html#figures" />
  </guide>
</package>
</source>


<nowiki><</nowiki>book<nowiki>></nowiki>
This OPF file includes two namespaces:
* http://www.idpf.org/2007/opf (It is both used as default, but also with a prefix within the Metadata section)
* http://purl.org/dc/elements/1.1/ ([[Dublin Core]] Metadata)


'''<nowiki><</nowiki>title<nowiki>></nowiki>A true story<nowiki><</nowiki>/title<nowiki>></nowiki>'''
=== Declaring namespaces ===


<nowiki><</nowiki>description<nowiki>></nowiki>A real cool publication<nowiki><</nowiki>/description<nowiki>></nowiki>
Formally speaking, an XML namespace is simply a collection of names (elements and attributes) of a markup vocabulary that can be uniquely identified


<nowiki><</nowiki>/book<nowiki>></nowiki>
;Procedure:


2nd XML fragment using title in a employees record:
# Create or identify a namespace identifier you wish to use: An XML namespace is identified by a unique URI reference, usually a URL.
# The URL does '''need not point to anything on the Internet'''. It is just used as a unique string, i.e. a name
# Therefore if some namespace URLs below are broken there is absolutely nothing to worry about. However, most namespace identifiers actually point to a real web page that either provides an explanation or at least information about the organization/author that created the namespace. This means that if you plan to create your own namespaces, you should use the name of any webpage over which you have control.
# Make a namespace declaration within the element that belongs to this namespace, i.e. map a prefix of your choice to a unique URI.


<nowiki><</nowiki>record<nowiki>></nowiki>
There are two major variants of namespace use: '''prefixed  '''namespaces and '''default''' ones.


<nowiki><</nowiki>name<nowiki>></nowiki>Miller<nowiki><</nowiki>/name<nowiki>></nowiki> '''<nowiki><</nowiki>title<nowiki>></nowiki>Dr. <nowiki><</nowiki>/title<nowiki>></nowiki>'''
(1) Namespace declaration for use with a prefix: declaring a namespace that will require use of '''prefixes for each element'''
<source lang="xml">
<prefix:element xmlns:prefix="URI">
</source>
Example:
<source lang="xml">
<html:html xmlns:html="http://www.w3.org/1999/xhtml">
  <html:head> ..... </html:head>
</source>
Each element below html:html that uses prefix "html:" will belong to Xhtml. Any other will not.


<nowiki><</nowiki>publications<nowiki>></nowiki> ... <nowiki><</nowiki>/publications<nowiki>></nowiki>
(2) Default namespace: declaring a '''default''' namespace for element and its children. I.e. these will not be prefixed.


<nowiki><</nowiki>/record<nowiki>></nowiki>
<source lang="xml">
<element xmlns="URI"><
</source>
Example:
<source lang="xml">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>.....</head>
  <body>.....
</source>


If these two XML fragments were added together, there would be a name conflict because both contain a <nowiki><</nowiki>title<nowiki>></nowiki> element with different meaning. But we can solve this like this:
=== Scoping ===


<nowiki><</nowiki>''employees'':record<nowiki>></nowiki>
"Scoping" means "where does a declaration apply ?


<nowiki><</nowiki>''employees'':name<nowiki>></nowiki>Miller<nowiki><</nowiki>/''employees'':name<nowiki>></nowiki>
The scope of an XML namespace declaration extends from the beginning of the start-tag in which it appears to the end of the corresponding end-tag, including all children. Most frequently, namespaces are declared in the document root.


<nowiki><</nowiki>''employees'':'''title'''<nowiki>></nowiki>Dr. <nowiki><</nowiki>/''employees'':'''title'''<nowiki>></nowiki>
;XHMTL fragment example:


<nowiki><</nowiki>''employees'':publications<nowiki>></nowiki>
<source lang="xml">
<?xml version="1.0"?>
  <html:html xmlns:html='http://www.w3.org/1999/xhtml'>
  <html:head>
    <html:title>Frobnostication</html:title>
  </html:head>
  <html:body>
    <html:p>
      Moved to<html:a href='http://frob.example.com'>here.</html:a>
    </html:p>
  </html:body>
</html:html>
</source>
The scope of the XHMTL namespace declaration goes from <code><html:html></code> to <code></html:html></code>.


<nowiki><</nowiki>''biblio'':book<nowiki>></nowiki>
;Example with 2 namespaces (both use URNs instead of URLs)
<source lang="xml">
<?xml version="1.0"?>
<!-- both namespace prefixes are available throughout the XML fragment -->
<bk:book xmlns:bk='urn:loc.gov:books'
        xmlns:isbn='urn:ISBN:0-395-36341-6'>
    <bk:title>Cheaper by the Dozen</bk:title>
    <isbn:number>1568491379</isbn:number>
</bk:book>
</source>


<nowiki><</nowiki>''biblio'':'''title'''<nowiki>></nowiki>A true story<nowiki><</nowiki>/biblio:'''title'''<nowiki>></nowiki>
=== Default namespaces ===


<nowiki><</nowiki>''biblio'':description<nowiki>></nowiki>A real cool publication<nowiki><</nowiki>/biblio:description<nowiki>></nowiki>
If most elements in an XML document belonged to the same namespace, it  would be ugly to prefix each element name. Instead define a default namespace that applies to all non-prefixed elements and attributes.
Syntax:
<source lang="xml">
<element xmlns="URI"> < ....
</source>


<nowiki><</nowiki>/''biblio'':book<nowiki>></nowiki>
The default namespace applies to the element in which it was defined and all descendants of that element. But if a descendants has another default namespace defined on it, this new namespace definition overrides the previous one and becomes the default for that element and its descendants.
Note that namespaces does not apply to attribute names ! This is a likely source of trouble for XSLT ...


<nowiki><</nowiki>/''employees'':publications<nowiki>></nowiki>
;XHTML default namespace example:
<source lang="xml">
<?xml version="1.0"?>
<!-- elements are in the HTML namespace by default -->
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
      <title>Frobnostication</title>
  </head>
  <body>
      <p>Moved to <a href='http://frob.example.com'>here</a>.</p>
  </body>
</html>
</source>
Default namespace for a book vocabulary plus a namespace for ISBN example:
<source lang="xml">
  <!-- unprefixed element types are from "books" -->
  <book xmlns='urn:loc.gov:books'
        xmlns:isbn='urn:ISBN:0-395-36341-6'>
  <title>Cheaper by the Dozen</title>
  <isbn:number>1568491379</isbn:number>
  </book>
</source>
;A larger example of namespace scoping


<nowiki><</nowiki>/''employees'':record<nowiki>></nowiki>
It includes some XHTML whose namespace is declared within the "p" element.
<source lang="xml">
<?xml version="1.0"?>
<!-- initially, the default namespace is "books" -->
<book xmlns='urn:loc.gov:books'
      xmlns:isbn='urn:ISBN:0-395-36341-6'>
  <title>Cheaper by the Dozen</title>
  <isbn:number>1568491379</isbn:number>
  <notes>
  <!-- make HTML the default namespace for some commentary -->
      <p xmlns='http://www.w3.org/1999/xhtml'>
        This is a <i>funny</i> book!
    </p>
  </notes>
</book>
</source>


----
; XSLT namespace example


#######
[[XSLT]] is a transformation language, i.e. programming language that allows to translate an XML content into another content (XML or other). XSLT instructions are prefixed with "xsl" here.
Output produced is namespace-less here. See the [[XSLT tutorial]] for an introduction.
<source lang="xml">
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="page">
  .....
  <html> <head> <title> <xsl:value-of select="title"/> </title> </head>
  <body bgcolor="#ffffff"> <xsl:apply-templates/> </body>
  </html>
</xsl:template>


----
<xsl:template match="title">
  <h1 align="center"> <xsl:apply-templates/> </h1>
</xsl:template>


'''Declaring namespaces'''
<xsl:template match="content">
  <p align="center"> <xsl:apply-templates/> </p>
</xsl:template>


----
<xsl:template match="comment">
  <hr /> <xsl:apply-templates/>
  </xsl:template>
</xsl:stylesheet>
</source>


# Formally speaking, an XML namespace is simply a collection of names (elements and attributes) of a markup vocabulary that can be uniquely identified
=== Validation of composite documents ===
'''Procedure:'''


----
Validating documents that contain different namespaces are called composite or compound documents and validation is not always easy since combined DTDs may not exist. A validation standard for composite W3C vocabularies is currently under preparation (but may not happen ...). Usually, combined documents are produced by server-side programs for delivery and they are just well-formed (not attached to DTDs or other schemas)


# Create or identify a '''namespace identifier''' you wish to use:<br>An XML namespace is identified by a unique URI reference, usually a URL
You also may write DTDs that validate your own compound documents as we demonstrate in the following example.


----
; A DTD rule with an extra namespace example
* [http://tecfa.unige.ch/guides/xml/examples/composites/link_list.dtd link_list.dtd]
* [http://tecfa.unige.ch/guides/xml/examples/composites/link_list.xml link_list.xml]


# The URL need not point to anything on the Internet. It is just used as a unique string, i.e. a name !
In this example, the "a" element and the "description" attribute belongs to the default namespace, but the href and type attributes belong to the xlink namespace. We declare the namespace in the root element, but also could have done it just for the "el" element. Note: Xlinks do not work in IE7/8.
# However, most namespace identifiers actually point to a real web page that either provides an explanation or at least informations about the organization. This means that if you plan to create your own namespaces, you should use the name of any webpage over which you have control.


----
<source lang="xml">
<!ELEMENT link_list (el+)>
<!ATTLIST link_list xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
<!ELEMENT el (#PCDATA)>
<!ATTLIST el description CDATA #IMPLIED
          xlink:href CDATA #REQUIRED
          xlink:type CDATA #FIXED "simple" >
</source>
See the [[DTD tutorial]] for details.


# Make a '''namespace declaration''' within the element that belongs to this namespace, i.e.<br>map a prefix of your choice to a unique URI.
; An XML example file
There are two major declaration variants (see examples on the '''next slides ....''')


(1) declaring a namespace that will require insertion of prefixes
<source lang="xml">
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE link_list SYSTEM "link_list.dtd">
<?xml-stylesheet href="link_list.css" type="text/css" ?>
<link_list xmlns:xlink="http://www.w3.org/1999/xlink">
    <el description="verified"
        xlink:type="simple"
        xlink:href="http://www.webster.ch/">Webster Geneva</el>
    <el xlink:href="http://www.webster.edu/"
        xlink:type="simple">Webster</el>
</link_list>
</source>


----
== Namespaces for documents ==


# <nowiki><</nowiki>prefix:element '''xmlns:prefix'''="URI"<nowiki>></nowiki>
=== Client-side XML web languages and namespaces overview ===
<nowiki><</nowiki>html:html '''xmlns:html='''<nowiki>’</nowiki>http://www.w3.org/1999/xhtml<nowiki>’></nowiki>  .....


(2) declaring a default namespace (element <nowiki>+</nowiki> children belong to this namespace by default)
The W3C defines several Internet languages and for which namespace declarations are mandatory (even if you use them "standalone", i.e. not in composite documents.


# <nowiki><</nowiki>element '''xmlns='''"URI"<nowiki>></nowiki> ....
;Some W3C languages
<nowiki><</nowiki>html '''xmlns='''<nowiki>’</nowiki>http://www.w3.org/1999/xhtml<nowiki>’></nowiki>  .....
 
----
 
#######
 
----
 
'''Scoping'''
 
----
 
# "Scoping" here means "where does a declaration apply ?"
# The scope of an XML namespace declaration extends from the beginning of the start-tag in which it appears to the end of the corresponding end-tag, including all children
# Most frequently, namespaces are declared in the document root.
'''XHMTL fragment'''
 
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>html:html '''xmlns:html'''=<nowiki>’</nowiki>http://www.w3.org/1999/xhtml<nowiki>’></nowiki>
 
<nowiki><</nowiki>html:head<nowiki>><</nowiki>html:title<nowiki>></nowiki>Frobnostication<nowiki><</nowiki>/html:title<nowiki>><</nowiki>/html:head<nowiki>></nowiki>
 
<nowiki><</nowiki>html:body<nowiki>><</nowiki>html:p<nowiki>></nowiki>Moved to
 
<nowiki><</nowiki>html:a href=<nowiki>’</nowiki>http://frob.example.com<nowiki>’></nowiki>here.<nowiki><</nowiki>/html:a<nowiki>><</nowiki>/html:p<nowiki>></nowiki>
 
<nowiki><</nowiki>/html:body<nowiki>></nowiki>
 
<nowiki><</nowiki>/html:html<nowiki>></nowiki>
 
'''Example with 2 namespaces (both use URNs instead of URLs)'''
 
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- both namespace prefixes are available throughout --<nowiki>></nowiki>
 
<nowiki><</nowiki>bk:book '''xmlns:bk'''=<nowiki>’</nowiki>urn:loc.gov:books<nowiki>’</nowiki>
 
'''xmlns:isbn'''=<nowiki>’</nowiki>urn:ISBN:0-395-36341-6<nowiki>’></nowiki>
 
<nowiki><</nowiki>'''bk:'''title<nowiki>></nowiki>Cheaper by the Dozen<nowiki><</nowiki>/bk:title<nowiki>></nowiki>
 
<nowiki><</nowiki>'''isbn:'''number<nowiki>></nowiki>1568491379<nowiki><</nowiki>/isbn:number<nowiki>></nowiki>
 
<nowiki><</nowiki>/bk:book<nowiki>></nowiki>
 
----
 
#######
 
----
 
'''Default namespaces'''
 
----
 
# If most elements in an XML document belonged to the same namespace, it would be ugly to prefix each element name.
# Instead define a default namespace that applies to all non-prefixed elements and attributes.
 
----
 
#  <nowiki><</nowiki>element '''xmlns='''"URI"<nowiki>></nowiki> ....
 
----
 
# The default namespace applies to the element on which it was defined and all descendants of that element.
# But if a descendants has another default namespace defined on it, this new namespace definition overrides the previous one and becomes the default for that element and its descendants.
# Default the namespaces does not apply to attribute names ! This is a likely source of trouble for XSLT ...
 
----
 
####### '''XHTML default namespace (typical XHTML file)'''
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- elements are in the HTML namespace by default --<nowiki>></nowiki>
 
<nowiki><</nowiki>html xmlns=<nowiki>’</nowiki>http://www.w3.org/1999/xhtml<nowiki>’></nowiki>
 
<nowiki><</nowiki>head<nowiki>><</nowiki>title<nowiki>></nowiki>Frobnostication<nowiki><</nowiki>/title<nowiki>><</nowiki>/head<nowiki>></nowiki>
 
<nowiki><</nowiki>body<nowiki>><</nowiki>p<nowiki>></nowiki>Moved to
 
<nowiki><</nowiki>a href=<nowiki>’</nowiki>http://frob.example.com<nowiki>’></nowiki>here<nowiki><</nowiki>/a<nowiki>></nowiki>.<nowiki><</nowiki>/p<nowiki>><</nowiki>/body<nowiki>></nowiki>
 
<nowiki><</nowiki>/html<nowiki>></nowiki>
 
####### '''Default namespace for a book vocabulary plus a namespace for ISBN'''
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- unprefixed element types are from "books" --<nowiki>></nowiki>
 
<nowiki><</nowiki>book '''xmlns='''<nowiki>’</nowiki>urn:loc.gov:books<nowiki>’</nowiki>
 
'''xmlns:isbn='''<nowiki>’</nowiki>urn:ISBN:0-395-36341-6<nowiki>’></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>Cheaper by the Dozen<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>isbn:number<nowiki>></nowiki>1568491379<nowiki><</nowiki>/isbn:number<nowiki>></nowiki>
 
<nowiki><</nowiki>/book<nowiki>></nowiki>
 
####### '''A larger example of namespace scoping'''
 
----
 
# It includes some XHTML whose namespace is declared within the "p" element
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- initially, the default namespace is "books" --<nowiki>></nowiki>
 
<nowiki><</nowiki>book '''xmlns=<nowiki>’</nowiki>urn:loc.gov:books<nowiki>’</nowiki>'''
 
'''xmlns:isbn=<nowiki>’</nowiki>urn:ISBN:0-395-36341-6<nowiki>’'''></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>Cheaper by the Dozen<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>isbn:number<nowiki>></nowiki>1568491379<nowiki><</nowiki>/isbn:number<nowiki>></nowiki>
 
<nowiki><</nowiki>notes<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- make HTML the default namespace for some commentary --<nowiki>></nowiki>
 
<nowiki><</nowiki>p '''xmlns=<nowiki>’</nowiki>http://www.w3.org/1999/xhtml<nowiki>’'''></nowiki>
 
This is a <nowiki><</nowiki>i<nowiki>></nowiki>funny<nowiki><</nowiki>/i<nowiki>></nowiki> book!
 
<nowiki><</nowiki>/p<nowiki>></nowiki>
 
<nowiki><</nowiki>/notes<nowiki>></nowiki>
 
<nowiki><</nowiki>/book<nowiki>></nowiki>
 
----
 
####### '''XSLT namespace'''
 
----
 
# XSLT instructions are prefixed with "xsl" here
# Output is namespace-less here (see the XSLT module for explanations ...)
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
 
<nowiki><</nowiki>'''xsl:'''stylesheet '''xmlns:xsl'''="http://www.w3.org/1999/XSL/Transform"<nowiki>></nowiki>
 
'''<nowiki><</nowiki>xsl:template match="page"<nowiki>></nowiki>'''
 
.....
 
<nowiki><</nowiki>html<nowiki>></nowiki> <nowiki><</nowiki>head<nowiki>></nowiki> <nowiki><</nowiki>title<nowiki>></nowiki> <nowiki><</nowiki>xsl:value-of select="title"/<nowiki>></nowiki> <nowiki><</nowiki>/title<nowiki>></nowiki> <nowiki><</nowiki>/head<nowiki>></nowiki>
 
<nowiki><</nowiki>body bgcolor="<nowiki> </nowiki>ffffff"<nowiki>></nowiki>  <nowiki><</nowiki>xsl:apply-templates/<nowiki>></nowiki> <nowiki><</nowiki>/body<nowiki>></nowiki>
 
<nowiki><</nowiki>/html<nowiki>></nowiki>
 
'''<nowiki><</nowiki>/xsl:template<nowiki>></nowiki>'''
 
'''<nowiki><</nowiki>xsl:template match="title"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>h1 align="center"<nowiki>></nowiki> <nowiki><</nowiki>xsl:apply-templates/<nowiki>></nowiki> <nowiki><</nowiki>/h1<nowiki>></nowiki>
 
'''<nowiki><</nowiki>/xsl:template<nowiki>></nowiki>'''
 
<nowiki><</nowiki>xsl:template match="content"<nowiki>></nowiki>
 
<nowiki><</nowiki>p align="center"<nowiki>></nowiki> <nowiki><</nowiki>xsl:apply-templates/<nowiki>></nowiki> <nowiki><</nowiki>/p<nowiki>></nowiki>
 
<nowiki><</nowiki>/xsl:template<nowiki>></nowiki>
 
<nowiki><</nowiki>xsl:template match="comment"<nowiki>></nowiki>
 
<nowiki><</nowiki>hr /<nowiki>></nowiki> <nowiki><</nowiki>xsl:apply-templates/<nowiki>></nowiki>
 
<nowiki><</nowiki>/xsl:template<nowiki>></nowiki>
 
<nowiki><</nowiki>/xsl:stylesheet<nowiki>></nowiki>
 
----
 
#######
 
----
 
'''Validation of composite documents'''
 
----
 
# Validating documents that contain different namespaces are called composite or compound documents and validation is not always easy since combined DTDs may not exist
# A validation standard for composite W3C vocabularies is currently under preparation ...
# Usually, combined documents are produced by server-side programs for delivery and they are just well-formed (not attached to DTDs or other schemas)
# You may write DTDs that validate compound documents.
 
----
 
####### '''A DTD rule with an extra namespace'''
 
----
 
# In this example, the "a" element and the "description" attribute belongs to the default namespace, but the href and type attributes belong to the xlink namespace
# We declare the namespace in the root element, but also could have done it just for the "el" element...
'''The DTD (file link_list.dtd) - XML is on next slide ...'''
 
<nowiki><</nowiki>!ELEMENT link_list (el<nowiki>+</nowiki>)<nowiki>></nowiki>
 
<nowiki><</nowiki>!ATTLIST link_list '''xmlns:xlink CDATA <nowiki> </nowiki>FIXED "http://www.w3.org/1999/xlink'''"<nowiki>></nowiki>
 
<nowiki><</nowiki>!ELEMENT el (<nowiki> </nowiki>PCDATA)<nowiki>></nowiki>
 
<nowiki><</nowiki>!ATTLIST el
 
description CDATA <nowiki> </nowiki>IMPLIED
 
'''xlink:href CDATA <nowiki> </nowiki>REQUIRED'''
 
'''    xlink:type CDATA <nowiki> </nowiki>FIXED "simple"'''
 
<nowiki>></nowiki>
 
'''An XML Example file (file link_list.xml)'''
 
<nowiki><</nowiki>?xml version="1.0" encoding="ISO-8859-1" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>!DOCTYPE link_list SYSTEM "link_list.dtd"<nowiki>></nowiki>
 
<nowiki><</nowiki>?xml-stylesheet href="link_list.css" type="text/css" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>link_list xmlns:xlink="http://www.w3.org/1999/xlink"<nowiki>></nowiki>
 
<nowiki><</nowiki>el description="verified"
 
xlink:type="simple"
 
xlink:href="http://www.webster.ch/"<nowiki>></nowiki>Webster Geneva<nowiki><</nowiki>/el<nowiki>></nowiki>
 
<nowiki><</nowiki>el xlink:href="http://www.webster.edu/"
 
xlink:type="simple"<nowiki>></nowiki>Webster<nowiki><</nowiki>/el<nowiki>></nowiki>
 
<nowiki><</nowiki>/link_list<nowiki>></nowiki>
 
# Note: This file will not display clickable links in IE (since IE does not implement XLinks)
# See  " "  <nowiki>[</nowiki>24<nowiki>]</nowiki> for a workaround using XHTML tags
 
----
 
## '''Client-side XML languages and namespaces overview'''
 
----
 
# The W3C defines several Internet languages and '''for which namespace declarations are mandatory''' (even if you use them "standalone", i.e. not in composite documents)
# XSLT and XML Schema will be introduced at introductory level in a later module
'''Some W3C languages'''


{|border="2" cellspacing="0" cellpadding="4" width="100%" align="center"
{|border="2" cellspacing="0" cellpadding="4" width="100%" align="center"
|align = "center"|'''Name'''
|align = "center"|Name
|align = "center"|'''Namespace URL'''
|align = "center"|Namespace URL
|align = "center"|'''Explanation'''
|align = "center"|Explanation
|-
|-
|XSLT
|[[XSLT]]
|http://www.w3.org/1999/XSL/Transform
|http://www.w3.org/1999/XSL/Transform
|XSL - Transformations
|XSL - Transformations
Line 400: Line 351:
|XSL - Formatting
|XSL - Formatting
|-
|-
|XML Schema
|[[XML Schema]]
|http://www.w3.org/2001/XMLSchema<nowiki> </nowiki>
|http://www.w3.org/2001/XMLSchema
|&nbsp;
|XML grammar definition language
|-
|-
|SVG
|[[SVG]]
|http://www.w3.org/2000/svg
|http://www.w3.org/2000/svg
|Scalable Vector Graphics
|Scalable Vector Graphics
|-
|-
|RDF
|[[RDF]]
|http://www.w3.org/1999/02/22-rdf-syntax-ns<nowiki> </nowiki>
|http://www.w3.org/1999/02/22-rdf-syntax-ns
|Resource Description Format
|Resource Description Format
|-
|-
|SMIL 2.0
|[[SMIL]] 2.0
|http://www.w3.org/2001/SMIL20/
|http://www.w3.org/2001/SMIL20/
|Synchronized Multimedia Integration Lang.
|Synchronized Multimedia Integration Lang.
Line 421: Line 372:
|-
|-
|XLink
|XLink
|xmlns:xlink="http://www.w3.org/1999/xlink"
|http://www.w3.org/1999/xlink"
|XML Linking Language
|XML Linking Language
|-
|-
Line 428: Line 379:
|Next generation of HTML forms.
|Next generation of HTML forms.
|-
|-
|XHTML
|[[XHTML]]
|http://www.w3.org/1999/xhtml
|http://www.w3.org/1999/xhtml
|&nbsp;
|XML-based HTML variant
|-
|-
|MathML
|[[MathML]]
|http://www.w3.org/1998/Math/MathML
|http://www.w3.org/1998/Math/MathML
|Mathematical markup language
|Mathematical markup language
Line 438: Line 389:
|}<br clear="all">
|}<br clear="all">


# Some of these languages (e.g. SMIL, MathML, SVG, X3D) need special clients for display
Some of these languages (e.g. SMIL, MathML, SVG, X3D) need special clients for display. Others are transducers or helpers, i.e. are used to define, style, transform and process XML contents
# Some of these languages are transducers or helpers, i.e. are used to define, style, transform and process XML contents


----
; RDF namespace
[[RDF]]-based languages are very prolific and add to the complexity of [[semantic web]] initiatives


#######
See [http://ebiquity.umbc.edu/blogger/100-most-common-rdf-namespaces/ 100 most common RDF namespaces]


----
=== Other Document standards ===


'''Compound documents'''
Each of the following usually packages a document as zip file. Inside the zip, you will find several files using several XML languages.


----
* [[EPub]] (e-books)
* [[Open Packaging Conventions and Office Open XML]] (Microsoft "docx")
* [[IMS Content Packaging]] (an e-learning format)


# Combining various content delivery formats is the future (also on cell phones !)
== Compound documents ==
# For example, XHTML-formatted content can be augmented by SVG objects or mathematical formula.
# Examples of possible Compound Document profiles:
# XHTML <nowiki>+</nowiki> SVG <nowiki>+</nowiki> MathML
# XHTML <nowiki>+</nowiki> SMIL
# XHTML <nowiki>+</nowiki> XForms
# XHTML <nowiki>+</nowiki> VoiceML
# The W3C is working on a generic Compound Document by Reference Framework (CDRF) that defines a language-independent processing model for combining arbitrary document formats ...
'''Web browser caveats:'''


# IE doesn<nowiki>’</nowiki>t support natively most of these languages, Firefox supports more but not all.
Combining various content delivery formats is the future (also on cell phones). For example, XHTML-formatted content can be augmented by SVG objects or mathematical formula.
# Workaround:
# Use a browser that is more advanced (e.g. Firefox) or specialized players (e.g. Realplayer for SMIL)
# Install plugins for your web browser and use a more indirect method to assemble contents, i.e. <nowiki><</nowiki>object<nowiki>></nowiki> or <nowiki><</nowiki>iframe<nowiki>></nowiki> This will work with most browsers if you have the right plugin (SVG in this case) installed.
<nowiki><</nowiki>iframe src="hello-svg.svg" height="300" width="80%" frameborder="0"<nowiki>></nowiki>


... Sorry you need an SVG plugin ...
; Examples of possible Compound Document profiles:


<nowiki><</nowiki>/iframe<nowiki>></nowiki>
* XHTML + SVG + MathML
* XHTML + SMIL
* XHTML + XForms
* XHTML + VoiceML


----
The W3C is working on a generic Compound Document by Reference Framework (CDRF) that defines a language-independent processing model for combining arbitrary document formats ...


#######
;Web browser caveats:


----
* IE '''doesn't support natively''' most XML W3C "content" languages (e.g. SVG, MathML), but implements a version of [[SMIL]], called "Timed Text". Firefox supports static [[SVG]] and [[MathML]]. Both implement [[RSS]]
 
Workarounds:
'''MathML example'''
* Use a browser that is more advanced (e.g. Firefox, Opera, Chrome) or specialized players (e.g. Realplayer for SMIL)
 
* For HTML + SVG + MathML, use [[HTML5]]
----
* Call your files *.xml (often helps if you use IE)
 
* For some formats you may install plugins or extensions in your web browser and then use a more indirect method to assemble contents, i.e. <nowiki><object> or <iframe></nowiki>. This will work with most browsers if you have the right plugin (SVG in this case) installed.
####### '''XHMTL <nowiki>+</nowiki> MathML (file xhtml_mathml.xml)'''
<source lang="xml">
 
<iframe src="hello-svg.svg" height="300" width="80%" frameborder="0">
----
... Sorry you need an SVG plugin ...
 
</iframe><
# XHTML is declared in the root since the document is XHTML
</source>
# MathML is declared when we use it (could have been declared in the root too)
<nowiki><</nowiki>?xml version="1.0" encoding="iso-8859-1"?<nowiki>></nowiki>
 
<nowiki><</nowiki>'''xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>xhtml:body<nowiki>></nowiki>
 
<nowiki><</nowiki>xhtml:h1<nowiki>></nowiki>A Compound Document<nowiki><</nowiki>/xhtml:h1<nowiki>></nowiki>
 
<nowiki><</nowiki>xhtml:p<nowiki>></nowiki>A simple formula using MathML in XHTML.<nowiki><</nowiki>/xhtml:p<nowiki>></nowiki>
 
<nowiki><</nowiki>'''mathml:math xmlns:mathml="http://www.w3.org/1998/Math/MathML"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>mathml:mrow<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:msqrt<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:mn<nowiki>></nowiki>49<nowiki><</nowiki>/mathml:mn<nowiki>></nowiki>
 
<nowiki><</nowiki>/mathml:msqrt<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:mo<nowiki>></nowiki>=<nowiki><</nowiki>/mathml:mo<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:mn<nowiki>></nowiki>7<nowiki><</nowiki>/mathml:mn<nowiki>></nowiki>
 
<nowiki><</nowiki>/mathml:mrow<nowiki>></nowiki>
 
<nowiki><</nowiki>/mathml:math<nowiki>></nowiki>
 
<nowiki><</nowiki>/xhtml:body<nowiki>></nowiki>
 
<nowiki><</nowiki>/xhtml:html<nowiki>></nowiki>
 
# Warning: Does not work with IE 6/7, but there are workarounds:
# use the W3C MathML stylesheet that also will install an appropriate IE plugin (see ex.  <nowiki>[</nowiki>-18<nowiki>]</nowiki>)
# use e.g. Firefox or Amaya
# or install a MathML plugin for IE and include MathML contents with an iframe or similar construct
 
----
 
####### '''XHMTL <nowiki>+</nowiki> MathML (file xhtml_mathml2.xml)'''
 
----
 
# In the previous example, one also could have declared xhtml as default namespace and overide the default namespace just for the mathml "section". The result is the same
<nowiki><</nowiki>?xml version="1.0" encoding="iso-8859-1"?<nowiki>></nowiki>
 
<nowiki><</nowiki>html xmlns="http://www.w3.org/1999/xhtml"<nowiki>></nowiki>
 
<nowiki><</nowiki>body<nowiki>></nowiki>
 
<nowiki><</nowiki>h1<nowiki>></nowiki>A Compound Document<nowiki><</nowiki>/h1<nowiki>></nowiki>
 
<nowiki><</nowiki>p<nowiki>></nowiki>A simple formula using MathML in XHTML.<nowiki><</nowiki>/p<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:math xmlns:mathml="http://www.w3.org/1998/Math/MathML"<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:mrow<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:msqrt<nowiki>></nowiki>
 
<nowiki><</nowiki>mathml:mn<nowiki>></nowiki>49<nowiki><</nowiki>/mathml:mn<nowiki>></nowiki>
 
<nowiki><</nowiki>/mathml:msqrt<nowiki>></nowiki>


<nowiki><</nowiki>mathml:mo<nowiki>></nowiki>=<nowiki><</nowiki>/mathml:mo<nowiki>></nowiki>
=== XHTML + other vocabularies ===


<nowiki><</nowiki>mathml:mn<nowiki>></nowiki>7<nowiki><</nowiki>/mathml:mn<nowiki>></nowiki>
; XHTML / MathML example
* [http://tecfa.unige.ch/guides/xml/examples/composites/xhtml_mathml.xml xhtml_mathml.xml]
<source lang="xml">
<?xml version="1.0" encoding="iso-8859-1"?>
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <xhtml:body>
    <xhtml:h1>A Compound Document</xhtml:h1>
    <xhtml:p>A simple formula using MathML in XHTML.</xhtml:p>
    <mathml:math xmlns:mathml="http://www.w3.org/1998/Math/MathML">
      <mathml:mrow>
        <mathml:msqrt> <mathml:mn>49</mathml:mn> </mathml:msqrt>
        <mathml:mo>=</mathml:mo>
        <mathml:mn>7</mathml:mn>
      </mathml:mrow>
    </mathml:math>
  </xhtml:body>
</xhtml:html>
</source>
MathML doesn't natively work with IE 6/7/8. But there are workarounds. See the [[MathML]] article for some more information about MathML and dealing with IE.


<nowiki><</nowiki>/mathml:mrow<nowiki>></nowiki>
;Xlink example


<nowiki><</nowiki>/mathml:math<nowiki>></nowiki>
XLink was supposed to replace all linking constructs in the W3C languages.
It is adopted by SVG, X3D, but not by XHTML 2 which introduces its own linking constructs. XML-capable browsers are also supposed to implement this (Firefox, but not IE)


<nowiki><</nowiki>/body<nowiki>></nowiki>
; Example - Story grammar that implements XLink for an A element
* Online: [http://tecfa.unige.ch/guides/xml/examples/composites/story-grammar.xml story-grammar.xml]


<nowiki><</nowiki>/html<nowiki>></nowiki>
<source lang="xml">
<?xml version="1.0" encoding="ISO-8859-1" ?>
<STORY xmlns:xlink="http://www.w3.org/1999/xlink">
  <Title>The Webmaster</Title>
  .....
  <INFOS> <Date>30 octobre 2003 - </Date>
  <Author>DKS - </Author>
  <A xlink:href=http://jigsaw.w3.org/css-validator/check/referer
    xlink:type="simple">CSS Validator</A>
  </INFOS>
</STORY>
</source>


----
;SVG example


####### '''XHMTL <nowiki>+</nowiki> MathML <nowiki>+</nowiki> XSLT for IE (file xhtml_mathml_IE.xml)'''
* Most browsers (i.e. all major browser except IE8) can handle SVG. However, some only implement SVG 1.0 and most only static SVG. As of, only Opera implemented the so-called SMILE tags.
<nowiki><</nowiki>?xml version="1.0"?<nowiki>></nowiki>
* Alternatively, use HTML and read the [[using SVG with HTML5 tutorial]]


'''<nowiki><</nowiki>?xml-stylesheet type="text/xsl" href="pmathml.xsl"?<nowiki>></nowiki>'''
XHTML with embedded SVG tags (tested with Firefox)
* Source: http://tecfa.unige.ch/guides/xml/examples/composites/xhtml_svg.xhtml xhtml_svg.xhtml]
<source lang="xml" enclose="div">
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >


''' <nowiki><</nowiki>html xmlns="http://www.w3.org/1999/xhtml"'''
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
<head>
  <title>SVG within XHTML Demo</title>
</head>
<body>
  <h1>SVG within XHTML Demo</h1>


'''      xmlns:pref="http://www.w3.org/2002/Math/preference"'''
  <p> You can embed SVG into XHTML, provided that your browser
  natively implements SVG. E.g. Firefox 1.5+ supports most of static
  SVG. </p>


'''      pref:renderer="css"<nowiki>></nowiki>'''
  The SVG part starts below <hr />


<nowiki><</nowiki>head<nowiki>></nowiki>  <nowiki><</nowiki>title<nowiki>></nowiki>MATHML with an XSLT trick for IE<nowiki><</nowiki>/title<nowiki>></nowiki> <nowiki><</nowiki>/head<nowiki>></nowiki>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"
      width="400" height="300">
  <!-- a small rectangle -->
  <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
  style="fill:#CCCCFF;stroke:#000099"/>
 
  <!-- a text in the same place -->
  <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
    HELLO dear reader
  </text>


<nowiki><</nowiki>body<nowiki>><</nowiki>h1<nowiki>></nowiki>MATHML with an XSLT trick for IE<nowiki><</nowiki>/h1<nowiki>></nowiki>
  </svg>
  <hr />
  The SVG part ended above
</body>
</html>
</source>


<nowiki><</nowiki>p<nowiki>></nowiki>Below is an equation with a radical:<nowiki><</nowiki>/p<nowiki>></nowiki>
SVG within HTML5. This also should work with very old browsers (e.g. IE 6 and FF 1) plus the now unavailable SVG plugin from Adobe.


<nowiki><</nowiki>math xmlns="http://www.w3.org/1998/Math/MathML"<nowiki>></nowiki>
<source lang="xml">
<!DOCTYPE html>
<html>
  <head> <title>HELLO SVG with an iframe</title> </head>
  <body>
    <h1>HELLO SVG with an iframe</h1>
        Here is an embeded SVG scene using iframe.  
<iframe src="hello-svg.svg" height="200" width="80%" frameborder="0">
</iframe>
    <hr>
  </body>
</html>
</source>


<nowiki><</nowiki>msup<nowiki>></nowiki>
In the following example, the SVG file is a standard stand-alone SVG file
<source lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
          "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
        style="fill:#CCCCFF;stroke:#000099"/>
  <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
  HELLO dear reader
  </text>
</svg>
</source>


<nowiki><</nowiki>msqrt<nowiki>></nowiki>
=== Combining XHTML with your XML ===


<nowiki><</nowiki>mrow<nowiki>></nowiki>
It sometimes can be practical to combine your own XML contents with XHTML, because HTML offers easy-to-use functionality like image inclusions or links.
Note however that in practice this feature is not often used since:
* [[XSLT]] stylesheets allow transformations of XML data into XHTML. The stylesheet will contain the extra HTML and the result displayed usually will be all HTML and will be easier to manage with CSS.
* The way browsers implement this feature is not really stable
* Since HTML5 is now dominant, people cannot remember the potential of XHTML.


<nowiki><</nowiki>mi<nowiki>></nowiki>a<nowiki><</nowiki>/mi<nowiki>></nowiki>
;XHTML with some XML included, using [[CSS]] for styling


<nowiki><</nowiki>mo<nowiki>>+<</nowiki>/mo<nowiki>></nowiki>
* Tested with Firefox 2.x (works) and IE 7 (CSS doesn't work, I don't know why ...)


<nowiki><</nowiki>mi<nowiki>></nowiki>b<nowiki><</nowiki>/mi<nowiki>></nowiki>
Procedure:
 
<nowiki><</nowiki>/mrow<nowiki>></nowiki>
 
<nowiki><</nowiki>/msqrt<nowiki>></nowiki>
 
<nowiki><</nowiki>mn<nowiki>></nowiki>27<nowiki><</nowiki>/mn<nowiki>></nowiki>
 
<nowiki><</nowiki>/msup<nowiki>></nowiki>
 
<nowiki><</nowiki>/math<nowiki>></nowiki>
 
<nowiki><</nowiki>/body<nowiki>><</nowiki>/html<nowiki>></nowiki>
 
----
 
# To make this work, you need to copy the mathml.xsl, pmathml.xsl, ctop.xsl and pmathmlcss.xsl files in the same directory
 
<font color="#0000FF"><u>'''----'''</u></font>
 
# <font color="#0000FF"><u>'''http://www.w3.org/Math/XSL/</u> </font>''''''(consult for further details)'''
 
----
 
#######
 
----
 
'''Xlink example'''
 
----
 
# XLink was supposed to replace all linking constructs in the W3C languages
# Adopted by SVG, X3D, but not by XHTML 2 which introduces its own linking constructs
# XML-capable browsers are also supposed to implement this (Firefox, but not IE)
 
----
 
####### '''Story grammar that implements XLink for an A element'''
 
<nowiki><</nowiki>?xml version="1.0" encoding="ISO-8859-1" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>STORY '''xmlns:xlink="http://www.w3.org/1999/xlink"'''<nowiki>></nowiki>
 
<nowiki><</nowiki>Title<nowiki>></nowiki>The Webmaster<nowiki><</nowiki>/Title<nowiki>></nowiki>
 
……
 
<nowiki><</nowiki>INFOS<nowiki>></nowiki> <nowiki><</nowiki>Date<nowiki>></nowiki>30 octobre 2003 - <nowiki><</nowiki>/Date<nowiki>></nowiki>
 
<nowiki><</nowiki>Author<nowiki>></nowiki>DKS - <nowiki><</nowiki>/Author<nowiki>></nowiki>
 
<nowiki><</nowiki>A '''xlink:href='''http://jigsaw.w3.org/css-validator/check/referer
 
'''xlink:type="simple"'''<nowiki>></nowiki>CSS Validator<nowiki><</nowiki>/A<nowiki>></nowiki>
 
<nowiki><</nowiki>/INFOS<nowiki>></nowiki>
 
<nowiki><</nowiki>/STORY<nowiki>></nowiki>
 
----
 
#######
 
----
 
'''SVG example'''
 
----
 
####### '''XHTML with embedded SVG tags (file xhtml_svg.xhtml)'''
 
----
 
# Tested with Firefox
<nowiki><</nowiki>?xml version="1.0" encoding="ISO-8859-1" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" <nowiki>></nowiki>
 
<nowiki><</nowiki>html '''xmlns="http://www.w3.org/1999/xhtml"'''
 
'''    xmlns:svg="http://www.w3.org/2000/svg"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>head<nowiki>></nowiki> <nowiki><</nowiki>title<nowiki>></nowiki>SVG within XHTML Demo<nowiki><</nowiki>/title<nowiki>></nowiki> <nowiki><</nowiki>/head<nowiki>></nowiki>
 
<nowiki><</nowiki>body<nowiki>></nowiki>
 
.... The SVG part starts below <nowiki><</nowiki>hr /<nowiki>></nowiki>
 
'''<nowiki><</nowiki>svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300"<nowiki>></nowiki>'''
 
'''  <nowiki><</nowiki>!-- a small rectangle --<nowiki>></nowiki>'''
 
'''  <nowiki><</nowiki>rect x="50" y="50" rx="5" ry="5" width="300" height="100"'''
 
'''        style="fill:<nowiki> </nowiki>CCCCFF;stroke:<nowiki> </nowiki>000099"/<nowiki>></nowiki>'''
 
'''      <nowiki><</nowiki>!-- a text in the same place --<nowiki>></nowiki>'''
 
'''  <nowiki><</nowiki>text x="55" y="90" style="stroke:<nowiki> </nowiki>000099;fill:<nowiki> </nowiki>000099;font-size:24;"<nowiki>></nowiki>'''
 
'''    HELLO dear reader <nowiki><</nowiki>/text<nowiki>></nowiki>'''
 
'''  <nowiki><</nowiki>/svg<nowiki>></nowiki>'''
 
<nowiki><</nowiki>hr /<nowiki>></nowiki>
 
The SVG part ended above
 
<nowiki><</nowiki>/body<nowiki>></nowiki>
 
<nowiki><</nowiki>/html<nowiki>></nowiki>
 
----
 
####### '''SVG with a plugin (file html_svg.html)'''
 
----
 
# Works with IE or Firefox (and a SVG plugin installed)
<nowiki><</nowiki>!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<nowiki>></nowiki>
 
<nowiki><</nowiki>html<nowiki>></nowiki>
 
<nowiki><</nowiki>head<nowiki>></nowiki> <nowiki><</nowiki>title<nowiki>></nowiki>HELLO SVG with an iframe<nowiki><</nowiki>/title<nowiki>></nowiki> <nowiki><</nowiki>/head<nowiki>></nowiki>
 
<nowiki><</nowiki>body<nowiki>></nowiki>
 
<nowiki><</nowiki>h1<nowiki>></nowiki>HELLO SVG with an iframe<nowiki><</nowiki>/h1<nowiki>></nowiki>
 
Here is an embeded SVG scene using iframe. Alternatively you could use an "embed" tag (a slightly more complicated solution).
 
'''<nowiki><</nowiki>iframe src="hello-svg.svg" height="200" width="80%" frameborder="0"<nowiki>></nowiki>'''
 
'''    Sorry you need an SVG plugin ...'''
 
'''<nowiki><</nowiki>/iframe<nowiki>></nowiki>'''
 
<nowiki><</nowiki>hr<nowiki>></nowiki> <nowiki><</nowiki>/body<nowiki>></nowiki> <nowiki><</nowiki>/html<nowiki>></nowiki>
 
# The SVG file is a standard stand-alone SVG file
<nowiki><</nowiki>?xml version="1.0" standalone="no"?<nowiki>></nowiki>
 
'''<nowiki><</nowiki>!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"'''
 
'''          "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd"<nowiki>></nowiki>'''
 
'''<nowiki><</nowiki>svg xmlns="http://www.w3.org/2000/svg"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>rect x="50" y="50" rx="5" ry="5" width="300" height="100"
 
style="fill:<nowiki> </nowiki>CCCCFF;stroke:<nowiki> </nowiki>000099"/<nowiki>></nowiki>
 
<nowiki><</nowiki>text x="55" y="90" style="stroke:<nowiki> </nowiki>000099;fill:<nowiki> </nowiki>000099;font-size:24;"<nowiki>></nowiki>
 
HELLO dear reader
 
<nowiki><</nowiki>/text<nowiki>></nowiki>
 
<nowiki><</nowiki>/svg<nowiki>></nowiki>
 
----
 
## '''Combining your XML with XHTML'''
 
----
 
# It sometimes can be practical to combine your own XML contents with XHTML, because HTML offers easy-to-use functionality like image inclusions or links.
# Note however that in practice this feature is not often used since:
# XSLT stylesheets allow transformations of XML data into XHTML (i.e. the stylesheet will contain the extra HTML and the result displayed usually will be all HTML and easier to manage with CSS)
# the way browsers implement this is not really stable
 
----
 
####### '''XHTML with some XML included and CSS'''
 
----
 
# Tested with Firefox 2.x (works) and IE 7 (CSS doesn<nowiki>’</nowiki>t work, I don<nowiki>’</nowiki>t know why ...)
'''Procedure'''


# Define a namespace for the included XML content
# Define a namespace for the included XML content
# Attach a CSS stylesheet with an XML processor instruction
# Attach a CSS stylesheet with an XML processor instruction. Else, users will not see the contents of your XML.
# Your file must be understood as "XML", e.g. call it something.xml or something.xhtml but not something.html !
# Your file must be understood as "XML", e.g. call it ''something.xhtml'' or ''something.xht'' or ''something.xml''. If you use IE7/8 it must be something.xml, since IE doesn't support XHTML). Do not call your file ''something.html'' or ''something.htm'' !!
 
----
 
####### '''XHTML with some cooking XML included (file cooking.xhtml)'''
<nowiki><</nowiki>?xml version="1.0" encoding="iso-8859-1"?<nowiki>></nowiki>
 
<nowiki><</nowiki>?xml-stylesheet type="text/css" href="cooking.css"?<nowiki>></nowiki>
 
<nowiki><</nowiki>html xmlns="http://www.w3.org/1999/xhtml"
 
'''xmlns:re="http://webster.unige.ch/coap21/dolores"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>head<nowiki>></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>A Compound XHTML-XML Document<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- this should work with IE but doesn<nowiki>’</nowiki>t, maybe IE6 ? --<nowiki>></nowiki>
 
<nowiki><</nowiki>link href="cooking.css" type="text/css" rel="stylesheet"/<nowiki>></nowiki>
 
<nowiki><</nowiki>/head<nowiki>></nowiki>
 
<nowiki><</nowiki>body<nowiki>></nowiki>
 
<nowiki><</nowiki>h1<nowiki>></nowiki>A Compound XHTML-XML Document<nowiki><</nowiki>/h1<nowiki>></nowiki>
 
<nowiki><</nowiki>p<nowiki>></nowiki>Contains a cooking recipee written down by R. Dolores for a COAP 2180 CSS exercise. Everything below the line is XML styled with a CSS stylesheet<nowiki><</nowiki>/ p<nowiki>></nowiki>
 
<nowiki><</nowiki>hr/<nowiki>></nowiki>
 
<nowiki><</nowiki>re:recipe<nowiki>></nowiki>
 
<nowiki><</nowiki>re:recipe_head<nowiki>></nowiki>
 
:<nowiki><</nowiki>re:recipe_name<nowiki>></nowiki>Cold Salmon in Creamy Spiced Sauce<nowiki><</nowiki>/re:recipe_name<nowiki>></nowiki>
 
{|border="0" cellspacing="2" width="14%"
|&nbsp;
|<nowiki><</nowiki>re:recipe_author<nowiki>></nowiki>Hilaire Walden<nowiki><</nowiki>/re:recipe_author<nowiki>></nowiki>
|-
|&nbsp;
|<nowiki><</nowiki>re:meal_type<nowiki>></nowiki>Fish and Shellfish<nowiki><</nowiki>/re:meal_type<nowiki>></nowiki>
|-
|}
 
<nowiki><</nowiki>/re:recipe_head<nowiki>></nowiki>
 
.....
 
<nowiki><</nowiki>/re:recipe<nowiki>></nowiki>
 
<nowiki><</nowiki>/body<nowiki>></nowiki>
 
<nowiki><</nowiki>/html<nowiki>></nowiki>
 
----
 
#######
 
----
 
'''XML with some XHTML included'''
 
----
 
# Works with Firefox 1x/2x and IE7 (probably also with IE6)
# An HTML namespace is declared in the root element and we use it twice (for the '''img''' and '''a''' tags).
# Btw this is a trick to get around non-implementation of the xlink standard in IE. If need to create a valid DTD, see  " "  <nowiki>[</nowiki>12<nowiki>]</nowiki>
 
----
 
####### '''XML plus XHTML (file xml_plus_xhtml.xml)'''
<nowiki><</nowiki>?xml version="1.0" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>?xml-stylesheet href="xml_plus_xhtml.css" type="text/css"?<nowiki>></nowiki>
 
<nowiki><</nowiki>page '''xmlns:html="http://www.w3.org/1999/xhtml'''" updated="jan 2007"<nowiki>></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>Hello friend<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>list<nowiki>></nowiki>
 
<nowiki><</nowiki>!-- we use an HTML tag below to include a picture --<nowiki>></nowiki>
 
<nowiki><</nowiki>'''html:img''' src="photo.jpg"/<nowiki>></nowiki>
 
<nowiki><</nowiki>item price="10"<nowiki>></nowiki> White plate <nowiki><</nowiki>/item<nowiki>></nowiki>
 
<nowiki><</nowiki>item price="20"<nowiki>></nowiki> Gold plate <nowiki><</nowiki>/item<nowiki>></nowiki>
 
<nowiki><</nowiki>item price="15"<nowiki>></nowiki> Silver plate <nowiki><</nowiki>/item<nowiki>></nowiki>
 
<nowiki><</nowiki>/list<nowiki>></nowiki>
 
<nowiki><</nowiki>comment<nowiki>></nowiki> Written by <nowiki><</nowiki>'''html:a''' href="http://tecfa.unige.ch/tecfa-people/ schneider.html"<nowiki>></nowiki>DKS/Tecfa<nowiki><</nowiki>/html:a<nowiki>></nowiki> , feb 2007 <nowiki><</nowiki>/comment<nowiki>></nowiki>
 
<nowiki><</nowiki>/page<nowiki>></nowiki>
 
----
 
#######
 
----
 
'''XML Data islands'''
 
----
 
# XML DATA islands are a Microsoft/IE extension to HTML
# Based on some early discussion on how to use XML with HTML (from the IE 5 period), <br>data islands are easy to use but break all current HTML standards ...
# You can get similar functionality with other standard technologies, e.g. XSLT style sheets.
'''The principle'''
 
----
 
# Usually in the header of the HTML file we define one or more XML data sources within an "xml" tag. These data sources are included either by reference or by cut/paste:
Inclusion by reference to a file (better strategy):
 
'''<nowiki><</nowiki>xml '''id="cd_info" src="cdlist.xml" /<nowiki>></nowiki>
 
Inclusion by cut/past (needs to be a full well-formed XML content !)
 
'''<nowiki><</nowiki>xml<nowiki>>'''<</nowiki>?xml version="1.0" encoding="ISO-8859-1" ?<nowiki>></nowiki> <nowiki><</nowiki>list<nowiki>></nowiki> <nowiki><</nowiki>cd<nowiki>></nowiki> <nowiki><</nowiki>artist<nowiki>></nowiki>The spammers<nowiki><</nowiki>/artist<nowiki>><</nowiki>title<nowiki>></nowiki>Here we go<nowiki><</nowiki>/title<nowiki>></nowiki> <nowiki><</nowiki>price<nowiki>></nowiki>10<nowiki><</nowiki>/price<nowiki>></nowiki> <nowiki><</nowiki>/cd<nowiki>></nowiki> <nowiki><</nowiki>cd<nowiki>></nowiki>  <nowiki><</nowiki>artist<nowiki>></nowiki>The singers<nowiki><</nowiki>/artist<nowiki>><</nowiki>title<nowiki>></nowiki>Let<nowiki>’</nowiki>s hear a song<nowiki><</nowiki>/title<nowiki>><</nowiki>price<nowiki>></nowiki>10<nowiki><</nowiki>/ price<nowiki>><</nowiki>/cd<nowiki>></nowiki> <nowiki><</nowiki>/list<nowiki>></nowiki>
 
'''<nowiki><</nowiki>/xml<nowiki>></nowiki>'''
 
----
 
# The XML file / content needs to well-formed  and you don<nowiki>’</nowiki>t need to worry about namespaces
 
----
 
# XML elements can be used to "fill in" various HTML element or attribute contents
 
----
 
# See official MS documentation or a textbook for details .......
# In the next slide we just demonstrate one of the most common use cases, i.e. binding HTML table cells contents to XML data.
 
----
 
####### '''MS XML data island table example'''
'''XML contents (file cdlist.xml)'''
 
<nowiki><</nowiki>?xml version="1.0" encoding="ISO-8859-1" ?<nowiki>></nowiki>
 
<nowiki><</nowiki>list<nowiki>></nowiki>
 
<nowiki><</nowiki>cd<nowiki>></nowiki>
 
<nowiki><</nowiki>artist<nowiki>></nowiki>The spammers<nowiki><</nowiki>/artist<nowiki>></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>Here we go<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>price<nowiki>></nowiki>10<nowiki><</nowiki>/price<nowiki>></nowiki>
 
<nowiki><</nowiki>/cd<nowiki>></nowiki>
 
<nowiki><</nowiki>cd<nowiki>></nowiki>
 
<nowiki><</nowiki>artist<nowiki>></nowiki>The singers<nowiki><</nowiki>/artist<nowiki>></nowiki>
 
<nowiki><</nowiki>title<nowiki>></nowiki>Let<nowiki>’</nowiki>s hear a song<nowiki><</nowiki>/title<nowiki>></nowiki>
 
<nowiki><</nowiki>price<nowiki>></nowiki>10<nowiki><</nowiki>/price<nowiki>></nowiki>
 
<nowiki><</nowiki>/cd<nowiki>></nowiki>
 
<nowiki><</nowiki>/list<nowiki>></nowiki>
 
We would like to display contents of this XML file within a table inside an HTML document
 
----
 
# We create a reference to the clist.xml file (see next slide for HTML code !)
'''<nowiki><</nowiki>xml id="cd_info" src="cdlist.xml" /<nowiki>></nowiki>'''
 
# We then tell the table that we are going to use this data source
'''<nowiki><</nowiki>table datasrc="<nowiki> </nowiki>cd_info" border="1"<nowiki>></nowiki>'''


# In the table body we associate contents of span with data source elements
XHTML with some cooking XML included (file cooking.xhtml):
'''<nowiki><</nowiki>td<nowiki>><</nowiki>span datafld="artist"<nowiki>><</nowiki>/span<nowiki>><</nowiki>/td<nowiki>></nowiki>'''
* [http://tecfa.unige.ch/guides/xml/examples/composites/cooking.xhtml cooking.xhtml] (XHTML + XML file)
* [http://tecfa.unige.ch/guides/xml/examples/composites/cooking.css cooking.css] (CSS file)
<source lang="xml">
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="cooking.css"?>


'''<nowiki><</nowiki>td<nowiki>><</nowiki>span datafld="title"<nowiki>><</nowiki>/span<nowiki>><</nowiki>/td<nowiki>></nowiki>'''
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:re="http://webster.unige.ch/coap21/dolores">
  <head>
    <title>A Compound XHTML-XML Document</title>
    <!-- this should work with IE but doesn't, maybe IE6 ? -->
    <link href="dolores.css" type="text/css" rel="stylesheet"/>
  </head>


Important: You must use a span element (XML data can not directly be bound to "td" elements !)x
  <body>


'''HTML (file xml_data_island.html)'''
    <h1>A Compound XHTML-XML Document</h1>


<nowiki><</nowiki>!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"<nowiki>></nowiki>
    <p>Contains a cooking recipee written down by R. Dolores for a
    COAP 2180 CSS exercise. Everything below the line is XML styled
    with a CSS stylesheet</p> <hr/>


<nowiki><</nowiki>html<nowiki>></nowiki>
  <re:recipe>
    <re:recipe_head>
      <re:recipe_name>Cold Salmon in Creamy Spiced Sauce</re:recipe_name>
      <re:recipe_author>Hilaire Walden</re:recipe_author>
     
      <re:meal_type>Fish and Shellfish</re:meal_type>
    </re:recipe_head>
   
    <re:recipe_body>
      <re:ingredients>
<re:ingredient>1/2 teaspoon finely crushed cumin seeds</re:ingredient>
<re:ingredient>1 teaspoon chilli powder</re:ingredient>
<re:ingredient>salt and freshly ground black pepper</re:ingredient>
<re:ingredient>2 tablespoons olive oil</re:ingredient>
<re:ingredient>2 cloves garlic, crushed</re:ingredient>
<re:ingredient>1.25 cm (1/2 in) fresh ginger root, finely
chopped</re:ingredient>
<re:ingredient>4 pieces salmon fillet, skinned</re:ingredient>
<re:ingredient>125 ml (4 fl oz / 1/2 cup) double (heavy)
cream</re:ingredient>
<re:ingredient>250 ml (8 fl oz / 1 cup) thick plain
yogurt</re:ingredient>
<re:ingredient>large pinch of saffron threads, toasted and
crushed</re:ingredient>
  <re:ingredient>seeds from 6 cardamom pods, toasted and finely
  crushed</re:ingredient>
<re:ingredient>salt</re:ingredient>
  <re:ingredient>coriander (cilantro) to garnish</re:ingredient>
      </re:ingredients>
      <re:directions>
<re:direction>Mix together the cumin seeds, chilli powder and
pepper and rub into the fish.</re:direction>
<re:direction>Heat the oil in a frying pan, add the garlic and
ginger and heat until they sizzle.</re:direction>
<re:direction>Add the salmon fillets and fry until they start
to colour (about 15-20 seconds on each side).</re:direction>
<re:direction>Stir in the cream, yogurt, saffron, cardamom and
salt.</re:direction>
<re:direction>Adjust the heat so that the sauce is just
bubbling and cook, turning the fish once, until the flesh just
flakes when tested with the point of a sharp knife (about 3-4
minutes each side).</re:direction>
<re:direction>Transfer the fish to a shallow dish. Boil the
sauce until it has reduced and thickened, pour over the fish
and leave to cool.</re:direction>
        <re:direction>Cover the dish and chill until 15-20 minutes
        before serving.</re:direction>
<re:direction>Garnish with coriander (cilantro).</re:direction>
</re:directions>
    </re:recipe_body>


<nowiki><</nowiki>head<nowiki>></nowiki>
    <re:recipe_footer>
    <re:serving>4</re:serving>
    <re:preparation_time>15 minutes</re:preparation_time>
    </re:recipe_footer>


<nowiki><</nowiki>title<nowiki>></nowiki>MS XML Data Islands<nowiki><</nowiki>/title<nowiki>></nowiki>
    <re:document_info>
      <re:document_author>Hilaire Walden</re:document_author>
      <re:date_updated>21/01/07</re:date_updated>
      <re:source>Easy to Cook, Hot &amp; Spicy</re:source>
    </re:document_info>
  </re:recipe>
  </body>
</html>
</source>


<nowiki><</nowiki>!-- identification of the data source --<nowiki>></nowiki>
=== Combining your XML with XHTML ===


''' <nowiki><</nowiki>xml id="cd_info" src="cdlist.xml" /<nowiki>></nowiki>'''
Works with Firefox 1x/2x and IE7 (probably also with IE6).  
 
* An HTML namespace is declared in the root element and we use it twice (for the img and a tags).
<nowiki><</nowiki>/head<nowiki>></nowiki>
* Btw this is a trick to get around non-implementation of the xlink standard in IE.
 
<nowiki><</nowiki>body<nowiki>></nowiki>
 
<nowiki><</nowiki>h1<nowiki>></nowiki>MS XML Data Islands<nowiki><</nowiki>/h1<nowiki>></nowiki>
 
The table below imports data from cdlist.xml
 
'''<nowiki><</nowiki>table datasrc="<nowiki> </nowiki>cd_info" border="1"<nowiki>></nowiki>'''
 
<nowiki><</nowiki>thead<nowiki>></nowiki>
 
:  <nowiki><</nowiki>tr<nowiki>></nowiki> <nowiki><</nowiki>th<nowiki>><</nowiki>span<nowiki>></nowiki>Artist Name<nowiki><</nowiki>/span<nowiki>><</nowiki>/th<nowiki>></nowiki>
 
:      <nowiki><</nowiki>th<nowiki>><</nowiki>span<nowiki>></nowiki>Title<nowiki><</nowiki>/span<nowiki>><</nowiki>/th<nowiki>></nowiki>
 
:      <nowiki><</nowiki>th<nowiki>><</nowiki>span<nowiki>></nowiki>Price<nowiki><</nowiki>/span<nowiki>><</nowiki>/th<nowiki>></nowiki>  <nowiki><</nowiki>/tr<nowiki>></nowiki>
 
<nowiki><</nowiki>/thead<nowiki>></nowiki>
 
<nowiki><</nowiki>tbody<nowiki>></nowiki>
 
: <nowiki><</nowiki>tr<nowiki>></nowiki>
 
:  '''<nowiki><</nowiki>td<nowiki>><</nowiki>span datafld="artist"<nowiki>><</nowiki>/span<nowiki>><</nowiki>/td<nowiki>></nowiki>'''
 
:'''  <nowiki><</nowiki>td<nowiki>><</nowiki>span datafld="title"<nowiki>><</nowiki>/span<nowiki>><</nowiki>/td<nowiki>></nowiki>'''
 
:'''  <nowiki><</nowiki>td<nowiki>><</nowiki>span datafld="price"<nowiki>><</nowiki>/span<nowiki>><</nowiki>/td<nowiki>></nowiki>'''
 
{|border="0" cellspacing="2" width="19%"
|&nbsp;
| <nowiki><</nowiki>/tr<nowiki>></nowiki>
|&nbsp;
|-
|}


<nowiki><</nowiki>/tbody<nowiki>></nowiki>
;XML plus XHTML
* [http://tecfa.unige.ch/guides/xml/examples/composites/xml_plus_xhtml.xml xml_plus_xhtml.xml]
<source lang="xml">
<?xml version="1.0" ?>
<?xml-stylesheet href="xml_plus_xhtml.css" type="text/css"?>
<page xmlns:html="http://www.w3.org/1999/xhtml" updated="jan 2007">
<title>Hello friend</title>
<list>
  <!-- we use an HTML tag below to include a picture -->
  <html:img src="photo.jpg"/>
  <item price="10"> White plate </item>
  <item price="20"> Gold plate </item>
  <item price="15"> Silver plate </item>  
</list>


<nowiki><</nowiki>/table<nowiki>></nowiki>
<comment> Written by <html:a href="http://tecfa.unige.ch/DKS">DKS/Tecfa</html:a>
, feb 2007 </comment>
</page>
</source>


<nowiki><</nowiki>hr<nowiki>></nowiki> <nowiki><</nowiki>/body<nowiki>></nowiki> <nowiki><</nowiki>/html<nowiki>></nowiki>
== XSLT transformations of compound documents ==


Transforming XML files that include namespace (including just default namespaces that do not use prefixes) requires that you prefix each XPath "component". For more information, see:
* [[XSLT for compound documents tutorial]]
* [[XSLT Tutorial - Basics]]


[[category:XML]]
[[Category: XML]]
[[Category:Web technology tutorials]]

Latest revision as of 23:00, 13 September 2015

Introduction

Learning goals
  • Understand why Namespaces are needed
  • Learn how to use namespace declarations
  • Learn how to create combined XHTML/SVG/MathML/etc documents
Prerequisites
Moving on
Level and target population
  • Beginners
Remarks
  • This tutorial provides a short overview about XML namespaces. It includes minimal knowledge needed for an XML class. Most parts also can be used in introductory web technologies class. Technical web authors also must understand namespaces, since they are used in XHTML and combined profiles.

XML namespaces have two purposes:

  1. Clearly identify a markup language and its version. Schema declarations like DTDs or XML Schema are not mandatory in many XML applications
  2. Allow to mix two or more languages in a single document.

XML Namespaces allow to fully/uniquely qualify XML element and attribute names to prevent confusing two elements that have the same name but mean different things. Various XML vocabularies (languages/applications) may be mixed. E.g. in a standards compliant web browser like Firefox or Opera you may include SVG and MathML code with the same XHTML page. But then we can run into naming conflicts, i.e. different vocabularies (DTDs) can use the same names for elements ! Namespaces are a W3C standard since Jan 1999. That means that namespaces have been introduced after XML has been invented.

Since DTDs are not mandatory for most W3C XML languages, the W3C requires namespace definitions within root elements, e.g. XHTML and SVG must include a namespace declaration:

The following was mandatory in for valide XHMTL 1.x files:

<html xmlns="http://www.w3.org/1999/xhtml">

Basically this statement says that within the html element all child elements belong to XHTML, unless they are explicitly part of another namespace.

The following example shows how to declare SVG files or fragments with an example (this is also valid for inclusion in HTML5)

<svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
</svg>

Standards involved

The Namespace standard:

Namespaces are identified with URIs

A URI is either a URL or a URN

Compound W3C documents

See also: The standards overview article. Most XML-based standards in education (e.g. IMS Content Packaging make heavy use of namespaces ! In addition most IMS and SCORM standards use XML Schema which are associated to XML contents via namespace declarations.

Namespaces

An example demonstrating the need for namespaces

Here is an XML fragment using title within a bibliography element:

<book>
 <title>A true story</title>
 <description>A real cool publication</description>
</book>

A 2nd XML fragment uses title in a employees record:

<record>
 <name>Miller</name> 
 <title>Dr. </title>
 <publications> ... </publications>
</record>

If these two XML fragments were added together, there would be a name conflict because both contain a <title>< element with different meaning. In one case we mean book title and in the other something like "none", PhD, etc.. A style-sheet would have to render these elements very differently. But we can solve this problem by adding prefixes, like this:

<employees:record>
  <employees:name>Miller</employees:name>
  <employees:title>Dr. </employees:title>
  <employees:publications>
    <biblio:book>
      <biblio:title>A true story</biblio:title>
      <biblio:description>A real cool publication</biblio:description>
    </biblio:book>
  </employees:publications>
</employees:record>

A real world example

The The Open Packaging Format. Below is the content of an *.opf file that must be included within ePub "zip" file (a popular e-book format. It defines the structure of the book using assets and includes metadata.

OPF example copied with minor modifications from Wikipedia (nov 30 2010).

<?xml version="1.0"?>
<package version="2.0" 
         xmlns="http://www.idpf.org/2007/opf" 
         unique-identifier="BookId">
 
  <metadata xmlns:dc="http://purl.org/dc/elements/1.1/" 
            xmlns:opf="http://www.idpf.org/2007/opf">
    <dc:title>Pride and Prejudice</dc:title>
    <dc:language>en</dc:language>
    <dc:identifier id="BookId" opf:scheme="ISBN">123456789X</dc:identifier>
    <dc:creator opf:file-as="Austen, Jane" opf:role="aut">Jane Austen</dc:creator>
  </metadata>
 
  <manifest>
    <item id="chapter1" href="chapter1.xhtml" 
          media-type="application/xhtml+xml"/>
    <item id="chapter2" href="chaptertwo.xhtml" 
          media-type="application/xhtml+xml"/>
    <item id="stylesheet" href="style.css" 
          media-type="text/css"/>
    <item id="ch1-pic" href="ch1-pic.png" 
          media-type="image/png"/>
    <item id="myfont" href="css/myfont.otf" 
          media-type="application/x-font-opentype"/>
    <item id="ncx" href="book.ncx" media-type="application/x-dtbncx+xml"/>
  </manifest>
 
  <spine toc="ncx">
    <itemref idref="chapter1" />
    <itemref idref="chapter2" />
  </spine>
 
  <guide>
    <reference type="loi" title="List Of Illustrations" 
               href="appendix.html#figures" />
  </guide>
 
</package>

This OPF file includes two namespaces:

Declaring namespaces

Formally speaking, an XML namespace is simply a collection of names (elements and attributes) of a markup vocabulary that can be uniquely identified

Procedure
  1. Create or identify a namespace identifier you wish to use: An XML namespace is identified by a unique URI reference, usually a URL.
  2. The URL does need not point to anything on the Internet. It is just used as a unique string, i.e. a name
  3. Therefore if some namespace URLs below are broken there is absolutely nothing to worry about. However, most namespace identifiers actually point to a real web page that either provides an explanation or at least information about the organization/author that created the namespace. This means that if you plan to create your own namespaces, you should use the name of any webpage over which you have control.
  4. Make a namespace declaration within the element that belongs to this namespace, i.e. map a prefix of your choice to a unique URI.

There are two major variants of namespace use: prefixed namespaces and default ones.

(1) Namespace declaration for use with a prefix: declaring a namespace that will require use of prefixes for each element

 <prefix:element xmlns:prefix="URI">

Example:

 <html:html xmlns:html="http://www.w3.org/1999/xhtml">
   <html:head> ..... </html:head>

Each element below html:html that uses prefix "html:" will belong to Xhtml. Any other will not.

(2) Default namespace: declaring a default namespace for element and its children. I.e. these will not be prefixed.

 <element xmlns="URI"><

Example:

 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>.....</head>
   <body>.....

Scoping

"Scoping" means "where does a declaration apply ?

The scope of an XML namespace declaration extends from the beginning of the start-tag in which it appears to the end of the corresponding end-tag, including all children. Most frequently, namespaces are declared in the document root.

XHMTL fragment example
<?xml version="1.0"?>
  <html:html xmlns:html='http://www.w3.org/1999/xhtml'>
  <html:head>
    <html:title>Frobnostication</html:title>
  </html:head>
  <html:body>
    <html:p>
      Moved to<html:a href='http://frob.example.com'>here.</html:a>
    </html:p>
  </html:body>
</html:html>

The scope of the XHMTL namespace declaration goes from <html:html> to </html:html>.

Example with 2 namespaces (both use URNs instead of URLs)
<?xml version="1.0"?>
<!-- both namespace prefixes are available throughout the XML fragment -->
<bk:book xmlns:bk='urn:loc.gov:books'
         xmlns:isbn='urn:ISBN:0-395-36341-6'>
    <bk:title>Cheaper by the Dozen</bk:title>
    <isbn:number>1568491379</isbn:number>
</bk:book>

Default namespaces

If most elements in an XML document belonged to the same namespace, it would be ugly to prefix each element name. Instead define a default namespace that applies to all non-prefixed elements and attributes. Syntax:

 <element xmlns="URI"> < ....

The default namespace applies to the element in which it was defined and all descendants of that element. But if a descendants has another default namespace defined on it, this new namespace definition overrides the previous one and becomes the default for that element and its descendants. Note that namespaces does not apply to attribute names ! This is a likely source of trouble for XSLT ...

XHTML default namespace example
<?xml version="1.0"?>
<!-- elements are in the HTML namespace by default -->
<html xmlns='http://www.w3.org/1999/xhtml'>
   <head>
      <title>Frobnostication</title>
   </head>
   <body>
      <p>Moved to <a href='http://frob.example.com'>here</a>.</p>
   </body>
</html>

Default namespace for a book vocabulary plus a namespace for ISBN example:

  <!-- unprefixed element types are from "books" -->
  <book xmlns='urn:loc.gov:books'
        xmlns:isbn='urn:ISBN:0-395-36341-6'>
  <title>Cheaper by the Dozen</title>
  <isbn:number>1568491379</isbn:number>
  </book>
A larger example of namespace scoping

It includes some XHTML whose namespace is declared within the "p" element.

<?xml version="1.0"?>
<!-- initially, the default namespace is "books" -->
<book xmlns='urn:loc.gov:books'
      xmlns:isbn='urn:ISBN:0-395-36341-6'>
   <title>Cheaper by the Dozen</title>
   <isbn:number>1568491379</isbn:number>
   <notes>
   <!-- make HTML the default namespace for some commentary -->
      <p xmlns='http://www.w3.org/1999/xhtml'>
         This is a <i>funny</i> book!
     </p>
   </notes>
</book>
XSLT namespace example

XSLT is a transformation language, i.e. programming language that allows to translate an XML content into another content (XML or other). XSLT instructions are prefixed with "xsl" here. Output produced is namespace-less here. See the XSLT tutorial for an introduction.

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="page">
  .....
  <html> <head> <title> <xsl:value-of select="title"/> </title> </head>
  <body bgcolor="#ffffff"> <xsl:apply-templates/> </body>
  </html>
</xsl:template>

<xsl:template match="title">
  <h1 align="center"> <xsl:apply-templates/> </h1>
</xsl:template>

<xsl:template match="content">
  <p align="center"> <xsl:apply-templates/> </p>
</xsl:template>

<xsl:template match="comment">
  <hr /> <xsl:apply-templates/>
  </xsl:template>
</xsl:stylesheet>

Validation of composite documents

Validating documents that contain different namespaces are called composite or compound documents and validation is not always easy since combined DTDs may not exist. A validation standard for composite W3C vocabularies is currently under preparation (but may not happen ...). Usually, combined documents are produced by server-side programs for delivery and they are just well-formed (not attached to DTDs or other schemas)

You also may write DTDs that validate your own compound documents as we demonstrate in the following example.

A DTD rule with an extra namespace example

In this example, the "a" element and the "description" attribute belongs to the default namespace, but the href and type attributes belong to the xlink namespace. We declare the namespace in the root element, but also could have done it just for the "el" element. Note: Xlinks do not work in IE7/8.

<!ELEMENT link_list (el+)>
<!ATTLIST link_list xmlns:xlink CDATA #FIXED "http://www.w3.org/1999/xlink">
<!ELEMENT el (#PCDATA)>
<!ATTLIST el description CDATA #IMPLIED
          xlink:href CDATA #REQUIRED
          xlink:type CDATA #FIXED "simple" >

See the DTD tutorial for details.

An XML example file
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE link_list SYSTEM "link_list.dtd">
<?xml-stylesheet href="link_list.css" type="text/css" ?>
 <link_list xmlns:xlink="http://www.w3.org/1999/xlink">
    <el description="verified"
        xlink:type="simple"
        xlink:href="http://www.webster.ch/">Webster Geneva</el>
    <el xlink:href="http://www.webster.edu/"
        xlink:type="simple">Webster</el>
</link_list>

Namespaces for documents

Client-side XML web languages and namespaces overview

The W3C defines several Internet languages and for which namespace declarations are mandatory (even if you use them "standalone", i.e. not in composite documents.

Some W3C languages
Name Namespace URL Explanation
XSLT http://www.w3.org/1999/XSL/Transform XSL - Transformations
XSL-FO http://www.w3.org/1999/XSL/Format XSL - Formatting
XML Schema http://www.w3.org/2001/XMLSchema XML grammar definition language
SVG http://www.w3.org/2000/svg Scalable Vector Graphics
RDF http://www.w3.org/1999/02/22-rdf-syntax-ns Resource Description Format
SMIL 2.0 http://www.w3.org/2001/SMIL20/ Synchronized Multimedia Integration Lang.
VoiceXML 2.0 http://www.w3.org/2001/vxml Synthesized voice
XLink http://www.w3.org/1999/xlink" XML Linking Language
XForms http://www.w3.org/2002/xforms Next generation of HTML forms.
XHTML http://www.w3.org/1999/xhtml XML-based HTML variant
MathML http://www.w3.org/1998/Math/MathML Mathematical markup language


Some of these languages (e.g. SMIL, MathML, SVG, X3D) need special clients for display. Others are transducers or helpers, i.e. are used to define, style, transform and process XML contents

RDF namespace

RDF-based languages are very prolific and add to the complexity of semantic web initiatives

See 100 most common RDF namespaces

Other Document standards

Each of the following usually packages a document as zip file. Inside the zip, you will find several files using several XML languages.

Compound documents

Combining various content delivery formats is the future (also on cell phones). For example, XHTML-formatted content can be augmented by SVG objects or mathematical formula.

Examples of possible Compound Document profiles
  • XHTML + SVG + MathML
  • XHTML + SMIL
  • XHTML + XForms
  • XHTML + VoiceML

The W3C is working on a generic Compound Document by Reference Framework (CDRF) that defines a language-independent processing model for combining arbitrary document formats ...

Web browser caveats
  • IE doesn't support natively most XML W3C "content" languages (e.g. SVG, MathML), but implements a version of SMIL, called "Timed Text". Firefox supports static SVG and MathML. Both implement RSS

Workarounds:

  • Use a browser that is more advanced (e.g. Firefox, Opera, Chrome) or specialized players (e.g. Realplayer for SMIL)
  • For HTML + SVG + MathML, use HTML5
  • Call your files *.xml (often helps if you use IE)
  • For some formats you may install plugins or extensions in your web browser and then use a more indirect method to assemble contents, i.e. <object> or <iframe>. This will work with most browsers if you have the right plugin (SVG in this case) installed.
<iframe src="hello-svg.svg" height="300" width="80%" frameborder="0">
... Sorry you need an SVG plugin ...
</iframe><

XHTML + other vocabularies

XHTML / MathML example
<?xml version="1.0" encoding="iso-8859-1"?>
<xhtml:html xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <xhtml:body>
    <xhtml:h1>A Compound Document</xhtml:h1>
    <xhtml:p>A simple formula using MathML in XHTML.</xhtml:p>
    <mathml:math xmlns:mathml="http://www.w3.org/1998/Math/MathML">
      <mathml:mrow>
         <mathml:msqrt> <mathml:mn>49</mathml:mn> </mathml:msqrt>
         <mathml:mo>=</mathml:mo>
         <mathml:mn>7</mathml:mn>
       </mathml:mrow>
     </mathml:math>
  </xhtml:body>
</xhtml:html>

MathML doesn't natively work with IE 6/7/8. But there are workarounds. See the MathML article for some more information about MathML and dealing with IE.

Xlink example

XLink was supposed to replace all linking constructs in the W3C languages. It is adopted by SVG, X3D, but not by XHTML 2 which introduces its own linking constructs. XML-capable browsers are also supposed to implement this (Firefox, but not IE)

Example - Story grammar that implements XLink for an A element
<?xml version="1.0" encoding="ISO-8859-1" ?>
<STORY xmlns:xlink="http://www.w3.org/1999/xlink">
  <Title>The Webmaster</Title>
  .....
  <INFOS> <Date>30 octobre 2003 - </Date>
  <Author>DKS - </Author>
  <A xlink:href=http://jigsaw.w3.org/css-validator/check/referer
     xlink:type="simple">CSS Validator</A>
   </INFOS>
</STORY>
SVG example
  • Most browsers (i.e. all major browser except IE8) can handle SVG. However, some only implement SVG 1.0 and most only static SVG. As of, only Opera implemented the so-called SMILE tags.
  • Alternatively, use HTML and read the using SVG with HTML5 tutorial

XHTML with embedded SVG tags (tested with Firefox)

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:svg="http://www.w3.org/2000/svg">
 <head>
  <title>SVG within XHTML Demo</title>
 </head>
 <body>
  <h1>SVG within XHTML Demo</h1>

  <p> You can embed SVG into XHTML, provided that your browser
  natively implements SVG. E.g. Firefox 1.5+ supports most of static
  SVG.  </p>

  The SVG part starts below <hr />

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" 
       width="400" height="300">
   <!-- a small rectangle -->
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
   	 style="fill:#CCCCFF;stroke:#000099"/>
   
   <!-- a text in the same place -->
   <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
    HELLO dear reader
   </text>

  </svg>
  <hr />
  The SVG part ended above
</body>
</html>

SVG within HTML5. This also should work with very old browsers (e.g. IE 6 and FF 1) plus the now unavailable SVG plugin from Adobe.

<!DOCTYPE html>
<html>
  <head> <title>HELLO SVG with an iframe</title> </head>
  <body>
     <h1>HELLO SVG with an iframe</h1>
        Here is an embeded SVG scene using iframe. 
	<iframe src="hello-svg.svg" height="200" width="80%" frameborder="0">
	</iframe>
     <hr>
  </body> 
</html>

In the following example, the SVG file is a standard stand-alone SVG file

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
          "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100"
         style="fill:#CCCCFF;stroke:#000099"/>
   <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
   HELLO dear reader
   </text>
</svg>

Combining XHTML with your XML

It sometimes can be practical to combine your own XML contents with XHTML, because HTML offers easy-to-use functionality like image inclusions or links. Note however that in practice this feature is not often used since:

  • XSLT stylesheets allow transformations of XML data into XHTML. The stylesheet will contain the extra HTML and the result displayed usually will be all HTML and will be easier to manage with CSS.
  • The way browsers implement this feature is not really stable
  • Since HTML5 is now dominant, people cannot remember the potential of XHTML.
XHTML with some XML included, using CSS for styling
  • Tested with Firefox 2.x (works) and IE 7 (CSS doesn't work, I don't know why ...)

Procedure:

  1. Define a namespace for the included XML content
  2. Attach a CSS stylesheet with an XML processor instruction. Else, users will not see the contents of your XML.
  3. Your file must be understood as "XML", e.g. call it something.xhtml or something.xht or something.xml. If you use IE7/8 it must be something.xml, since IE doesn't support XHTML). Do not call your file something.html or something.htm !!

XHTML with some cooking XML included (file cooking.xhtml):

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="cooking.css"?>

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:re="http://webster.unige.ch/coap21/dolores">
  <head>
    <title>A Compound XHTML-XML Document</title>
    <!-- this should work with IE but doesn't, maybe IE6 ? -->
    <link href="dolores.css" type="text/css" rel="stylesheet"/>
  </head>

  <body>

    <h1>A Compound XHTML-XML Document</h1>

    <p>Contains a cooking recipee written down by R. Dolores for a
    COAP 2180 CSS exercise. Everything below the line is XML styled
    with a CSS stylesheet</p> <hr/>

  <re:recipe>
    <re:recipe_head>
      <re:recipe_name>Cold Salmon in Creamy Spiced Sauce</re:recipe_name>
      <re:recipe_author>Hilaire Walden</re:recipe_author>
      
      <re:meal_type>Fish and Shellfish</re:meal_type>
    </re:recipe_head>
    
    <re:recipe_body>
      <re:ingredients>
	<re:ingredient>1/2 teaspoon finely crushed cumin seeds</re:ingredient>
	<re:ingredient>1 teaspoon chilli powder</re:ingredient>
	<re:ingredient>salt and freshly ground black pepper</re:ingredient>
	
	<re:ingredient>2 tablespoons olive oil</re:ingredient>
	<re:ingredient>2 cloves garlic, crushed</re:ingredient>
	<re:ingredient>1.25 cm (1/2 in) fresh ginger root, finely
	chopped</re:ingredient>
	<re:ingredient>4 pieces salmon fillet, skinned</re:ingredient>
	<re:ingredient>125 ml (4 fl oz / 1/2 cup) double (heavy)
	cream</re:ingredient>
	<re:ingredient>250 ml (8 fl oz / 1 cup) thick plain
	yogurt</re:ingredient>
	
	<re:ingredient>large pinch of saffron threads, toasted and
	crushed</re:ingredient>
  	<re:ingredient>seeds from 6 cardamom pods, toasted and finely
  	crushed</re:ingredient>
	<re:ingredient>salt</re:ingredient>
  	<re:ingredient>coriander (cilantro) to garnish</re:ingredient>
      </re:ingredients>
      <re:directions>
	<re:direction>Mix together the cumin seeds, chilli powder and
	pepper and rub into the fish.</re:direction>
	<re:direction>Heat the oil in a frying pan, add the garlic and
	ginger and heat until they sizzle.</re:direction>
	<re:direction>Add the salmon fillets and fry until they start
	to colour (about 15-20 seconds on each side).</re:direction>
	<re:direction>Stir in the cream, yogurt, saffron, cardamom and
	salt.</re:direction>
	<re:direction>Adjust the heat so that the sauce is just
	bubbling and cook, turning the fish once, until the flesh just
	flakes when tested with the point of a sharp knife (about 3-4
	minutes each side).</re:direction>
	<re:direction>Transfer the fish to a shallow dish. Boil the
	sauce until it has reduced and thickened, pour over the fish
	and leave to cool.</re:direction>
        <re:direction>Cover the dish and chill until 15-20 minutes
        before serving.</re:direction>
	<re:direction>Garnish with coriander (cilantro).</re:direction>
	</re:directions>
     </re:recipe_body>

     <re:recipe_footer>
     <re:serving>4</re:serving>
     <re:preparation_time>15 minutes</re:preparation_time>
     </re:recipe_footer>

     <re:document_info>
       <re:document_author>Hilaire Walden</re:document_author>
       <re:date_updated>21/01/07</re:date_updated>
       <re:source>Easy to Cook, Hot &amp; Spicy</re:source>
     </re:document_info>
  </re:recipe>
  </body>
</html>

Combining your XML with XHTML

Works with Firefox 1x/2x and IE7 (probably also with IE6).

  • An HTML namespace is declared in the root element and we use it twice (for the img and a tags).
  • Btw this is a trick to get around non-implementation of the xlink standard in IE.
XML plus XHTML
<?xml version="1.0" ?>
<?xml-stylesheet href="xml_plus_xhtml.css" type="text/css"?>
<page xmlns:html="http://www.w3.org/1999/xhtml" updated="jan 2007">
 <title>Hello friend</title>
 <list>
   <!-- we use an HTML tag below to include a picture -->
   <html:img src="photo.jpg"/>
   <item price="10"> White plate </item> 
   <item price="20"> Gold plate </item> 
   <item price="15"> Silver plate </item> 
 </list>

 <comment> Written by <html:a href="http://tecfa.unige.ch/DKS">DKS/Tecfa</html:a>
 , feb 2007 </comment>
</page>

XSLT transformations of compound documents

Transforming XML files that include namespace (including just default namespaces that do not use prefixes) requires that you prefix each XPath "component". For more information, see: