logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Web Design Site

BellaOnline's Web Design Editor

g

DHTML : Dynamic Web Coding

Guest Author - June Kaminski

DHTML stands for Dynamic HyperText Markup Language and can be defined as the art of making HTML webpages dynamic by combining HTML with Javascript and Cascading Style Sheets (CSS). Unlike the other four HTML variations studied in the previous four articles in this series, DHTML is not a standard defined by the W3 Consortium. Rather, it is a "marketing term that was used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support" (W3 Consortium). HTML 4.0 first introduced two important components that are inherent to the structure of DHTML:
  • Cascading Style Sheets (CSS)
  • Document Object Models (DOM)

Making Your Code Dynamic

CSS provide style and layout models while DOM provide document content models for HTML documents. JavaScript and VBScript add the ability to write scripting code to control HTML elements. Put together, these three components add up to dynamic HTML pages. One major deterrent is browser incompatibility - Netscape and Microsoft still have not agreed on what to implement within their browsers: thus, writing DHTML pages that work well in both browsers can be tricky. To see for yourself, you can access Microsoft and Netscape standards online:"DHTML excels in creating low-bandwidth effects that enhance a web page's functionality. It can be used to create animations, games, applications, provide new ways of navigating through web sites, and create out-of-this world page layouts that simply aren't possible with just HTML. Although many of the features of DHTML can be duplicated with either Flash or Java, DHTML provides an alternative that does not require plugins and embeds seamlessly into a web page."( Dan Steinman, 1998).

In order to understand the complexities of DHTML, it is useful to examine its components in more detail.

Cascading Style Sheets

CSS are sophisticated codes that separate web content from the web desplay - the style, positioning, colors, fonts, and so on. CSSP or CSS Positioning allows pixel-level control over HTML element positioning. The separation of the presentation style of web documents from the content with CSS2 (CSS level 2) simplifies Web authoring and site maintenance. "CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. This specification also supports content positioning, downloadable fonts, table layout, features for internationalization, automatic counters and numbering, and some properties related to user interface" (W3 Consortium). The W3C offer an excellent tutorial to learn CSS2 called, CSS2 Specification.

JavaScript

JavaScript is a special scripting browser-based language used to control HTML elements and add functionality to forms, frames, windows, image rollovers, audio-video controls and manipulate DHTML. Netscape first called this scripting JavaScript, so Microsoft came up with the term, JScript, for its particular brand of scripting. The result? Two versions of JavaScript that can be annoyingly incompatible. To explore this issue more, visit Netscape's JavaScript Central and Microsoft's JScript resource page. The secret to the dynamic effects of JavaScripted content is the use of layer objects. Layer objects make text change when the mouse scrolls over it; it makes images or text move around the web page; it also makes drop-down menus drop down. Layer objects are arranged in div tags, with defining characteristics such as color, position, and visibility.

Putting them together

DHTML is usually applied to achieve three tasks:
  • Position or placing blocks of content on the page and moving them around
  • Style Modifications which change the look and feel of the page
  • Event handling or relating user events to changes in positioning or other style modifications
In newer versions of Internet Explorer and Netscape (versions 5, 6 and up) the DOM is becoming the code of choice for most DHTML coding. Once mastered, the DOM can help web designers to manipulate, add, delete, and edit document coding related to all of the styles, attributes (such as a href) and elements (such as html tags) on the page. That means every tag and attribute common to a html document is accessible via the DOM. Currently, the Document Object Model Levels 0 & 1 are recommended by W3C. Level 2 is also in the works, but has not yet been promoted as the standard for DHTML coding.

A helpful group of tutorials are available through HTML Goodies, called DHTML and Layer Tutorial.

The links included in this article offer introductions and how-tos to begin your journey in mastering this newest development in html coding. Any quick search on Google will bring many more resources to your attention, readily available at your fingertips. As browser manufacturers work on their incompatibility and the use of higher version browsers become more commonplace, DHTML will become a mandatory part of any professional designer's itinerary.

HTML Highlight Article Series

PART 1: Should a Credible Designer Know HTML?
PART 2: HTML 3.2 - The Birth of Wilbur
PART 3: HTML 4.0 AND 4.01 - More of a Good Thing!
PART 4: XHTML : Web Coding for Refined Design
PART 5: DHTML : Dynamic Web Coding




This site needs an editor - click to learn more!

Add DHTML+%3A+Dynamic+Web+Coding+ to Twitter Add DHTML+%3A+Dynamic+Web+Coding+ to Facebook Add DHTML+%3A+Dynamic+Web+Coding+ to MySpace Add DHTML+%3A+Dynamic+Web+Coding+ to Del.icio.us Digg DHTML+%3A+Dynamic+Web+Coding+ Add DHTML+%3A+Dynamic+Web+Coding+ to Yahoo My Web Add DHTML+%3A+Dynamic+Web+Coding+ to Google Bookmarks Add DHTML+%3A+Dynamic+Web+Coding+ to Stumbleupon Add DHTML+%3A+Dynamic+Web+Coding+ to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Web Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by June Kaminski. All rights reserved.
This content was written by June Kaminski. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Creating Image Links and Image Maps

Using Website Templates

CSS Design Layouts

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor