HTML and DHTML Overviews and Tutorials
This section contains overviews and tutorials for Dynamic HTML (DHTML).
Creating Web Sites
About Conditional CommentsThis article introduces conditional comments, which offer certain advantages over scripted browser detection techniques. Conditional comments make it easy for developers to take advantage of the enhanced features offered by Microsoft Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Windows Internet Explorer. Conditional comments are the preferred means of differentiating Cascading Style Sheets (CSS) rules intended for specific versions of Internet Explorer.
About Mouse CaptureInternet Explorer 5 enables Web authors to design pages that handle mouse events in the same way desktop applications do.
About the DHTML Object ModelThe DHTML Document Object Model (DOM) allows authors direct, programmable access to the individual components of their Web documents, from individual elements to containers. This access, combined with the event model, allows the browser to react to user input, execute scripts on the fly, and display the new content without downloading additional documents from a server. The DHTML DOM puts sophisticated interactivity within easy reach of the average HTML author.
About the W3C Document Object ModelThis document discusses the implementation of the World Wide Web Consortium (W3C) Document Object Model (DOM) interface available in Internet Explorer 5 and later.
Attribute Differences in Internet Explorer 8Starting with Internet Explorer 8, there is a distinction between the value of an attribute as it is specified by a page author and the representation of the value in the DOM. This distinction can affect the functionality of Web sites originally designed to support older versions of the browser. This article explains the distinction between content attributes and DOM attributes DOM, demonstrates how this distinction impacts Web pages, and shows how to obtain each value using JavaScript.
Building High Performance HTML PagesThe features delivered with Internet Explorer 4.0 and later have helped make the Web a compelling space in which to work and to play. The quantity and complexity of pages as well as the number of consumers of those pages has significantly increased the traffic on the Web. For all the merit that the Web brings to application developers, it introduces a host of problems.
Building Tables DynamicallyThis article discusses the structure of HTML tables and explains how to use the DOM to create them. It also compares the benefits of using table-specific methods instead of the more generic DOM methods. The article assumes you are familiar with JavaScript.
Creating Accessible Web Pages With DHTMLThis article explains how to create accessible Web pages using DHTML with Internet Explorer.
Cross-Platform FunctionalityObsolete. With Internet Explorer 4.0, content authors can easily create pages that run on all platforms—the 32-bit Windows platforms, Windows 3.1, Macintosh, and UNIX. In particular, core DHTML and Active Channel functionality are cross-platform.
Defining Document CompatibilityDocument compatibility defines how Internet Explorer renders your webpages. This article explains document compatibility, how to specify the document compatibility mode for your webpages, and how to determine the document mode of a webpage.
Detecting Internet Explorer More EffectivelyThis topic demonstrates how to detect current and future versions of Internet Explorer more effectively.
Faster DHTML in 12 StepsThis article describes how using some DHTML features can affect performance more than others, and it presents tips that will help your pages perform faster.
Finding Text in the DocumentYou can search for a given string of text in a document by using the findText method on a TextRange object. This method starts the search at the beginning of the range and, if it finds the string, positions the range so that it entirely encloses the string.
How to Add a Shortcut Icon to a Web PageYou can use shortcut icons to display your logo or some other small graphic on the Internet Explorer Favorites menu, address bar, and—starting with Internet Explorer 7—page tabs. They have no special Web server requirements and are a great way to add brand recognition to your Web site.
How to Animate a Sequence of ElementsDynamic positioning, CSS, and the DHTML DOM, put together, bring animation to the Internet with very minimal code. The manner in which each element in the series appears on the page can vary, from being flown into the page to being gradually faded in using any one of the transition patterns exposed by the filter attribute, or simply made visible through the visibility property of the element.
How to Apply a Transition on an ImageThis article demonstrates how to implement a simple transition on an image.
How to Change Text Color Character by CharacterThis tutorial uses the table container to demonstrate color cycling effects for text.
How to Create a Dynamic Table of ContentsThe example provided in this article demonstrates how to create an expandable table of contents, using code that you can reuse without modification.
How To Create a Mouse Capture Context MenuIn this sample, a context menu is created that opens when the user right-clicks a specific object on the Web page.
How To Create a Mouse Capture Drop-down MenuDHTML menus can be tuned to better respond to mouse activity by coordinating the use of the mouse capture methods and events in Internet Explorer 5 and later. The mouse capture methods setCapture and releaseCapture and the onlosecapture event allow Web authors to create dynamic features that do not interfere with other content on the page.
How to Create an HTML Editor ApplicationThis tutorial describes how to use features found in Internet Explorer 5.5 or later to create an HTML Editor Application. The application you create in this tutorial contains an editable region where users can type and format text using all of the standard formatting commands.
How to Fly Text in DHTMLThis article demonstrates both ways to implement flying text through the marquee element and through CSS positioning.
How to Fly Text in Geometric PatternsThis article outlines the basics of how to animate text to move in geometric patterns. Achieving results might take more time at the onset, yet once you have a few routines for calculating different slopes, you can adapt them quickly to generate unique effects.
How to Manipulate Text Effects in Response to Mouse EventsSome DHTML effects require minimal scripting to attain. One such effect, activating text in response to mouse events, is achieved largely through the use of CSS rules and the className property. Creating text effects in this manner yields ease of maintenance and succinct code.
HTML Enhancements in Internet Explorer 8Internet Explorer 8 includes features designed to more closely support industry standards, such as the HTML 4.01 Specification. This article describes these features, and provides guidance for incorporating them into your Web sites.
Introduction to Dynamic HTMLDHTML is a set of innovative features originally introduced in Internet Explorer 4.0. By enabling authors to dynamically change the rendering and content of a Web page as the user interacts with it, DHTML enables authors to create visually compelling Web sites without the overhead of server-side programs or complicated sets of controls to achieve special effects.
Introduction to FormsForms provide an interface for collecting, displaying, and delivering information, and are a key component of HTML. By providing different controls such as text fields, buttons, and checkboxes, forms can enhance Web pages with a means to exchange information between a client and a server.
Mark of the WebThe Mark of the Web (MOTW) is a feature of Internet Explorer that enhances security by enabling Internet Explorer to force webpages to run in the security zone of the location the page was saved from (as long as that security zone is more restrictive than the Local Machine zone) instead of the Local Machine zone. When you are developing webpages, the MOTW enables you to test your HTML documents in the security zone where you intend the pages to run. Adding the MOTW to your webpages also enables you to fully test their compatibility with users' security settings.
Performance Considerations in Internet ExplorerThis page provides links and tips for getting extra performance from DHTML, Script, Web Servers, ActiveX Controls, Java Applets, and Plugins.
Scripting with Elements and CollectionsEvery HTML document consists of a combination of HTML tags and their attributes. These elements define the structure of the document and determine how the content is presented. Using the DHTML Object Model, you can examine and modify these elements and their modifying attributes.
Selecting Objects with JavaScriptThis article describes the W3C Selectors API and how it enables you to use CSS selectors to select objects in JavaScript applications.
Tabbed Browsing for DevelopersTabbed browsing in Internet Explorer 7 affects the DOM and the WebBrowser Control. This topic describes the effects on the DOM, shows how applications hosting the WebBrowser Control can enable tabbed browsing shortcuts, and describes notifications useful to those writing Internet Explorer 7 extensions.
Tips and TricksAs with any type of programming, writing bug-free, efficient scripts that meet your expectations takes a bit of work. The following sections provide some tips and hints to make that work take less time and go more smoothly.
Understanding the Compatibility View ListThis article describes the Compatibility View List, also known as the Compatibility List. It explains how the Compatibility View List was created, how to determine whether your site is in the list, and how to have your site removed from the list.
Understanding the Event ModelAn event is a notification that occurs in response to an action, such as a change in state, or as a result of the user clicking the mouse or pressing a key while viewing the document. An event handler is code, typically a function or routine written in a scripting language, that receives control when the corresponding event occurs.
Understanding User-Agent StringsThis topic describes the user-agent string, which identifies your browser and provides certain system details to servers hosting the websites you visit. The topic also shows how to view your user-agent string, summarizes tokens used by recent versions of Internet Explorer, and documents registry keys that affect the user-agent string.
Using AutoComplete in HTML FormsInternet Explorer 5 and later includes an integrated feature called AutoComplete, which helps users quickly enter information into form fields. The AutoComplete innovation in HTML forms safely stores information entered into INPUT_text and INPUT_password fields.
Using IFRAME ElementsIn Internet Explorer 5.5 and later, frames are windowless, resulting in greatly improved performance. In addition, Internet Explorer 5.5 and later can now overlap IFRAME elements—also known as inline floating frames—and can make the content inside inline floating frames transparent.
Using the Popup ObjectThe popup object enables you to create window objects that take full advantage of DHTML.
Using the TextRange ObjectMost users will only want to use the innerText/innerHTML and outerText/outerHTML properties and methods discussed previously. However, there is some more advanced text manipulation that can be done using a "text range" object.
Working with Windows, Frames, and Dialog BoxesInternet Explorer creates a window object whenever it opens an HTML document. Because this object is the highest-level object in the object model, you use it to gain access to properties and subobjects in the object model that you need to dynamically access the document content. This article explains how to use the window object, create new window objects, and create special types of window objects.
Content Design and Presentation
About Element PositioningInternet Explorer supports the ability to position HTML elements in x- and y-coordinates and to overlap elements in planes along the z-axis, which extends toward and away from the viewer in a Web document. These capabilities allow authors to precisely place elements, images, controls, or text on to a web page. By using scripts to manipulate the position coordinates and other dynamic styles, authors can move elements around a page, creating animated effects. The combination of dynamic styles, positioning, transparent Microsoft ActiveX Controls, and transparent images presents authors with a rich set of animation options.
About Font EmbeddingFont embedding has long been a feature of Microsoft applications, such as Microsoft Word and Microsoft PowerPoint. It enables fonts used in the creation of a document to travel with that document, which ensures that a user views the document exactly as the author intended. Internet Explorer has supported embedded fonts since Internet Explorer 4.0.
About Text Rendering in Internet Explorer 9This informational topic advises developers about how sub-pixel positioning and hardware-accelerated text affect the way that webpages are displayed in Internet Explorer 9 across different display resolutions and zoom factors, and how text display has changed from previous versions of Internet Explorer. This topic also might be of interest to enthusiasts who want to learn more about web typography and readability.
Changing Element StylesThis document shows you how to change the SRC attribute on an iframe element so that the contents of iframe change on the fly. The same example also shows you how to change the background color of the body for the
Controlling Presentation with Measurement and Location Properties In Quirks ModeSRC=document of the iframe. The next set of examples shows how to change the class name of the element so that it is associated with a different style sheet.DHTML exposes measurement and location properties that you can use to change the size and position of HTML elements on your Web pages. When you understand what these properties are and how they affect elements on a page, you can achieve greater control over the appearance of your Web pages. For example, you can use these properties to design pages that are similar to documents in other applications, such as PowerPoint or Word.
Controlling Presentation with Measurement and Location Properties In Strict ModeDHTML exposes measurement and location properties that can be used to change the size and position of HTML elements on your web pages. An understanding of these properties and their impact on the elements in a page can help you achieve greater control over the layout of your websites. This article explains how you can use measurement and location properties to control the appearance of a web page that is rendered using the Internet Explorer 7 strict mode.
Enhancing Table PresentationInternet Explorer 5 gives the author more control over table presentation. Significantly faster rendering is now possible. Using this layout, authors can increase table rendering speeds by several orders of magnitude, particularly for longer, more complex tables.
Introduction to Dynamic StylesYou can dynamically change the style of any HTML element in a document. You can change colors, fonts, spacing, indentation, position, and even the visibility of text. Because the DHTML DOM makes every HTML element and attribute accessible, it is easy to use scripts to dynamically read and change styles.
Introduction to Filters and TransitionsWith Internet Explorer 4.0 and above, you can apply various multimedia-style visual effects to your Web page. You can implement these effects in Web pages using CSS properties. By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents. Internet Explorer 5.5 and above supports the richest variety of optimized filters. Most examples in this article require that you have Internet Explorer 5.5 installed.
Managing Style SheetsDynamically changing CSS styles that are applied to documents is not limited to the inline styles (styles defined on HTML elements with the STYLE attribute). Global style sheets defined with a LINK or STYLE tag in the HEAD section of the document can be manipulated through script. Manipulating the global style sheet is a powerful way to dynamically change the styles that apply to Web pages.
Measuring Element Dimension and Location with CSSOM in Internet Explorer 9This topic is designed to help web developers understand how to access the dimension and location of elements on the page through the CSS Object Model (CSSOM) in Internet Explorer 9.
Printing and Style SheetsThe style and link elements support the MEDIA attribute, which defines the output device for the style sheet.
Understanding CSS SelectorsThe basic building blocks of a CSS style sheet are its style rules. Selectors are used to "select" elements on an HTML page so that they can be styled. Without selectors, there would be no way to determine how the rules should be applied. This article introduces the fundamentals of CSS declaration syntax, to describe how selectors are used.
Quick Reference Guides
Color TableColors can be specified in HTML pages by using numbers to denote an RGB color value, or by using a color name. In Internet Explorer 9 and later, you can also define colors by hue-saturation-lightness (HSL) values and alpha transparency.
CSS Length Units ReferenceThis topic defines the supported values and units for CSS
Language CodesThe following table lists all the possible language codes used to specify various system settings.
Data Storage and Cookies
About DHTML Data TransferAs of Internet Explorer 5, you have access to an extensive data transfer implementation. For Internet Explorer, data transfer involves writing information to and reading it from the clipboard through a data transfer object. The information transferred includes both the data format and the data itself.
Introduction to DOM StorageThe Web Storage API includes two related mechanisms for persisting client-side data in a secure manner using the DOM, sessionStorage and localStorage. These objects were introduced in Internet Explorer 8.
Introduction to PersistencePersistence enables authors to specify an object to persist on the client during the current and later sessions using DHTML behaviors. Persistence allows Internet Explorer 5 and later to retain Web page information, styles, variables, and state.
Persisting Collapsible Table of Contents StateWeb pages that employ a collapsible table of contents tend to share a single problem: when a user leaves the page, the table of contents reverts to its original state. For anyone trying to navigate through these nested references, it is frustrating to leave the page and return, only to have to wade through the table of contents again. Persistence behavior provides a solution to this problem.
Persisting Custom and Dynamic StylesDynamic and custom styles selected at run time by the user can be persisted when the page is saved as a favorite using the saveFavorite behavior.
Persisting Form DataUsing HTML to design forms comes with some drawbacks, namely the need for a server or client-side script to process the form data. The saveSnapshot behavior can be used to save a Web page and persist the form data directly within the page itself. This allows a larger audience to use Web forms for day-to-day activities without needing a special script to process and deliver the information.
Persisting Session InformationSession information is usually recorded for sites that use multiple pages to accomplish a task, such as virtual shopping carts and advanced search engines. Pages that employ these variables and files can easily swell to a very large size while they juggle delivering a Web page and processing the surrounding scripts. Persistence allows most of this information to be stored on the client, thus decreasing download time and the performance hit to the server's processor(s).
Security Considerations
About Cross-Frame Scripting and SecurityWith DHTML, content in different windows and frames can interact in powerful ways by scripting with the object model. However, since a browser can simultaneously display unrelated documents in its various windows and frames, certain rules must be enforced to protect data integrity and privacy of information.
About the Pop-up BlockerThe Pop-up Blocker feature in Internet Explorer 6 for Windows XP Service Pack 2 (SP2) protects users from malicious activity that is often hidden behind or initiated by pop-up windows. Designed to give users back control over their Web browsing experience, this feature is on by default, and it blocks script-initiated pop-up and pop-under windows that launch automatically from a Web site. By understanding how the Pop-up Blocker works, you can ensure that important information on your Web site gets noticed, and you can provide your users with a better Web-browsing experience.
About Window RestrictionsIn Internet Explorer, scripts can open two different types of windows and can resize and reposition existing windows. Malicious coders have used these script-opened windows and the script-driven window positioning to mislead and deceive users. The Window Restrictions security feature in Internet Explorer 6 for Windows XP SP2 now restricts the opening and placement of windows by script to prevent malicious coders from misleading users. These restrictions include constraints on new Internet Explorer windows created by the window.open method and HTML pop-up windows created by the window.createPopup method, and positioning and sizing of Internet Explorer windows. By understanding Window Restrictions and how they work, you can write your scripts so that your Web pages function as expected.
Security Considerations: Dynamic HTMLThis document provides information about security considerations related to DHTML.
Integrating Sites and Services
About Native XMLHTTPThis topic describes the native implementation of Extensible Markup Language / Hypertext Transfer Protocol (XMLHTTP) in Internet Explorer 7 and later.
Connectivity Enhancements in Internet Explorer 8Internet Explorer 8 contains several important connectivity enhancements that can improve both the performance and functionality of Asynchronous JavaScript and XML (AJAX) and other Web applications. These enhancements include an increase in the maximum number of concurrent connections from a single host, and the addition of connectivity events.
Introducing AJAX NavigationsInternet Explorer 8 introduces AJAX Navigations. These features are designed to help alleviate the frustration of end users with AJAX-enabled Web sites that are not navigable through the Back and Forward buttons, and that do not update the browsing history. With just a few simple lines of script, you can add AJAX Navigations to your Web site, making the navigation of your AJAX-enabled content as smooth and seamless as "traditional" navigation.
Introducing Cross-domain RequestWith Cross-domain Request ("XDR") in Internet Explorer 8, developers can create cross-site data aggregation scenarios. Similar to the XMLHttpRequest object but with a simpler programming model, this request, called XDomainRequest, is the easiest way to make anonymous requests to third-party sites that support XDR and opt in to making their data available across domains.
XMLHttpRequest Enhancements in Internet Explorer 8Internet Explorer 8 enables finer control over AJAX requests. Specifically, developers now have the ability to specify a timeout for the XMLHttpRequest object, which, in combination with the increased number of concurrent connections enabled in Internet Explorer 8, can prevent delays in AJAX applications. An event handler for timeouts has also been added.
Installing a Search Provider and Setting the DefaultInternet Explorer 8 extends a rich searching experience by offering users the option to install multiple search providers. As a user installs search providers, each provider has a chance to set itself as the default provider. Internet Explorer 8 has a new mandatory Search Provider Default user experience that keeps the user in control of their preferred search provider.
OpenService Accelerators Developer GuideIn Internet Explorer 8, Accelerators are contextual menu options that can quickly access applications or Web services from any Web page. Users can install Accelerators from the Internet Explorer 8 Service Gallery or through any Web site that advertises them. Accelerators make it easier to copy information from one Web page to another. This article describes how to define and deploy XML-based Accelerators.
OpenService Specification for Accelerators - Version 0.8This document covers the minimum properties necessary to enable the publication and consumption of an Accelerator.
Search Provider Extensibility in Internet ExplorerStarting with Internet Explorer 7, the Instant Search box provides an AutoComplete feature so users can search for similar search terms used in previous searches. Internet Explorer 7 also enables users to add multiple search providers. Search improvements in Internet Explorer 8 focus on helping users search by significantly improving the Instant Search box drop-down menu and supporting search suggestions.
XML Search Suggestions Format SpecificationInternet Explorer 8 search suggestions are a service that search providers can support which allow the user to receive suggestions for a search query. XML suggestions from a search provider can support text suggestions or visual suggestions.
Testing Web Sites
Debugging HTML and CSS with the Developer ToolsInternet Explorer 8 provides enhanced Developer Tools to help you research and resolve HTML, CSS, and JavaScript related problems. This article is focused on the HTML and CSS tools of the Developer Tools. For information about debugging HTML and CSS code using F12 developer tools in Internet Explorer 9 see Using F12 Developer Tools to Debug HTML and CSS.
Debugging Script with the Developer ToolsThe Developer Tools feature of Internet Explorer 8 offers a built-in, lightweight Microsoft JScript debugger that enables developers to set breakpoints and to step through client-side JScript code without leaving the browser. This document outlines the high-level features of the JScript debugger.
Web Developer ToolsThis section lists the articles for Developer Tools.
Developer Tools Keyboard Shortcuts ReferenceF12 tools help you to quickly research and resolve HTML, CSS, and JavaScript related problems. This article provides a list of shortcut keys for F12 tools that will help you accomplish these tasks even faster. The keys are listed below by feature set. A comprehensive list of all shortcut keys is also provided for easy lookup and reference.
Developer Tools TutorialsThe Developer Tools tutorials will show you how to use the Developer Tools to inspect and resolve webpage issues. To establish a context for these scenarios, a starting webpage is provided. Each tutorial is focused on resolving a specific issue in order to make this webpage better, and is designed to provide a simple and safe environment for experimenting with the many features of the Developer Tools. For more on F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
Developer Tools User Interface ReferenceThis article is designed to give you a quick reference to the commands and menus available in the Developer Tools interface commands. The goal is to help you quickly identify main areas of the interface and to quickly find your way around, ultimately improving your productivity. Each element of the interface is identified and a short description of what it does is provided. For more on F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
Discovering Internet Explorer Developer ToolsEvery installation of Internet Explorer 8 comes with the Developer Tools. This tool enables Web site developers to quickly debug JScript, investigate a behavior specific to Internet Explorer, or iterate rapidly to prototype a new design or try solutions to a problem on-the-fly. This article introduces you to key features of the Developer Tools in Internet Explorer 8. For F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
Internet Explorer Application CompatibilityThis document is designed to be a companion to the Microsoft Application Compatibility Toolkit (ACT) (which is part of the Internet Explorer Compatibility Test Tool). The Internet Explorer Compatibility Test Tool logs information about your browsing session in Internet Explorer.
Profiling Script with the Developer ToolsThe Internet Explorer 8 Developer Tools provide a built-in script profiler that enables you to profile the JavaScript code running in Internet Explorer. This document outlines the high-level features of the script Profiler. For information about the F12 tools
Testing Browser and Document Compatibility Modes with the Developer ToolsThe F12 tools enable you to test how users experience your webpage in different Internet Explorer versions, as well as how different document compatibility modes affect the behavior of your webpage in Internet Explorer 9. This allows quick resolution of compatibility problems before your users encounter them.
Using Internet Explorer Developer Tools Network CaptureThe Network tab in the Internet Explorer 9 Developer Tools can help you diagnose network-related issues by showing all the traffic that is related to a page and exposing details about individual connections. You can see the relative timing that each item on a webpage takes to load and render, so you can quickly see and solve problems. For more on F12 tools in Internet Explorer 9 see How to use F12 Developer Tools to Debug your Webpages.
