Web Designing Presentation 6 PDF

BSc IT
Web Designing
Semester - III
Copyright @ Amity University

Contents
• Introduction to XML
• XML Basics
• XML structure
• Viewing XML using Style Sheets

Cont…
•Introduction to DTD
•Developing a DTD from XML code
•Viewing XML
•Data Binding
•XML using XML Data Source

Introduction
• XML stands for Extensible Markup Language

• XML is used to mark up data so it can be
processed by computers and describes only
content, or “meaning
• XML is a way of marking data, adding meta-
data and separating structure from
formatting and style
• A method for putting structured data into a
text file.

Introduction
• With XML we can store information about

your document and we can use that
information as criteria for displaying page
but also for sharing data across systems,
processing data for other applications and
much much more
• XML is a meta language that allows to
create and format your own document
markups

HISTORY of XML
• Officially recommended by W3C since

1998
• A simplified form of SGML (Standard
Generalized Markup Language)
• Primarily created by Jon Bosak of Sun
Microsystems
• XML is designed to be used on the web
and supported by web tools such as
browsers
WHY XML
• Extensible Markup Language allows

specified markup to be created for specific
data.
• XML is strong in intelligence,
maintenance, simplicity and portability
• XML is intelligent to any level of
complexity.

WHY XML
• XML is easy to maintain it contains only

data markup, look comes from a separate
style sheet, and links are separate. Each
can be maintained separately
• Easy access and easily changeable

What is XML used for?
• Domain-Specific Markup Languages

• Self-Describing Data
• Interchange of Data Among Applications
• Structured and Integrated Data

Features of XML
• XML can be used with existing protocol

• Supports a wide variety of application
• XML documents are clear to the lay
person
• It is easy to write programs that process
XML documents. Infact it is easier to
create an XML document than HTML
document
Comparison
• HTML • XML
• HTML is used to mark up - content and format are

text so it can be displayed separate; formatting is
to users contained in a style sheet
• uses tags and - allows user to specify what
attributes each tag and attribute
means
- content and formatting
can be placed
together
<p><font=”Arial”>text</font>

Cont..
• HTML describes both • XML describes only
structure (e.g. <p>, <h2>, content, or “meaning”
<em>) and appearance
(e.g. <br>, <font>, <i>)
• HTML uses a fixed, • In XML, you make up
unchangeable set of tags your own tags
• HTML uses a fixed,

unchangeable set of tags
• tags and attributes
are pre-determined
and rigid
Components for XML
• There are 3 components for XML
content:
- XML document
- DTD (Document Type Declaration)
- XSL (Extensible Stylesheet Language)
• The DTD and XSL do not need to be
present in all cases
XML Basics
• The XML declaration looks like this:

<?xml version="1.0" encoding="UTF-8"
standalone="yes"?>
– The XML declaration is not required by
browsers, but is required by most XML
processors (so include it!)

XML Basics
– version="1.0" is required (this is the only

version so far)
– encoding can be "UTF-8" (ASCII) or "UTF-16"
(Unicode), or something else, or it can be
omitted
– standalone tells whether there is a separate
DTD

Elements
• Elements and Attributes and are

somewhat interchangeable
• Example using just elements:
<name>
<first>David</first>
<last>Matuszek</last>
</name>

Attributes
• Example using attributes:

<name first="David" last="Matuszek"></name>
• Attributes often contain metadata, such as

unique IDs

Organizing the Data
• XML documents are trees.

• XML elements contain other elements as
well as text
• Within these limits there's more than one
way to organize the data
– Hierarchically
– Relationally
– Objects
XML as a tree
• An XML document represents a hierarchy;

a hierarchy is a tree
novel
foreword chapter
number="1"
paragraph paragraph paragraph
This is the great It was a dark Suddenly, a shot

American novel. and stormy night. rang out!
Example
• <novel>
<foreword>
<paragraph> This is the great American novel.
</paragraph>
</foreword>
<chapter number="1">
<paragraph>It was a dark and stormy night.
</paragraph>
<paragraph>Suddenly, a shot rang out!
</paragraph>
</chapter>
</novel>

The Root Element
– <?xml version="1.0"?>
– <novel>
– </novel>
•Choose novel for the root element

•Everything else will be a descendant of
novel

Child Elements
• <?xml version="1.0"?>
<novel>
<foreword>
<paragraph> This is the great American novel.
</paragraph>
</foreword>

Example XML Applications
• Web Pages
• Mathematical Equations
• Music Notation
• Vector Graphics
• Metadata
• and more…

Naming Rules
• A name consists of one letter (a-z) or (A to

Z)
• If the name consist of more than one
character, it may be start with an(_)
underscore or a (:) colon.
• The initial letter are (_) underscore can be
followed by one or more
letters,digits,hyphen,underscore,fullstop
and combining characters
Well-formed Rules
• Open and close all tags

• Empty tags end with />
• There is a unique root element
• Elements may not overlap
• Attribute values are quoted
• < and & are only used to start tags and
entities

Empty tags end with />
• <BR/>, <HR/>, and <IMG/> instead of

<BR>, <HR>, and <IMG>
• Can use <BR></BR> <HR></HR>
<IMG></IMG> instead
• One element completely contains all other
elements of the document

Cont..
• If an element contains a start tag for an

element, it must also contain the
corresponding end tag
• Empty elements may appear anywhere

Comments
• XML comments have the following form:

• <!– This is a comment text
• Comments can be put anywhere in an
XML document
• Comments are useful for:
– Explaining the structure of an XML document
• Comments are not displayed by browsers,
but can be seen by anyone who looks at
the source code
Example using Comments
<!– This is a comment text

<?xml version="1.0" standalone="yes"?>
– <GREETING>
– Hello XML!
– </GREETING>

Output


<GREETING>Hello XML!</GREETING>

Style sheets
• Style sheets describe how to display

HTML or XML in a browser
• Style sheets are attached via an xml-

stylesheet processing instruction in the
prolog

greeting.xml

– <GREETING>
– Hello XML!
– </GREETING>

greeting.css
GREETING {display: block;
font-size: 24pt;
font-weight: bold}

xml-stylesheet
<?xml version="1.0"
standalone="yes"?>
<?xml-stylesheet type="text/css"
href="greeting.css"?>
<GREETING>Hello XML!</GREETING>

Cont..
– type attribute has the value text/css or text/xsl

– href attribute is a URL to the stylesheet,
possibly relative
• Can also use non-browser converters like
XT, LotusXSL, and Jade

DTDs and Validity
• A Document Type Definition describes the

elements and attributes that may appear in
a document
• Validation compares a particular document
against a DTD
• Well-formedness is a prerequisite for
validity

What is a DTD?
• a list of the elements, tags, attributes, and

entities contained in a document, and their
relationship to each other
• are used to define legal XML tags and
their attributes for particular purposes
• DTD is of two types
– Internal DTD
– External DTD
DTD
• A DTD is a definition of every object that can
appear in an XML document. It defines what
elements can appear, what attributes are
allowed and what data is valid for these
attributes. XML documents are linked to their
associated DTD via a !DOCTYPE tag at the
beginning of the code. E.g.
<!DOCTYPE document SYSTEM 'domino.dtd'>

Cont…
• DTDs are optional, an XML document is

considered "well-formed" if it passes all of
the syntax rules and "valid" if it also
conforms to the design defined in its' DTD.
XML documents can be created with or
without DTDs.

DTD
• Without a DTD, XML processors can still

determine whether a document is well-
formed syntactically, however, a DTD
makes it possible to decide whether a
document is also valid - that is, whether
the elements in a document conform to a
specification.

Cont..
• To declare an element in a DTD, you must

use an element declaration, which takes
the following form:
• <!ELEMENT ElementName Type>

Cont..
• The name of the element determines the

name of the tag(s) used to mark up the
element in a document and corresponds to
ElementName in the element declaration.
This name must be unique within the
context of a DTD. The type of the element
is specified in Type

XML supports four different types of elements
• Empty The element doesn't contain any content
(it can still contain attributes).
• Element-only The element only contains child
elements.
• Mixed The element contains a combination of
child elements and character data.
• Any The element contains any content allowed
by the DTD.

Internal DTD
• <!DOCTYPE note [ <!ELEMENT note
(to,from,heading,body)>
• <!ELEMENT to (#PCDATA)>
• <!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)> ]>

Cont..
• <note>
• <to>Tove</to>
• <from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this
weekend!</body>
• </note>

OUTPUT

Cont..
• The DTD is interpreted like this:

!ELEMENT note (in line 2) defines the
element "note" as having four elements:
"to,from,heading,body".
!ELEMENT to (in line 3) defines the "to"
element to be of the type "CDATA".
!ELEMENT from (in line 4) defines the
"from" element to be of the type "CDATA"
and so on.....

External DTD
• <!DOCTYPE note SYSTEM "note.dtd"> <note>
• <to>Tove</to>
• <from>Jani</from>
• <body>Don't forget me this weekend!</body>
</note>
• This is a copy of the file "note.dtd" containing the

Document Type Definition:
External DTD
• <!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
• <!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>

OUTPUT

PCDATA
PCDATA
• PCDATA means parsed character data.
• Think of character data as the text found
between the start tag and the end tag of
an XML element.

Cont..
• PCDATA is text that will be parsed by a

parser. Tags inside the text will be treated
as markup and entities will be expanded.
• Parsed Character Data; i.e. raw text, no
markup

#PCDATA
• Valid: • Invalid:
<YEAR>1999</YEAR> <YEAR>
<YEAR>99</YEAR>
<MONTH>January</MONTH>
<YEAR>1999 C.E.</YEAR>
<YEAR> <MONTH>February</MONTH>
The year of our Lord one <MONTH>March</MONTH>
thousand, nine hundred, <MONTH>April</MONTH>
and ninety-nine <MONTH>May</MONTH>
</YEAR> <MONTH>June</MONTH>
<MONTH>July</MONTH>
<MONTH>August</MONTH>
<MONTH>September</MONTH>
<MONTH>October</MONTH>
<MONTH>November</MONTH>
<MONTH>December</MONTH>
</YEAR>

CDATA
• CDATA
• CDATA also means character data that is
not supposed to be parsed by a parser.
CDATA is text that will NOT be parsed by
a parser. Tags inside the text will NOT be
treated as markup and entities will not be
expanded.
• #CDATA means the element contains
character data
Valid XML
• A DTD (Document Type Definition) defines what
tags are legal and where they can occur in the
XML
• An XML document does not require a DTD
• XML is well-structured if it follows the rules given
earlier
• In addition, XML is valid if it declares a DTD and
conforms to that DTD
• A DTD can be included in the XML, but is
typically a separate document

Cont..
• A "Valid" XML document is a "Well

Formed" XML document, which also
conforms to the rules of a Document Type
Definition (DTD):

Example
• <?xml version="1.0" encoding="ISO-8859-

1"?>
<!DOCTYPE note SYSTEM "Note.dtd">
<note>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this
weekend!</body>
</note>
Cont..
• The DOCTYPE declaration in the example

above, is a reference to an external DTD
file.
• The purpose of a DTD is to define the
structure of an XML document. It defines
the structure with a list of legal elements

The importance of validation
• Ensures that data is correct before feeding

it into a program
• Ensure that a format is followed
• Establish what must be supported
• Not all documents need to be valid;
sometimes well-formed is enough

Product Catalog DTD
• <!DOCTYPE CATALOG [ <!ELEMENT CATALOG (PRODUCT+)>
<!ELEMENT PRODUCT (SPECIFICATIONS+, OPTIONS?, PRICE+, NOTES?)>
<!ELEMENT SPECIFICATIONS (#PCDATA)>
<!ELEMENT OPTIONS (#PCDATA)>
<!ELEMENT PRICE (#PCDATA)>
<!ELEMENT NOTES (#PCDATA)>
<!ATTLIST PRODUCT NAME CDATA #IMPLIED>
<!ATTLIST CATEGORY (HandTool | Table | Shop-Professional) "HandTool">
<!ATTLIST PARTNUM CDATA #IMPLIED>
<!ATTLIST PLANT (Pittsburgh | Milwaukee | Chicago) "Chicago">
<!ATTLIST INVENTORY (InStock | Backordered | Discontinued) "InStock">
<!ATTLIST SPECIFICATIONS WEIGHT CDATA #IMPLIED>
<!ATTLIST POWER CDATA #IMPLIED>
<!ATTLIST OPTIONS FINISH (Metal | Polished | Matte) "Matte">
<!ATTLIST OPTIONS ADAPTER (Included | Optional | NotApplicable) "Included">
<!ATTLIST OPTIONS CASE (HardShell | Soft | NotApplicable) "HardShell">
<!ATTLIST PRICE MSRP CDATA #IMPLIED>
<!ATTLIST PRICE WHOLESALE CDATA #IMPLIED>
<!ATTLIST PRICE STREET CDATA #IMPLIED>
<!ATTLIST PRICE SHIPPING CDATA #IMPLIED>
<!ENTITY AUTHOR "John Doe">
<!ENTITY COMPANY "JD Power Tools, Inc.">
<!ENTITY EMAIL "jd@jd-tools.com">
• ]>

Invalid Documents
• Valid:
<GREETING>
various random text but no markup
</GREETING>
• Invalid: anything else including
<GREETING>
<sometag>various random
text</sometag>
<someEmptyTag/>
</GREETING>
Validating Tools
• Command line programs like XJParse

• Online validators
– http://www.stg.brown.edu/service/xmlvalid/
– http://www.cogsci.ed.ac.uk/%7Erichard/xml-
check.html
• Browsers

Programming with XML
• Java works best

• C, Perl, Python etc. can also be used
• Unicode support is the biggest issue

XML Validator
• XML validators are used to syntax-check

XML
• To help syntax-check your XML, create an
XML validator.
• Paste your XML into the text area and
syntax-check it by clicking the "Validate"
button.

• This only checks if your XML is "Well
formed".

Example
• <?xml version="1.0" ?>
• <note>
• <to>Tove</to>
• <from>Jani</Ffrom>
• <heading>Reminder</heading>
• <body>Don't forget me this
weekend!</body>
• </note>
Validate

Example
<PERSON ID="p1100" SEX="M">
<NAME>
<GIVEN>Judson</GIVEN>
<SURNAME>McDaniel</SURNAME>
</NAME>
<BIRTH>
<DATE>21 Feb 1834</DATE>
</BIRTH>
<DEATH>
<DATE>9 Dec 1905</DATE>
</DEATH>
</PERSON>

• To validate this file open parse.html in
Internet explorer
• Parse.html contain the script to validate
the data .It uses MSXML parser for
validating the document against the
structure defined in DTD

• Type the name of the xml document that
user wants to parse
• It validates the entire file

XML using the XML Data Source
object
• Data source object are used for Data
Binding.
• Data Binding is Microsoft’s way of binding
data manipulation to the browser
• To make XML dta visible on html page first
“bind” your XML data island to an html
element.

Cont..
• To bind XML data to an html table,add

datasource attribute to the table and add
data field(datafld) attribute to <span>
element inside the table data
• <span> or <div> elemnets can be used to
display XML data.

Cont..
• With Internet Explorer 5.0 and higher ,XML

can be embedded within HTML pages in
Data Islands.
• <XML> tag is used to embed XML data
within html
• XML tag is an html tag not an xml element

XML FILE
• <?xml version=“1.0”>
• <musicians>
• <musician>
• <name>Joy</name>
• <instrument>drums</instrument>
• </musician>
• <name>Jpeter</name>
• <instrument>guitar</instrument>
• </musician>
• </musicians>
• Save it with file1.xml

Cont..
• <thead>
• <th>name</th>
• <th>instrument</th>
• </thead>
• <tr align=“left”>
• <td><span datafld=“name”></span></td>
• <td><span datafld=“instrument”></span></td>
• </tr></table></body></html>
• Save it with file2.html

Cont..
• In this example code,the xml file file1.xml

is loaded into an “invisible” data island
called “xmldso”
• The async=“false” attribute is added to the
data island to make sure that all the xml
data is loaded before any other html
processing takes place.

OUTPUT

Thank You

Web Designing Presentation 6 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Designing Presentation 6 PDF

Uploaded by

Copyright:

Available Formats

BSc IT

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• XML stands for Extensible Markup Language

Copyright @ Amity University

• With XML we can store information about

Copyright @ Amity University

• Officially recommended by W3C since

• Extensible Markup Language allows

Copyright @ Amity University

• XML is easy to maintain it contains only

Copyright @ Amity University

• Domain-Specific Markup Languages

Copyright @ Amity University

• XML can be used with existing protocol

• HTML is used to mark up - content and format are

Copyright @ Amity University

• HTML uses a fixed,

• The XML declaration looks like this:

Copyright @ Amity University

– version="1.0" is required (this is the only

Copyright @ Amity University

• Elements and Attributes and are

Copyright @ Amity University

• Example using attributes:

• Attributes often contain metadata, such as

Copyright @ Amity University

• XML documents are trees.

• An XML document represents a hierarchy;

paragraph paragraph paragraph

This is the great It was a dark Suddenly, a shot

Copyright @ Amity University

•Choose novel for the root element

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

• A name consists of one letter (a-z) or (A to

• Open and close all tags

Copyright @ Amity University

• <BR/>, <HR/>, and <IMG/> instead of

Copyright @ Amity University

• If an element contains a start tag for an

Copyright @ Amity University

• XML comments have the following form:

<!– This is a comment text

Copyright @ Amity University

Copyright @ Amity University

• Style sheets describe how to display

• Style sheets are attached via an xml-

Copyright @ Amity University

<?xml version="1.0" standalone="yes"?>

Copyright @ Amity University

Copyright @ Amity University

Copyright @ Amity University

– type attribute has the value text/css or text/xsl

Copyright @ Amity University

• A Document Type Definition describes the

Copyright @ Amity University

• a list of the elements, tags, attributes, and

<!DOCTYPE document SYSTEM 'domino.dtd'>

Copyright @ Amity University