|
|||||||||||
  |
|
||||||||||
|
Gateway Education and Welfare Society (Regd.), Reg. No. DIC/DRA/1218 of 2002-- |
|||||||||||
|
DHTMLDHTML is NOT a language. DHTML is a TERM describing the art of making dynamic and interactive web pages. DHTML combines HTML, JavaScript, DOM, and CSS. DHTML is the art of combining HTML, JavaScript, DOM, and CSS. What you should already knowBefore you continue you should have a basic understanding of the following:
DHTML is Not a LanguageDHTML stands for Dynamic HTML. DHTML is NOT a language or a web standard. DHTML is a TERM used to describe the technologies used to make web pages dynamic and interactive. To most people DHTML means the combination of HTML, JavaScript, DOM, and CSS. According to the World Wide Web Consortium
(W3C): DHTML TechnologiesBelow is a listing of DHTML technologies. HTML 4The W3C HTML 4 standard has rich support for dynamic content:
DHTML is about using these features to create dynamic and interactive web pages. JavaScriptJavaScript is the scripting standard for HTML. DHTML is about using JavaScript to control, access and manipulate HTML elements. HTML DOMThe HTML DOM is the W3C standard Document Object Model for HTML. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate them. DHTML is about using the DOM to access and
manipulate HTML elements.
HTML EventsThe W3C HTML Event Model is a part of the HTML DOM. It defines a standard way to handle HTML events. DHTML is about creating web pages that reacts to (user)events. CSSCSS is the W3C standard style and layout model for HTML. CSS allows web developers to control the style and layout of web pages. HTML 4 allows dynamic changes to CSS. DHTML is about using JavaScript and DOM to change the style and positioning of HTML elements. JavaScript Alone
|
<html> <body> <script type="text/javascript"> document.write(Date()); </script> </body> </html> |
With HTML 4, JavaScript can also be used to change the inner content and attributes of HTML elements dynamically.
To change the content of an HTML element use:
document.getElementById(id).innerHTML=new HTML
To change the attribute of an HTML element use:
document.getElementById(id).attribute=new value
New to HTML 4 is the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element.
To execute code when a user clicks on an element, use the following event attribute:
onclick=JavaScript
With HTML 4, JavaScript can also be used to change the style of HTML elements.
To change the style of an HTML element use:
document.getElementById(id).style.property=new style
JavaScript can create dynamic HTML content:
Date: Fri Apr 03 23:16:48 2009
If you have studied JavaScript, you already know that the statement:
document.write()
can be used to display dynamic content to a web page.
Using JavaScript to display the current date:
<html> <body> <script type="text/javascript"> document.write(Date()); </script> </body> </html> |
The HTML DOM is:
The HTML DOM defines the objects and properties of all HTML elements, and the methods (interface) to access them.
In other words:
The HTML DOM is a standard for how to get, change, add, or delete HTML elements.
The HTML DOM can be used to change the content of an HTML element:
<html>HTML output:
New Header |
Example explained:
The HTML DOM can be used to change the attribute of an HTML element:
<html>
<body>
<img id="image" src="smiley.gif">
<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
An event handler allows you to execute code when an event occurs.
Events are generated by the browser when the user clicks an element, when the page loads, when a form is submitted, etc.
A header changes when the user clicks it:
<h1 onclick="this.innerHTML='Ooops!'">Click on this text</h1> |
You can also add a script in the head section of the page and then call the function from the event handler:
<html>
<head>
<script type="text/javascript">
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text</h1>
</body>
</html>
|
HTML 4.0 Event Handlers
| Event | Occurs when... |
|---|---|
| onabort | a user aborts page loading |
| onblur | a user leaves an object |
| onchange | a user changes the value of an object |
| onclick | a user clicks on an object |
| ondblclick | a user double-clicks on an object |
| onfocus | a user makes an object active |
| onkeydown | a keyboard key is on its way down |
| onkeypress | a keyboard key is pressed |
| onkeyup | a keyboard key is released |
| onload | a page is finished loading |
| onmousedown | a user presses a mouse-button |
| onmousemove | a cursor moves on an object |
| onmouseover | a cursor moves over an object |
| onmouseout | a cursor moves off an object |
| onmouseup | a user releases a mouse-button |
| onreset | a user resets a form |
| onselect | a user selects content on a page |
| onsubmit | a user submits a form |
| onunload | a user closes a page |
| Admin | Home | About Society | Aims and Objects | Contact | Sitemap | |
|
Gateway Educational and Welfare Society is an NGO Regd. with Govt. Of Punjab to promote the skills of poor and needy youth of INDIA so that they may earn respectful living hood. Presently the area of functioning of Society is Sangrur Distt. |
||||||
|
Copyright to Starshine India |
||||||
Favorite
Google Search
