Welcome to lesson 3 of 4, creating a Dynamic Web Page. This demonstration of typing characters across the window is dynamic HTML with JavaScript.
The lesson is intended for those who want to learn about how Dynamic HTML is tied to CSS and JavaScript using HTML Events. It will focus on developing interactive web pages(Dynamic) using HTML Events to submit HTML forms, trigger JavaScript to execute, and change styles.

When you complete this lesson, you will be able to:

1. Know the purpose of DHTML
2. Know proper syntax for DHTML
3. Know how to use DHTML with and without HTML events
4. know basic usages for the tags.
5. Use HTML forms and events, to accept and submit input from users using
6. Validate input from users using internal or external JavaScript
7. understand syntax for referencing javascript
8. Change images
9. Use HTML Events (form, window, mouse) to trigger JavaScript.
10. Create a basic JavaScript
    Use JavaScript expressions and variables
    Use JavaScript functions and flow control
    Use JavaScript objects and arrays
    

What you should know:

• HTML
• CSS
• Some Javascript (This lesson will introduce some aspects of the javascript lessons)

What is DHTML

W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated." This lesson will include HTML forms, since it deals with interaction, which also make a web page non static.

Dynamic HTML (DHTML) is an extension of the HTML 4.0 definition that lets you create special effects such as text that flies off the page one word at a time, or rotating billboard-style transition effects between pages. Not all Web browsers support DHTML, so pages with DHTML might not be displayed properly or might contain errors with these browsers. This creates issues of accessibility (and hence legality) which need to be considered before using DHTML features. In particular, it is important not to design a page that relies on DHTML for functionality. Information on usability issues is available from Jakob Nielsen's Usability website www.useit.com

What's the purpose DHTML?

With DHTML a Web developer can control how to display and position HTML elements in a browser window.

Using DHTML with Event Handlers, CSS, DOM, and Javascript?

explain: Each have a set of DHTML features it can use of their own.

Getting Started:

To get started, begin by determining what HTML documents you wish to make dynamic. These will be the document that you will allow the user to interact with.

To use dhtml you will need to under stand it's syntax.

Event Handlers.

Cascading Style Sheets (CSS)
When using cascading styled with html you can display a formatted static web page that is styled from a CSS document. Since the page is static, your webpage is just for reading information. The user will not be able to enter or change anything on the page.

This all changes with DHTML, which it will give your the ability to changes your style within an html document using html events.

For example:

The Document Object Model (DOM)
DOM stands for the Document Object Model.

The HTML DOM is the Document Object Model for HTML.

The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML objects.

"The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document". DOM gives us access to every element in a document.

DHTML will use JavaScript's capabilities to issue commands, the DOM's roadmap of where each element is located, and CSS' ability to format that element.

DOM is used with JavaScript and/or HTML events that will allow an action to occur such a mouse event or a form event.

For example: the phrase, below, Click on this is a header 1 element in this HTML document. Using dynamic HTML your can change the color to read.

The HTML DOM defines how you can access and change the content of HTML documents.

Click on this

What is an event Handler?

An event handlers will allow an action to take place when an event occurs. If you've been on a PC, chances are great that you have triggered event many time.

For examples: click on the following:

This is a list of events that may occur:

onClick()
onSubmit()
onMouseOver()
onMouseOut()
onFocus()
onChange()
onBlur()
onLoad()
onUnload()

An event handler are embedded within the start tag of an HTML element, they can trigger a script to execute or execute within the element. Here's how:

These event along are what we will use to make our html pages more dynamic.

JavaScript (and VBScript)
Allows you to write code to control all HTML elements.

Chapter 4: Objects, Events and Document Object Model
• Objects
• The "new" operator
• The Document Object Model
• Arrays
• Events
onClick()
onSubmit()
onMouseOver()
onMouseOut()
onFocus()
onChange()
onBlur()
onLoad()
onUnload()

triggering scripts, or db updates using methods.

types of methods.

Accepting input

why discuss in dynamic section dynamic section

input

button

tie in form events to trigger java script or database update.

Spruce up page with rollover images using mouse events

Form Validation
Creating a FORM with an Active Cursor
Using FORM Checking
The required Logic Creating a function
Adding the checks
Testing