Dynamic HTML

HyperText Markup Language (HTML)

A tagged language, derived from SGML. Each html file has a root html tag, a head section, and a body section. Some of the most frequently used tags are summarized below:

<html> - defines the page as a web page
<head> - starts a region that is not rendered on the user's view, but may contain meta-data, styles, and scripts
<body> - starts a region that is rendered for client view.
<h1>, <h2>, .. - define headings that may have different fonts, colors, and emphasis
<p> - starts a paragraph
<br> - inserts a line break
<b> - makes enclosed text bold
<i> - makes enclosed text italic
<u> - underlines enclosed text

element syntax is:

<tagName *[attributeName="value"]> element body </tagName>

Attributes typically define colors, positions, links, ids, relationships, and event-handlers. An example is:

<p style="color: AntiqueWhite">some paragraph text here</p>

Only a few of the most common tags have been shown here. The DevGuru site has a nice reference for all of the tags defined for HTML 4.0

Cascading Style Sheets (CSS)

There are three ways to define styles using CSS:

Separate file containing styles
Inline styles in the <head> section of each page
style attributes inside a tag

Note that styles in a tag override styles defined inline, which, in turn, override styles in a separate stylesheet.

element syntax is:

selector { property: value }

Attributes typically define colors, positions, and fonts. The following example indents all paragraphs on the page:

p { margin-left: 10%; margin-right: 10%; }

To style a single element we define a class:

.indent { margin-left: 10%; margin-right: 10%; }

and apply it to any specific tag:

<p class="indent">some paragraph text</p>

The w3shools website has a lot of useful tutorial and reference material on DTHML and specifically on CSS.

Script

There are two major scripting languages in use on Microsoft Platfroms: JavaScript and VBscript. We will discuss only JavaScript in these notes. The syntax for a script is:

<script type=text/javascript">
/* some script code here */
</script>

Script is used to respond to events on the page. These could be mouse position, mouse button clicks, keystrokes, or events related to page loading and unloading. This page illustrates the use of a JavaScript function to handle mouse button clicks when the mouse is positioned over a specific span element we call a patch. Please click on the light rectangle below.

click me

Two things are required to create the behavior you just witnessed.

First, the patch was created with a span that has been styled with a class named patch. The patch class inverts colors of the page, changes the cursor to a hand, and pads the span with some extra pixels to make the rectangle slightly larger than the text it encloses. The span element includes the class and also registers an event handler function called msgbox() with the mousedown event.
Second, we need to define the event handler function in the <head> section of the page. Here, we simply sendup an alert box saying that the patch was clicked.

You can see how this is done by viewing the source for this page. Look at the head and at the span tag above. Then, go look at StyleSheet1.css.

Note: you will have to unload the page by clicking prev and then coming back to this page in order to view the source. The reason for this is that only one popup window can exist at any given time, and we create one when we click the patch.

Both w3shools and DevGuru provide tutorials and excellent reference materials on scripting and the use of JavaScript.

The w3schools website has a lot of tutorial and reference material on DHTML as well as many example applications.