Dynamic HTML refers to the combination of three web-page technologies: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript, providing structure, styles, and interactivity, respectively.

Early web pages were pretty basic, using only HTML: they consisted of plain text, images, and a little bit of structure such as paragraphs, headings, and lists.

Web Page Structure

Hypertext Markup Language (HTML) provides the basic description of a web page's structure.

The organization of various pieces of text and other elements has a great deal to do with how we understand their meaning.

For a simple example, a paragraph is defined by a pair of HTML tags <p>....</p> that bracket the text:

<p>This is a sentence of text that will be formatted into a paragraph.</p><p> This is the next paragraph, and most browsers will separate the two by blank space, the common typographic practice.</p><p> Paragraphs focus on a particular idea within a larger work.</p>

This is a sentence of text that will be formatted into a paragraph.

This is the next paragraph, and most browsers will separate the two by blank space, the common typographic practice.

Paragraphs focus on a particular idea within a larger work.

The dark purple above represents the HTML content of the document, while the light purple shows how it looks after it is interpreted by a web browser.

HTML Coverage

In this introductory course we will describe the version of HTML that is current at this writing, 4.01.

We will cover the following HTML structural elements:

HTML Style Elements

When looking at other people's web pages, you are likely to come across style elements and attributes, which modify the appearance of text and elements, respectively.

For example, one might choose a bold font face with the <b> element, or define positioning with the align= attribute.

Such elements and attributes are not directly related to "structure" or "meaning", and are therefore a logically separate group of modifications.

They were created by early browser designers before the more powerful Cascading Style Sheets standard was developed.

As we will see, HTML style elements and attributes are much more work to manage for any but the simplest web page.

While HTML still defines them for backward compatibility, their use is discouraged and in some cases deprecated, i.e. officially disapproved.

We therefore won't discuss them except to provide alternatives using Cascading Style Sheets.

CSS was invented to provide simplified and expanded support for styles, including fonts, borders, margins, and positioning.

Web Page Styles

The Cascading Style Sheets (CSS) standard is a comprehensive approach to adding stylistic enhancements to web pages.

CSS allows one to redefine the default stylistic behavior of HTML's structural elements in a way that can easily be used in multiple web pages.

CSS also allows styles to be applied to particular elements in a page.

For a simple example, the style of every paragraph in a document can be redefined with CSS:

<style type="text/css">
     p { font-style: italic; text-align: right; border-style: solid; }
</style>
....
<p>This is a sentence of text that will be formatted into a right-aligned paragraph with italic text and a solid border. </p><p> This is the next paragraph, and it will be formatted in exactly the same way.</p>

This is a sentence of text that will be formatted into a right-aligned paragraph with italic text and a solid border.

This is the next paragraph, and it will be formatted in exactly the same way.

Note that this single style definition effects every paragraph, no matter how many of them there are.

CSS Coverage

In this introductory course we will cover the following CSS stylistic elements:

  1. Borders, Margins, and Padding
  2. Fonts
  3. Text Alignment
  4. Element Positioning

JavaScript makes web pages interactive and HTML "dynamic".

Web Page Interaction

JavaScript is a relatively simple programming language that lets web pages respond in a sophisticated fashion to various events, including user interactions.

A simple example of a JavaScript statement displays the time when a web page is loaded:

<p>
    The time is now
    <script language="JavaScript">
        var now = new Date
        document.write(now.getHours() + ":" + now.getMinutes() + '.')
    </script>
</p>

The time is now

JavaScript also allows one to change just about any attribute of HTML and CSS based on user input.

<p onMouseOver="this.style.background = '#C6F'"
   onMouseOut="this.style.background = '#FCF'">
    This is a sentence of text that will be formatted into a paragraph with an interactive background.
</p>

This is a sentence of text that will be formatted into a paragraph with an interactive background.

JavaScript Coverage

In this introductory course we will cover the following aspects of JavaScript:

  1. Elements, Operators, and Controls
  2. Arrays and Objects
  3. Built-in Functions
  4. The Document Object Model
  5. Event Handlers

Why bother learning DHTML when we have Dreamweaver?

Design View vs. Code View

During this class, we will be using Dreamweaver to switch back and forth between the Design View and the Code View.

In Design View, the page looks something like what it will on a web page, but with additional guides to assist in the page's construction using graphical tools, including all three of the above technologies.

In Code View, you see all the HTML, CSS, and JS code that makes the page appear the way that it does, which can be very daunting.

Design View Advantages

Design View's built-in graphical tools can often provide shortcuts to creating HTML, CSS, and JS code.

And if you need to tweek some HTML tag or CSS declaration, Design View can often be easier to let Dreamweaver remember the correct terms to use, particularly as you are getting started.

Code View Advantages

Sometimes Dreamweaver's graphical interface makes it more difficult to investigate the characteristics of a piece of DHTML code, e.g. if an element has but a single CSS declaration but you have to check all of the options to make sure there aren't more.

Code View is also the only way to easily make a "global" change to your document or even web site, e.g. replacing all level-four headings with paragraphs.

And finally, sometimes Design View just doesn't always do what you expect and you need to tweak the DHTML code to get it right, e.g. when copying one piece of formatted material to another location and it incorrectly merges elements or adds unnecessary tags.

Code View vs. Text Editors

While any text editor can create a web page with DHTML code, Dreamweaver's Code View has certain advantages, such as:

There are lots of good sources of information about Dynamic HTML.