DTHML, Dynamic Hypertext Markup Language

DHTML or Dynamic HTML is a collection of web technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML, XHTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.

DHTML was used in 1998 when JavaScript got popularity and was used with html to make dynamic websites.

DHTML= HTML/XHTML + JS

HTML5 = HTML + CSS + JS

How HTML, CSS and Javascript are Different

LanguageTypePurpose
HTMLMarkup LanguageTo create Structure of a webpage.
CSSStylesheet LanguageTo give style to the structure.
JavaScriptScripting LanguageTo create a user interactive page and validate inputs.

Static Websites

HTML and CSS can create a static website only. A Static website means a website with fixed contents, where we cannot interact with the user, we cannot send form inputs to the server, we cannot create image sliders, and tabs etc.

A static website code


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Static Webpage</title>
<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{
	width:960px;             
	height:auto;
	border:1px solid red;
}
.header{
	height:150px;
	background:#333;
}
.nav{
	height:50px;
	background:#000;
}
.container{
	background:#ccc;
}
.left{
	width:30%;
	height:200px;
	float:left;
	background:#333;
}
.right{
	width:70%;
	height:200px;
	float:left;
}
.clear{
	clear:both;    // Clear Both will clear floating from both sides.
}
.footer{
	height:80px;
	background:#ccc;
}
</style>
<head>
<body>
	<div class="wrap">
		<div class="header"></div>
		<div class="nav"></div>
		<div class="container">
			<div class="left"></div>
			<div class="right"></div>
			<div class="clear"></div>
		</div>
		<div class="footer"></div>
	</div>
</div>
</body>
</html>
						

Browser's view of Static Website:

This is Header
This is Navigation bar




Left Container




Right Container
This is Footer


Dynamic Website ( using Javascript)

By Using Javascript, we can create a dynamic website. A website which can interact with the user, can validate form inputs, can supports keyboard and mouse events, can change CSS on click or others events.

A Simple Dynamic website

  • Click color buttons to change background color.
  • Search Item in search box.
  • Click button to see hidden matter.
  • Mouse Hover to change background and text color.

Click to change background color of Body -->



This is Header  
This is Navigation bar




Mouseover to change Background and Text Color.

This is Footer

Using Javascript, we had create a webpage, which can interact with the user. We had used Mouse Click, Mouse Hover, onfocus, and onblur events here.

Click here to learn JavaScript.