Web Builder Tips

Accommodating older browser that can't read your scripts

Older browsers do not have the ability to execute the scripts you place in your HTML code. When an older browser encounters a script, errors can occur that can annoy your readers and keep them from coming back to your page. To avoid this, you can put the HTML comment tags to work.

A comment can be included in your HTML code by beginning the text with the tag <! -- and ending it with -- > . You can put any kind of explanatory text between those two tags, and it will not be executed by any browser. However, browsers that understand the <SCRIPT> tag ignore HTML comment tags placed within the script. Putting HTML comment tags around your script will result in older browsers treating the text as if it were a non-executable comment, while browsers that understand your script will execute it, and ignore the comment tags. Here's how to set it up using JScript:

<SCRIPT LANGUAGE = "JScript">
<!--
Your JScript code here

// -- >

Note that you need to proceed the comment end tag -- > with the JScript comment directive //, so JScript does not try to execute it.

Test your Channel (Internet Explorer 4)

If your site contain a CDF (Channel Definition File), chances are you've created it using a text editor such as Notepad, since CDF creation files are not yet widely available. However, you can test your CDF file for structural and syntax problems by using Microsoft's CDF tester.

The test is done via an executable file found in your Internet Client SDK installation folder, under "your SDK folder\bin\x86\cdftest\". You must run this program from a command prompt. To run the program, simply type

cdftest yourcdffile.cdf

If you have errors in your file it will display the specific error message, or if there were no errors it will simply say,"No error."

Add inter-page transitions to your site (Internet Explorer 4)

Internet Explorer 4 includes twenty-three inter-page transition filters in the typical installation. You can take advantage of this feature and add interesting transitions to your Web pages. Inter-page transitions add visual effects to the entire client window as the Web page loads or exits.
The transitions are similar to the ones in Microsoft PowerPoint presentation as it transitions from one slide to the next.

You add the inter-page transition effect with META tags in the head section of your document, like this:

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)>

<META http-equiv="Page-Exit"
CONTENT="RevealTrans(Duration=2.500,Transition=6)>

The first META tag causes transition 1 (box-out) to play when the user enters the page, lasting 4 seconds; the second META tag causes transition 6
(wipe-right) to play when the user leaves the page, lasting 2.5 seconds (written as 2 seconds and 500 milliseconds).

Use the LABEL tag to associate text with intrinsic controls

In the HTML 3.2 specification, there was no way for an author to associate text with an intrinsic control such as a radio button or text box. Unlike an "A" tag, which has an accompanying </A> tag and encloses text, the <INPUT> tag does not have an </INPUT> tag. Therefore, screen readers have a difficult time finding exactly what text to use to describe the control to the user. HTML 4.0 introduces the LABEL tag, which allows the author to associate text with another HTML element. This is particularly useful for associating text with intrinsic controls. Whenever an intrinsic control is used on a page, a LABEL tag containing its associated text should accompany it. Doing so provides an additional benefit: clicking the label toggles the value of the associated intrinsic control. To associate a LABEL tag with a radio button, use the following HTML syntax:

<FORM>
<INPUT TYPE=radio ID=FirstButton NAME=radio1>
<LABEL FOR=FirstButton>I'm the text for the first radio button</LABEL><BR>
<INPUT TYPE=radio ID=SecondButton NAME=radio1>
<LABEL FOR=SecondButton>I'm the text for the second radio button</LABEL>
</FORM>

Count the page hits in your Active Channel (IE4)

If you have a Channel Definition File (CDF) and you want to know the page hit counts, you can use the page-hit logging feature in your CDF. The page-hit logging feature enables Active Channels to collect the same page-hit information from offline users as they can already collect from online users. Page-hit logging collects information for Web publishers about activity on their channel pages by logging page hits in the browser, screen saver, and Active Desktop in both offline and online modes. You can find out the collection of data for the time and date that the channel pages were loaded into the browser.

To enable page-hit count, you need to add the <LOG> element and the <LOGTARGET> attribute. You need to use these tags after the <ITEM> tag in
you CDF file. For example,

<ITEM HREF="http://www.mswebbuilder.com/channel.htm>
<LOG VALUE="document:view"/>
<LOGTARGET HREF="http://www.mswebbuilder.com/logging" Method="POST"
SCOPE="OFFLINE"> <PURGETIME HOUR="12"/>
<HTTP-EQUIV NAME="ENCODING-TYPE" VALUE="gzip"/></LOGTARGET>
</ITEM>

This will produce a log entry like this:

#Fields: s-URI
http://www.mswebbuilder.com/default.asp
#Fields: c-context c-cache c-date c-time c-duration
N 1 06-02-1997 19:12:37 00:00:04
T 1 06-03-1997 11:38:04 00:00:23

This entry shows that the URL "http://www.mswebbuilder.com/default.asp" was viewed in normal mode on June 2, 1997, from the cache at 7:12 P.M. for four seconds, and again in full-screen view on June 3 at 11:38 A.M. for 23 seconds. The context value can be "N", "T", "D", or "S" to indicate whether
the URL was viewed in a normal browser window, full screen view (Theater View), as an Active Desktop item, or in the Internet Explorer screen saver,
respectively. The value for the cache field can be "1" to indicate the URL was retrieved from the local cache or "0" to indicate the URL was retrieved
from the site itself. The date field shows the date on which the URL was viewed. The time value indicates what time (on the local computer) the URL
was viewed, and the duration indicates how long the user viewed the page.

The time and duration fields are in HH:MM:SS format, while the date is in MM-DD-YYYY format.

Making a Web Directory Unreadable

A standard way of saving form results in FrontPage is to use the default form handler (also called the WebBot Save Results component) to write to a
results file in a directory in a FrontPage web. In FrontPage 1.1 and FrontPage 97, writing form results to a directory made the contents of the directory readable to any user who discovered the URL of the results file.

In FrontPage 98, you can assign a virtual directory mapping for a form results directory that has both the execute and the read bits turned off.
This prevents any end-user from reading the contents of the directory, but it requires the FrontPage web author to fetch the contents of the directory
using the FrontPage Explorer.

To make a directory unreadable, select it in the FrontPage Explorer's Folders view and select Properties from the Edit menu. In the Folder Properties dialog box, deselect the two settings: Allow scripts or programs to be run and Allow files to be browsed.

Creating Drop-caps with CSS

If you're familiar with The Cobb Group newsletters, you know that we use drop-caps in the first letter of each article. While our production artists have mastered the technique using their layout editors, you can create the similar effect for your on-line contents using Cascading Style Sheet (CSS).
To do so, first create the CSS definition like the one below:

<STYLE TYLE="text/css">

</STYLE>

Now you can use a <SPAN> statement for your first letter of the paragraph.

<P>
<SPAN CLASS="clsFirstLetter">H</SPAN>ello readres!
</P>

Dynamically Changing Style Sheet Rules

Each style sheet is a collection of rules. The rules collection of the styleSheet object enumerates these rules. This collection can be accessed even if the style sheet is disabled. You can add rules or remove rules from the rules collection with add and remove methods on the individual style sheet. For example, let's try adding a rule:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JScript">
function newRule() {
document.styleSheets.MyStyles.addRule("P","color:blue");
}
</SCRIPT>

Now lets create the Style attributes:

<STYLE ID="MyStyles">
H1 {color:red}
H2 {color:red;font-style:italic}
</STYLE>
</HEAD>
<BODY onclick="newRule()">
<H1>Welcome!</H1>
<P>Click anywhere on the document to change the text color!</P>
</BODY>
</HTML>

Notice, the text turns blue if you click anywhere on the document.

Use this simple function to format floating point expressions

Unlike many other programming languages, JavaScript does not have a built-in function for formatting floating-point numbers. However, it's easy to create one using JavaScript's String methods. Try this:

function format(expr, decplaces) {
// Convert the number to a string
str = expr.toString()

// Get the position of the decimal point
point = str.indexOf(".")

// Get the substring to the correct decimal place
newstring = str.substring(0, Number(point) + Number(decplaces) + 1)

file://Convert the string to a number, and return
return(Number(newstring))
}

To call the function, just substitute the number you want to format for the first parameter, and the number of decimal places you want in the second parameter. For example, if you wrote these statements:

x = 23.56733
newnum = format(x, 2)

then the value of newnum would become 23.56.

Jump to a URL from a select box without clicking a submit button

The code below gets the SELELCT OPTION that the user has selected (from the SELECT element's selectedIndex property) and uses that value to determine the correct branch in a case statement. Depending on the OPTION
selected, the user is automatically taken to the URL for that OPTION.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME = "selector">
<SELECT NAME="titles" SIZE="1" onChange = "jmpMS(this.selectedIndex)">
<OPTION>Jump to...</OPTION>
<OPTION>Fastguide</OPTION>
<OPTION>Yahoo</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>

Use an inline frame to create a window in your Web page

The inline frame element uses the tags <IFRAME> </IFRAME> to create a frame window you can embed within your Web page. Instead of specifying the rows and columns of a frameset, each inline frame has a width and a height, which can be specified in inches or in pixels. The inline frame also supports the marginHeight, marginWidth, frameborder, and scrolling attributes, as well as target and align. Here's an example of how an inline frame might be used:

<HTML>
<HEAD>
</HEAD>
<BODY>
<H1 align=center> My Links </H1>
<IFRAME id = myiframe SRC="favorites.html" WIDTH="580" HEIGHT="280">
</IFRAME>
<P>
</BODY>
</HTML>

The IFRAME's SRC property is assigned any page that you want loaded into the inline frame. Better yet, you can change the source dynamically using a script. Here's how:

First, place some buttons in the BODY code of your page that trap a click event.

<INPUT type = button value = "Favorite links" onclick = newframe(0) >
<INPUT type = button value = "Links to family" onclick = newframe(1) >
<INPUT type = button value = "Links to friends" onclick = newframe(2) >

Next, add a script between the <HEAD></HEAD> tags:

<SCRIPT>
function newframe (num) {
switch (num) {
case 0:
document.all.myiframe.src = "favorites.html"
break

case 1:
document.all.myiframe.src = "family.html"
break

case 2:
document.all.myiframe.src = "friends.html"
break
}
}
</SCRIPT>

One word of warning: Loading someone else's page directly into a frame (or an inline frame) on your page is considered at very least a discourtesy, and may in fact violate that page's copyright laws. Note also that the inline frame element is currently only supported by Microsoft's Internet Explorer 4.0 and higher.

Use IE 4's Alpha filter to make a button appear disabled

IE 4 provides a variety of visual filters that can be used to apply different visual effects to elements on your Web pages. Filters are applied to HTML elements using the filter style attribute, and can have an effect on elements that define a rectangular space within the browser window (i.e., buttons, images, div and span blocks, etc.). The element must either be positioned on the page, or have a defined width.

One of IE 4's visual filters is the Alpha filter, which can change the transparency level of an element, making it appear faded. And one common use of the Alpha filter is to fade out a button, giving the impression that the button has been disabled. To create this effect as the result of a user's action, start by creating the element that you want to appear
disabled with a statement like:

<INPUT type="button" value="Click me" id=dimbutton
style="position:absolute; top:40; left:20; filter:Alpha(enabled=0)">

We've given this button the id "dimbutton." Note that the Alpha filter has been included in the inline style sheet for dimbutton, but that the filter's enabled property is set to 0, so it has not yet been applied.

Next, create the element that will trap the user action. How about another button:

<INPUT type="button" style="position:absolute; top:40; left:220"
value="Disable that other button!" onclick = "disableIt()" >

Clicking on the Disable that other button! button calls the disableIt function, which looks like this:

function disableIt() {
dimbutton.filters.item(0).enabled = 1
dimbutton.filters.item(0).opacity = 25

}

The disableIt function enables dimbutton's Alpha filter (the first item in the filters collection), and sets the opacity of the filter to 25 (where 100 is fully opaque), making the button appear faded, and therefore disabled.

Use IE 4s children collection to process all of the items of a list

The IE 4 children collection allows you to process all of the direct descendants of a particular element. In our example, we're using it to add up all of the numbers in a UL list. We've given the list the id mylist.
Notice that, as in all IE 4 collections, we can get the number of items in the collection using the length property.

<HTML>
<HEAD>

<SCRIPT language = "JScript">
function additems() {
var sum = 0

file://Get the number of items in the unordered list
var numlist = document.all.mylist.children.length

file://For each item on the list
for (i = 0; i < numlist; i++) {

file://Get an item and convert it to a number
listitem = document.all.mylist.children(i)
num = parseInt(listitem.innerText)

file://Add it to the sum
sum = sum + num
}
}
</SCRIPT>

</HEAD>
<BODY>
<UL id = mylist>
<LI> 12 </LI>
<LI> 17 </LI>
<LI> 23 </LI>
</UL>

<INPUT type = button value = Process list onclick = additems()>
</BODY>
<HTML>

Use IE 4's rows and cells collections to process table data

You can process all the data in an HTML table using two IE collections:
the rows collection and the cells collection. Both are collections of the TABLE object. Suppose, for example, you want to calculate an average for the data in each row of a table. Besides the table holding the data (we've created one with an id of temptable), you'll need a for loop (we'll use JScript) and a place to store the averages (we'll use an array). Here's
the code:

<HTML>
<HEAD>
<SCRIPT language = "JScript">

function calc_avg() {
file://Number of tables rows
var numrows = 4

file://Number of table columns
var numcols = 3

file://Array to hold averages for each row
var AvgPerRow = new Array(4)

file://Get a reference to the table
mytable = document.all.temptable

file://For each row in the table
for (i = 0; i < numrows; i++) {
var sum = 0

file://Go through each cell in the row
for (j = 0; j < numcols; j++) {
num =
parseFloat(mytable.rows(i).cells(j).innerText)
sum = sum + num
}
file://Calculate the average for the row
AvgPerRow[i] = sum/numcols
}
}

</SCRIPT>
</HEAD>
<BODY>
<TABLE id = "temptable" rules = all >
<TR><TD> 30 <TD> 30 <TD> 40 </TR>
<TR><TD> 40 <TD> 40 <TD> 50 </TR>
<TR><TD> 65 <TD> 69 <TD> 75 </TR>
<TR><TD> 71 <TD> 73 <TD> 78 </TR></TABLE>
<BR>

<INPUT TYPE = BUTTON VALUE = "Get averages"
style = "width:150" onclick = "calc_avg()"></INPUT><BR>

</BODY>
</HTML>

Use the LABEL tag to associate text with intrinsic controls

In the HTML 3.2 specification, there was no way for an author to associate text with an intrinsic control such as a radio button or text box. Unlike an ``A'' tag, which has an accompanying </A> tag and encloses text, the <INPUT> tag does not have an </INPUT> tag.
Therefore, screen readers have a difficult time finding exactly what text to use to describe the control to the user. HTML 4.0 introduces the LABEL tag, which allows the author to associate text with another HTML element. This is particularly useful for associating text with intrinsic controls. Whenever an intrinsic control is used on a page, a LABEL tag containing its associated text should accompany it. Doing so provides an additional benefit: clicking the label toggles the value of the associated intrinsic control. To associate a LABEL tag with a radio button, use the following HTML syntax:

<FORM>
<INPUT TYPE=radio ID=FirstButton NAME=radio1>
<LABEL FOR=FirstButton>I'm the text for the first radio button</LABEL><BR>
<INPUT TYPE=radio ID=SecondButton NAME=radio1>
<LABEL FOR=SecondButton>I'm the text for the second radio button</LABEL>
</FORM>

Create a link that's really a function call

You can call a function from a link, instead of opening a new location, by assigning the function to the anchor tag's href attribute, like this:

<A href = "javascript:myfunc()"> Click here</A>

Notice that the function name is preceded by the expression "javascript:" When the user clicks on the Click here link, the function myfunc will be called and the statements within it processed.

Legal Disclaimer
THE INFORMATION IN THIS PUBLICATION IS PROVIDED "AS IS". WE EXPRESSLY DISCLAIMS ALL REPRESENTATIONS AND WARRANTIES OF ANY KIND REGARDING THE CONTENTS OR USE OF THE INFORMATION INCLUDING, BUT NOT LIMITED TO, EXPRESS AND IMPLIED WARRANTIES OF ACCURACY, COMPLETENESS, MERCHANTABILITY, FITNESS FOR A PARTICULAR USE, OR NON-INFRINGEMENT. IN NO EVENT SHALL WE BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES, INCLUDING LOST PROFITS, LOST BUSINESS OR LOST DATA, RESULTING FROM THE USE OR RELIANCE UPON THE INFORMATION, EVEN IF WE HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. SOME JURISDICTIONS DO NOT ALLOW THE EXCLUSION OF IMPLIED WARRANTIES, SO THE ABOVE EXCLUSION MAY NOT APPLY TO YOU.