Web Designing with Internet Marketing and Social Marketing.

XML DTD and Schema

2012-05-23T10:19:00.003+05:30

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

2012-05-23T10:17:00.005+05:30

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

2012-05-22T10:17:00.000+05:30

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)

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

Don't end up like this:

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:

<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

2012-05-22T10:12:00.005+05:30

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:

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:

or like this:

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

or you can use character entities:

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

2012-05-17T08:59:00.000+05:30

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>

<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>

<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>

</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

2012-05-17T08:52:00.006+05:30

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

2012-05-15T10:05:00.005+05:30

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

2012-04-06T16:07:00.001+05:30

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

2012-03-31T08:15:00.002+05:30

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

2012-03-27T11:02:00.002+05:30

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>

</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

2012-03-27T10:58:00.001+05:30

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

2012-03-26T15:26:00.003+05:30

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:

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

Word Spacing in CSS

2012-03-26T15:22:00.004+05:30

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>

<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

2012-03-24T12:40:00.003+05:30

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

2012-03-24T12:36:00.001+05:30

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>

<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

2012-03-24T12:33:00.004+05:30

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

2012-03-23T17:57:00.002+05:30

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

2012-03-23T17:54:00.000+05:30

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

2012-03-23T17:49:00.005+05:30

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

Class verses ID

2012-03-22T20:26:00.002+05:30

Class vs ID

The difference between ID and class is that an ID selector can be called only once in a document, while a class selector can be called multiple times in a document.
The second difference is that ID can be called by Javascript's getElementByID function.
There is no hard rule on when to use ID and when to use Class.
Use class as much as possible for maximum flexibility, with the only exception being when you want to use Javascript's getElementByID function, in which case you need use ID.
Class and ID names are both Case Sensitive. For example, .classabc and .ClassABC are two different classes.

ID in CSS

2012-03-22T20:22:00.001+05:30

ID is specified by including a number sign (#) before the selector name.

The syntax for declaring an ID selector is as follows:

#[ID Name] {

property:value;

...

}

For example,

#footer {

color:#bbbbbb;

}

To apply this style to the HTML, using the following code:

<html>

</head>

<body>

<p id="footer">This is a sample using an ID selector.</p>

</body>

</html>

The above HTML code renders:

This is a sample using an ID selector.

Multiple Class Declaration

2012-03-22T20:17:00.001+05:30

In Cascading Style Sheet we can specify multiple classes to a particular attribute mentioned inside a Div Tag.

Multiple Classes

It is possible to include multiple classes at the same time. For example, assuming we have the following CSS declaration,

.applylarge {

font-size:20px;

}

.applyred {

color:#aaaaaa;

}

the following HTML,

<p class="applylarge applyred">This is an example of multiple classes.</p>

This would render following Output,

This is an example of multiple classes.

Class in CSS

2012-03-21T08:02:00.002+05:30

Class

Class is specified by including a period (.) before the selector name.

The syntax for declaring a Class selector is as follows:

.[Class Name] {

property:value;

...

}

For example

.abc {

color:#bbbbbb;

}

To apply this style to the HTML, using the following code:

<html>

<head>

</head>

<body>

<p class="abc">This is a sample using a Class selector.</p>

</body>

</html>

The above HTML code renders the output as follow:

This is a sample using a Class selector.

We can also specify different instances of a class selector.

This is achieved by using the following syntax:

[Type Selector].[Class Name] {

property:value;

...

}

For example, if we have the following CSS declaration,

b.special {

color:#aaaaaa;

}

i.special {

color:#bbbbbb;

}

The following HTML,

<html>

<head>

</head>

<body>

This shows how <b class="special">different instances</b> of a selector <i class="special">can be specified</i>.

</body>

</html>

The Output will be as follow:

This shows how different instances of a selector can be specified.

CSS Class Declaration

2012-03-21T07:58:00.002+05:30

CSS Class Declaration for Div and Span Tag.

Example for Div Tag.

We declare class “Large” in css as follow:

.large {

color: #00FF00;

font-family:arial;

font-size: 4pt;

}

The HTML code

<html>

<body>

This is how class is declared inside DIV.

</div>

</body>

</html>

The Output is as follow

This is how class is declared inside DIV.

Span Tag Class Declaration with example.

For example, if we have the following CSS declaration:

.largefont {

color: #aaaaaa;

font-family:arial;

font-size: 6px;

}

The HTML code

<html>

<body>

Span is not at the <span class="largefont">block level</span>

</body>

</html>

gets displayed as

Span is not at the block level.

Division Tag - Span Tag

2012-03-18T12:17:00.002+05:30

Division Tag

Div is Short Form of Division Tag.
The <div> element defines logical division within the document.
These means when you see or use a div tag, you are indicating that the enclosed content is a specific section of the webpage.
Now a day’s instead of table <div> tag is used more prominently as it is SEO friendly and also makes the coder job easier.
Div is a Block Level Element / Content .
<div> tag is not a replacement of the <p> tag.
<p> tag is for paragraph, <div> tag is for more general division within a document.
<div> element is typically used in XHTML and CSS documents to Position portion of the page.

Span

<span> tag has similar property of <div> tag the only difference is it changes the style of the text it encloses.
Span tag goes to finer level so we can span to format single character if needed.
It is not a block level content.