DHTML | Dynamic Hypertext Markup Language

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

Language	Type	Purpose
HTML	Markup Language	To create Structure of a webpage.
CSS	Stylesheet Language	To give style to the structure.
JavaScript	Scripting Language	To 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 -->