Unit 3

XML stands for Extensible Markup Language. It is a text-based markup

language derived from Standard Generalized Markup Language (SGML).
XML tags identify the data and are used to store and organize the data, rather
than specifying how to display it like HTML tags, which are used to display the
data. XML is not going to replace HTML in the near future, but it introduces new
possibilities by adopting many successful features of HTML.
There are three important characteristics of XML that make it useful in a variety
of systems and solutions −
 XML is extensible − XML allows you to create your own self-descriptive
tags, or language, that suits your application.
 XML carries the data, does not present it − XML allows you to store
the data irrespective of how it will be presented.
 XML is a public standard − XML was developed by an organization
called the World Wide Web Consortium (W3C) and is available as an open
standard.

collect XML Usage

A short list of XML usage says it all −
 XML can work behind the scene to simplify the creation of HTML
documents for large web sites.
 XML can be used to exchange the information between organizations and
systems.
 XML can be used for offloading and reloading of databases.
 XML can be used to store and arrange the data, which can customize your
data handling needs.
 XML can easily be merged with style sheets to create almost any desired
output.
 Virtually, any type of data can be expressed as an XML document.

What is Markup?
XML is a markup language that defines set of rules for encoding documents in a
format that is both hu

man-readable and machine-readable

Example XML tag
<message>
<text>Hello, world!</text>
</message>
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
 <phone>(011) 123-4567</phone>
</contact-info>

Tags and Elements

An XML file is structured by several XML-elements, also called XML-nodes or
XML-tags. The names of XML-elements are enclosed in triangular brackets < >
as shown below −
<element>

XML Text
The names of XML-elements and XML-attributes are case-sensitive, which
means the name of start and end elements need to be written in the same case.
To avoid character encoding problems, all XML files should be saved as Unicode
UTF-8
We can broadly categorize XML tags as follows −

Start Tag
The beginning of every non-empty XML element is marked by a start-tag.
Following is an example of start-tag −
<address>

End Tag
Every element that has a start tag should end with an end-tag. Following is an
example of end-tag −
</address>
Note, that the end tags include a solidus ("/") before the name of an element.

Empty Tag
The text that appears between start-tag and end-tag is called content. An
element which has no content is termed as empty. An empty element can be
represented in two ways as follows −
A start-tag immediately followed by an end-tag as shown below −
<hr></hr>
A complete empty-element tag is as shown below −
<hr />
Empty-element tags may be used for any element which has no content.

XML Tags Rules

Following are the rules that need to be followed to use XML tags −
Rule 1
XML tags are case-sensitive. Following line of code is an example of wrong
syntax </Address>, because of the case difference in two tags, which is treated
as erroneous syntax in XML.
<address>This is wrong syntax</Address>
Following code shows a correct way, where we use the same case to name the
start and the end tag.
<address>This is correct syntax</address>

Rule 2
XML tags must be closed in an appropriate order, i.e., an XML tag opened inside
another element must be closed before the outer element is closed. For
example −
<outer_element>
<internal_element>
This tag is closed before the outer_element
</internal_element>
</outer_element>
DHTML

DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic

HTML.
Dynamic HTML is not a markup or programming language but it is a term
that combines the features of various web development technologies for
creating the web pages dynamic and interactive.
The DHTML application was introduced by Microsoft with the release of the
4th version of IE (Internet Explorer) in 1997.

Components of Dynamic HTML

DHTML consists of the following four components or languages:

o HTML 4.0

o CSS

o JavaScript

o DOM.

HTML
HTML is a client-side markup language, which is a core component of the
DHTML. It defines the structure of a web page with various defined basic
elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or
developers for controlling the style and layout of the HTML elements on the
web pages.
JavaScript
JavaScript is a scripting language which is done on a client-side. The various
browser supports JavaScript technology. DHTML uses the JavaScript
technology for accessing, controlling, and manipulating the HTML elements.
The statements in JavaScript are the commands which tell the browser for
performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a standard
interface of programming for HTML. It is mainly used for defining the objects
and properties of all elements in HTML.

Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):

o It is used for designing the animated and interactive web pages that
are developed in real-time.

o DHTML helps users by animating the text and images in their

documents.

o It allows the authors for adding the effects on their pages.

o It also allows the page authors for including the drop-down menus or
rollover buttons.

o This term is also used to create various browser-based action games.

o It is also used to add the ticker on various websites, which needs to

refresh their content automatically

Difference between HTML and DHTML:

HTML DHTML
(Hypertext (Dynamic
Markup Hypertext
language) Markup
 language)

1. HTML is simply 1. DHTML is not a

a markup language, but it is
language. a set of
technologies of
web development.

2. It is used for 2. It is used for

developing and creating and
creating web designing the
pages. animated and
interactive web
sites or pages.

3. This markup 3. This concept

language creates creates dynamic
static web pages. web pages.

4. It does not 4. It may contain

contain any the code of server-
server-side side scripting.
scripting code.
 5. The files of 5. The files of
HTML are stored DHTML are stored
with the .html with the .dhtm
or .htm extension extension in a
in a system. system.

6. A simple page 6. A page which is

which is created created by a user
by a user without using the HTML,
using the scripts CSS, DOM, and
or styles called as JavaScript
an HTML page. technologies called
a DHTML page.

7. This markup 7. This concept

language does needs database
not need connectivity
database because it interacts
connectivity. with users.

DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of the
page as dynamic. We can easily type the JavaScript code within the <head>
or <body> tag of a HTML page. If we want to add the external source file of
JavaScript, we can easily add using the <src> attribute.
Following are the various examples, which describes how to use the
JavaScript technology with the DHTML:

Document.write() Method
The document.write() method of JavaScript, writes the output to a web page.
Example 1: The following example simply uses
the document.write() method of JavaScript in the DHTML. In this example,
we type the JavaScript code in the <body> tag.

1. <HTML>

2. <head>

3. <title>

4. Method of a JavaScript

5. </title>

6. </head>

7. <body>

8. <script type="text/javascript">

9. document.write("JavaTpoint");

10. </script>

11. </body>

12. </html>

JavaScript and HTML event

A JavaScript code can also be executed when some event occurs. Suppose, a
user clicks an HTML element on a webpage, and after clicking, the JavaScript
function associated with that HTML element is automatically invoked. And,
then the statements in the function are performed.
Example 1: The following example shows the current date and time with the
JavaScript and HTML event (Onclick). In this example, we type the JavaScript
code in the <head> tag.

1. <html>

2. <head>

3. <title>

4. DHTML with JavaScript

5. </title>

6. <script type="text/javascript">

7. function dateandtime()

8. {
 9. alert(Date());

10. }

11. </script>

12. </head>

13. <body bgcolor="orange">

14. <font size="4" color="blue">

15. <center> <p>

16. Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>

17. # to check the today's date and time.

18. </p> </center>

19. </font>

20. </body>

21. </html>

DHTML CSS
We can easily use the CSS with the DHTML page with the help of JavaScript
and HTML DOM. With the help of this.style.property=new
style statement, we can change the style of the currently used HTML
element. Or, we can also update the style of any particular HTML element
by document.getElementById(id).style.property =
new_style statement.
Example 1: The following example uses the DHTML CSS for changing the
style of current element:

1. <html>

2. <head>

3. <title>

4. Changes current HTML element

5. </title>

6. </head>

7. <body>

8. <center>

9. <h1 onclick="this.style.color='blue'"> This is CSS COLOR </h1>

<center>

10.

11. </body> CSS

12. </html>

CSS

CSS is the language we use to style an HTML document.

CSS describes how HTML elements should be displayed.

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p{
font-family: verdana;
font-size: 20px;
 Applying Grouping Selectors in CSS
We have applied grouping selector using element name and using id of the
element.
 We have used div and article element as grouping selector to
apply background-color, color and text-align properties to div and article
tag making it center aligned with green background and white text-color.
 We have also used id1 and id2 id selectors as group selectors to
apply padding and border to h4 and span element.