Creating Web Sites

This section contains overviews and tutorials for creating Web sites.

Overviews

Creating Accessible Web Pages With DHTML

This article explains how to create accessible Web pages using Dynamic HTML (DHTML) with Windows Internet Explorer.

Cross-Platform Functionality

Obsolete. With Microsoft 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.

Introduction to Dynamic HTML

DHTML 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.

Tabbed Browsing for Developers

Tabbed browsing in Internet Explorer 7 affects the Document Object Model (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.

DHTML Tutorials

How to Add a Shortcut Icon to a Web Page

You 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 Elements

Dynamic positioning, Cascading Style Sheets (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 Image

This article demonstrates how to implement a simple transition on an image.

How to Change Text Color Character by Character

This tutorial uses the table container to demonstrate color cycling effects for text.

How to Create a Dynamic Table of Contents

The 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 Menu

In 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 Menu

DHTML 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 Application

This 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 DHTML

This article demonstrates both ways to implement flying text through the marquee element and through CSS positioning.

How to Fly Text in Geometric Patterns

This 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 Events

Some 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.

Document Compatibility

About Conditional Comments

This 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 Internet Explorer 5 and later versions, while writing pages that downgrade gracefully in less-capable browsers or display correctly in browsers other than Internet Explorer. Conditional comments are the preferred means of differentiating CSS rules intended for specific versions of Internet Explorer.

About Mouse Capture

Internet Explorer 5 enables Web authors to design pages that handle mouse events in the same way desktop applications do.

About the DHTML Object Model

The DHTML 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 Model

This 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 8

Starting 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.

Defining Document Compatibility

Document 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 Effectively

This topic demonstrates how to detect current and future versions of Internet Explorer more effectively.

Finding Text in the Document

You 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.

HTML Enhancements in Internet Explorer 8

Internet 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.

Mark of the Web

The 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.

Scripting with Elements and Collections

Every 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 JavaScript

This article describes the W3C Selectors API and how it enables you to use CSS selectors to select objects in JavaScript applications.

Understanding the Compatibility View List

This 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 Model

An 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 Strings

This 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 the Popup Object

The popup object enables you to create window objects that take full advantage of DHTML.

Using the TextRange Object

Most 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.

Tables and Forms

Building Tables Dynamically

This 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.

Introduction to Forms

Forms 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.

Using AutoComplete in HTML Forms

Internet 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 Elements

In 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.

Working with Windows, Frames, and Dialog Boxes

Internet 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.

Tips and Tricks

Building High Performance HTML Pages

The 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.

Faster DHTML in 12 Steps

This article describes how using some DHTML features can affect performance more than others, and it presents tips that will help your pages perform faster.

Performance Considerations in Internet Explorer

This page provides links and tips for getting extra performance from DHTML, Script, Web Servers, ActiveX Controls, Java Applets, and Plugins.

Tips and Tricks

As 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.