Web School
good DHTML standards, practices, and guidelines
This is a short run down on the "correct" way to write DHTML code. It lists common standards, best (relative) practices, and general guidelines.
The World Wide Web Consortium (W3C) is an independent standards setting organisation. W3C was created in October 1994 to lead the World Wide Web to its full potential by developing common protocols that promote its evolution and ensure its inter operability. This is the best site to go to see what the current standards are. Previous protocols and standards are available at the W3C site for reference.
Some aspects of writing Web documents are not standards but are just good practices. Below is a list of the DHTML fundamentals.
The "D" in DHTML stands for "Dynamic". It is a collection of HTML, CSS, and sripting combined to allows changes to your web page on the fly without the need to refresh the whole page. DHTML is designed for level 4 and above browsers. DHTML can be automatic or can be coded so that it requires user interaction to make the change. The most common DHTML is an image changing when the mouse moves over it. This is known as a "rollover".
DHTML is NOT a web development language. It is in essence a combination of HTML and script. Where the layout is defined in HTML and on or after an event, whether the event be time or action related, a script causes a change. Usually the change is in the HTML and therefore the document layout.
Top of Page | Fundamentals
So now you know what DHTML is, how do you recognise it? Because DHTML is a combination of HTML, CSS, and script there is no one thing that says this is DHTML. Instead it is the combination of all of them that dynamically changes content that defines DHTML. So the basics of DHTML are in fact a combination of the basics of HTML, CSS, and scripting.
It can be noted though that the dynamic nature of DHTML lends itself towards events. So the code used for DHTML is event driven. e.g. when a mouse moves over an object, when a button on a form is clicked, et c.
Common DHTML events are "onMouseOver", "onClick", "onSubmit".
Probably the most important aspect of DHTML is remembering to give descriptive names and ID's for elements and variables as described in web development guidelines.
Top of Page | Fundamentals
When coding DHTML often elements are purposely set to not immediately be displayed. So when they are displayed they need to be shown in the correct place. There are a couple of reasons why they might not be.
Many elements within DHTML are for the purpose of being displayed at some stage. The layout of an HTML document has a <HEAD> and a <BODY> section. The <BODY> section is where all content to be displayed is written. It stands to reason then that the to be displayed elements of DHTML code should be written within the <BODY> section. This is most evident in <DIV> elements. Internet Explorer 5 is smart enough to deal with <DIV> elements written in the <HEAD> section but most other browsers are not. It is imperitive then that DHTML testing is done on the earliest version browser of your target audience.
When a page is rendered for the Web it is done in the order of the top of the document down. Therefore all elements are displayed in the order in which they are written. Sometimes it can be confusing that elements written in DHTML and called in a particular order are not displayed in that same order. This can be caused by the order the elements are written in the code. Be aware that even if the scripting calls elements in your desired order often the elements themselves need to be coded in your document in the order in which you want them displayed.
The scripting side of DHTML can to some degree be put anywhere within a HTML document. It is important to note that if a DHTML element calls a scripting function as it renders and the script is written in the document further down than the element an error is likely to occur. This is because the rendered document needs to be aware of functions before they are called. It is therefore good practice to put script in the <HEAD> section of your document. Just to confuse matters, there are times when the scripting side of DHTML must be written after the element (when the script calls the element). This means that some script code must be written within the <BODY> section.
A common script used within DHTML is one which gets the size of the browser window. This is not known to the document until the document itself has starting loading. Which does not happen until after the <body> tag has been rendered. Which means a script that requires the browser windows height or width must be written within the body section or called from the <body> tags onload function.
Top of Page | Fundamentals
Writing your own code is the best way to learn but it is just as important to get help from those that have already been through it all. The following links are just some of the sites around the web that have invaluable information.
Cross-browser scripting according to dij8
http://www.dynamicdrive.com The #1 DHTML destination online.
http://www.w3schools.com/dhtml/default.asp DHTML School.
Top of Page | Fundamentals
|
