Beginners Guide to DHTML

Core points

• Dynamic HTML (DHTML) is not an independent programming language, but an HTML enhancement technology. It combines HTML, JavaScript and CSS to make web pages dynamic.
• The main function of DHTML is to dynamically change the appearance and content of the webpage without reloading the page, which relies on built-in features of the fourth generation browser.
• The implementation of DHTML varies greatly from browser to browser; for example, Netscape Navigator 4 uses <layer></layer> tags, while Internet Explorer 4 relies on style objects associated with standard HTML tags such as <div> and <code><table>. <li>In order to achieve cross-browser compatibility, DHTML needs to use different scripting technologies according to the browser, which highlights the importance of browser detection technologies such as object detection in efficient scripting. </li> <li> Despite the endless emergence of new technologies such as AJAX and jQuery, DHTML is still relevant and is the basic skill in creating interactive dynamic web content. </li> <p>As a self-proclaimed webmaster, I try my best to keep up with the latest web technologies. I'm currently learning DHTML, i.e. Dynamic HTML. After hearing a lot about this technology and how it will eventually revolutionize the internet, I thought I had to stand up from the couch and start learning it or I wouldn’t be qualified to call myself a “website administrator” anymore. If you know nothing about DHTML like me, this tutorial is right for you. Enjoy the learning process, please feel free to email me if you have any questions. </p> <p>This is a good question and I admit I have a hard time finding a straight answer. I remember seeing a post on the JavaScript news group trying to answer this question with the following reply: </p> <p><q>"DHTML is a combination of HTML and JavaScript"</q>I said to myself, "Isn't that a web page with JavaScript?" I at least felt confused. I searched hundreds of search results on search engines, looking for the elusive answer, but I still couldn't find it. So I thought, no matter what it is, I will learn DHTML first, and then figure out what it is! Now that I'm a DHTML programmer, I think I'm ready to provide you with a nice DHTML definition: </p> <p><q>"DHTML is a combination of several built-in browser features in the fourth generation of browsers that make web pages more dynamic"</q> You see, DHTML is not a scripting language (such as JavaScript), but is just a browser feature — or enhancement — that enables your browser to be dynamic. What you really need to learn is not DHTML itself, but the syntax you need to use DHTML. Before anything else, you might want to quickly access Dynamic Drive and see what this language can do. </p> <p> Like I said, DHTML is a collection of functions that together make your web page dynamic. I think it's important now to define what the creator of DHTML means when saying "dynamic". "Dynamic" is defined as the ability of a browser to change the appearance and style of a web page after a document is loaded. I remember when I was learning JavaScript, I was taught that I could create web pages dynamically using JavaScript's <code>document.write() method. For example:

  document.write("This is text created on the fly!")

  I remember saying to myself, "It's not bad." But what if the content I want to create is not only dynamic, but also generated on demand? I was still naive at that time and I tried to do this by nesting the above code in a function and calling it through the form button:

  Pressing the button is a disappointment. My entire web page was wiped off, leaving only the text generated by the function.

  That is the past. Now, with the introduction of DHTML, I can change the content on the webpage anytime as I want without the browser erasing everything else. This is what DHTML is all about. The ability of a browser to change the appearance and style even after the document is loaded.

  Since I've already excited you, I think to be fair, I should pour some cold water on it. DHTML technology is currently in development, and NS 4 and IE 4 vary greatly in their implementation of this great technology. It is not currently possible to write a piece of DHTML code and expect it to work properly in both browsers. Furthermore, these two browsers are at different stages of their DHTML development; DHTML in IE 4 is much more powerful and more versatile than DHTML in NS 4, based on my own knowledge and what I hear. I don't want to help spread any publicity, so I'm here to go.

  This can be a good thing or a bad thing, depending on your point of view. DHTML in NS 4 is very simple and can basically boil down to one word - Layer. I was surprised myself, but it was true – NS 4 relies entirely on a new tag called <layer></layer> to play the magic of its DHTML. This new tag is dynamic because it can be placed anywhere on the webpage (without anything else), can be moved around, its internal content can be updated on demand, and so on.

  Basic Syntax

  <layer></layer>The basic syntax of tags couldn't be simple (it seems like any tag in HTML is complicated!):

  <layer>Text within the layer<code><layer>层内文本</layer>

  The

  <layer></layer> tag is a content tag, which means you can add content to it (such as <table>). Keep trying to insert the above code into your page...you will notice that the text inside the layer floats over and overlaps with other texts. Imagine a layer is like a piece of paper, located above the rest of the page, and does not take up space in the document stream. <h5 id="Layer-attributes">Layer attributes</h5> <p>A single layer can be boring, let alone useless. Fortunately, it has more features. The layer supports properties, allowing you to locate it using x and y coordinate systems, provide background for it, clip it (making a specific area of ​​the layer visible), hide it, and so on. I listed the most important layer properties below: </p> <table> <thead> <tr> <th>层属性</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td><code>id 层的名称，用于在脚本中标识它 left 层相对于x坐标的位置 top 层相对于y坐标的位置 width 层的宽度，以px或%为单位 height 层的高度，以px或%为单位 bgColor 层的背景颜色 background 层的背景图像 src 层中包含的外部HTML文档

  You can mix and match different attributes at will.

  Click here to view an example layer using some of the above properties

  Note that I did not specify the left and top attributes. When you do not specify, the layer will be placed where you define it.

  Script layer

  This is one of the most important things about layers - how to script them. After all, it is the script that makes the layers active. To access a layer, you need to use the following syntax:

  document.layername

  Accessing the layer is only the first step. Once you have accessed a layer, you can continue to manipulate one of the layer's properties to produce dynamic effects.

  Click here to view an example where the background color of the layer switches between red and blue.

  All layers of properties are readable and writeable, so be sure to try each property!

  When I started learning the implementation of IE 4 for DHTML, I realized it was much more complicated than the NS corresponding version. DHTML in IE does not depend on any tag, but on new objects and attributes generated by common HTML tags (such as

  and ) you are used to using. It is more powerful, but it is also harder to master.

  IE 4 style object

  HTML elements in IE 4 now support a style object, which is essentially a "dynamic" object for dynamically manipulating the appearance and feel of the element. Like the <layer></layer> tag, an element can also be assigned an "id" attribute, which can then be used to identify it during scripting. For example:

  <div id="adiv"></div>

  In your script, the syntax required to access the "adiv" style object is as follows:

  adiv.style<code>adiv.style

  Style objects contain many properties, by manipulating these properties, you can dynamically change the appearance of elements. I will now show some of these properties:

  Important properties of style objects

  1. backgroundColor<code>backgroundColor Background color of the element
  2. backgroundImage<code>backgroundImage Background Image of the element
  3. color<code>color Element color
  4. position<code>position element's position type. Acceptable values ​​are "absolute" and "relative"
  5. pixelWidth<code>pixelWidth element width
  6. pixelHeight<code>pixelHeight element height
  7. pixelLeft<code>pixelLeft Position of element relative to x coordinate
  8. pixelTop<code>pixelTop Position of element relative to y coordinate

  The above attributes represent only a subset of all supported attributes, but they are the most commonly used attributes. The basic syntax for manipulating any style attribute is the same, I will show it later. By accessing these properties, we can change the appearance and style of most HTML elements (rather than the <layer></layer> tag in Netscape!).

  Click here to view a simple demonstration

  Please note how I changed the text color:

  sometext.style.color = 'red'<code>sometext.style.color = 'red'

  I first use the id of the element to access it, then through the style object, and finally through the color attribute of the style, I was able to easily change the color of the text as needed!

  All style attributes are read-write and accessed in a similar way: element id-> style object-> attribute name.

  Click here to see another example that expands the image when the mouse hovers over it and restores it to its original size when the mouse moves out.

  Yes, I know it's not the most practical example in the world, but it does illustrate very well how DHTML works. Images change size as needed without reloading documents. This is something JavaScript cannot do alone.

  If you haven't been scared away by the syntax and functional differences in DHTML in NS 4 and IE 4, then you can learn how to dynamically make content on the page or make changes as needed!

  Dynamic content in NS 4

  Changing what's in NS 4 involves - you guessed it - layer<code>layer tags. All layers are considered by the NS browser as different entities from the rest of the page, and they have their own document object (which in turn contains other objects supported by the document). Understanding this is very important because the fact that the layer contains another document object makes it possible to create dynamic content in NS. I will first build a basic layer and then show how to change what's inside it:

  <layer height="30" id="alayer" width="100%"><code><layer height="30" id="alayer" width="100%"></layer>

  Are you ready to access the document object in the above layer? Here is the required syntax:

  document.alayer.documentdocument.alayer.document

  So, with this information, I could write a script that changes the content of the layer every 3 seconds.

  Click here to see an example of how to do this in Netscape.

  Text is being generated and erased dynamically, without reloading the document!

  Dynamic content in IE 4

  In IE 4, dynamic content is implemented through a special attribute called innerHTML, which exists in the <span></span> and

  tags. Simply set this property to the new HTML value and the content inside <span></span> or

  will be updated to the new value immediately! I'll illustrate how to do this by modifying the example above to create dynamic content for IE 4 users: Click here to see the examples for IE.

  The same result is just different in implementation!

  If you like to use animations, you will be happy to know that with DHTML, the entire webpage is now your canvas! You can create content that is free to fly on the screen. In Netscape, this is done by operating the <layer></layer> and left properties of the top tag. In IE 4, the same thing is done by changing the pixelLeft and pixelTop properties of the style object.

  Move elements in NS 4

  Recall in Lesson 2, the layer supports left and top properties, which control their offsets relative to the upper left corner of the document. Well, by using simple math operations and a few lines of scripts, we can update these properties dynamically so that the layers move! The following example changes the left property of the layer so that it moves horizontally when the button is pressed.

  Click here to view the example.

  You see, all I do is constantly adding to the left property of "space" to make it move and setting the property back to its original value when I want to return the layer to its initial position.

  Move elements in IE 4

  By the way, the day when NS and IE agree on one implementation of DHTML is the day when I can stop writing two versions of each thing (just vent my frustration). Moving an element in IE 4 basically first requires wrapping that element within a positioned <span></span> or

  and then changing the <span></span> and <div> properties of <code>pixelLeft or pixelTop. It sounds complicated, but it is actually very simple.

  Click here to view the example.

  What I did first is to set the external <div> called "spaceship" to the relative position, which is necessary to make the element moveable (you can also set it to the "absolute" value). Then, by manipulating the <code>pixelWidth attribute of its style object, the elements move.

  Before "real" cross-browser DHTML is available (in other words, when NS and IE are back to sanity), cross-browser DHTML basically means using various scripting techniques you choose in those JavaScript years to sniff out the browser the user is using and execute the code designed for that browser. In this lesson, I will first explain a way to create a "cross-browser" layer, and then show you a scripting technique I've learned recently that allows you to easily sniff out the type of browser.

  Create a "cross-browser" layer

  Okay, we have NS understanding <layer></layer> tags, IE understanding <span></span> and <div>. If we want to create a simple DHTML effect, such as moving images, we usually need to use two tags - a <code>layer tag for NS 4, and a div or span tag for IE 4. Not very pretty, right? Well, I've recently learned that there is actually a way to create a "cross-browser" layer with a tag, although it's a little buggy in terms of NS. Apparently, NS 4 treats absolutely positioned div as the same as the layer. So without further delay, here is an example of cross-browser layer: <div id="crosslayer" style="position:absolute"></div>NS 4 treats the above div<code>div as exactly the same as the layer. Like any other layer, to access it, we first need to go through the document object, and then the id of the layer:

  document.crosslayer<code>document.crosslayer

  In IE 4, we will simply use the id of div<code>div:

  crosslayer<code>crosslayer

  I found that in NS, specifying layers in this way, while convenient in terms of cross-browser compatibility, has one major drawback. Such layers do not always run like normal layers and sometimes even crash the browser. Get ready for unexpected situations!

  Browser Sniffing—Object Detection

  Until recently, whenever I wanted to determine the browser type of the user, I used the navigator<code>navigator object like most JavaScript programmers do. The following describes using this object to sniff NS 4 and IE 4:

  var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4)<code>var ns4 = (navigator.appName == "Netscape" && navigator.appVersion >= 4) var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)<code>var ie4 = (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion >= 4)

  I personally hate using navigator<code>navigator objects - it is too complicated to use (see the confusion above!). OK, I have good news to tell you. There is actually a faster way to sniff various browsers, which is called object detection.

  The idea is based on how JavaScript works. If the browser does not support a specific object, JavaScript returns null<code>null when you reference it. Understanding this fact, we can use object references (instead of navigator<code>if objects) in the if<code>navigator statement to determine the user's browser.

  Let's give an example. We know that NS 3 and IE 4 support document.images<code>document.images objects. If we want to sniff these browsers, we do this:

  if (document.images) alert("You are using NS 3 or IE 4 ")<code>if (document.images) alert("You are using NS 3 or IE 4 ")

  Translation of the above into English means: "If the browser supports images<code>images objects (only NS 3 and IE 4 support), a warning message is issued".

  Think of object detection as an indirect way to determine the user's browser type. Object detection is not a direct determination of the user's browser name and version (via navigator<code>navigator object), but a more general and troublesome browser sniffing technology.

  So, how do we use object detection to sniff NS 4 and IE 4? Well, only NS 4 supports document.layers<code>document.layers objects, only IE 4 supports document.all<code>document.all. We can use this knowledge to easily determine if a user is using NS 4, IE 4 or both:

  if (document.layers) alert("You are using NS 4 ")<code>if (document.layers) alert("You are using NS 4 ") if (document.all) alert("You are using IE 4 ")<code>if (document.all) alert("You are using IE 4 ")

  if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")<code>if (document.layers || document.all) alert("You are using either NS 4 or IE 4 ")

  Now you no longer have to return to the messy navigator<code>navigator object for browser sniffing!

  DHTML Resources

  Obviously, this tutorial is only an introduction to DHTML. Here are some excellent resources to continue your DHTML learning journey:

  • Dynamic Drive DHTML Example
  • MSDN's DHTML Guide

  Dynamic HTML (DHTML) FAQ

  What is the difference between HTML and DHTML?

  HTML (Hypertext Markup Language) is a standard markup language used to create web pages. It is static, which means it won't change once it loads. DHTML (dynamic HTML) on the other hand is not a standalone language, but an extension of HTML. It combines HTML, JavaScript and CSS to create interactive and dynamic web content. This means that DHTML allows web pages to make changes and interact with users without reloading the page.

  How does DHTML enhance user interaction?

  DHTML enhances user interaction by allowing web pages to react to user input without reloading the page. This is achieved by using JavaScript and CSS. For example, DHTML can be used to create drop-down menus, animations, and other interactive features. This makes the user experience more attractive and efficient.

  Can I use DHTML with other programming languages?

  Yes, DHTML can be used with other programming languages. While DHTML itself is a combination of HTML, CSS, and JavaScript, it can also interact with languages ​​such as PHP and ASP.NET. This allows for the creation of more complex and dynamic web applications.

  DHTML is still relevant today?

  Although new technologies such as AJAX and jQuery have become popular, DHTML is still relevant and widely used. It is the basic part of web development, and understanding DHTML can provide a solid foundation for learning more advanced web technologies.

  What are some common uses of DHTML?

  DHTML is often used to create interactive web content. This includes drop-down menus, form verification, animations, and image scrolling, etc. It can also be used to create single page applications where the entire site or application is loaded in one HTML page.

  How does DHTML improve website performance?

  DHTML can significantly improve website performance by allowing web pages to react to user input without reloading the page. This reduces server load and makes the user experience smoother and faster.

  What are the components of DHTML?

  DHTML consists of four main components: HTML, CSS, JavaScript, and Document Object Model (DOM). HTML provides the structure of the page, CSS controls the presentation, JavaScript enables interactivity, and DOM allows manipulation of page elements.

  How does DHTML work with Document Object Model (DOM)?

  Document Object Model (DOM) is a key part of DHTML. It provides a structured representation of a web page that can be operated using JavaScript. This allows pages to be changed dynamically based on user input.

  Is DHTML difficult to learn?

  The difficulty of learning DHTML varies depending on your previous knowledge and web development experience. If you are already familiar with HTML, CSS, and JavaScript, learning DHTML will be a natural extension of these skills. However, if you are not familiar with web development, it may take some time to master these concepts.

  Where can I learn more about DHTML?

  There are many resources available to learn DHTML on the Internet. Websites such as GeeksforGeeks, JavaTPoint and TutorialsPoint provide comprehensive guides and tutorials. In addition, you can find many video tutorials on platforms like YouTube.