1

Intro to XML

• Lecture overview:

• What is XML?• Mark-up languages• XML vs. HTML• Style Sheets (CSS and XSL)• Introduction to XML

• See text Chapters 7 and 3

2

What is XML?

• EXtensible Markup Language4 http://www.w3.org/XML/4 http://en.wikipedia.org/wiki/XML

• Metalanguage: language and tools for creating new markup languages

• For transporting and storing data4 Showing data in formatted way is

possible with XML, but not the purpose of the language

What is XML?

• Consists of tags (just like HTML)4 But now we define the tags ourselves4 Thus, technically speaking documents

that we claim to be “XML” are actually “documents in XML-generated languages”

4 Thus, with XML, we can define markup elements based on a particular domain• Ex: MathML which is the Mathematical

Markup Language– http://www.w3.org/Math/

3

4

What is XML?

• Ex: XHTML – a version of HTML generated using XML

• Ex: RSS – formatting for "really simple syndication"

• XML is an open standard and can be edited with a plain text editor4 Being text-based enables it to be

portable across platforms

• Includes4 syntax - the rules of the language4 structure - organizing and storing

information

5

Markup Languages

• A set of rules that define the layout, format, or structure of text within a document

• Markup elements are added to the document, then processed by a program that can interpret the elements4 See:

http://en.wikipedia.org/wiki/Markup_language

6

Markup Languages

• “Marking up” has been used by typesetters for hundreds of years

• “Markup Languages” were first proposed in the late 1960’s

• Ex: LaTeX is a markup language with elements for describing the format of documents4 Used a lot in Math and CS research papers4 Based on TeX, developed by Donald Knuth4 Leslie Lamport added some features to

TeX (thus the La)

Markup Languages

4 See: http://www.latex-project.org/ 4 Side note: Knuth and Lamport are both

very famous CS researchers• Text formatting was done on the side!

• Ex: Microsoft Word provides an interface for “marking up” elements in a document such as bolding a string4 In Word 2007+ it actually uses XML

• http://en.wikipedia.org/wiki/Office_Open_XML • Let’s look at two simple examples

– hello.docx, wordXML.docx

7

8

Markup Languages

• SGML - Standard Generalized Markup Language4 Established a standard for markup4 International standard for large

document projects4 But extremely complex

• Ex: parsing is difficult

4 http://en.wikipedia.org/wiki/SGML

• HTML is derived from SGML (mostly)

9

HTML

• Advantages:4 Fairly small, easy to learn language4 It’s an open standard, widely supported4 Fast interpretation - fast web browsers4 Portability vitally important to adoption

as the standard for web markup

• Disadvantages:4 Limited capabilities, fixed specification4 It’s not extensible for new domains

Motivation for XML

• Motivation for XML:4 HTML elements are primarily for

defining presentation and formatting• Show the data in a browser

• Allow interaction with the user

4 HTML does not provide semantic information about the data itself• What does the data mean?

• How is the data on one page different / similar to data on another page?

10

11

XML

• Official release 1.0 in 19984 Fifth edition recommendation in

November 20084 Also Version 1.1 released in 2004

• Second edition in 2006

4 Version 1.0 is still most widely used

• Has simplicity of HTML and extensibility of SGML4 It’s a subset of SGML4 Easier to parse than SGML

12

XML Features

• Allows data to be self-describing4 Tag names allow information about the

content to be inferred4 This has been debated

• Some believe it is not a valid feature

• Tags can be ambiguous

• Meaning is to humans, not computers

4 Google "XML self-describing"

XML Features

• Provides rules for XML elements to limit type of data in an element4 This can be done via Document Type

Definitions or Schema

• Allows custom data structures4 Tags can be nested to form arbitrary

tree configurations for data representation

13

XML Features

• Can be used for data storage and interchange4 As long as the data specification is

known, any party retrieving / receiving the data can parse it correctly

• Separates the data from its format (presentation)4 Allows different presentation styles for

the same data

14

XML Features

4 Can create custom elements / tags• Tags can describe data

<smart-phone-type>Android

</smart-phone-type>

4 Elements do not map to formatting styles• Unlike HTML

4 Style sheets allow data to be formatted in different ways

15

16

Example: HTML

<html><head><title>Job Posting: Web master</title></head><body> <h1>Job Posting</h1> <h2>Job title: <i>Web master</i></h2> <p><b>Job Description:</b> We are looking for a Web master to create and

oversee our company’s web pages. </p> <p><b>Skills needed:</b> Basic writing skills, good communication, HTML.</p></body>

</html>

17

Example: HTML

• In this example, the tags tell how the data is to be formatted

• However, they tell us nothing about the type of information that is being presented4 Just looking at the tags this could

contain anything4 We must try to infer that it is a job

posting by reading the document

18

Example: XML

<?xml version = “1.0”?><job-posting><title> Job Title: <emphasis> Web Master

</emphasis> </title><description> We are looking for a Web

master to create and oversee our company&apos;s web pages. </description>

<skill-list><skill> Basic writing skills </skill><skill> Good communication skills </skill><skill> Programming experience in web

languages </skill></skill-list></job-posting>

19

Example: XML

• In this example, the tags tell us information about the data that is stored4 By looking at the tags (without even

seeing the values) we can infer a lot about the nature of the data

4 Even if a computer is "looking at the tags" we can still program specific behaviors to specific tags

Example XML

• However, the tags tell us nothing about how the data will be formatted4 In some cases we may not even care

• Data may not need to be presented visually

4 If needed we can use style sheets

20

21

XML Data Hierarchy

• Hierarchy of data in XML - defined by function and relationship to other elements

• Root: Element encompasses all other elements4 In effect defines what the document is

• Children: Elements in other elements

• Parent: The containing element

22

Hierarchy

job-posting

title description skill-list

skill skillskillemphasis

23

XML Syntax

• Components of XML documents4 Declaration - says it’s an XML document4 Elements - data items in document

• Attributes - info. describing element

4 Comments - useful notes & documentation

• (Optional) Document Model: Structure and characteristics of elements4 Defined using DTDs (Document Type

Definitions) or Schema

24

XML Declaration

• Indicates document is an XML document

<?xml version=“1.0”?><?xml version=“1.0” encoding=“UTF-8”?><?xml version=“1.0” encoding=“UTF-16”?>

Encoding attribute deals with the character set that will be used

Ex: if non-ASCII characters will be used

25

XML Elements

• Core components of XML document

• Consist of4 Start tag: <element>4 Content: data or other elements or

both4 End tag: </element>

• Elements are like English nouns – definable objects

26

Element Examples

<book>Here is Edward Bear, coming downstairs now, bump, bump, bump on the back of his head, behind Christopher Robin. It is, as far as he knows, the only way of coming downstairs, but sometimes he feels that there really is another way, if only he could stop bumping for a moment and think of it.

…

</book>

Start tag

Content

End tag

27

Element Examples

<email_message> Dear CS 1520: Web programming is sure fun! </email_message>

<plane> F117 Nighthawk </plane>

28

Root element

• All XML documents contain 4 Outermost element – root element4 All other elements and data within

document further describe root

<book> <title> Programming the World Wide Web

</title><author> Robert Sebesta </author><publisher> Addison-Wesley </publisher>

</book>

29

Elements are containers

• Elements contain4 Elements and contents (data)4 Elements can nest within each other4 May contain child elements

e.g.,<title> contained within <book>

• Empty elements4 In html, <br> <p>4 In XML (or XHTML) <br/> <p/>

30

XML Attributes

• Information that describes elements4 Similar to an adjective - adding more

to the definition

• Defined in the start tag of elements

• Attributes are name-value pairs4 Value must be in quotes4 Same idea as with HTML attributes

31

XML Attributes

• Examples:<movie source=“http://marvel.com/ironman3”>Iron Man 3</movie>

<band genre=“Post-punk”>Joy Division</band>

• We can either use elements or attributes to modify tags – up to programmer and situation4 See p. 279-280 of Sebesta (7th edition)4 One approach is to use attributes only for items

that are not content-related• Ex: an id for an element

XML Attributes<band name = “Joy Division” genre = “Post-Punk”></band>

Vs

<band><name>Joy Division</name><genre>Post-Punk</genre>

</band>

• In this case, latter may be preferable4 Example: <genre> element may be extended to

have <subgenre> children elements in future documents

4 Not possible when genre is an attribute

32

33

Document Model

• Document model defines:4 Vocabulary for a markup language4 Grammar rules for a markup language

• Documents that are syntactically correct are said to be well-formed

• Documents that are both well-formed and obey both the vocabulary and grammar are said to be valid4 Validating parser: Checks both syntax and

structure

34

Example Capabilities

• With document model:4 Define elements document can contain4 Define order that elements appear in4 Require that certain elements appear4 Define number of elements allowed4 Define type of data in an element4 Define child elements for an element4 Define attributes of elements4 Assign constraints to attribute values

35

Document Model

• Optional: maybe not necessary for use of XML in a single application

• Useful when establishing a document sharing standard understood by a variety of applications

• This standard can be thought of as defining a new markup language

36

Document Type Definition (DTD)

• One way to implement a document model is via a DTD4 Defines structure of XML documents

• Vocabulary (the elements)

• Grammar rules (structure of elements)

4 Internal DTD: Included as part of document

4 External DTD: Included in a file external to the document

37

DTD Element Declarations

• Defines the elements and their contents for an XML document

<!ELEMENT element_name (content_model)>

Beginning of an element declaration

Name of the element being declared

Rule about type of data in element

38

DTD Element Declarations

<?xml version=“1.0” standalone=“yes”?>

<!DOCTYPE email [<!ELEMENT email(#PCDATA)>

]><email>

XML is fun!</email>

Opens DTD withroot element “email”

Internal DTD

Rule about contents ofelement “email”

Element can containcharacter data

The document and its contents

39

DTD Content Model

• Defines what an element can contain

Model DeclarationText <!ELEMENT myelem (#PCDATA)>Elements <!ELEMENT myelem (elname)>Mixed <!ELEMENT myelem

(#PCDATA,elname)>No content <!ELEMENT myelem EMPTY>Anything <!ELEMENT myelem ANY>

40

Example DTD for E-mail

<!DOCTYPE emails [<!ELEMENT emails (message)><!ELEMENT message (to, from, subject, body)><!ELEMENT to (#PCDATA)><!ELEMENT from (#PCDATA)><!ELEMENT subject (#PCDATA)><!ELEMENT body ANY>

]>

41

Example E-mail

<?xml version=“1.0” standalone=“yes”?>

<emails>

<message>

<to>cs1520&#64;pitt.edu</to>

<from>wahn&#64;cs.pitt.edu</from>

<subject>Star Trek Into Darkness</subject>

<body>

Khaaaaaaaaaaan!

</body>

</message>

</emails>See emails1-dtd.xml

42

Element Control

• You can say whether an element is optional, how many are expected, etc.4 Looks a lot like regular expression syntax

Syntax Descriptionelement? May occur 0 or 1 timeselement* May occur 0 or more timeselement+ May occur 1 or more times(elem1|elem2) Only one of elem1 or elem2(elem1,elem2) Elem1 followed by elem2

43

Example

<!DOCTYPE emails [<!ELEMENT emails (message+)><!ELEMENT message (to, from, subject?, body)><!ELEMENT to (#PCDATA)><!ELEMENT from (#PCDATA)><!ELEMENT subject (#PCDATA)><!ELEMENT body ANY>

]>

• Emails must contain at least one message

• A message may or may not have a subject

44

Attributes

• Rules for attributes and their values

<!ATTLIST element_nameattr_name1 data_type default_useattr_name2 data_type default_useattr_name3 data_type default_use>

Name of element and its attributesEach attribute has a type and default value or

usage (in above: default_use may be a default value)

45

Attributes

• Default value or usage types

Attribute TypeUsage#FIXED Value must match fixed value#REQUIRED Attribute is required#IMPLIED Attribute is optional

46

Attribute Data Types

• Specify the kind of data expected

Type DescriptionCDATA Character data, no other elementsID Unique identifier (starts with letter)List List of possible values separated

by |And others…

See emails2-dtd.xml

47

Validating XML Document

• Nonvalidating parser - check syntax to see if it is well-formed

• Validating parser - check syntax and grammar against DTD

• W3C XML Syntax Checker:4 http://www.w3schools.com/xml/

xml_validator.asp

• W3C XML Validator:4 http://validator.w3.org

48

Displaying XML files in browser

• Relating XML document and style sheet:4 We can use either a cascading style

sheet (.css) or an XSLT style sheet (.xsl)

4 http://www.w3.org/Style/CSS/ 4 http://www.w3.org/Style/CSS/learning

49

Style Sheets

• Cascading style sheets (CSS)

• A means for presenting document4 We locate the style sheet in a file

• Ex: job.css

• Has rules and declarations to tell browser how to display the document

• In the XML document add a line to show where the stylesheet is located

<?xml-stylesheet type=“text/css” href=“job.css”?>

50

Style Sheets

• Two parts in style sheet4 Element selector

• Similar to JQuery selectors in function

4 Property declarations

address {font-size: 12pt;font-family: arial}

Element (comma separated list)

Properties (property andvalue pairs separated bysemicolons)

51

Selected Formatting Properties

A wide variety of properties

Property Description Valuesfont Font properties font: italic small-caps bold 12px

arialfont-family Typeface font-family: arialfont-size Size of font font-size: smallfont-style Style of font font-style: italictext-align Alignment of text text-align: centertext-indent Indent first line text-indent: 10 (# pixels)color Text color color: redand many, many more....see: http://www.w3schools.com/css

52

Cascading Style Sheets

to, from {font-weight:bold;text-align:left;border-style:solid}

subject {text-decoration: underline;background-color: green;color: yellow}

* {color:green}

To, from elementsare bold, left aligned,with solid border

Subject element isunderlined, green backgroundcolor (yuck), text is yellow

Default properties to use:text color is green

See job.css

53

CSS Inheritance

• Hierarchy of elements in XML docs

• Hierarchy is applied to style sheet with property inheritance

• Properties defined for parents are passed to child elements4 E.g., parent is 18pt -> child is 18pt

unless property is redefined

54

Example<?xml version = “1.0”?><?xml-stylesheet type = “text/css” href =

“job.css"?><job-posting><title> Job Title: <emphasis> Web Master

</emphasis> </title><description> We are looking for a Web master

to create and oversee our company&apos;s web pages. </description>

<skill-list><skill> Basic writing skills </skill><skill> Good oral skills </skill><skill> Programming experience in web

languages </skill></skill-list></job-posting>

55

Style sheet (.css)

title { font-size: 28pt; color: red; }emphasis { font-weight: bold; }description { display: block; margin-top:

15px; font-size: 18pt; }skill-list {background-color: yellow;

color: green;}skill { display: block; margin-left: 30px; margin-top: 5px; font-size: 14pt; font-family: 'Comic Sans MS';}

CSS Inheritance

4 Consider job.xml and job.css example• <emphasis> tag is within both the <title>

tag and the <skill> tag

• In both cases it changes the font to bold, but does not affect any other formatting

• The other properties are inherited from the parent tag

56

CSS with HTML

• CSS can also be use effectively with HTML files4 We can define style classes to be used

with our documents4 We can define style for given tags

• Syntax for linking is different with HTML than XML4 Use the <link> tag

• See CDpoll-style.php and CDstyle.css

57

58

CSS Limitations

• CSS is not a general way of expressing presentation; it provides a “static” formatting

• E.g., we can’t make on-the-fly decisions about whether to include a header or footer, whether to color something green when it has two children, etc.4 Formatting is based on the tags /

attributes, not on the organization

CSS Limitations

• We can get around these limitations using Javascript / DOM4 Allows dynamic updating of the style

through events4 See CDpoll-style.php and CDstyle.css

• We can also use XSL for style4 XSL is more flexible than CSS – we will

briefly look at XSL

59

XSL

• XSL (eXtensible Stylesheet Language) is a very powerful combination of 3 different languages:4 XSLT – XSL Transformations

• XML language used to transform an XML document in various ways (perhaps into a different type of document)

• Ex: Transform XML into XHTML for display

• Ex: Transform from one XML language into a different one

60

XSL

4 Xpath – XML Path language• Used to access / parse / traverse an

XML document

• Enables a user to query / access parts of the document tree in a regular way

• Not itself an XML language

4 XSL-FO – XSL Formatting Objects• XML markup language designed to

format / present documents– Ex: Can be used to generate PDFs from

XML documents

61

XSL

• Big Picture Example:4 We have an XML document which we

would like to format for display in a browser

4 Perhaps we would like it to be displayed in an HTML table, or within some other HTML elements

4 We can use Xpath to select the XML elements that we want to present, and XSLT to transform them into XHTML

62

XSL

4 If we want to add style to our newly generated XHTML document we can easily add some CSS as it is generated• Alternatively, we could transform the

original document into XSL-FO and impart the style there

– This is actually very powerful but in many cases using XSLT + CSS will be sufficient

• Result: We still use CSS for style, but XSLT gives us much more flexibility than CSS alone

63

XSL

• Ex: Consider a document that is storing XML emails4 We would like to display this document

in a nicely formatted way in the browser4 If we use CSS alone, we can add style to

the XML elements, but that is basically it• We are seeing an XML document, with

style applied to the elements

• See emails2.xml and emails2.css

64

XSL

4 If we use XSLT + CSS, we can create a new XHTML document that includes XHTML tags, our XML data AND CSS• Now we are seeing an XHTML

document which has data from our XML document within it

• Note that we are not changing our original XML document

– The XHTML that we see is dynamically generated via XSLT and Xpath

• See emails2-xsl.xml, emails2.xsl and emails2-xsl.css

65