Dynamic HTML (DHTML)

In a rare occurrence several years ago, Netscape and Microsoft, arch-rivals at the time, came into agreement that it would be a good idea to introduce their version 4 browsers' new capabilities by adopting a new marketing term: "dynamic". They added that word to the front of the well known term "HTML" and Dynamic HTML was born.

There really is no DHTML per se, in the manner that there is HTML, which has specifications recommended by the World Wide Web Consortium. DHTML is not a single fixed standard but rather refers to multiple technologies. And here is where Netscape and Microsoft parted ways, which was their more typical behavior. Even though they both used the expression "Dynamic HTML" the only DHTML standards that Internet Explorer and Netscape Navigator could originally agree on are represented below in the overlapping, middle section.

The other options were to avoided by many web sites as there was no guarantee they would work. And even in the areas that were agreed on (CSS, CSS-P, and JavaScript), in some specific cases there were still conflicts and limitations as to what each would do. As usual, the best bet is for you to always test your pages on a variety of browsers and platforms before you upload them.

A bit of Web history...

Top

The parts of the different original "DHTMLs" that were potentially cross-browser (v.4+) compatible. Note that parts of CSS are still not evenly supported, although the gap is closing rapidly:

• CSS: Cascading Style Sheets
• CSS-P (P = Positioning; it allows for precision positioning on a page)
• JavaScript

Regardless of what Netscape and Microsoft could or could not agree on, only their version 4 and later browsers are capable of displaying DHTML somewhat effectively. In this lesson we will focus mainly on CSS - Cascading Style Sheets. JavaScript is a very large topic which we can delve into later.

In brief, JavaScript is what gives us many of the rollover buttons that we see on the Web: images that change as you move your mouse over them. It also provides a very broad range of other capabilities. Its main benefit is that it can do its work on the client side (that is, the viewer's browser) thus avoiding taxing the resources of a server. The browser is able to interpret the JavaScript code which has been sent to the browser inside of a standard HTML document. But for now, let's have a closer look at CSS.

Top

Introduction to CSS: Cascading Style Sheets

CSS is intended to minimize the use of html tags and attributes for purposes of formatting. The theory behind it is this: it is better to separate content labels (tags) from formatting. Separating content from formatting allows for easier control of formatting.

For example, the <p> paragraph tag ought to be used strictly for identifying a paragraph of text. It should not also be a vehicle for applying formatting such as alignment of the paragraph using the align attribute. The use of the align attribute in the paragraph tag has been officially deprecated by the W3C (who attempt to control such matters), however most of the deprecated tags and attributes are still widely used and supported.

Of course, making the separation of content from formatting is nice in theory, but in terms of ease of application, using HTML the "old" way is often easier than using CSS. There are still millions and millions of web pages that do not use or fully employ CSS for formatting and browsers still honor those uses. Nevertheless, CSS is increasingly taking hold. It won't replace HTML, but it assumes formatting responsibilities more and more.

Is this a good thing? Generally, yes, although it adds a new layer of complexity that those new to the web may find a bit daunting. So, I will ease you into it in the exercises below.

Cascading, Style Sheets

You might ask yourself, "What does the word 'cascading' mean in this context?" The term cascade refers to the rules that CSS uses to determine under what circumstances a style is applied. For example, if there are conflicting styles or if one style is attached to a tag that is nested inside another tag that has a style applied to it, what determines which style is ultimately displayed, if any?

Now what about the term "Style Sheets"? You are probably all very familiar with word processing programs like Microsoft Word. These programs have a basic set of formatting guidelines that determine how your page will look. This includes settings for the font, font size, alignment, line spacing, and more.

The combination of one or more formatting settings are collectively referred to, and stored, as a "style". MS Word allows you to create your own custom styles that you can apply to all or part of your documents at your discretion. A collection of these style descriptions is called a style sheet.

If you decide that you no longer like the way a style looks, you can change the definition of the style. Then, all instances of the use of the original style will be automatically updated to reflect the new definition! It's a lot like "symbols" in Fireworks and Flash where if you modify the original symbol all uses ("instances") of it will be updated accordingly.

Even though CSS works in conjunction with HTML, it is not HTML. It improves on HTML but adds a higher level of complexity. It allows you to more specifically define what an HTML tag means.

For example, normally you have to use the BOLD <b> and ITALIC <i> tags to get a an entire paragraph's contents to look both bold and italic. With CSS you can redefine the paragraph tag to also include bold and italic as a part of its definition. In other words you wouldn't need all 3 sets of tags, just one.

Top

The Basic Components of CSS

In order to get the tags to do what you want them to do you have to follow certain specific guidelines. A style, also called a rule, consists of three parts:

• A selector - this specifies where the style is applied.
  • Generally, a selector can be either:
    • An html tag
    • A css class
    • An ID selector
• One or more properties.
• A value for each property.

Top

Selectors, In Detail

Selectors are the means for specifying where styles will be applied in the html document. Here they are again, with added details:

• HTML Selector
  
  
  • This is an html tag that has been redefined so that it imposes formatting other than, or in addition to, any formatting that the tag normally imposes.
  • The new formatting gets applied whenever that tag gets used.
  • For example, the paragraph tag alone, without any html attributes, could do more than merely starting a new paragraph. It could also apply bold, the courier font, and right alignment.
  • The drawback to using this method for applying formatting is that whenever you use that tag in the document, the formatting gets applied, even if you may not want it to be in some cases.
    
    
• Class Selector
  
  
  • Classes allow the Web page author to make up a name for the style that reflects its intended uses.
  • The author can then apply the style to any tag at the author's discretion using the class attribute.
    • This assumes that the tag can actually accept the style's formatting. For example, you can't expect to apply a font size to an IMG (image) tag and expect it to do anything.
  • Because one can choose when to apply a class to a tag, it allows more flexibility than HTML selectors.
  • When being defined, class selector names always start with a period followed by the name you want to use.
  • For example: .bannerText
    
    
• ID Selector
  • Just like a class selector, you make up the name.
  • Wherever the style is being defined, the names needs to start with a # number sign.
  • For example: #leftNavBar

Top

Property and Value = Declaration

Taken together, a property and its value(s) are called a declaration. A property is the item that is being given a specific "setting" which is called that property's value. There can be more than one value applied to a property.

Following is how a rule with two declarations would look. Pay careful attention to the punctuation and syntax. This rule uses the h1 tag as its selector and then includes two declarations: font family and text alignment. What this means is that whenever the h1 tag is used, the text will be aligned to the right and displayed in the courier font. (Note that this example is formatted in a traditional coding manner, however the rule could also have been written out in one continuous line):

   h1 {    
      font-family: courier;  
      text-align: right; 
   }

Top

Putting it all together

In each case the rule can be defined in three places:

• In a tag using the html style attribute.
• In the HEAD of the html document using the <style> tag.
• In an external .css file, which is a relatively small text file.

The selectors are used in the BODY part of the document at the specific location where the style is to be applied. Here are some examples of what defined selectors would look like.

HTML selector: In the following example the paragraph tag is having its meaning augmented to include bold, a font, font size, and underline whenever the paragraph tag is used:

p {
  font: bold 16pt times,serif;
  text-decoration: underline;
  }

Class selector: In this case, a class named .huge will cause whatever it is applied to be italic and have a size of 42 points. First the rule followed by an example of how the selector would be used:

.huge {
      font-style:italic; 
      font-size:42pt;
      }

The following shows how it would be applied in a paragraph tag. Note that the dot "." does not appear when the class attribute specifies it - the dot is only needed in the original definition of the rule:

<p class="huge">The text goes here.</p>

ID selector in this case specifies a location. ID selectors can be used only ONCE in a document. They are often used for positioning:

#topSection {
          position: relative; 
          margin-left: 9em; 
          color:red;
          }

The following shows how it would be applied in a table tag. Note that the number sign "#" does not appear when the ID is specified in the tag:

<table id="topSection"> 

Please do these three exercises that cover the three CSS selector types:

1. HTML Selector allows you to modify the definition of a specific tag. Not too flexible.
   
2. Class selector: allows you to create and name a style that can be applied to various tags. It makes it easy to apply similar formats to many different tags.
   
3. ID Selector: allows you to apply a style, usually for positioning elements.

Top

© 2006 Dan Hitchcock Vaughan and its licensors. All rights reserved.