Bai Giang XML

8/3/2019 Bai Giang XML

http://slidepdf.com/reader/full/bai-giang-xml 1/106

ðI HC ðÀ NNGTRUNG TÂM PHÁT TRIN PHN MM

XML Tutorial



I/ What is XML?

• XML is a markup language for documentscontaining structured information.

. words, pictures, etc.

. some indication of what role that content plays. For

example : content in a section heading has a differentmeaning from content in a footnote, which means somethingdifferent than content in a figure caption or content in adatabase table, etc.

• Structured information contains both content :

• A markup language is a mechanism to identifystructures in a document. The XML specificationdefines a standard way to add markup todocuments.



An example XML documentA simple XML document : <?xml version="1.0"?> <Root>

<Person> <FirstName>Janet</FirstName> <Middle>Q</Middle> <LastName>Leverling</LastName> <Address>

<Address1>123 Elm</Address1> <Address2>bis</Address2> <City>Pleasantville</City> <State>MA</State>

<Zip>12345</Zip> </Address> </Person> …

</Root>



So XML is Just Like HTML?• No. In HTML, both the tag semantics and the tag

set are fixed.Ex : An <h1> is always a first level heading and the tag<ati.product.code> is meaningless.

• XML specifies neither semantics nor a tag set.In fact XML is really a meta-language for describing markuplanguages. In other words, XML provides a facility to define

tags and the structural relationships between them. Sincethere's no predefined tag set, there can't be any preconceivedsemantics.

• All of the semantics of an XML document will either

be defined by the applications that process them orby stylesheets.



So XML is Just Like SGML?• No. XML is defined as an application profile of

SGML.

• SGML is the Standard Generalized Markup

Language defined by ISO 8879.

• SGML is not well suited to serving documents overthe web

• Defining XML as an application profile of SGMLmeans that any fully conformant SGML system willbe able to read XML documents.

• Using and understanding XML documents does not require a system that is capable of understandingthe full generality of SGML.



Why XML?• XML was created so that richly structured

documents could be used over the web.

• HTML, as we've already discussed, comes bound

with a set of semantics and does not providearbitrary structure.

• SGML provides arbitrary structure, but is too

difficult to implement just for a web browser.• In many organizations, filtering SGML to XML will

be the standard procedure for web delivery.



XML development goals?1. It shall be straightforward to use XML over the

Internet. Users must be able to view XMLdocuments as quickly and easily as HTML

documents.2. XML shall support a wide variety of applications.

Ex : authoring, browsing, content analysis, etc.

3. XML shall be compatible with SGML.

4. It shall be easy to write programs that processXML documents.

5. The number of optional features in XML is to bekept to an absolute minimum, ideally zero.



XML development goals?

6. XML documents should be human-legible andreasonably clear.

7. The XML design should be prepared quickly.8. The design of XML shall be formal and concise.

9. XML documents shall be easy to create.10. Terseness in XML markup is of minimal

importance. Several SGML language features were

designed to minimize the amount of typingrequired to manually key in SGML documents.



How is XML defined?• Extensible Markup Language (XML)

Defines the syntax of XML.

• XML Pointer Language (XPointer) and XML

Linking Language (XLink)Defines a standard way to represent links between resources.

• Extensible Style Language (XSL)

Defines the standard stylesheet language for XML.



XML documents consist of • XML documents are composed of markup and

content.

• There are six kinds of markup that can occur in an

XML document:• elements

• entity references

• comments

• processing instructions

• marked sections

• document type declarations



Elements• Elements are the most common form of markup.• Delimited by angle brackets <>

<Person> <FirstName>Janet</FirstName>

<Middle>Q</Middle> <LastName>Leverling</LastName> <Address>

<Address1>123 Elm</Address1> <Address2></Address2>

<City>Pleasantville</City> <State>MA</State> <Zip>12345</Zip>

</Address> </Person>

• Empty elements have a modified syntax <Person> </Person>

or <Person/>



Attributes

• Attributes are name-value pairs that occur insidestart-tags after the element name.

• In XML, all attribute values must be quoted “”.

<Person ID=“0001”>

<FirstName>Janet</FirstName> <Middle>Q</Middle> <LastName>Leverling</LastName> <Address>

<Address1>123 Elm</Address1>

<Address2></Address2> <City>Pleasantville</City> <State>MA</State> <Zip>12345</Zip>

</Address>

</Person>



Entity References

• Entities are used to represent these specialcharacters.

• It can be used to insert arbitrary Unicodecharacters into your document, ex : ℚ

• < produces the left angle bracket, <

• > produces the right angle bracket, >• & produces the ampersand, &• ' produces a single quote character (anapostrophe), '• " produces a double quote character, "

Comments

• Comments begin with .

• Comments can contain any data except the literalstring --.

Example :



• Comments are not part of the textual content of anXML document.



Processing Instructions

• Processing instructions (PIs) are an escape hatch toprovide information to an application.

• Like comments, they are not textually part of the

XML document, but the XML processor is requiredto pass them to an application.

Example :

<?xml-stylesheet type="text/css" href="cd_catalog.css"?>

• Processing instructions have the form:

<?name pidata?>.



CDATA Sections

• In a document, a CDATA section instructs theparser to ignore most markup characters.

• Consider a source code listing in an XML

document.

<![CDATA[*p = &q;

b = (i <= 3);]]>

• Between the start of the section, <![CDATA[ andthe end of the section, ]]>, all character data ispassed directly to the application, withoutinterpretation.



Document Type Declarations

• Declarations allow a document to communicatemeta-information to the parser about its content.

• Meta-information includes the allowed sequence

and nesting of tags, attribute values and their typesand defaults, the names of external files that may bereferenced and whether or not they contain XML,the formats of some external (non-XML) data thatmay be referenced, and the entities that may beencountered.

• element type declarations,

• attribute list declarations,

• entity declarations,

• and notation declarations

• There are four kinds of declarations in XML:



Element Type Declarations

• Element type declarations identify the names of elements and the nature of their content.

• A typical element type declaration looks like this:

<!ELEMENT oldjoke (burns+, allen, applause?)>

<!ELEMENT oldjoke (burns+, allen, applause?)> <!ELEMENT burns (#PCDATA | quote)*>

<!ELEMENT allen (#PCDATA | quote)*> <!ELEMENT quote (#PCDATA)*> <!ELEMENT applause EMPTY>

• Element Declarations for Old Jokes

<?xml version="1.0"?>

<oldjoke> <burns>Say <quote>goodnight</quote>,Gracie.</burns> <allen><quote>Goodnight,Gracie.</quote></allen> <applause/>

</oldjoke>



Attribute List Declarations (I)

• Attribute list declarations identify which elementsmay have attributes, what attributes they may have,what values the attributes may hold, and what value

is the default.

• Typical attribute list declaration looks like this:<!ATTLIST oldjoke

nameID

#REQUIRED

label

CDATA

#IMPLIED

status ( funny | notfunny ) 'funny'>



Attribute List Declarations (II)• There are six possible attribute types:

• CDATA : attributes are strings, any text is allowed.

• ID : the value of an ID attribute must be a name. All of the ID

values used in a document must be different.

• IDREF or IDREFS : an IDREF attribute's value must be the valueof a single ID attribute on some element in the document.

• ENTITY or ENTITIES : An ENTITY attribute's value must be

the name of a single entity.

• NMTOKEN or NMTOKENS : Name token attributes are arestricted form of string attribute. In general, an NMTOKEN

attribute must consist of a single word, but there are no additional

constraints on the word, it doesn't have to match another attribute

or declaration.

• A list of names : You can specify that the value of an attributemust be taken from a specific list of names. This is frequently

called an enumerated type because each of the possible values is

explicitly enumerated in the declaration.



Attribute List Declarations (III)• There are four possible default values:

• #REQUIRED : The attribute must have an explicitly specified

value on every occurrence of the element in the document.

• #IMPLIED : The attribute value is not required, and no default

value is provided. If a value is not specified, the XML processor must proceed without one.

• "value" : An attribute can be given any legal value as a default.

The attribute value is not required on each element in the

document, and if it is not present, it will appear to be thespecified default.

• #FIXED "value" : An attribute declaration may specify that an

attribute has a fixed value. In this case, the attribute is not

required, but if it occurs, it must have the specified value. If it

is not present, it will appear to be the specified default. Oneuse for fixed attributes is to associate semantics with an

element. A complete discussion is beyond the scope of this

lesson, but you can find several examples of fixed attributes in

the XLink specification.



Entity Declarations (1)• There are three kinds of entities:• Internal Entities : Internal entities associate a name with a

string of literal text.

<!ENTITY

ATI

"ArborText, Inc.">

Using &ATI; anywhere in the document will insert ArborText,

Inc. at that location. Internal entities allow you to define

shortcuts for frequently typed text or text that is expected to

change, such as the revision status of a document.• External Entities : External entities associate a name with the

content of another file. External entities allow an XML

document to refer to the contents of another file. External

entities contain either text or binary data.<!ENTITY boilerplate SYSTEM

"/standard/legalnotice.xml">

Using &boilerplate; will have insert the contents of the file

/standard/legalnotice.xml at the location of the entity

reference.



Entity Declarations (2)• Parameter entities : can only occur in the document type

declaration. A parameter entity declaration is identified by

placing % (percent-space) in front of its name in the

declaration. The percent sign is also used in references to

parameter entities, instead of the ampersand. Parameter entityreferences are immediately expanded in the document type

declaration and their replacement text is part of the declaration,

whereas normal entity references are not expanded. Parameter

entities are not recognized in the body of a document.

<!ELEMENT burns (#PCDATA | quote)*>

<!ELEMENT allen (#PCDATA | quote)*>

<!ENTITY % personcontent "#PCDATA | quote">

<!ELEMENT burns (%personcontent;)*>

<!ELEMENT allen (%personcontent;)*>



Notation Declarations

• Notation declarations identify specific types of external binary data. This information is passed tothe processing application, which may make

whatever use of it it wishes.<!NOTATION GIF87A SYSTEM "GIF">

<?XML version="1.0" standalone="no"?>

<!DOCTYPE chapter SYSTEM "dbook.dtd" [

<!ENTITY %ulink.module "IGNORE">

<!ELEMENT ulink (#PCDATA)*>

<!ATTLIST ulink

xml:link CDATA #FIXED

"SIMPLE"

xml-attributes CDATA #FIXED "HREF

URL"

URL CDATA #REQUIRED>

]>

<chapter>...</chapter>

• Including a Document Type Declaration



Validity

• Given the preceding discussion of typedeclarations, it follows that some documents arevalid and some are not. There are two categories of

XML documents: well-formed and valid.• Well-formed Documents : A document can only be well-

formed if it obeys the syntax of XML. A document thatincludes sequences of markup characters that cannot be

parsed or are invalid cannot be well-formed. If adocument is not well-formed, it is not XML.• Valid Documents : A well-formed document is valid only

if it contains a proper document type declaration and if the document obeys the constraints of that declaration(element sequence and nesting is valid, requiredattributes are provided, attribute values are of thecorrect type, etc.).



Validity• It must meet all of the following conditions1. The document instance must conform to the grammar of

XML documents.2. The replacement text for all parameter entities referenced

inside a markup declaration consists of zero or more

complete markup declarations.3. No attribute may appear more than once on the same start-

tag.4. String attribute values cannot contain references to

external entities.5. Non-empty tags must be properly nested.6. Parameter entities must be declared before they are used.7. All entities except the following: amp, lt, gt, apos, and quot

must be declared.8. A binary entity cannot be referenced in the flow of content,

it can only be used in an attribute declared as ENTITY orENTITIES.

9. Neither text nor parameter entities are allowed to be

recursive, directly or indirectly.



XLink • XLink introduce a standard linking model for

XML.• A link expresses a relationship between resources.

• A resource is any location (an element, or itscontent, or some part of its content, for example)that is addressed in a link.

• The exact nature of the relationship betweenresources depends on both the application thatprocesses the link and semantic informationsupplied.



Some highlights of XLink • XLink gives you control over the semantics of the

link.• XLink introduces Extended Links. Extended Links

can involve more than two resources.

• XPointer introduces Extended Pointers(XPointers). XPointers provide a sophisticatedmethod of locating resources. In particular,

XPointers allow you to locate arbitrary resourcesin a document, without requiring that the resourcebe identified with an ID attribute.



Simple Links

<link xml:link="simple" href="locator">Link Text</link>

• A Simple Link identifies a link between two

resources, one of which is the content of the linkingelement itself. This is an in-line link.

• The locator identifies the other resource. The

locator may be a URL, a query, or an ExtendedPointer.



Extended Links

<elink xml:link="extended" role="annotation"> <locator xml:link="locator"

href="text.loc">The Text </locator> <locator xml:link="locator"

href="annot1.loc">Annotations </locator>

<locator xml:link="locator"href="annot2.loc">

More Annotations</locator> <locator xml:link="locator"

href="litcrit.loc"> Literary Criticism</locator>

</elink>

• Extended Links allow you to express relationshipsbetween more than two resources:

This example shows how the relationships between a literary work,

annotations, and literary criticism of that work might be expressed.

Note that this link is separate from all of the resources involved.

i i 2003



XML Mappings in Excel 2003• Microsoft Office Excel 2003 improves support forusing native XML by enabling you to add your

own XML Schema Definition (XSD) to aworkbook.

• This creates an XML map that you can use tomake data more meaningful upon importing orexporting data.

1. Create a map between an Excel spreadsheet and an XMLstructure

2. Use that map to import subsequent XML data to that samestructure

3. Use that map to export XML data from the spreadsheet,that conforms to that XML schema4. Persist and reuse that map for subsequent import and

export operations

M i



Mapping process• Adding an XSD file to an Excel workbook • Once you add the XSD file, Excel creates an XML

map in the XML Source task pane

• Excel also uses this map to manage the relationshipbetween those mapped ranges and the elements inthe XML schema.

• Excel also uses this map to manage the relationshipbetween those mapped ranges and the elements inthe XML schema. A workbook can contain many XML maps where each map is an

independent entity. Likewise, you can also have multiple maps refer to the same schema. When you import or export XML data, Excel

uses the map to relate the contents of a mapped range to elements in

the schema.

Addi XML M W kb k



Adding an XML Map to a Workbook

• On the View menu, click Task Pane to display theXML Source task pane.

–OR-

On the Data menu, point to XML, and then click XML Source.

• Click XML Maps and then Add.

• Go to the schema file, click Open, and then click OK .

E l



Example

M i ith th XML S T k



Mapping with the XML Source Task

• The XML Source task pane displays the XMLschemas in the workbook in a tree view.

• You can map elements by dragging them onto the

worksheet, or you can right-click each element andchoose Map element.• You can select non-adjacent elements by clicking

one element, holding down the CTRL key, and

clicking additional elements. Once you select theelements, drag them to the worksheet locationwhere you want them to appear. If the element is arepeating element, Excel creates an XML List in

the cell where you added the element.

I ti D t i t M d R



Importing Data into a Mapped Range

1. Select a cell in the mapped range into which youwant to import XML data.

2. On the Data menu, point to XML, and then click

Import.3. In the Look in list, click the drive, folder, or

Internet location that contains the XML data file

you want to import.4. In the folder list, locate and open the folder that

contains the file.

5. Click the file, and then click Import.

XML Mapping Scenarios




1. Copy and paste the XML and XSD listings intoseparate files using a text editor such as Notepad.

2. Import the XSD data into the XML Source task pane to create a map.

3. Drag and drop the designated element(s) of themap onto the worksheet cell.

4. Import the data from the XML file.









CSS What is CSS?



CSS - What is CSS?

• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements

• Styles are normally stored in Style Sheets• Styles were added to HTML 4.0

• External Style Sheets can save you a lot of work

• External Style Sheets are stored in CSS files

• Multiple style definitions will cascade into one

Styles Solve a Common Problem



Styles Solve a Common Problem

• HTML tags were originally designed to define thecontent of a document. They were supposed to say"This is a header", "This is a paragraph", "This is

a table", by using tags like <h1>, <p>, <table>, andso on. The layout of the document was supposed tobe taken care of by the browser, without using anyformatting tags.

• Netscape and Internet Explorer - continued to addnew HTML tags and attributes (like the <font> tagand the color attribute) to the original HTML

specification, it became more and more difficult tocreate Web sites

• Both Netscape 4.0 and Internet Explorer 4.0support Cascading Style Sheets.

Cascading Order



Cascading Order

• What style will be used when there is more thanone style specified for an HTML element?

• Generally speaking we can say that all the styles

will "cascade" into a new "virtual" Style Sheet bythe following rules, where number four has thehighest priority:

• Browser default• External Style Sheet

• Internal Style Sheet (inside the <head> tag)

• Inline Style (inside HTML element)

Syntax



Syntax

• The CSS syntax is made up of three parts: aselector, a property and a value:

selector {property: value}

• The property and value are separated by a colonand surrounded by curly braces:body {color: black}

• If the value is multiple words, put quotes around

the value:

p {font-family: "sans serif"}

• If you wish to specify more than one property, youmust separate each property with a semi-colon.p {text-align:center;color:red}

Syntax (2)



Syntax (2)

• To make the style definitions more readable, youcan describe one property on each line, like this:

P

{text-align: center;color: black;font-family: arial}

• You can group selectors :

h1,h2,h3,h4,h5,h6

{color: green}

Syntax (3)



Syntax (3)

<p class="right">This paragraph will be right-aligned.</p><p class="center">

This paragraph will be center-aligned.</p>

• The class Selector : With the class selector you candefine different styles for the same type of HTMLelement.

p.right {text-align: right}

p.center {text-align: center}

CSS Comments



CSS Comments

• You can insert comments in CSS to explain yourcode, which can help you when you edit the sourcecode at a later date. A comment will be ignored bythe browser. A CSS comment begins with "/*", and

ends with "*/", like this:/* This is a comment */p{text-align: center;/* This is another comment */color: black;font-family: arial

}

Example 1 with HTML



Example 1 with HTML

• Example-1.html :<html><head><link rel="stylesheet" type="text/css" href="example-1.css" /></head><body><h1>This header is 36 pt</h1><h2>This header is blue</h2><p>This paragraph has a left margin of 50 pixels</p>

</body></html>

• Example-1.css:h1 {font-size: 36pt}

h2 {color: blue}p {margin-left: 50px}

Example 2 with XML



p e w

• xml-ex-1.xml :<?xml version='1.0'?><?xml-stylesheet type="text/css" href="css-ex-1.css"?><CATALOG xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

<CD>

<TITLE>Empire Burlesque</TITLE><ARTIST>Bob Dylan</ARTIST><COUNTRY>USA</COUNTRY><COMPANY>Columbia</COMPANY><PRICE>10.9</PRICE>

<YEAR>1985</YEAR></CD><CD>

<TITLE>Hide your heart</TITLE><ARTIST>Bonnie Tyler</ARTIST>

<COUNTRY>UK</COUNTRY><COMPANY>CBS Records</COMPANY><PRICE>9.9</PRICE><YEAR>1988</YEAR>

</CD>

</CATALOG>

Example 2 with XML



p• css-ex-1.css :

TITLE{magin-top : 7in;magin-bottom :7in;magin-left : 1.5in;magin-right : 1in;background-color:white;display:block }ARTIST{font-family: Arial, Helvetica, sans-serif;font-size:32pt;width: 30em;color:red}COUNTRY{font-family: Arial, Helvetica, sans-serif;color:blue}

CSS Background Properties



g p• CSS Background properties define the background

effects of an element.

Repeat, repeat-x, repeat-y, no-

repeat

Sets if/how a background image

will be repeated

background-

repeat

top left, top center, top right,

center left, center center, center right, bottom left, bottom center,

bottom right, x-% y-% , x-pos y-

pos

Sets the starting position of a

background image

background-

position

url , noneSets an image as the backgroundbackground-

image

color-rgb, color-hex, color-name,

transparent

Sets the background color of an

element

background-

color

scroll

fixed

Sets whether a background

image is fixed or scrolls with the

rest of the page

background-

attachment

background-color, background-

image, background-repeat

background-attachment,

background-position

A shorthand property for setting

all background properties in one

declaration

background

ValuesValuesValuesValuesDescriptionDescriptionDescriptionDescriptionPropertyPropertyPropertyProperty

CSS Background Properties (example)



g p ( p )

<html> <head> <style type="text/css"> h1 {background-color: #00ff00}h2 {background-color: transparent}

body {background-image: url('C:\Documents and Settings\My Documents\My Pictures\Logo-Datic.bmp')}

p {background-color: rgb(250,0,255)} </style> </head>

<body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body>

</html>

CSS Text Properties



p• CSS Text properties define the appearance of text.

Normal, lengthIncrease or decrease thespace between words

word-spacing

Normal, pre, nowrapSets how white space insidean element is handled

white-space

Normal, embed, bidi-override

unicode-bidi

None, capitalize,uppercase, lowercase

Controls the letters in anelement

text-transform

None, color , lengthtext-shadow

Length, %Indents the first line of texttext-indent

None, underline, overline,line-through, blink

Adds decoration to texttext-decoration

Left, right, center, justifyAligns the text in an elem.text-align

normal

length

Increase or decrease the

space between characters

letter-spacing

Ltr, rtlSets the text directiondirection

color Sets the color of a textcolor

Possible ValuesDescriptionProperty

CSS Text Properties (example)



<html> <head>

<style type="text/css"> h1 {color: #00ff00}

h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style>

</head>

<body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

CSS Font Properties



• CSS Font properties define the font in text.

Normal, bold, bolder, lighter, 100,

200, 300, 400, 500, 600, 700, 800,900

Sets the

weight of afont

font-weight

Normal, small-capsfont-variant

Normal, italic, obliqueSets the stylefont-style

Normal, wider, narrower, ultra-condensed, extra-condensed,condensed, semi-condensed, semi-

expanded, expanded, extra-expanded

Condenses orexpands thecurrent font-

family

font-stretch

None, number aspect valuefont-size-adjust

xx-small, x-small, small, medium,large, x-large, xx-large, smaller,larger , length

Sets the sizeof a font

font-size

family-name, generic-family A prioritizedlist of

font-family

font-style, font-variant, font-weight,font-size/line-height, font-family,caption, icon, menu, message-box,small-caption, status-bar

A shorthandproperty forsetting all of the properties

font

ValuesDescriptionProperty

CSS Font Properties (example)



<html> <head> <style type="text/css"> h3 {font-family: times}

p {font-family: courier}

p.sansserif {font-family: sans-serif} </style> </head>

<body>

<h3>This is header 3</h3> <p> This is a paragraph</p>

<p class="sansserif"> This is a paragraph</p>

</body> </html>

CSS Border Properties



• CSS Border properties define the borders an element.

border-top-width, border-styleA shorthand property for setting all of theborder-top

None, hidden, dotted, dashed,solid, double, groove, ridge

Sets the style of the four borders, canhave from one to four styles

border-style

Thin, medium, thick, lengthSets the width of the right borderborder-right-width

border-styleSets the style of the right borderborder-right-style

border-color Sets the color of the right borderborder-right-color

border-right-width, border-style,border-color

A shorthand property for setting all of theproperties for the right border

border-right

Thin, medium, thick, lengthSets the width of the left borderborder-left-width

border-styleSets the style of the left borderborder-left-style

border-color Sets the color of the left borderborder-left-color

border-left-width, border-style,

border-color

A shorthand property for setting all of the

properties for the left border

border-left

Color Sets the color of the four bordersborder-color

Thin, medium, thick, lengthSets the width of the bottom borderborder-bottom-width

border-styleSets the style of the bottom borderborder-bottom-style

border-color Sets the color of the bottom borderborder-bottom-color

border-bottom-width, border-style, border-color

A shorthand property for setting all of theproperties for the bottom border

border-bottom

border-width, border-style,border-color

A shorthand property for setting all of theproperties for the four borders in onedeclaration

border


CSS Border Properties (example)



<html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} </style> </head> <body> <p>The "border-style" property is not recognized by Netscape 4.</p> <p>Netscape 6 supports all border styles.</p> <p>Internet Explorer 5.5 supports all border styles.Internet Explorer 4.0 - 5.0 do not support the"dotted" and "dashed" values</p>

<p class="dotted"> A dotted border</p> <p class="dashed"> A dashed border</p> </body> </html>

CSS Margin Properties



• define the space around elements.

autolength%

Sets the top margin of anelement

margin-top

autolength

%

Sets the right margin of an element

margin-right

autolength%

Sets the left margin of anelement

margin-left

autolength%

Sets the bottom marginof an element

margin-bottom

margin-topmargin-right

margin-bottommargin-left

A shorthand property forsetting the margin

properties in onedeclaration

margin


CSS Margin Properties (example)



<html> <head> <style type="text/css"> p.margin {margin-left: 2cm} </style> </head>

<body> <p> This is a paragraph This is a paragraphThis is a paragraph This is a paragraph

</p>

<p class="margin"> This is a paragraph with a left marginThis is a paragraph with a left margin

</p>

</body> </html>

CSS Padding Properties



• define the space between the element border and theelement content.

length

%

Sets the top padding of

an element

padding-top

length%

Sets the right padding of an element

padding-right

length%

Sets the left padding of an element

padding-left

length%

Sets the bottom paddingof an element

padding-bottom

padding-top

padding-right padding-bottom padding-left

A shorthand property for

setting all of thepadding properties inone declaration

padding


CSS Padding Properties (example)



<html> <head>

<style type="text/css"> td {padding-left: 2cm}

</style>

</head>

<body>

<table border="1"> <tr> <td> This is a tablecell with a left padding

</td> </tr> </table>

</body>

</html>

CSS List Properties



• allow you to change between different list-item markers,set an image as a list-item marker, and set where to placea list-item marker.

Auto, len thmarker-offset

None, disc, circle,square, decimal,decimal-leading-zero,

lower-roman, upper-roman, lower-alpha,upper-alpha, lower-greek, lower-latin,upper-latin, hebrewarmenian

Sets the type of the list-itemmarker

list-style-type

insideoutside

Places the list-item marker inthe list

list-style-position

noneurl

Sets an image as the list-itemmarker

list-style-image

list-style-typelist-style-positionlist-style-image

A shorthand property forsetting all of the properties fora list in one declaration

list-style


CSS List Properties (example)



<body> <ul class="disc"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

<ul class="circle"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

<ul class="square"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> <ul class="none">

<li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </body>

</html>

<html> <head> <style type="text/css"> ul.disc{list-style-type: disc

}ul.circle{list-style-type: circle}

ul.square{list-style-type: square}ul.none{

list-style-type: none}

</style> </head>

CSS Dimension Properties



• The Dimension properties allow you to control the heightand width of an element. It also allows you to increasethe space between two lines.

Auto, %, lengthSets the width of an elementwidthLength, %Sets the minimum width of an elementmin-width

Length, %Sets the minimum height of an elementmin-height

None, length, %Sets the maximum width of an elementmax-width

None, length, %Sets the maximum height of an elementmax-height

Normal, number,length, %

Sets the distance between linesline-height

Auto , length, %Sets the height of an elementheight


CSS Dimension Properties (example)



<body>

<p><b>Note:</b> Netscape 4 does notsupport the "height" property, and the "width"

property does not work onimages.</p>

<img class="normal" src="back.gif"width="72" height="40">

<br><br>

<img class="big" src="back.gif"width="72" height="40">

<br><br>

<img class="small" src="back.gif"width="72" height="40">

</body>

</html>

<html>

<head>

<style type="text/css">

img.normal

{

height: auto;width: auto

}

img.big

{

height: 80px;width: 100px

}

img.small

{

height: 30px;

width: 50px

}

</style>

</head>

CSS Classification Properties



• The Classification properties allow you to control how todisplay an element, set where an image will appear inanother element, position an element relative to itsnormal position, position an element using an absolute

value, and how to control the visibility of an element.

Visible, hidden, collapseSets if an element should bevisible or invisible

visibility

Static, relative, absolute, fixedPlaces an element in a static,relative or fixed position

position

Left, right, noneSets where an image or a textwill appear in another element

float

None,inline, block, list-item, run-in, compact,marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row,table-column-group, table-column, table-cell,

table-caption

Sets how/if an element isdisplayed

display

url , auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize,sw-resize, s-resize, w-resize, text, wait, help

Specifies the type of cursor to bedisplayed

cursor

Left, right, both, noneSets the sides of an elementwhere other floating elementsare not allowed

clear


CSS Classification Properties (example)



<html> <head> <style type="text/css"> div {display: none}

p {display: inline}

</style> </head> <body> <div> The div section is invisible

</div> <p> With the value of "inline" there should be </p>

<p> no distance between the two paragraphs.

</p> </body> </html>

CSS Positioning Properties



• define the position of an element.

Auto, number Sets the stack order of an elementz-index

Baseline, sub, super,top, text-top, middle,bottom, text-bottom,length, %

Sets the vertical alignment of anelement

vertical-align

Auto, %, lengthSets how far the top edge of anelement is above/below the top edge

of the parent element

top

Auto, %, lengthSpecifies the right edge of anelement

right

Static, relative,

absolute, fixed

Places an element in a static,

relative, absolute or fixed position

position

Visible, hidden,scroll, auto

Sets what happens if the content of an element overflow its area

overflow

Auto, %, lengthSpecifies the left edge of an elementleft

Shape, autoSets the shape of an elementclip

Auto, %, lengthSpecifies the bottom edge of anelement

bottom


CSS Positioning Properties (example)<ht l>



<html>

<head> <style type="text/css"> img{

position:absolute;

clip:rect(0px 50px 200px 0px)}

</style> </head>

<body> <p><b>Note:</b> Netscape 4 does not support the"clip" property.</p>

<p>Note that this property is cutting the image. Thewidth and the height properties (or attributes)

decreases the image.</p> <p><img border="0" src="bookasp20.gif" width="120"height="151"></p>

</body> </html>

CSS Pseudo-classes



• Pseudo-classes are used in CSS to add different effects tosome selectors, or to a part of some selectors.

Allows the author to specify a languageto use in a specified element

CSS2:lang

Adds special style to an element that isthe first child of some other element

CSS27.0:first-child

Adds special style to a visited linkCSS13.04.0visited

Adds special style to an unvisited linkCSS13.04.0link

Adds special style to a link when youmouse over it

CSS14.07.1hover

Adds special style to a selected linkCSS14.0active

PurposeW3CIENNPseudo-classes

CSS Pseudo-classes (example)



<html> <head>

<style type="text/css"> a:link {color: #FF0000}

a:visited {color: #00FF00}a:hover {color: #FF00FF}a:active {color: #0000FF}

</style> </head>

<body> <p><b><a href="default.asp" target="_blank">This isa link</a></b></p>

<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be

effective!!</p> <p><b>Note:</b> a:active MUST come after a:hover inthe CSS definition in order to be effective!!</p>

</body> </html>

XSL



• XSL stands for eXtensible Stylesheet Language.• The World Wide Web Consortium (W3C) started

to develop XSL because there was a need for an

XML based Stylesheet Language.• CSS - HTML Style Sheets :

• HTML uses predefined tags and the meanings of tags are

well understood.• The <table> element defines a table and a browser knows

how to display it.

• Adding styles to HTML elements is also simple. Telling a

browser to display an element in a special font or color, iseasily done with CSS.

XSL



• XSL stands for eXtensible Stylesheet Language.• The World Wide Web Consortium (W3C) started

to develop XSL because there was a need for an

XML based Stylesheet Language.• CSS - HTML Style Sheets :

• HTML uses predefined tags and the meanings of tags are

well understood.• The <table> element defines a table and a browser knows

how to display it.

• Adding styles to HTML elements is also simple. Telling a

browser to display an element in a special font or color, iseasily done with CSS.



Data in XMLData in XML

Layout in HTMLLayout in HTML

StyleSheetsStyleSheets

XML and HTML

XSL Transformations



XSL Transformation

XML

WML

HTMLSGML

PDF

Plain TextXML

XML Deployment



• System to System

• Application to Application

• Client to Server

Technology Leaders Driving XML



ContentManagement

ApplicationIntegration

e-Commerce

Native XMLApplications

e-Commerce

Native XMLApplications

ContentManagement

ApplicationIntegration

XSL - XML Style Sheets



• XML does not use predefined tags (we can use anytags we like) and the meanings of these tags are notwell understood.

• The <table> could mean an HTML table or a pieceof furniture, and a browser does not know how todisplay it.

• There must be something in addition to the XMLdocument that describes how the document shouldbe displayed; and that is XSL!

Input XML

document

Input XML

document

XSLT

Transformation

Formatting

Process

Resultant

Document

XSL - More Than a Style Sheet Language



• XSL consists of three parts:• XSLT is a language for transforming XML documents

• XPath is a language for defining parts of an XMLdocument

• XSL-FO is a language for formatting XML documents

• XSL as a set of languages that can :

• transform XML into XHTML,• filter and sort XML data,

• define parts of an XML document,

• format XML data based on the data value, like displayingnegative numbers in red,

• and output XML data to different media, like screens,paper, or voice.

XSLT - XSL Transformations



• XSLT is the most important part of the XSLStandards. It is the part of XSL that is used totransform an XML document into another XMLdocument, or another type of document that is

recognized by a browser, like HTML and XHTML.

• XSLT can also add new elements into the outputfile, or remove elements. It can rearrange and sort

elements, and test and make decisions about whichelements to display, and a lot more.

• A common way to describe the transformation

process is to say that XSLT transforms an XMLsource tree into an XML result tree.

How does it Work?



• In the transformation process, XSLT uses XPath todefine parts of the source document that match oneor more predefined templates.

• When a match is found, XSLT will transform thematching part of the source document into theresult document.

• The parts of the source document that do notmatch a template will end up unmodified in theresult document.

• Not all Internet browsers have full support for

XSLT.

Support for XSLT



• Internet Explorer 5 is Bad• Internet Explorer 6 is Better

• Netscape 6 isn't fully supporting the official W3C

XSLT Recommendation. However, most of theexamples in this tutorial will also work in Netscape6.

• Netscape 7 supports the official W3C XSLTRecommendation.

• Internet Explorer MSXML Parser : MSXML Parser3.0 is the XML parser that is shipped with IE 6.0 andWindows XP.

Correct Style Sheet Declaration



• The root element that declares the document to bean XSL style sheet is <xsl:stylesheet> or<xsl:transform>.

• Example : <xsl:stylesheet version="1.0"xmlns:xsl=

"http://www.w3.org/1999/XSL/Transform">

<xsl:transform version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

• Or :

Start with your XML Document



• We want to transform the following XMLdocument ("cdcatalog.xml") into XHTML:

<?xml version="1.0" encoding="ISO-8859-1"?> <catalog>

<cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company>

<price>10.90</price> <year>1985</year>

</cd> ..

. </catalog>

Create an XSL Style Sheet ("cdcatalog.xsl") <?xml version="1.0" encoding="ISO-8859-1"?>

"



<xsl:stylesheet version="1.0xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body>

<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Title</th> <th align="left">Artist</th>

</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>

</tr> </xsl:for-each> </table>

</body> </html> </xsl:template>

</xsl:stylesheet> (“http://www.w3.org/TR/WD-xsl”)

Link the XSL Style Sheet to the XML Document



<?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/xsl"

href="cdcatalog.xsl"?> <catalog>

<cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year>

</cd> ...

</catalog>

• Finally, add an XSL Style Sheet reference to yourXML document ("cdcatalog.xml"):

XSLT uses Templates• The <xsl:template> element contains rules to apply



when a specified node is matched.• The match attribute is used to associate the

template with an XML element.

My CD Collection

..

ArtistTitle

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2>

<table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>

</tr> <tr> <td>.</td> <td>.</td>

</tr> </table> </body>

</html> </xsl:template> </xsl:stylesheet>

XSLT uses Templates

• Since the style sheet is an XML document itself, the



document begins with an xml declaration: <?xmlversion="1.0" encoding="ISO-8859-1"?>.

• The <xsl:stylesheet> tag defines the start of the

style sheet.

• The <xsl:template> tag defines the start of atemplate. The match="/" attribute associates

(matches) the template to the root (/) of the XMLsource document.

• The rest of the document contains the template

itself, except for the last two lines that defines theend of the template and the end of the style sheet.

The <xsl:value-of> Element

• The <xsl:value-of> element can be used to select



the value of an XML element and add it to theoutput stream of the transformation:

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1">

<tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>

</tr> <tr> <td><xsl:value-of Select="catalog/cd/title"/></td> <td><xsl:value-of select="catalog/cd/artist"/></td>

</tr> </table>

</body> </html>

</xsl:template> </xsl:stylesheet>

The <xsl:for-each> Element

• The XSL <xsl:for-each> element can be used to



select every XML element of a specified node set: <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>

</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>

</tr> </xsl:for-each>

</table> </body> </html>


Filtering the Output

• We can filter the output from an XML file byddi i i h l ib i h



adding a criterion to the select attribute in the<xsl:for-each> element.

<xsl:for-each select="catalog/cd[artist='Bob Dylan']">

• Legal filter operators are:

• = (equal)

• != (not equal)• < less than

• > greater than

The <xsl:for-each> Element (example)

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1 0"



<xsl:stylesheet version= 1.0xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body>

<h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32">

<th>Title</th> <th>Artist</th>

</tr> <xsl:for-each select="catalog/cd[artist='Bob Dylan']"> <tr>

<td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>

</tr>

</xsl:for-each> </table>

</body> </html>


The <xsl:sort> element is used to sort the output.

• To output the XML file as an XHTML file, and

t it t th ti i l dd t l t



sort it at the same time, simply add a sort elementinside the for-each element in your XSL file:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>

</tr> <xsl:for-each select="catalog/cd"> <xsl:sort select="artist"/> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>

</tr> </xsl:for-each>



The <xsl:if> element• To put a conditional if test against the content of

th fil i l dd < l if> l t t



the file, simply add an <xsl:if> element to yourXSL document like this:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>Title</th>

<th>Artist</th> </tr> <xsl:for-each select="catalog/cd"> <xsl:if test="price > 10"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td>

</tr> </xsl:if> </xsl:for-each>



The <xsl:choose> element

• To insert a conditional choose test against thef h XML fil i l dd h



• To insert a conditional choose test against thecontent of the XML file, simply add the<xsl:choose>, <xsl:when>, and <xsl:otherwise>elements to your XSL document like this:

<xsl:choose>

<xsl:when test="price > 10">

... some code ...

</xsl:when>

<xsl:otherwise>

... some code ....

</xsl:otherwise>

</xsl:choose>

The <xsl:choose> element (example)


<xsl:stylesheet version="1.0"xmlns:xsl="http://www w3 org/1999/XSL/Transform">



<xsl:stylesheet version 1.0xmlns:xsl= http://www.w3.org/1999/XSL/Transform > <xsl:template match="/"> <html> <body> <h2>My CD Collection</h2> <table border="1">

<tr bgcolor="#9acd32"> <th>Title</th> <th>Artist</th>

</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td>

<xsl:choose> <xsl:when test="price > 10"> <td bgcolor="#ff00ff"> <xsl:value-of select="artist"/></td>

</xsl:when> <xsl:otherwise> <td><xsl:value-of select="artist"/></td>

</xsl:otherwise> </xsl:choose> </tr> </xsl:for-each>

</table> </body></html>

</xsl:template></xsl:stylesheet>

The <xsl:apply-templates> Element

<?xml version="1 0" encoding="ISO-8859-1"?>

• The <xsl:apply-templates> element applies a template rule tothe current element or to the current element's child nodes.



<?xml version= 1.0 encoding= ISO 8859 1 ?> <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html> <body>

<h2>My CD Collection</h2> <xsl:apply-templates/> </body> </html> </xsl:template> <xsl:template match="cd"> <p>

<xsl:apply-templates select="title"/> <xsl:apply-templates select="artist"/> </p> </xsl:template> <xsl:template match="title"> Title: <span style="color:#ff0000">

<xsl:value-of select="."/></span>

<br /> </xsl:template> <xsl:template match="artist"> Artist: <span style="color:#00ff00"> <xsl:value-of select="."/></span> <br /> </xsl:template>

</xsl:stylesheet>

A JavaScript Solution

• A more versatile solution would be to use a JavaScript to do



A more versatile solution would be to use a JavaScript to dothe XML to XHTML transformation.

• By using JavaScript, we can:

• do browser-specific testing• use different style sheets according to browser and user

needs

• One of the design goals for XSLT was to make it possible totransform data from one format to another, supportingdifferent browsers and different user needs.

A JavaScript Solution (Example - 1)

• Take a new look at the XML document that you saw in theprevious chapters:



<?xml version="1.0" encoding="ISO-8859-1"?> <catalog> <cd> <title>Empire Burlesque</title> <artist>Bob Dylan</artist> <country>USA</country> <company>Columbia</company> <price>10.90</price> <year>1985</year>

</cd> ...

</catalog>

previous chapters:



• And the accompanying XSL style sheet :



g <xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/"> <html>

<body> <h2>My CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">Title</th> <th align="left">Artist</th>

</tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title" /></td> <td><xsl:value-of select="artist" /></td>

</tr>

</xsl:for-each> </table> </body> </html>



• Here is the source code needed to transform the XML file to

XHTML on the client:



<html> <body> <script type="text/javascript"> // Load XML

var xml = new ActiveXObject("Microsoft.XMLDOM")xml.async = falsexml.load("cdcatalog.xml")

// Load XSL var xsl = new ActiveXObject("Microsoft.XMLDOM")xsl.async = falsexsl.load("cdcatalog.xsl")

// Transform document.write(xml.transformNode(xsl))

</script> </body> </html>



XHTML on the server:



<%'Load XMLset xml = Server.CreateObject("Microsoft.XMLDOM")xml.async = false

xml.load(Server.MapPath("cdcatalog.xml"))

'Load XSLset xsl = Server.CreateObject("Microsoft.XMLDOM")xsl.async = falsexsl.load(Server.MapPath("cdcatalog.xsl"))

'Transform fileResponse.Write(xml.transformNode(xsl))%>

XSLT Elements (1)

6.0Applies a template rule from an imported style sheetapply-i t

NNIEDescriptionElement



6.05.0Creates an element node in the output documentelement

6.0Defines the characters and symbols to be used whenconverting numbers into strings, with the format-number()function

decimal-format

6.06.0Creates a copy of the current node (with child nodes and

attributes)

copy-of

6.05.0Creates a copy of the current node (without child nodes andattributes)

copy

6.05.0Creates a comment node in the result treecomment

6.05.0Used in conjunction with <when> and <otherwise> to

express multiple conditional tests

choose

6.06.0Calls a named templatecall-template

6.06.0Defines a named set of attributesattribute-set

6.05.0Adds an attributeattribute

6.05.0Applies a template rule to the current element or to thecurrent element's child nodes

apply-templates

imports

XSLT Elements (2)

6.0Specifies an alternate code to run if the processor does notsupport an XSLT element

fallback




6.06.0Defines the format of the output documentoutput

6.05.0Specifies a default action for the <choose> elementotherwise

6.06.0Determines the integer position of the current node andformats a number

number

6.0Replaces a namespace in the style sheet to a differentnamespace in the output

namespace-alias

6.06.0Writes a message to the output (used to report errors)message

6.06.0Declares a named key that can be used in the style sheetwith the key() function

key

6.06.0Includes the contents of one style sheet into another.Note: An included style sheet has the same precedence asthe including style sheet

include

6.06.0Imports the contents of one style sheet into another. Note:An imported style sheet has lower precedence than theimporting style sheet

import

6.05.0Contains a template that will be applied only if a specifiedcondition is true

if

6.05.0Loops through each node in a specified node setfor-each

support an XSLT element

XSLT Elements (3)

6 06 0Declares a local or global parameterparam




6.06.0Defines the value of a parameter to be passed into atemplate

with-param

6.05.0Specifies an action for the <choose> elementwhen

6.06.0Declares a local or global variablevariable

6.05.0Extracts the value of a selected nodevalue-of

6.06.0Defines the root element of a style sheettransform

6.05.0Writes literal text to the outputtext

6.05.0Rules to apply when a specified node is matchedtemplate

6.05.0Defines the root element of a style sheetstylesheet

6.06.0Defines the elements for which white space should beremoved

strip-space

6.06.0Sorts the outputsort

6.05.0Writes a processing instruction to the outputprocessing-

instruction

6.06.0Defines the elements for which white space should bepreserved

preserve-space

6.06.0Declares a local or global parameterparam

XSLT Functions


XHTML on the server:



Returns the URI of an unparsed entityunparsed-entity-uri()

Returns the value of the system propertiessystem-property()

Returns a node-set using the index specified by an

<xsl:key> element

key()

Returns a string value that uniquely identifies a specifiednode

generate-id()

Tests whether the function specified is supported by theXSLT processor

function-available()

Converts a number into a stringformat-number()

Tests whether the element specified is supported by theXSLT processor

element-available()

Used to access the nodes in an external XML documentdocument()

Returns the current nodecurrent()

DescriptionName

Bai Giang XML

Documents

Transcript of Bai Giang XML