Sponsored Links

Style and Script

The STYLE and SCRIPT elements are two of the most important new additions to HTML. These elements allow you to add presentation and behavior to your document. HTML is intended to be presentation free. Instead, the HTML elements are intended to be used to add contextual and semantic information to your contents. A H1 does not mean big and bold, rather it is used to designate the most important header in the document.

Style Element

This explain why there will be no more presentational elements added to HTML. For example, you will not see another FONT or CENTER element added to the language. For a clear indication on the future of HTML, you should review the HTML 4.0 Strict DTD available at the W3C web-site. The strict DTD is a description of HTML that does not include any of the presentational elements.

On the previous page, the link element was introduced for defining an external style sheet. The STYLE element is used to include a style sheet directly in the document. The STYLE element has a single attribute defined by HTML 4.0 for specifying the mime-type. The mime-type defaults to "text/css" and is the most common style sheet language. The type attribute allows STYLE to be used with other style sheet languages.

For example, the H1 element is big and bold because there is a style sheet in the browser that defines it as such:

  <STYLE TYPE="text/css">
    /* Make H1 big and bold */
    H1 {font: 24pt arial; font-weight: bold}
    /* Define STRONG and B elements to be bold */
    STRONG, B {font-weight: bold} 
  </STYLE>

Internet Explorer 4.0 also supports an additional attribute, disabled, on the STYLE and LINK element. This attribute is most useful when combined with scripting and provides an easy way to turn on or off the influence of a style sheet. This attribute is not included in the HTML 4.0 recommendation but is being discussed with the W3C for future inclusion in the recommendation.

Script Element

As the STYLE element defines the presentation, the SCRIPT element defines the behavior. The SCRIPT element also has a type attribute for defining the language being used. The type attribute defaults to "text/javascript" for the JavaScript language. The type attribute replaces the existing and more commonly used LANGUAGE attribute. Therefore, to be forward and backward compatible when writing scripts, you should include both the language and the type attribute. For example, when authoring a script using VBScript:

  <SCRIPT LANGUAGE="VBScript" TYPE="text/vbscript"> 
    ' vbscript here 
  </SCRIPT>

A script can also be defined in an external file. This is defined using the SRC attribute on the SCRIPT element. This allows you to provide a library of common functionality across your web-site. Similar to how an external style sheet allows you to update your site's presentation through a single document, with an external script you can update your sites behavior through a single document. When you reference an external script, any code within the SCRIPT element is ignored. You can take advantage of this to provide code for browsers that do not support the SRC attribute. For example:

  <SCRIPT SRC="commonLibrary.js" TYPE="text/javascript">
    // do this if they do not support the SRC attribute
  </SCRIPT>

Internet Explorer 3.0 and 4.0 support two extra attributes on the SCRIPT element, FOR and EVENT, that provide a generic binding to events. Currently, most elements in HTML support a set of attributes for answering events on the element. For example, there is an onclick event on most elements for writing code whenever the user clicks on the elements content. This model prevents the separation of behavior from the content. In the long term, the behavior should be separable just as the presentation was separated from HTML using style sheets.

These attributes were introduced as a language independent mechansim for adding behavior. Binding events is part of the W3C's document object model working group, and they will ultimately recommend a solution for HTML for binding events (sometime in 1998). This will include reviewing the approach taken in Internet Explorer.

An example of binding events in this manner is shown below. The code in the script handler below will execute whenever the user clicks anywhere in the document:

  <SCRIPT FOR="document" EVENT="onclick()" 
          LANGUAGE="JavaScript" 
          TYPE="text/javascript">
    // Do something when the user clicks
  </SCRIPT>

Hiding Scripts and Styles

If a browser does not support the STYLE or SCRIPT element, the contents of the style or script element will be displayed. The work-around is to hide the style or script inside of an HTML comment. For example, you can do this on a script element as shown below:

<SCRIPT TYPE="text/javascript">
  <!-- Hide the script from old browsers
    function doSomething() {
      alert('This script will not be displayed in old browsers')
    }
  // Close the HTML comment in a language comment -->
</SCRIPT>

When using the above trick, make sure the HTML comment is within the <SCRIPT> or <STYLE> element and not outside of the element. Placing the comment outside of the element will hide the script or style from all browsers.

Next Stop...

You have now seen how to add meta information to your document and provide style and behavior. Next we take you through how content is defined in your document. All the following sections discuss elements that are contained within the <BODY> of your page.

Block Elements...