XML DTD and Schema

XML DTD

The purpose of a DTD is to define the structure of an XML document.

 It defines the structure with a list of legal elements:

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

XML Schema

XML-based alternative to DTD, called XML Schema:

<xs:element name="note">

<xs:complexType>
  <xs:sequence>
    <xs:element name="to" type="xs:string"/>
    <xs:element name="from" type="xs:string"/>
    <xs:element name="heading" type="xs:string"/>
    <xs:element name="body" type="xs:string"/>
  </xs:sequence>
</xs:complexType>

</xs:element>

XML Validation

XML Validation

• XML with correct syntax is "Well Formed" XML.
• XML validated against a DTD is "Valid" XML.

A "Well Formed" XML document has correct XML syntax.

The syntax rules were described in the previous chapters:

• XML documents must have a root element
• XML elements must have a closing tag
• XML tags are case sensitive
• XML elements must be properly nested
• XML attribute values must be quoted

<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tom</to>
<from>Jerry</from>
<heading>Reminder</heading>
<body>Don't forget Birthday Party this weekend!</body>
</note>

Valid XML Documents

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

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

<!DOCTYPE note SYSTEM "Note.dtd">

<note>
<to>Tom</to>
<from>Jerry</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The DOCTYPE declaration in the example above, is a reference to an external DTD file.

XML Attributes

Why to Avoid XML Attributes?

Some of the problems with using attributes are:

• attributes cannot contain multiple values (elements can)
• attributes cannot contain tree structures (elements can)
• attributes are not easily expandable (for future changes)

1. Attributes are difficult to read and maintain.
2.  Use elements for data.
3.  Use attributes for information that is not relevant to the data.

Don't end up like this:

<note day="10" month="01" year="2008"
to="Tom" from="Jerry" heading="Reminder"
body="Don't forget Birthday Party this weekend!">
</note>

XML Attributes for Metadata

Sometimes ID references are assigned to elements.

These IDs can be used to identify XML elements in much the same way as the id attribute in HTML.

This example demonstrates this:

<messages>

  <note id="201">
    <to>Tom</to>
    <from>Jerry</from>
    <heading>Reminder</heading>
    <body>Don't forget Birthday Party this weekend!</body>
  </note>

  <note id="202">
    <to>Jerry</to>
    <from>Tom</from>
    <heading>Re: Reminder</heading>
    <body>I will not be available to make it to Birthday Party</body>
  </note>

</messages>

• The id attributes above are for identifying the different notes
•  It is not a part of the note itself.
• What I'm trying to say here is that metadata (data about data) should be stored as attributes, and the data itself should be stored as elements.

XML Attributes and Elements

XML Attributes

XML elements can have attributes, just like HTML.

Attributes provide additional information about an element.

XML Attributes

In HTML, attributes provide additional information about elements:

<img src="screen.gif">

<a href="example.asp">

Attributes often provide information that is not a part of the data. 

In the example below, the file type is irrelevant to the data, but can be important to the software that wants to manipulate the element:

<file type="gif">screen.gif</file>

XML Attributes Must be Quoted

Attribute values must always be quoted.

 Either single or double quotes can be used. For a person's sex, the person element can be written like this:

<person sex="female">

or like this:

<person sex='female'>

If the attribute value itself contains double quotes you can use single quotes, like in this example:

<gangster name='Adam "Shotgun" Zuckenberg'>

or you can use character entities:

<gangster name="Adam &quot;Shotgun&quot; Zuckenberg">

XML Elements vs. Attributes

Take a look at these examples:

<person sex="female">
  <firstname>Angelina</firstname>
  <lastname>Will Smith</lastname>
</person>

<person>
  <sex>female</sex>
  <firstname>Angelina</firstname>
  <lastname>Will Smith</lastname>
</person>

In the first example sex is an attribute. In the last, sex is an element. Both examples provide the same information.

There are no rules about when to use attributes or when to use elements. Attributes are handy in HTML. 

In XML my advice is to avoid them. 

Use elements instead.

Best Way Practised

The following three XML documents contain exactly the same information:

A date attribute is used in the first example:

<note date="10/01/2008">
  <to>Tom</to>
  <from>Jerry</from>
  <heading>Reminder</heading>
  <body>Don't forget Birthday Party this weekend!</body>
</note>

A date element is used in the second example:

<note>
  <date>10/01/2008</date>
  <to>Tom</to>
  <from>Jerry</from>
  <heading>Reminder</heading>
  <body>Don't forget Birthday Party this weekend!</body>
</note>

An expanded date element is used in the third: (THIS IS MY FAVORITE):

<note>
  <date>
    <day>10</day>
    <month>01</month>
    <year>2008</year>
  </date>
  <to>Tom</to>
  <from>Jerry</from>
  <heading>Reminder</heading>
  <body>Don't forget Birthday Party this weekend!</body>
</note>

XML Example

A lot of new Internet languages are created with XML.


Here are some examples:

• XHTML .
• WSDL for describing available web services.
• WAP and WML as markup languages for handheld devices.
• RSS languages for news feeds.
• RDF and OWL for describing resources and ontology.
• SMIL for describing multimedia for the web.

If developers have sense, future applications will exchange their data in XML since it is less time consuming and easily editable.

XML documents form a tree structure that starts at "the root" and branches to "the leaves".

An Example XML Document

XML documents use a self-describing and simple syntax:

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

<note>

  <to>Peter</to>

  <from>Jani</from>

  <heading>Birthday Reminder</heading>

  <body>Don't forget me this weekend!</body>

</note>

The first line is the XML declaration. It defines the XML version (1.0) and the encoding used (ISO-8859-1 = Latin-1/West European character set).

The next line describes the root element of the document (like saying: "this document is a note"):

<note>

The next 4 lines describe 4 child elements of the root (to, from, heading, and body):

<to>Peter</to>

<from>Jani</from>

<heading>Birthday Reminder</heading>

<body>Don't forget me this weekend!</body>

And finally the last line defines the end of the root element:

</note>

You can assume, from this example, that the XML document contains a note to Peter from Jani.

Don't you agree that XML is pretty self-descriptive?

• XML Documents Form a Tree Structure
• XML documents must contain a root element. This element is "the parent" of all other elements.
• The elements in an XML document form a document tree. The tree starts at the root and branches to the lowest level of the tree.
• All elements can have sub elements (child elements):

<root>

  <child>

    <subchild>.....</subchild>

  </child>

</root>

• The terms parent, child, and sibling are used to describe the relationships between elements. Parent elements have children.
• Children on the same level are called siblings (brothers or sisters).
• All elements can have text content and attributes (just like in HTML).

Benefits of XML

XML Simplifies Data Sharing :-

•  In the real world, computer systems and databases contain data in incompatible formats.
• XML data is stored in plain text format. 
• This provides a software- and hardware-independent way of storing data.
• This makes it much easier to create data that can be shared by different applications.

XML Simplifies Data Transport :-

• One of the most time-consuming challenges for developers is to exchange data between incompatible systems over the Internet.
• Exchanging data as XML greatly reduces this complexity, since the data can be read by different incompatible applications.

XML Simplifies Platform Changes :-

• Upgrading to new systems (hardware or software platforms), is always time consuming. Large amounts of data must be converted and incompatible data is often lost.
• XML data is stored in text format. This makes it easier to expand or upgrade to new operating systems, new applications, or new browsers, without losing data.

XML Makes Your Data More Available:-

• Different applications can access your data, not only in HTML pages, but also from XML data sources.
• With XML, your data can be available to all kinds of "reading machines" (Handheld computers, voice machines, news feeds, etc), and make it more available for blind people, or people with other disabilities.
• XML is Used to Create New Internet Languages
• A lot of new Internet languages are created with XML.

XML- Introduction

XML stands for eXtensible Markup Language.
XML is designed to transport and store data.
XML is important to know, and very easy to learn.
XML is mostly used on the websites where data changes frequently but the format of data storage and display is the same.
For eg : Yahoo ! Cricket, Stock Market Websites are few to name.
Here Feeding the Information on regular basis will be a tedious work rather using XML to do the same work will save time.


XML Document Example


<?xml version="1.0"?>
<note>
    <to>Ram</to>
    <from>Peter</from>
    <heading>Reminder</heading>
    <body>Don't forget birthday party this weekend!</body>
</note>

• XML was designed to transport and store data.
• HTML was designed to display data.

What You Should Already Know
Before you continue you should have a basic understanding of the following:

• HTML
• JavaScript

How Can XML be Used?

• It is used in many aspects of web development, often to simplify data storage and sharing.
• It Separates Data from HTML
• If you need to display dynamic data in your HTML document, it will take a lot of work to edit the HTML each time the data changes.(as mentioned at the start.)
• With XML, data can be stored in separate XML files.
•  This way you can concentrate on using HTML for layout and display, and be sure that changes in the underlying data will not require any changes to the HTML.
• With a few lines of JavaScript code, you can read an external XML file and update the data content of your web page.

Fixed Value Property in CSS

The fixed value of the position property means that the element will always be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties. 

For example, consider u see a red ball 50 pixels from the top of the browser. As you scroll down the page, that red ball stays in the same place. The code for this is:

In CSS type:

p {

  position:fixed;

  top:50px;

  left:650px;

}

The HTML code,

<div>

  <p><img src="red-ball.jpg"> /* Create a ball image in Photoshop of 50 by 50 px*/

</div>

renders the image you see that is 50px from the top of the browser and 650px from the left of the browser. Please notice that as you scroll up and down and page, the red ball stays in the same place.

Relative Position Property

Relative Position Property

The relative value of the position property specifies how the element will be positions relative to how it would have been positioned by default. 

It is used in combination with a direction (top, bottom, left, and right).

Let's view an example of relative position in action:

CSS Code

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

}

 

The HTML code,

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Default Position).

Example2

div {

  background-color:#FF00FF;

  width:250px;

  height:60px;

}

p {

  position:relative;

  top:15px;

}

<div>

  <p>Example to show relative position.

</div>

The Output is as follow:

Type the above code and see the output (Using Relative Position Property).

Absolute Position Property

Absolute Position Property in Cascading Style Sheet

The absolute value of the position property means that the element will be displayed in the same location within the browser, with the location being determined by top, bottom, left, or right properties.

The element will move with the rest of the content when scrolling. As an example, you will see a red ball 550 pixels from the top of the browser and 400 pixels from the left of the browser.

The code for this is:

p {

  position:absolute;

  top:50px;

  left:600px;

}

The HTML code,

<div>

  <p><img src="red-ball.jpg">

</div>

depicts that the image you see that is 50px from the top of the browser and 600px from the left of the browser. Please notice that as you scroll up and down and page, the red ball moves along with the rest of the page.

This is different from when we specify {position:fixed;}, when the red ball stays in the same place as the rest of the page moves.

Position Property in CSS

Position

The position property specifies what kind of position is used. Possible values include:

• Static (default): indicates that the element will be placed at the default location. Please note that if static is specified, values for the top, bottom, right, and left properties will have no effect.
• Absolute: places an element in relation to the actual browser window. The position of the element moves along with the rest of the content when the page is scrolled.
• Relative: specifies how the element will be positions relative to how it would have been positioned by default.
• Fixed: places an element in relation to the actual browser window. The position of the element remains fixed even when the page is scrolled.

From the list of possible values, we can see that the position property by itself does not have a lot of value. After all, what does {position:relative;} mean if there is no information on what it is relative to? 

So, clearly additional properties are needed to complement the position property.

They are as follows:

• top
• right
• left
• bottom
• overflow
• z-index
• absolute value

Link Property using CSS

Link

The default style for a link is blue font with an underline. This is, however, not always ideal. There are times when we want links to have a different style. This can be achieved using the following selectors:

• a:link: Specifies how the link looks if the page it links to has not yet been visited. 
• a:visited: Specifies how the link looks if the page it links to has already been visited. 
• a:hover: Specifies how the link looks like when the user mouses over the link. 
• a:active: Specifies how the link looks like when the user clicks on it.

Let's take a look at the following declaration:

a:link {color:#ffffff; text-decoration:none;}

a:visited {color:#aaaaaa; text-decoration:none;}

a:hover {font-size:20; color:#cccccc; text-decoration:underline;}

a:active {color:#bbbbbb; text-decoration:underline;}

What this means is the following:

1.  When the page is first loaded, the font color is white.
2.  Once the link is visited, the font color becomes black.
3.  When you mouse over the link, font size becomes 20, font color becomes grey, and an underline appears.
4.  When you click on the link, font color becomes silver, and the underline remains.

Word Spacing in CSS

Word-Spacing

The word-spacing property controls the amount of space between words.

For example, with a CSS declaration of,

p {

  word-spacing:5px;

}

The following HTML,

<html>

<head></head>

 <body>

<p>Words here are separated by 5px.</p>

</body>

</html>

will render the following Output :-

Words here are separated by 5px.

Text Transform in CSS

Text-Transform

The text-transform property controls how upper and lower cases are displayed. Possible values are:

• capitalize: capitalizes the first letter in a word
• uppercase: makes the entire word upper case
• lowercase: makes the entire word lower case
• none: no transform is performed

For example, if we apply each of the following CSS style to the text "this is a CRUIZE SHIP", we get the following:

CSS Declaration      

p {

  text-transform:capitalize;

}

Output 

This Is A Cruize Ship.

p {

  text-transform:uppercase;

}

Output 

THIS IS A CRUIZE SHIP

p {

  text-transform:lowercase;

}

Output 

this is a cruize ship.

Text Indent in CSS

TEXT-INDENT

The text-indent property specifies how much space to indent before the first line of the text in a block. Both length and percentage can be used. For example, with a CSS declaration of,

p {

  text-indent:15px;

}

The following HTML,

 <html>

<head> </head>

<body>

<p>This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

</p>

</body>

</html>

The Output displayed is as follow:

This text is indented by 15px at the beginning of the paragraph. Subsequent lines are not indented.

Text Decoration in CSS

Text-Decoration

The text-decoration property specifies how text is decorated. Possible values are:

• underline: adds an underline to the text
• overline: adds a line on top of the text
• line-through: adds a line through the middle of the text.
• blink: causes the text to blink.

Examples below:

CSS Declaration      

p {

  text-decoration:underline;

}

Output 

An underline example.

p {

  text-decoration:overline;

}

Output 

An overline example.

p {

  text-decoration:line-through;

}

Output 

A strikethrough (line-through) example.

Text Alignment in CSS

Text-Align

The text-align property specifies how text is justified. Possible values are:

• Left: left-justified
• Right: right-justified
• Center: text is centered
• Justified: text is both right- and left-justified

Examples below:

CSS Declaration      

p {

  text-align:left;

}

Output

This sentence will be left-justified.

p {

  text-align:right;

}

 Output

This sentence is right-justified.

p {

  text-align:center;

}

Output

This sentence will be centered aligned.

p {

  text-align:justify;

}

 Output

This sentence will be fully-justified.

Letter Spacing and Line Height in CSS

Letter Spacing

The letter-spacing property specifies the amount of space between characters. For example, with a CSS declaration of,

p {

  letter-spacing:8px;

}

The following HTML,

<p>8px between letters</p>

renders output as 

8  px  between  letters

Line-Height

The line-height property specifies the amount of space between lines. For example, with a CSS declaration of,

p {

  line-height:30px;

}

The following HTML,

<p>30px between line 1<br>and line 2.</p>

renders output as

30px between line 1

and line 2.

Direction in CSS

The direction property specifies the text direction. Possible values are 'ltr' and 'rtl'.

For example, with a CSS declaration of,

p {

  direction:ltr;

}

The following HTML,

<p>Left Side Direction</p>

renders output as follow

Left Side Direction

With a CSS declaration of,

p {

  direction:rtl;

}

The following HTML,

<p>Right Side Direction</p>

renders output as follow

Right Side Direction