|
Traditional HTML is static, after it's loaded on to the
browser, it just sits there without changing. HTML has
advanced a lot of from the earlier days, One of the latest
and most powerful features is the style sheet. A style sheet
is the extension of HTML that allows a much finer appearance
and placement of teh text. however web designer expect more
than just an electronic book page. This type of extension
leads to DHTML. DHTML will allow the web page to react to
the user without relaying on the server or depending on an
embedded program. The tags will all remain the same but only
we will control the way the element is displayed. This will
be doing with the help of scripts.
Features of DHTML
DHTML is not an official term on the web, though the
vendors describe a combination of HTML, style sheet and
scripts that let documents grow beyond their traditional
lifeless behavior and appearance. Following are the common
features of DHTML:
|
1. |
Changing
Tags and Contents |
|
|
The
capability to change tags and their content utilizes
the Document Object Model (DOM), which uncovers
everything for change, including all tags and style
sheet attributes. We can have something like
clicking on the heading revealing the text below it,
For this these there will be no data coming from the
server but only the script given to do this. |
|
2. |
Live
Positioning of Elements |
|
|
This
means that the elements of the page can be moved
after the page is loaded into the browser. First the
movement can happen automatically. This is
accomplished by diving into layers and hiding some
layers or overlapping some layers. |
|
3. |
Dynamic
Fonts |
|
|
Just
because we specify the font tag in HTML doesn't mean
that the user has it on his or her machine. The end
result is that the page developer just doesn't know
how the page is going to appear. But Dynamic fonts
uses a technology, which downloads the font
information along with the web page in a highly
compressed that is downloaded with the page. |
|
4. |
Dynamic
Style |
|
|
When
a page is created using standard HTML, the style
though specified for each element remains same
regardless of user actions. However, when we create
a page using DHTML, we can incorporated styles -
including font sizes, typeface and color - that
changes immediately in response to user actions such
as moving the mouse pointer over a heading. This
features is known as Dynamic Style. |
Microsoft and Netscape both have their standards and
ideas about DHTML but both the implementation are not very
compatible with each other. Netscape had added new tags in
their implementation whereas Microsoft has added new
attributes to the existing tags.
CSS and JavaScript in Dynamic Hyper Text Markup Language
(DHTML)
Cascading Style Sheets (CSS) are the building blocks for the
implementation of Document Object Model (DOM) in Both
Internet Explorer (IE) and Netscape Navigator (NN). With CSS
you can define the "styles" on your document that
describes on how the elements will display on the browser
window. On the other hand, JavaScript is an essential tool
that can be used to locate the rendered elements including
their attributes. JavaScript is also capable to handle the
events that create movement or re-positioning of the
elements on the page. Following example give you an overview
on how we relate CSS and JavaScript to implement DHTML.
<html>
<head>
<script
language="JavaScript">
function
bgChange(bg)
{
document.body.style.background=bg
}
</script>
</head>
<body>
<b>Mouse
over these table cells, and the background color will change</b>
<table
width="300" height="100">
<tr>
<td
onmouseover="bgChange('red')"
onmouseout="bgChange('transparent')"
bgcolor="red">
</td>
<td
onmouseover="bgChange('blue')"
onmouseout="bgChange('transparent')"
bgcolor="blue">
</td>
<td
onmouseover="bgChange('green')"
onmouseout="bgChange('transparent')"
bgcolor="green">
</td>
</tr>
</table>
</body>
</html>
Try yourself.
1. Load any text editor (Notepad, WordPad, Word, TextPlus)
2. Copy the above code and pasteit and save it, with .HTM or .HTML extension.
3. Open saved file in Browser (IE, Netscape) to view. it will
display a table with tree cell,
you can chage the backgound color of the
whole page by moving mose over the cell.
DHTML Sample Code/Tag.
There is more than 50 sample code you can try for document structure,
formatting, form, frame, tables, hyperlinks, displaying
images. Get Sample code
DHTML FAQ.
Get all your query related to DHTML, Coding, Designing, and
publishing. Get DHTML FAQ
DHTML Resource
1. www.w3.org
2. www.w3school.com
|