DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript

Dynamic HTML
Presented by
SOUMEN SANTRA
MCA, M.Tech, SCJP, MCP
1

CONTENTS
• DHTML
• DHTML : Features
• DHTML : Advantages
• HTML
• HTML : Output
• CSS
• CSS : Description
• CSS : Example
• CSS : Output
• Scripting : JavaScript
• Scripting Example
• Scripting Output
• Dom
• HTML : DOM Tree
• DOM : Advantages
2

DHTML
It stands for Dynamic HyperText Markup Language.
"Dynamic" is defined as the ability of the browser to alter a web
page's look and style after the document has loaded.
It uses languages features to build dynamic web pages by CSS.
3

DHTML
All these three components are linked via Document Object Model
(DOM).
 Document Object Model is to provide a standard programming
interface.
DHTML is NOT a scripting language
It uses different technologies.
4

DHTML : Features
Simplest feature is making the page dynamic.
It Can be used to create animations, games, applications.
It builds Dynamic web pages which is simple and no plug-in is
required.
It Facilitates to reuse the events, methods and properties of code.
It makes faster and more interactive Web pages for end users.
5

Dynamic HTML
Html
Content
CSS
Style Rules
Special
appearance
Scripting
Language
ControlControl
6

DHTML : Advantages
• It can make your browser dynamic and interactive.
• It Validates input’s given by the user can be done at the
client side, without connection to the server.
• It helps to separate Content and design using Style sheets
& uniformity of the site can be maintained using developers.
7

HTML
• It Stands for Hyper Text Markup Language.
• It is a Text file containing small markup tags.
• Its extension either .html or .htm.
• It can be created by using a simple Text Editor like Notepad.
• It executes with the help of web browser e.g. Google
Chrome, Internet Explorer etc.
8

HTML Example Code
10
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
</HEAD>
<BODY>
<P><h1><b>My First Heading</b></h1></P>
</BODY>
</HTML>

CSS
(Cascading Style Sheets )
11
element
Padding
Border
Margin
CSS: Model

CSS : Description
• It stands for Cascading Style Sheet
• It is defining the style and layout model for HTML documents.
• There are two types implementation
i) Internal
ii) External
• It’ extension is .css and written in Notepad.
12

CSS : Example
13
<HTML>
<HEAD>
<TITLE>Sample</TITLE>
<STYLE TYPE="text/css">
BODY {
background-color: #CCCCCC;
}
P {
border: 1px solid black;
background-color: #FFFFFF;
margin-bottom: 1px;
}
</STYLE>
</HEAD>
<BODY>
<P><h1><b>My First Heading</b></h1></P>
</BODY>
</HTML>

Scripting (Java Script)
• It Allows you to add conditional, client-side logic and behavior to
HTML document.
• It is Fully object-oriented, DOM interaction and more.
• It is written in Notepad with extension .js.
15

JavaScript : Example
16
<html>
<script type="text/javascript">
function display_message()
{
document.write("n This is a message");
var x=40;
document.write("n Integer value of x"+x);
var x="It is a String";
document.write("n String value of x"+x);
document.write("n Welcome to JavaScript");
};
</script>
<body>
<form>
<input type="button" value="Click me!" onclick="display_message()" />
</form>
</body>
</html>

DOM : Introduction
• It stands for Data Object Model.
• It is standardised by W3C (World Wide Web Consortium).
• The W3C Document Object Model (DOM) is a platform
which is an interface of language-neutral.
• It allows programs and scripts to dynamically access and
update the content, structure, and style of a document.
18

DOM : Advantages
• It is a platform and language-neutral interface.
• It Defines a hierarchical model.
• The document structure access all document elements.
• It is relatively simple to modify the data structure and easily
extract data.
20

DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript

In this document

More Related Content

What's hot

Similar to DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript

More from Soumen Santra

Recently uploaded

DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript