www.bzupages.com web engineering. topic: dhtml presented by: shah rukh 07-22 presented to: sir...
TRANSCRIPT
www.bzupages.comwww.bzupages.com
Web engineering
www.bzupages.comwww.bzupages.com
Topic: DHTML
Presented by:
Shah Rukh 07-22
Presented to:
Sir Ahsan raza
www.bzupages.comwww.bzupages.com
Introduction
Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model.
www.bzupages.comwww.bzupages.com
Features
the rise of the 4.x generation of browsers, a new concept called Dynamic HTML or DHTML was introduced.
DHTML describes the ability to dynamically manipulate the page elements, potentially changing the document's structure in a significant way. In its most obvious form.
www.bzupages.comwww.bzupages.com
Cont…
DHTML is an HTML document that displays dynamic characteristics such as movement or the showing or hiding of page content
www.bzupages.comwww.bzupages.com
Cont…
These sophisticated features are made possible through the intersection of HTML, CSS, and JavaScript. So in some sense, the idea of DHTML can be summarized in the formula
DHTML = HTML + CSS + JavaScript
www.bzupages.comwww.bzupages.com
Examples 1<Html><head><title>The Dynamic Paragraph: DHTML Style</title></head><body><h1 align="center">The Dynamic Paragraph</h1><hr /><p id="para1">I am a dynamic paragraph. Watch me dance!</p><hr /><form action="#"><input type="button" value="Right" onclick="para1.align='right';" /><input type="button" value="Left" onclick="para1.align='left';" /><input type="button" value="Center" onclick="para1.align='center';" /></form></body></html>
www.bzupages.comwww.bzupages.com
www.bzupages.comwww.bzupages.com
2 Last Modification Date
A common use of script is to add small bits of content or HTML to a page dynamically. For example, consider the need to write a last modification date to the bottom of every document in a Web site. Using a short JavaScript at the bottom of a page could be quite easy, as illustrated here:
www.bzupages.comwww.bzupages.com
Cont...<html><head><title>last date of modify</title></head><body>...Page Content here...<hr /><div align="center"><small>© 2003, Demo Company Inc.<br /> <script type="text/javascript"><!-- document.write("Document last modified: "+document.lastModified);//--></script></small></div></body></html>
www.bzupages.comwww.bzupages.com
www.bzupages.comwww.bzupages.com
3 Form Validation
Form validation probably is the most important use of scripting on the Web.
it was the original reason JavaScript was developed.
JavaScript form validation is the process of checking the validity of user-supplied data in an XHTML form before it is submitted to a server-side program such as a php program.
www.bzupages.comwww.bzupages.com
Cont…
By checking data before it is sent to a server, you can avoid a lot of user frustration, and reduce communication time between the Web browser and the server.
www.bzupages.comwww.bzupages.com
Cont….<html><head><title>Overly Simple Form Validation </title><script type="text/javascript"><!--function validate() { if (document.myform.username.value == "") { alert('Please enter your name'); return false; } else return true; }// --></script></head>
www.bzupages.comwww.bzupages.com
<body><form name="myform" id="myform" action="http://www.htmlref.com" method="get" onsubmit="return validate();"><b>Name:</b><input type="text" name="username" id="username" size="25" maxlength="25" /><br /><br /><input type="submit" value="Submit" /></form></body></html>
www.bzupages.comwww.bzupages.com
www.bzupages.comwww.bzupages.com
www.bzupages.comwww.bzupages.com