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

If you want to study these subjects first, find the tutorials on our Home page.

What is XML?

• XML stands for EXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to carry data, not to display data
• XML tags are not predefined. You must define your own tags
• XML is designed to be self-descriptive
• XML is a W3C Recommendation

The Difference Between XML and HTML

XML is not a replacement for HTML.

XML and HTML were designed with different goals:

• XML was designed to transport and store data, with focus on what data is
• HTML was designed to display data, with focus on how data looks

HTML is about displaying information, while XML is about carrying information.

XML Does Not DO Anything

Maybe it is a little hard to understand, but XML does not DO anything. XML was created to structure, store, and transport information.

The following example is a note to Tove, from Jani, stored as XML:

The note above is quite self descriptive. It has sender and receiver information, it also has a heading and a message body.

But still, this XML document does not DO anything. It is just information wrapped in tags. Someone must write a piece of software to send, receive or display it.

With XML You Invent Your Own Tags

The tags in the example above (like <to> and <from>) are not defined in any XML standard. These tags are “invented” by the author of the XML document.

That is because the XML language has no predefined tags.

The tags used in HTML are predefined. HTML documents can only use tags defined in the HTML standard (like <p>, <h1>, etc.).

XML allows the author to define his/her own tags and his/her own document structure.

XML is Not a Replacement for HTML

XML is a complement to HTML.

It is important to understand that XML is not a replacement for HTML. In most web applications, XML is used to transport data, while HTML is used to format and display the data.

My best description of XML is this:

XML is a software- and hardware-independent tool for carrying information.

XML is a W3C Recommendation

XML became a W3C Recommendation on February 10, 1998.

To read more about the XML activities at W3C, please read our W3C Tutorial.

XML is Everywhere

XML is now as important for the Web as HTML was to the foundation of the Web.

XML is the most common tool for data transmissions between all sorts of applications.

source from: w3schools

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

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.

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.

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

If they DO have sense, future applications will exchange their data in XML.

The future might give us word processors, spreadsheet applications and databases that can read each other’s data in XML format, without any conversion utilities in between.

source from: w3schools

An Example XML Document

XML documents use a self-describing and simple syntax:

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”):

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

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

You can assume, from this example, that the XML document contains a note to Tove 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):

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

Example:

The image above represents one book in the XML below:

The root element in the example is <bookstore>. All <book> elements in the document are contained within <bookstore>.

The <book> element has 4 children: <title>,< author>, <year>, <price>.

source from: w3schools

All XML Elements Must Have a Closing Tag

In HTML, some elements do not have to have a closing tag:

In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

Note: You might have noticed from the previous example that the XML declaration did not have a closing tag. This is not an error. The declaration is not a part of the XML document itself, and it has no closing tag.

XML Tags are Case Sensitive

XML tags are case sensitive. The tag <Letter> is different from the tag <letter>.

Opening and closing tags must be written with the same case:

Note: ”Opening and closing tags” are often referred to as “Start and end tags”. Use whatever you prefer. It is exactly the same thing.

XML Elements Must be Properly Nested

In HTML, you might see improperly nested elements:

In XML, all elements must be properly nested within each other:

In the example above, “Properly nested” simply means that since the <i> element is opened inside the <b> element, it must be closed inside the <b> element.

XML Documents Must Have a Root Element

XML documents must contain one element that is the parent of all other elements. This element is called the root element.

XML Attribute Values Must be Quoted

XML elements can have attributes in name/value pairs just like in HTML.

In XML, the attribute values must always be quoted.

Study the two XML documents below. The first one is incorrect, the second is correct:

The error in the first document is that the date attribute in the note element is not quoted.

Entity References

Some characters have a special meaning in XML.

If you place a character like “<” inside an XML element, it will generate an error because the parser interprets it as the start of a new element.

This will generate an XML error:

To avoid this error, replace the “<” character with an entity reference:

There are 5 predefined entity references in XML:

Note: Only the characters “<” and “&” are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it.

Comments in XML

The syntax for writing comments in XML is similar to that of HTML.

<!– This is a comment –>

White-space is Preserved in XML

HTML truncates multiple white-space characters to one single white-space:

With XML, the white-space in a document is not truncated.

XML Stores New Line as LF

In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF). In Unix applications, a new line is normally stored as an LF character. Macintosh applications also use an LF to store a new line.

XML stores a new line as LF.

source from: w3schools

Change Style of the Current HTML Element

To change the style of the current HTML element, use the following statement:

this.style.property=new style

Change Style of a Specific HTML Element

To change the style of a specific HTML element, use the following statement:

document.getElementById(id).style.property=new style

source from: w3schools

HTML Events

Every element on an HTML page has events which can trigger a JavaScript.

For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

Examples of events:

• A mouse click
• A web page or an image loading
• Mousing over a hot spot on the web page
• Selecting an input field in an HTML form
• Submitting an HTML form
• A keystroke

In the following example, the content of the h1 element will change when a user clicks on it:

You can also add the script in the head section, and then call a function from the event handler:

source from: w3schools

The HTML DOM is:

• A Document Object Model for HTML
• A standard programming interface for HTML
• Platform- and language-independent
• A W3C standard

The HTML DOM defines the objects and properties of all HTML elements, and the methods(interface) to access them.

In other words: The HTML DOM is a standard for how to get, change, add, or delete HTML elements.

Change an HTML Element

The following example changes the content of an h1 element:

Example explained:

• The HTML document above contains an h1 element with id=”header”
• We use the HTML DOM to get the element with id=”header”
• A JavaScript changes the content (innerHTML) of that element

Change an HTML Attribute

The following example changes the src attribute of an img element:

Example explained:

• The HTML document above contains an img element with id=”image”
• We use the HTML DOM to get the element with id=”image”
• A JavaScript changes the src attribute of that element from “smiley.gif” to “landscape.jpg”

source from: w3schools

Date: Thu Mar 22 2012 17:02:23 GMT+0700 (SE Asia Standard Time)

JavaScript Alone

In JavaScript, the statement: document.write(), is used to write output to a web page.

Example

The following example uses JavaScript to display the current date and time on a page:

JavaScript and the HTML DOM

A JavaScript can also be used to change the content or attributes of HTML elements.

To change the content of an HTML element:

To change the attribute of an HTML element:

You will learn more about JavaScript and the HTML DOM in the next chapter of this tutorial.

JavaScript and HTML Events

A JavaScript can also be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, use the following event attribute:

You will learn more about JavaScript and HTML events in a later chapter.

JavaScript and CSS

A JavaScript can also change the style of HTML elements.

To change the style of an HTML element:

You will learn more about JavaScript and CSS in a later chapter of this tutorial.

source from: w3schools

What you should already know

Before you continue you should have a basic understanding of the following:

• HTML
• CSS
• JavaScript

If you want to study these subjects first, find the tutorials on our Home Page.

DHTML is NOT a Language

DHTML stands for Dynamic HTML.

DHTML is NOT a language or a web standard.

To most people DHTML means the combination of HTML, JavaScript, DOM and CSS.

According to the World Wide Web Consortium (W3C):
“Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.”

HTML

The W3C HTML 4 standard has rich support for dynamic content:

• HTML supports JavaScript
• HTML supports the Document Object Model (DOM)
• HTML supports HTML Events
• HTML supports Cascading Style Sheets (CSS)

DHTML is about using these features, to create dynamic and interactive web pages.

JavaScript

JavaScript is the most popular scripting language on the internet, and it works in all major browsers.

DHTML is about using JavaScript to control, access and manipulate HTML elements.

You can read more about JavaScript in the next chapter of this tutorial.

HTML DOM

The HTML DOM is a W3C standard. It describes the Document Object Model for HTML.

The HTML DOM defines a standard way for accessing and manipulating HTML documents.

DHTML is about using the DOM to access and manipulate HTML elements.

You can read more about the HTML DOM in a later chapter of this tutorial.

HTML Events

HTML events are a part of the HTML DOM.

DHTML is about creating web pages that reacts to (user)events.

You can read more about events in a later chapter of this tutorial.

CSS

CSS defines how to display HTML elements.

DHTML is about using JavaScript and the HTML DOM to change the style and positioning of HTML elements.

You can read more about CSS in a later chapter of this tutorial.

source from: w3schools

CSS3 @keyframes Rule

To create animations in CSS3, you will have to learn about the @keyframes rule.

The @keyframes rule is where the animation is created. Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.

Browser Support

Internet Explorer and Opera do not yet support the @keyframes rule or the animation property.

Firefox requires the prefix -moz-, while Chrome and Safari require the prefix -webkit-.

Example

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}

CSS3 animation

When the animation is created in the @keyframe, bind it to a selector, otherwise the animation will have no effect.

Bind the animation to a selector by specifying at least these two CSS3 animation properties:

• Specify the name of the animation
• Specify the duration of the animation

Example

Binding the “myfirst” animation to a div element, duration: 5 seconds:

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

Try it yourself »

Note: You must define the name and the duration of the animation. If duration is omitted, the animation will not run, because the default value is 0.

What are Animations in CSS3?

An animation is an effect that lets an element gradually change from one style to another.

You can change as many styles you want, as many times you want.

Specify when the change will happen in percent, or the keywords “from” and “to”, which is the same as 0% and 100%.

0% is the beginning of the animation, 100% is when the animation is complete.

For best browser support, you should always define both the 0% and the 100% selectors.

Example

Change the background color when the animation is 25%, 50%, and again when the animation is 100% complete:

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

Try it yourself »

Example

Change the background color and position:

@keyframes myfirst
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

Try it yourself »

CSS3 Animation Properties

The following table lists the @keyframes rule and all the animation properties:

The two examples below sets all the animation properties:

Example

Run an animation called myfirst, with all the animation properties set:

div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox: */
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari and Chrome: */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}

Try it yourself »

Example

The same animation as above, using the shorthand animation property:

div
{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari and Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}

source from: w3schools