Easy to master Dynamic HTML

Source: Internet
Author: User
Dynamic HTML, which many friends may have heard about, is called DHTML. But exactly what is DHTML?
Let's look at HTML first. It is a "static" web design language, mainly provides text and graphics display function. But it is difficult to provide multimedia, two-dimensional space movement, accurate positioning of text, graphics size and location.

The function of DHTML as a browser is actually just a concept, it is not a specialized technology (such as Javascript,activex), it does not refer to the label, Plug-in, or browser.

DHTML is one of the most inspiring and practical innovations in the process of network development in recent years. It is a concept that can be implemented through the development of a variety of technologies (of course, different browsers, different degrees of implementation), these technologies include JavaScript, VBScript, Document Object model (file target module) referred to as DOM, Layers and cascading Style Sheets (CSS).

So, what is DHTML? In short, DHTML is a way to change the layout style and animations of the web-leaf content at any time even after the Web page is downloaded into the browser. Since IE4.0 and Netscape4.0 are not exactly the same as the DHTML content claimed, we're going to come back together to understand the capabilities that the two browsers provide.

When you dial the Internet, type the correct URL (Web address). HTML is downloaded to your computer. This requires the various techniques we have mentioned that make up DHTML to get the browser to do the changes.

1. Client script programming language.
Scripting languages (JavaScript and VBScript) have long been written for HTML to produce dynamic effects. If you are using a IE4.0 or Netscape4.0 version of the browser. Some wonderful changes occur when your mouse moves up and down some graphics and key controls.

2. File target module (DOM)
In a sense, Dom is the true core of dynamic HTML. It's what makes HTML so volatile. The DOM embodies the hierarchical relationship of page elements, which are rendered on the browser at a specified time. The DOM includes spatio-temporal background information, such as the current date and time, including the browser's own properties, such as the browser's version number, including the window's own properties, such as the URL of the Web page, and finally the HTML elements, such as <p> tags, divs, or tables. By exposing the DOM to a dynamic HTML language, browsers can make more functional elements of a Web page work. If elements such as date and time cannot be automatically transformed, it can also be done by scripts modifying other elements. The DOM of IE4.0 is one of the reasons most people choose IE browsers. Although Netscape's DOM has many limitations than IE's, Netscape claims that in later versions of the browser, this feature will fully support the DOM standards set by the consortium.

3. Threaded style sheet (cascading style sheets,css)
CSS is part of the DOM, its properties can be reflected by Dynamic HTML programming language, so it can achieve almost all changes in the external visual effects of the page. By changing the CSS properties of the page elements (such as color, location, size), you can achieve all the effects of your machine's bandwidth and processor speed.

To sum up, CSS is the object of your Web page change, DOM is its dynamic mechanism, and the client's scripting language is the actual process of change. This is the Dynamic HTML.

If you are an initial contact with HTML friends may still feel that these concepts are somewhat abstract, it is ok that this is normal. You don't have to worry about the exact meaning of each noun and the program code immediately. Let's have a visual look at the capabilities of DHTML in the two most common browsers, IE4.0 and Netscape4.0.

1, IE4.0 version
1 dynamic typesetting style: can be accurate in pixels, points, feet and other units to set the HTML font type, thickness, style, row height, color, plus line, image, background image typesetting function. And can change the style at any time.

2 Mobile: With JavaScript, VBScript language and IE4.0 built-in ActiveX to provide mobile, transform graphics functions.

3 Dynamic content: Dynamically update the content of the leaf, insert tables and text at any time.

4 Animation content: IE4.0 Built-in Media control provides animation playback function.

5 Built-in database support: no complex program (this is our most hope), without consuming a lot of resources of the server can be processed web designer data (can save money of course is our most hope AH). DHTML can handle three types of data sources, including files, SQL, and JDBC.

2, Netscape4.0 version
1 Dynamic Typesetting style: You can use JavaScript to control style sheels.

2 Dynamic layer: Provide graphics and text positioning, change the order of overlap, control hidden or display graphics and text, moving graphics and text function, let you design animation effect.

3 Dynamic font: Provides the server to download the font function.
Is it a bit tiring to read so many words? Or is it because you feel that you have not received any benefits and some regrets? Let me give you a very simple example, I believe you must have some harvest.

This is a section of the CSS control text program:
<style type= "Text/css" >
<!--
a:link,a:visited{Text-decoration:none}
A:link{color:blue}
A:hover{color:red}
-->
</style>

Take a look, it's easy. The real code is just three sentences. <style> is a CSS label <!--> is for browsers that do not support it to skip this piece of code. A: Refers to the following program to <body> in the label <a></a> in the text content is valid, that is, we usually do the content of the link, the contents of a look at the understanding, with me to lend you a dictionary?

As a result, the linked text not only has no annoying underline, but also has the onmouseover effect (the mouse from the linked text across a different color display.)

Do not hesitate to add to the Web page to see the effect. Try to change it again. Add a sentence a:hover {text-decoration:underline} is the effect better?

And the same effect as the picture and the characters to speed up the download speed, the code is so easy, today has a harvest it. Quickly turn it into productivity.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.