SlideShare a Scribd company logo

Dynamic HTML (DHTML)

•Download as PPTX, PDF•
•
Himanshu Kumar
Himanshu Kumar

This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for styling and presentation, and scripting languages to manipulate and change the page after it loads. The three components are linked via the Document Object Model (DOM), which provides a standard interface. DHTML allows creating animations, games and applications by dynamically building web pages without plugins. It makes the web experience more interactive for users.

1 of 19
DYNAMIC HTML PRESENTED BY:- Ayush Sharma - 10 Himanshu Kumar - 16 Piyush Singh - 28 Pranabananda Jana - 29 Somnath Jha - 45 1
CONTENTS  DHTML  Features Of DHTML  Advantage Of DHTML  HTML – Brief Description  CSS - Brief Description  Scripting Example  Dom  HTML DOM Tree  Advantage Of DOM 2
DHTML- BRIEF DESCRIPTION  DHTML stands for Dynamic HTML.  "Dynamic" is defined as the ability of the browser to alter a web page's look and style after the document has loaded.  It just uses languages features to build dynamic web pages. 3Content
 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. DHTML… 4Content
 Simplest feature is making the page dynamic.  Can be used to create animations, games, applications.  Dynamic building of web pages is simple as no plug-in is required.  Facilitates the usage of events, methods and properties and code reuse.  It makes the Web experience faster and more interactive for end users. FEATURES OF DHTML 5 Content
Dynamic HTML HTML content CSS style rules appearance Scripting Language manipulatemanipulate 6Content
ADVANTAGE OF DHTML  DHTML can make your browser dynamic and interactive.  Validation of input’s given by the user can be done at the client side, without connection to the server.  Content and design can be separated using Style sheets & uniformity of the site can be maintained using them. 7Content
HTML – BRIEF DESCRIPTION  HTML Stands for Hyper Text Markup Language.  An HTML file is a Text file containing small markup tags.  An HTML file can be created by using a simple Text Editor like Notepad. 8Content
HTML Partitions and Organizes the content 9 Content
HTML EXAMPLE <HTML> <HEAD> <TITLE>Sample</TITLE> </HEAD> <BODY> <P><h1><b>This is a sample paragraph</b></h1></P> </BODY> </HTML> 10View Page Content
CSS [ CASCADING STYLE SHEETS ] element Padding Border Margin CSS: Box Model 11 Content
CSS- BRIEF DESCRIPTION  Cascading Style Sheet  Defining the style and layout model for HTML documents.  There are two types implementation i) Internal ii) External 12 Content
CSS EXAMPLE <STYLE TYPE="text/css"> BODY { background-color: #CCCCCC; } P { border: 1px solid black; background-color: #FFFFFF; margin-bottom: 1px; } </STYLE> 13View Page Content
SCRIPTING (JAVA SCRIPT , VB SCRIPT)  Allows you to add conditional, client-side logic and behavior to your document.  Fully object-oriented, DOM interaction and more. 14Content
JAVASCRIPT EXAMPLE <script type="text/javascript"> function display_message() { document.write("n This is a message"); var x=4; document.write("n Integer value of x"+x); var x="It is a String"; document.write("n String value of x"+x); }; </script> 15ContentView Page
DOM INTRODUCTION  DOM stands for Data Object Model.  The DOM is a W3C (World Wide Web Consortium) standard.  "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." 16Content
HTML DOM TREE 17Content
ADVANTAGE OF DOM  The Document Object Model is a platform- and language-neutral interface.  Defines a hierarchical model of the document structure through which all document elements may be accessed.  Relatively simple to modify data structure and extract data. 18Content
THANK YOU… 19

More Related Content

Dynamic HTML (DHTML)

  • 1. DYNAMIC HTML PRESENTED BY:- Ayush Sharma - 10 Himanshu Kumar - 16 Piyush Singh - 28 Pranabananda Jana - 29 Somnath Jha - 45 1
  • 2. CONTENTS  DHTML  Features Of DHTML  Advantage Of DHTML  HTML – Brief Description  CSS - Brief Description  Scripting Example  Dom  HTML DOM Tree  Advantage Of DOM 2
  • 3. DHTML- BRIEF DESCRIPTION  DHTML stands for Dynamic HTML.  "Dynamic" is defined as the ability of the browser to alter a web page's look and style after the document has loaded.  It just uses languages features to build dynamic web pages. 3Content
  • 4.  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. DHTML… 4Content
  • 5.  Simplest feature is making the page dynamic.  Can be used to create animations, games, applications.  Dynamic building of web pages is simple as no plug-in is required.  Facilitates the usage of events, methods and properties and code reuse.  It makes the Web experience faster and more interactive for end users. FEATURES OF DHTML 5 Content
  • 7. ADVANTAGE OF DHTML  DHTML can make your browser dynamic and interactive.  Validation of input’s given by the user can be done at the client side, without connection to the server.  Content and design can be separated using Style sheets & uniformity of the site can be maintained using them. 7Content
  • 8. HTML – BRIEF DESCRIPTION  HTML Stands for Hyper Text Markup Language.  An HTML file is a Text file containing small markup tags.  An HTML file can be created by using a simple Text Editor like Notepad. 8Content
  • 9. HTML Partitions and Organizes the content 9 Content
  • 10. HTML EXAMPLE <HTML> <HEAD> <TITLE>Sample</TITLE> </HEAD> <BODY> <P><h1><b>This is a sample paragraph</b></h1></P> </BODY> </HTML> 10View Page Content
  • 11. CSS [ CASCADING STYLE SHEETS ] element Padding Border Margin CSS: Box Model 11 Content
  • 12. CSS- BRIEF DESCRIPTION  Cascading Style Sheet  Defining the style and layout model for HTML documents.  There are two types implementation i) Internal ii) External 12 Content
  • 13. CSS EXAMPLE <STYLE TYPE="text/css"> BODY { background-color: #CCCCCC; } P { border: 1px solid black; background-color: #FFFFFF; margin-bottom: 1px; } </STYLE> 13View Page Content
  • 14. SCRIPTING (JAVA SCRIPT , VB SCRIPT)  Allows you to add conditional, client-side logic and behavior to your document.  Fully object-oriented, DOM interaction and more. 14Content
  • 15. JAVASCRIPT EXAMPLE <script type="text/javascript"> function display_message() { document.write("n This is a message"); var x=4; document.write("n Integer value of x"+x); var x="It is a String"; document.write("n String value of x"+x); }; </script> 15ContentView Page
  • 16. DOM INTRODUCTION  DOM stands for Data Object Model.  The DOM is a W3C (World Wide Web Consortium) standard.  "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document." 16Content
  • 18. ADVANTAGE OF DOM  The Document Object Model is a platform- and language-neutral interface.  Defines a hierarchical model of the document structure through which all document elements may be accessed.  Relatively simple to modify data structure and extract data. 18Content