SlideShare a Scribd company logo
3
Most read
13
Most read
19
Most read
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 : Output
9
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>
CSS : Output
14
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>
JavaScript : Output
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
HTML : DOM Tree
19
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
Thank You
21
Give Feedback

More Related Content

What's hot (20)

PPT
Cascading Style Sheets (CSS) help
casestudyhelp
 
PPTX
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
ODP
CSS Basics
Sanjeev Kumar
 
PPT
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
PDF
Intro to HTML and CSS basics
Eliran Eliassy
 
PPT
Css Ppt
Hema Prasanth
 
PPT
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
PPTX
jQuery PPT
Dominic Arrojado
 
PPT
Html ppt
Iblesoft
 
PDF
Basic Html Notes
NextGenr
 
PPTX
Introduction to HTML
Ajay Khatri
 
PPTX
HTML5 Topic 1
Juvywen
 
PDF
Basic html
Nicha Jutasirivongse
 
PPT
Html5
Tony Nguyen
 
PDF
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
PDF
Bootstrap
Jadson Santos
 
PPT
CSS ppt
Sanmuga Nathan
 
Cascading Style Sheets (CSS) help
casestudyhelp
 
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
 
CSS Basics
Sanjeev Kumar
 
How Cascading Style Sheets (CSS) Works
Amit Tyagi
 
Intro to HTML and CSS basics
Eliran Eliassy
 
Css Ppt
Hema Prasanth
 
Introduction to Cascading Style Sheets (CSS)
Chris Poteet
 
jQuery PPT
Dominic Arrojado
 
Html ppt
Iblesoft
 
Basic Html Notes
NextGenr
 
Introduction to HTML
Ajay Khatri
 
HTML5 Topic 1
Juvywen
 
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
Bootstrap
Jadson Santos
 

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

PPTX
Dynamic HTML (DHTML)
Himanshu Kumar
 
PPTX
Dhtml
Sadhana28
 
PPTX
UI Web Development.pptx
SHAIKIRFAN715544
 
PPTX
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
PDF
UNIT-2.pdff na hdjsjqkiadndkwjsmdmakxkddnsn
ashisq51
 
PPTX
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
PDF
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
PPTX
Web Development basics with WordPress
Rashna Maharjan
 
PDF
Web Development - HTML, CSS, JavaScript
Mark John Lado, MIT
 
PPTX
Web development using HTML and CSS
SiddhantSingh980217
 
PPTX
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
jatin batra
 
PDF
Internship review
PAWAN KUMAR
 
PDF
Web Dev - 1 PPT.pdf
gdsczhcet
 
PPS
Web Designing
VNIT-ACM Student Chapter
 
PDF
Frontend Interview Questions PDF By ScholarHat
Scholarhat
 
PPT
Introduction to web development
Muhammad Shafiq
 
PPTX
html -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjj
NetajiGandi1
 
PPTX
Digital Marketing Company
Payal9675
 
DOCX
Web Development Training Report.docx
CuriosityKlinic
 
PPT
Dynamic html (#1)
Haider Habeeb
 
Dynamic HTML (DHTML)
Himanshu Kumar
 
Dhtml
Sadhana28
 
UI Web Development.pptx
SHAIKIRFAN715544
 
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
UNIT-2.pdff na hdjsjqkiadndkwjsmdmakxkddnsn
ashisq51
 
WELCOME (recovernjkgnjvnvnfjkvnjknnbfjked).pptx
HarshwardhanPatil52
 
Javascript Html Css A Stepbystep Guide Student Student
zorahpyzer7p
 
Web Development basics with WordPress
Rashna Maharjan
 
Web Development - HTML, CSS, JavaScript
Mark John Lado, MIT
 
Web development using HTML and CSS
SiddhantSingh980217
 
Web Designing Training in Ambala ! BATRA COMPUTER CENTRE
jatin batra
 
Internship review
PAWAN KUMAR
 
Web Dev - 1 PPT.pdf
gdsczhcet
 
Frontend Interview Questions PDF By ScholarHat
Scholarhat
 
Introduction to web development
Muhammad Shafiq
 
html -Hyper Text Markup Languagejjjjjjjjjjjjjjjjjjjjjjjjj
NetajiGandi1
 
Digital Marketing Company
Payal9675
 
Web Development Training Report.docx
CuriosityKlinic
 
Dynamic html (#1)
Haider Habeeb
 
Ad

More from Soumen Santra (20)

PDF
Basic and advance idea of Sed and Awk script with examples
Soumen Santra
 
PPT
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Soumen Santra
 
PPTX
Cell hole identification in carcinogenic segment using Geodesic Methodology: ...
Soumen Santra
 
PPTX
PPT_PAPERID 31_SOUMEN_SANTRA - ICCET23.pptx
Soumen Santra
 
PPT
Basic networking hardware: Switch : Router : Hub : Bridge : Gateway : Bus : C...
Soumen Santra
 
DOC
Traveling salesman problem: Game Scheduling Problem Solution: Ant Colony Opti...
Soumen Santra
 
PPT
Optimization techniques: Ant Colony Optimization: Bee Colony Optimization: Tr...
Soumen Santra
 
PPT
Quick Sort
Soumen Santra
 
PPT
Merge sort
Soumen Santra
 
PPTX
A Novel Real Time Home Automation System with Google Assistance Technology
Soumen Santra
 
PPTX
Java basic part 2 : Datatypes Keywords Features Components Security Exceptions
Soumen Santra
 
PPTX
Java Basic PART I
Soumen Santra
 
PPT
Threads Advance in System Administration with Linux
Soumen Santra
 
PPTX
Frequency Division Multiplexing Access (FDMA)
Soumen Santra
 
PPTX
Carrier Sense Multiple Access With Collision Detection (CSMA/CD) Details : Me...
Soumen Santra
 
PPTX
Code-Division Multiple Access (CDMA)
Soumen Santra
 
PPTX
PURE ALOHA : MEDIUM ACCESS CONTROL PROTOCOL (MAC): Definition : Types : Details
Soumen Santra
 
PPTX
Carrier-sense multiple access with collision avoidance CSMA/CA
Soumen Santra
 
PPTX
RFID (RADIO FREQUENCY IDENTIFICATION)
Soumen Santra
 
PPTX
SPACE DIVISION MULTIPLE ACCESS (SDMA) SATELLITE COMMUNICATION
Soumen Santra
 
Basic and advance idea of Sed and Awk script with examples
Soumen Santra
 
Heap Sort (SS).ppt FOR ENGINEERING GRADUATES, BCA, MCA, MTECH, BSC STUDENTS
Soumen Santra
 
Cell hole identification in carcinogenic segment using Geodesic Methodology: ...
Soumen Santra
 
PPT_PAPERID 31_SOUMEN_SANTRA - ICCET23.pptx
Soumen Santra
 
Basic networking hardware: Switch : Router : Hub : Bridge : Gateway : Bus : C...
Soumen Santra
 
Traveling salesman problem: Game Scheduling Problem Solution: Ant Colony Opti...
Soumen Santra
 
Optimization techniques: Ant Colony Optimization: Bee Colony Optimization: Tr...
Soumen Santra
 
Quick Sort
Soumen Santra
 
Merge sort
Soumen Santra
 
A Novel Real Time Home Automation System with Google Assistance Technology
Soumen Santra
 
Java basic part 2 : Datatypes Keywords Features Components Security Exceptions
Soumen Santra
 
Java Basic PART I
Soumen Santra
 
Threads Advance in System Administration with Linux
Soumen Santra
 
Frequency Division Multiplexing Access (FDMA)
Soumen Santra
 
Carrier Sense Multiple Access With Collision Detection (CSMA/CD) Details : Me...
Soumen Santra
 
Code-Division Multiple Access (CDMA)
Soumen Santra
 
PURE ALOHA : MEDIUM ACCESS CONTROL PROTOCOL (MAC): Definition : Types : Details
Soumen Santra
 
Carrier-sense multiple access with collision avoidance CSMA/CA
Soumen Santra
 
RFID (RADIO FREQUENCY IDENTIFICATION)
Soumen Santra
 
SPACE DIVISION MULTIPLE ACCESS (SDMA) SATELLITE COMMUNICATION
Soumen Santra
 
Ad

Recently uploaded (20)

DOC
MRRS Strength and Durability of Concrete
CivilMythili
 
PPTX
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
PPTX
fatigue in aircraft structures-221113192308-0ad6dc8c.pptx
aviatecofficial
 
PPTX
Presentation 2.pptx AI-powered home security systems Secure-by-design IoT fr...
SoundaryaBC2
 
PDF
AN EMPIRICAL STUDY ON THE USAGE OF SOCIAL MEDIA IN GERMAN B2C-ONLINE STORES
ijait
 
PPTX
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
PPTX
Damage of stability of a ship and how its change .pptx
ehamadulhaque
 
PDF
Data structures notes for unit 2 in computer science.pdf
sshubhamsingh265
 
PPTX
Lecture 1 Shell and Tube Heat exchanger-1.pptx
mailforillegalwork
 
PPTX
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
PDF
20ES1152 Programming for Problem Solving Lab Manual VRSEC.pdf
Ashutosh Satapathy
 
PDF
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
PPTX
Solar Thermal Energy System Seminar.pptx
Gpc Purapuza
 
PPT
Footbinding.pptmnmkjkjkknmnnjkkkkkkkkkkkkkk
mamadoundiaye42742
 
PDF
AI TECHNIQUES FOR IDENTIFYING ALTERATIONS IN THE HUMAN GUT MICROBIOME IN MULT...
vidyalalltv1
 
PPTX
How Industrial Project Management Differs From Construction.pptx
jamespit799
 
PDF
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
PDF
REINFORCEMENT LEARNING IN DECISION MAKING SEMINAR REPORT
anushaashraf20
 
PPTX
2025 CGI Congres - Surviving agile v05.pptx
Derk-Jan de Grood
 
PPTX
Knowledge Representation : Semantic Networks
Amity University, Patna
 
MRRS Strength and Durability of Concrete
CivilMythili
 
Mechanical Design of shell and tube heat exchangers as per ASME Sec VIII Divi...
shahveer210504
 
fatigue in aircraft structures-221113192308-0ad6dc8c.pptx
aviatecofficial
 
Presentation 2.pptx AI-powered home security systems Secure-by-design IoT fr...
SoundaryaBC2
 
AN EMPIRICAL STUDY ON THE USAGE OF SOCIAL MEDIA IN GERMAN B2C-ONLINE STORES
ijait
 
Arduino Based Gas Leakage Detector Project
CircuitDigest
 
Damage of stability of a ship and how its change .pptx
ehamadulhaque
 
Data structures notes for unit 2 in computer science.pdf
sshubhamsingh265
 
Lecture 1 Shell and Tube Heat exchanger-1.pptx
mailforillegalwork
 
Shinkawa Proposal to meet Vibration API670.pptx
AchmadBashori2
 
20ES1152 Programming for Problem Solving Lab Manual VRSEC.pdf
Ashutosh Satapathy
 
Pressure Measurement training for engineers and Technicians
AIESOLUTIONS
 
Solar Thermal Energy System Seminar.pptx
Gpc Purapuza
 
Footbinding.pptmnmkjkjkknmnnjkkkkkkkkkkkkkk
mamadoundiaye42742
 
AI TECHNIQUES FOR IDENTIFYING ALTERATIONS IN THE HUMAN GUT MICROBIOME IN MULT...
vidyalalltv1
 
How Industrial Project Management Differs From Construction.pptx
jamespit799
 
Introduction to Productivity and Quality
মোঃ ফুরকান উদ্দিন জুয়েল
 
REINFORCEMENT LEARNING IN DECISION MAKING SEMINAR REPORT
anushaashraf20
 
2025 CGI Congres - Surviving agile v05.pptx
Derk-Jan de Grood
 
Knowledge Representation : Semantic Networks
Amity University, Patna
 

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
  • 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>
  • 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