DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
0 likes555 views
This document provides an overview of dynamic HTML (DHTML) and its components. DHTML uses HTML for content, CSS for style and presentation, and JavaScript for dynamic behavior and interactivity. It allows web pages to be dynamically changed after loading by manipulating the DOM tree with scripts. DHTML's advantages include making pages interactive at the client-side without server requests, separating design from content, and maintaining uniformity across a site.
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
- 1. Dynamic HTML Presented by SOUMEN SANTRA MCA, M.Tech, SCJP, MCP 1
- 2. 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
- 3. 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
- 4. 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
- 5. 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
- 7. 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
- 8. 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
- 10. HTML Example Code 10 <HTML> <HEAD> <TITLE>Sample</TITLE> </HEAD> <BODY> <P><h1><b>My First Heading</b></h1></P> </BODY> </HTML>
- 11. CSS (Cascading Style Sheets ) 11 element Padding Border Margin CSS: Model
- 12. 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
- 13. 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>
- 14. CSS : Output 14
- 15. 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
- 16. 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>
- 18. 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
- 19. HTML : DOM Tree 19
- 20. 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