Uploaded bySoumen Santra
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
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.
In this document
Powered by AI
Presentation introduction and outline of topics including DHTML, HTML, CSS, JavaScript, and DOM.
Define DHTML as Dynamic HTML, its ability to alter web pages post-loading, and its link to DOM.
Discusses DHTML’s ability to create dynamic pages, animations, and quicker interaction through CSS.
Highlights DHTML's interactivity, client-side validation, and content-design separation.
Describes HTML as markup language with examples of implementing simple HTML with outputs.
Introduction to CSS, its purpose in styling, and examples of CSS in HTML with outputs.
Explains JavaScript for adding behavior in HTML documents, with an example of its usage.
Introduces the DOM, its W3C standardization, and its advantages for document structure and access.
Final slide thanking participants and inviting feedback.
DYNAMIC HYPERTEXT MARKUP LANGUAGE (DHTML) & CSS WITH Application of JavaScript
- 1. Dynamic HTML Presented by SOUMENSANTRA 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 forDynamic 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 threecomponents 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 Simplestfeature 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
- 6.
- 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 Standsfor 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
- 9.
- 10. HTML Example Code 10 <HTML> <HEAD> <TITLE>Sample</TITLE> </HEAD> <BODY> <P><h1><b>MyFirst 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> <STYLETYPE="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.
- 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> <scripttype="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>
- 17.
- 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 : DOMTree 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
- 21.