Chapter 21

Using Your Own HTML Code

• When the FrontPage Features Aren't Enough
• Getting Code into Your Pages
• Make It Easy: Create "Snippet" Pages
• Viewing HTML Code with the FrontPage Editor
• Some Examples for You
  • Font Face and Size
  • Frame-Related Tags
  • MARQUEE Tags
  • Adding Sound to Your Pages
• CGI and Perl Alternatives
  • Java
  • JavaScript
  • VBScript
  • Microsoft ActiveX
• Keeping Up with the Joneses
• The FrontPage Developer's Kit
• Workshop Wrap-Up
  • Chapter Summary
  • Next Steps
  • Q&A

What happens if you import a page into your FrontPage Web site that incorporates features that go beyond the capabilities of the FrontPage Editor? Or, better yet, what if you want to incorporate the latest and greatest features into your pages? It often simplifies the process to use an editor that automatically develops the HTML code for your Java, JavaScript, VBScript, or other page enhancements. But how do you bring those features into your Web pages?

FrontPage allows you to add extensibility to your pages for these types of situations. For HTML tags not covered in the FrontPage Editor interface or by extended attributes, use the HTML Markup bot.

When the FrontPage Features Aren't Enough

The Web is like the weather: Wait five minutes, and it will change. As a result, it's hard for browser and Web page editing software programmers to predict what features they'll need to incorporate in their software. It's one of the reasons FrontPage gives you a couple of ways to add extensibility. For most tags, you can add extended features by using extended attributes. You've covered those already in previous chapters. However, for those tags that aren't covered in the FrontPage Editor, you can use the HTML Markup bot to enter code manually.

Getting Code into Your Pages

What the HTML Markup bot does is allow you to enter "snippets" of code that the FrontPage Editor doesn't write itself. It's really quite simple to use. Here's basically what you do:

1. Create as much as you can in the FrontPage Editor. After all, it's easy to use, and you can get a good idea of what your page layout looks like.
2. Position the insertion point where you want to add additional features by using code.
3. Choose Insert | Bot, then choose HTML Markup. The HTML Markup dialog box, shown in Figure 21.1, appears.
   Figure 21.1 : Insert HTML code into your page with the HTML Markup dialog box.
4. Enter the code you want to include on the page in the HTML Markup dialog box, or cut and paste it from other editors.
5. Choose OK. FrontPage then inserts the code into your Web page. What you see on the FrontPage Editor screen is a small yellow rectangle with either an exclamation point (for comments) or a question mark (for code it won't check for correctness).
6. To edit the code in the HTML Markup bot, all you have to do is double-click that small yellow icon. The HTML Markup dialog box opens again, and you can edit your code.

Make It Easy: Create "Snippet" Pages

If you find you use the same markups over and over again, create a page that places all your Markup Bot icons in one place. Use an Annotation bot or text to describe the contents of each of the markups. To insert the markup into another page, simply highlight the icon you want to reuse, copy it into your Clipboard, and paste it into another page.

Viewing HTML Code with the FrontPage Editor

Choose the View | HTML command in the FrontPage Editor to view your HTML code. You can view the code in one of two ways:

Original HTML is the HTML code as it was when the FrontPage Editor opened the page. To view Original HTML, choose View | HTML and select Original from the View HTML window. The original source code for the current page is shown in Figure 21.2.
Figure 21.2 : The original HTML code as it appeared when you opened the page in the FrontPage Editor.

Generated HTML is the HTML code that FrontPage generates when it saves your current page. Any editing you added from the time the page was opened can be viewed here. To view Generated HTML, choose View | HTML, and select Generated from the View HTML window. An example of generated HTML is shown in Figure 21.3. Notice where the HTML Markup bot starts and ends. It begins with a statement like this:
Figure 21.3 : The generated HTML code includes the code you entered since the file was opened.

<!-VERMEER BOT=HTMLMarkup StartSpan->

The code included in the HTML Markup bot ends with a statement like this one:

<!VERMEER BOT=HTMLMarkup End Span->

Some Examples for You

To give you an idea of how to use the HTML Markup bot, I've included some examples in this chapter. If you aren't familiar with HTML code and how it's structured, you might want to check out Laura Lemay's Teach Yourself Web Publishing with HTML 3.0 in a Week - Second Edition. It's a great book, complete with everything you want to know about every HTML command.

Font Face and Size

Most font attributes are set in the Character Styles dialog box, discussed in Chapter 9 "Composing and Editing Page Content." Microsoft Internet Explorer also supports the ability to display different font faces, which you can apply to your pages by using the HTML Markup bot.

To apply font faces to your pages, use the FACE attribute for the FONT tag. This attribute sets the typeface for the on-screen text (can be viewed only in Internet Explorer). The typefaces listed must be installed on the user's computer to display; otherwise, text is displayed in the default style the user chooses. In some instances, depending on the formatting you used in the FrontPage Editor, you might also need to include the FONT SIZE attribute in the HTML Markup bot.

To add a font face to your FrontPage Web pages, follow these steps:

1. Position the insertion point before the text you want to apply the font face to.
2. Choose Insert | Bot, and select the HTML Markup Bot.
3. In the HTML Markup dialog box, insert a line similar to the following:
   <FONT FACE="Arial">
   The text that follows this HTML Markup bot is displayed in Arial font if it's available on the user's computer (this font is installed with Windows). If that font doesn't exist, the text that follows the tag displays in the default font style (usually Times Roman).
   To add a SIZE attribute in addition to the FONT FACE tag, the code looks something like this:
   <FONT FACE="Arial" SIZE=3>
   This displays the text that follows in Arial text, if it exists on the user's computer, or the default font if the font does not reside on the user's computer. The font displays in Font Size 3 (12 point).
4. Position the insertion point at the end of the text for which you want to use this font, and enter the following in an HTML Markup bot:

</FONT>

Figure 21.4 shows two HTML Markup bots that mark the start and end of two paragraphs formatted in Arial font, Size 3, as described in the preceding example. Figure 21.5 shows what the same area looks like when you view the page in Internet Explorer.

Figure 21.4 : Two HTML Markup bots mark the start and end of the FONT FACE and SIZE formatting.

Figure 21.5 : When you view the page in Internet Explorer, the font displays in the specified style if it's available on the user's system.

Frame-Related Tags

Frames are designed with the Frames Wizard. If you try to edit the page in the FrontPage Editor, the Frames Wizard opens again so you can edit the frame's configuration. The FrontPage Editor has the majority of the frame tags built in, but Internet Explorer 3.0 (now in beta) offers the ability to display a couple of additional attributes for frames. At present, there's no way to add extended attributes or HTML Markup bots to frame sets by using the Frames Wizard.

If you really want to use either of these tags, there is a workaround method. Use the Open With command (available from the pop-up menu in the FrontPage Explorer) to open your frame set by using a text editor such as Notepad or WordPad. Near the beginning of the page, you'll see each frame described in a line beginning with the following text:

<frame src=

Add the FRAMEBORDER or FRAMESPACING tags to your HTML code directly:

• The FRAMEBORDER command allows you to display or not display borders around the frames. Attribute values are "Yes" or "No".
• The FRAMESPACING command allows you to specify the spacing around the frames in pixels.

In the following code example, frame borders of all four frames are set to "No", and 5 pixels of spacing are added around the frames. You see this code added to the frame descriptions at the end of each of the lines:

<frameset cols="15%,70%,15%">
  <frame src="csnav.htm" name="csnav" frameborder="No" framespacing="5">
  <frameset rows="13%,87%">
    <frame src="clpgtoc.htm" name="cssect" frameborder="No" framespacing="5">
    <frame src="cooltoc.htm" name="csmain" frameborder="No" framespacing="5">
  </frameset>
  <frame src="csout.htm" name="csout" frameborder="No" framespacing="5">
  <noframes>

After you make your modifications, save the file using the same filename and extension. FrontPage adds the new file to the Import List. Use the File | Import command to import the new version of the file back into your Web site. Figures 21.6 and 21.7 show the frames before and after these tags are added. The FRAMEBORDER command gives the frames a much cleaner look.

Figure 21.6 : Frame borders normally look like this.

Figure 21.7 : Internet Explorer tags allow you to display borderless frames, giving the page a seamless and clean look.

Unfortunately, when you use this procedure, two things occur:

• You break the connection with the Frame Editor, so if you want to edit your frame set in the future, you'll need to make the changes manually.
• You'll have to reapply any Include bots or other bots that were originally in the pages.

MARQUEE Tags

Marquees are another Internet Explorer invention. You often see text slide onto Web pages if you view them in Internet Explorer. Marquees are a somewhat improved version of blinking text, which is sometimes used for emphasis. Use Marquees sparingly, such as when you want to draw people's attention to a certain portion of your page.

There are several attributes and values associated with the MARQUEE tag. They are as follows:

Here's an easy way to add a Marquee to your page:

1. Position the insertion point where you want to place a Marquee.
2. Enter the code in the HTML Markup bot that describes the Marquee. An example is shown in Figure 21.1 in the HTML Markup dialog box.
   To place a Marquee that has all default settings on your page, enter the following in the HTML Markup bot:
   <MARQUEE>This text scrolls.</MARQUEE>
   Enter the following code in the HTML Markup bot to create a Marquee that slides in from the right and stops at the left margin, has a white background, and measures 40 pixels high and 350 pixels wide:
   <MARQUEE DIRECTION=LEFT BEHAVIOR=SLIDE BGCOLOR=WHITE HEIGHT=40 WIDTH=350>This text scrolls.</MARQUEE>
   Here's a full-featured Marquee. The properties in this Marquee represent the following settings: The text in the Marquee aligns to the Marquee's middle; it scrolls completely on and off from right to left and then starts again; it appears on a silver background; it scrolls from right to left; it measures 40 pixels high and 350 pixels wide; the left and right margins are 5 pixels; the top and bottom margins are 10 pixels; it loops indefinitely; there are 30 pixels in between each successive draw of the Marquee; and each successive draw of the Marquee delays by 250 milliseconds (1/4 of a second). I'll show each property line by line. Ready?

<MARQUEE
   ALIGN=MIDDLE
   BEHAVIOR=SCROLL
   BGCOLOR=SILVER
   DIRECTION=LEFT
   HEIGHT=40 WIDTH=350
   HSPACE=5 VSPACE=10
   LOOP=INFINITE
   SCROLLAMOUNT=30
   SCROLLDELAY=250>
   This text scrolls across the page and keeps repeating as long as the 
   page is open.
</MARQUEE>

To combine the previous example with a specific font, enclose the Marquee within the font tags. The code in your HTML Markup bot might look something like this:

<FONT FACE="Arial" SIZE=3>
<MARQUEE
   ALIGN=MIDDLE
   BEHAVIOR=SCROLL
   BGCOLOR=SILVER
   DIRECTION=LEFT
   HEIGHT=40 WIDTH=350
   HSPACE=5 VSPACE=10
   LOOP=INFINITE
   SCROLLAMOUNT=30
   SCROLLDELAY=250>
   This text scrolls across the page and keeps repeating as long as the page is
   open.
</MARQUEE>
</FONT>

Figure 21.8 shows the Marquee on the page. The text is nearly scrolled off the screen.

Figure 21.8 : You view the Marquee in a browser that supports the feature.

Adding Sound to Your Pages

Internet Explorer allows you to add sound to your pages, so that a WAV, AU, or MIDI format file plays when the page opens. When a user browses to a page that has the background sound tag included, the sound file first gets downloaded to the user. Then the sound plays according to the parameters set in the BGSOUND tag. Of course, the user needs a sound card, the appropriate application to play the sound-and his or her speakers have to be turned on.

If you include sound files in your Web pages, take care to limit the file size. Wave (.WAV) files can get pretty large, so you don't want the user to download the entire Beethoven's Fifth Symphony in this format. If you have a lengthy musical piece, offer the option to download the file instead (indicate its file size near the file's link).

You can also use a MIDI file. Then, of course, you're dealing with something that can sound entirely different, depending on the sound card your user has. It's fantastic to hear a MIDI file in full fidelity on a sound card with a great built-in synthesizer, but many people have SoundBlaster-compatible cards that make that MIDI file sound entirely different.

Each sound format has its advantages and its disadvantages. What you want to keep in mind is that the file should download relatively quickly. Remember, too, you should always use royalty-free or public domain sound files-better yet, make your own originals. It's more creative that way!

To add a sound file to your pages, use the BGSOUND tag, which has a couple of attributes associated with it:

Here's how you add a sound file to your page:

1. From the FrontPage Explorer, use the File | Import command to import the sound file into your Web site. The BGSOUND tag works with the following types of sound files:
   .WAV-Wave format (sound clip)
   .AU-Audio file format (sound clip)
   .MID-MIDI file format (data file)
2. Open the page you want to attach the sound file to in the FrontPage Editor.
3. Choose Insert | Bot, and select the HTML Markup bot.
4. Enter text similar to the following examples in the HTML Markup bot:
   To play a .WAV file that loops five times, enter code similar to the following, using the URL of the file you imported to your Web site:
   <BGSOUND SRC="mysound.wav" LOOP=5>
   To play an .AU file that loops as long as the page is active, enter code similar to the following, using the URL of the file you imported to your Web site:
   <BGSOUND SRC="mysound.au" LOOP=INFINITE>
   To play a MIDI file that plays only once, enter code similar to the following, using the URL of the file you imported to your Web site:
   <BGSOUND SRC="mysound.mid">
5. Click OK to enter the code into your page. When you open the page in Internet Explorer, you'll hear the sound file you attached to the page.

Figure 21.9 shows an example of a sound tag being added to a page.

Figure 21.9 : The BGSOUND tag is used to attach a sound to a page.

CGI and Perl Alternatives

I have good news for you: If you want to add forms and other types of interactivity but don't have the FrontPage Server Extensions, there are some great alternatives to using CGI scripts. Three hot languages right now are Java, JavaScript, and VBScript. My purpose here isn't to teach you how to use these languages (yikes, that would take a whole book in itself!), but I can show you how to insert code for them into your pages.

Java

Java is a language developed by Sun Microsystems, and many browsers are incorporating its features. It's modeled after C++, which means you can create just about anything you can imagine with it. It's also a multiplatform language, meaning that you don't have the platform-dependent worries that come along with CGI or Perl scripts-no cross-compiling, no headaches. All that's needed is a Java-capable browser to view what you've created. You can find a link to download the most current version of Sun's Java Developer's Kit at the following URL:

http://java.sun.com/

Java files come in two forms: applets and applications. These items are compiled on the server with a Java compiler. The applets aren't a part of your Web page; rather, you need to insert a reference to the applet much as you do with a sound file or other multimedia file. Applets require that the user browse the Web with a Java-capable browser to view what you've created. Applications are general programs written in the Java language.

You use the APPLET tag to insert a reference to Java applets in your Web pages. This code is inserted into an HTML Markup bot in much the same manner as the other items mentioned in this chapter. You import the Java applet into your Web site, and then use the following procedure to include code for it in your Web page:

1. Import the Java applet to your current Web site by using the File | Import command in the FrontPage Explorer.
2. Open the page in which you want to insert the Java applet.
3. Choose Insert | Bot, and select the HTML Markup Bot.
4. In the HTML Markup dialog box, enter the code that launches the Java applet, as in the following example:
   

   <APPLET CODE="MyJavaApplet.class" WIDTH=350 HEIGHT=100>
   This is my Java Applet!
   </APPLET>
   

5. Click OK to exit the HTML Markup dialog box and insert the code into your Web page.

JavaScript

JavaScript is similar to Java, except that its code is actually integrated right in your Web page. Rather than compile the code on the server, it is interpreted by the user's browser instead. You must use a browser that has JavaScript capability (they're becoming increasingly popular).

You insert JavaScript commands in their entirety with the HTML Markup bot. Here are some good sources for JavaScript information on the Internet:

• JavaScript Authoring Guide (Netscape's site):

http://home.netscape.com/eng/mozilla/Gold/handbook/javascript/index.html

• Andrew's JavaScript Index

http://www.c2.org/~andreww/javascript/

• Yahoo!: Computers and Internet: Languages: JavaScript

http://www.yahoo.com/Computers_and_Internet/Languages/JavaScript/

VBScript

Microsoft has recently announced its Visual Basic, Scripting Edition (VBScript). This language allows you to create interactive online content for your Web pages and also lets you use Microsoft's ActiveX controls and Java applets. This is not a language to be overlooked, since it seems incredibly flexible and easy to use. Like JavaScript, VBScript is contained directly in your Web page and inserted by using the HTML Markup bot.

You can get more information, as well as examples of VBScript, from the following URLs:

• Microsoft VBScript Home Page

http://www.microsoft.com/vbscript/vbsmain.htm

• VBScript and Forms

http://www.microsoft.com/vbscript/de/vbstutor/vbscntrl.htm

Microsoft ActiveX

Coming down the road is Microsoft's ActiveX technology. This capability is built into Microsoft Internet Explorer 3.0, and you can preview its capabilities by downloading the ActiveX Control Pad, Microsoft HTML Layout Control, and Microsoft Internet Explorer 3.0 beta. You can do some pretty neat things with this little package, including layering images and text and adding form controls. Figure 21.10 shows a screen shot of the ActiveX Control Pad and HTML Layout Control in action. After you complete the page in the ActiveX Control Pad, you can import it into FrontPage, which will automatically place HTML Markup bots where it needs them.

Figure 21.10: The ActiveX Control Pad and HTML Layout Control allow you to add form controls, layer images, and do much more.

These items are available from Microsoft's Web site at the following URLs:

• ActiveX Controls (information)

http://www.microsoft.com/intdev/inttech/controls.htm

• The Microsoft ActiveX Control Pad

http://www.microsoft.com/intdev/author/cpad/

• The Microsoft HTML Layout Control (Note: If you download the ActiveX Control Pad, you won't need this because it's already included.)

http://www.microsoft.com/ie/controls/layout/

• Microsoft ActiveX SDK

http://www.microsoft.com/intdev/sdk/

• ActiveX Scripting

http://www.microsoft.com/ie/script/default.htm

Keeping Up with the Joneses

A ton of other browser plug-ins are available, but how do you keep track of what's hot and what's not? One way is by watching the capabilities that browsers use, and a good source for keeping track of that is the Browser Watch site. From this site, you'll learn everything you wanted to know about browsers, and more. It also maintains a list of all known browser plug-ins, so it's a great site to bookmark. Here's some of what they offer:

• Browser Watch Browser List

http://www.browserwatch.com/browsers.shtml

• Browser Watch Browser Stats

http://www.browserwatch.com/report-table-browsers.shtml

• Browser Watch Plug-In Plaza

http://www.browserwatch.com/plug-in-big.shtml

The FrontPage Developer's Kit

Although this doesn't directly relate to inserting code into your pages, it does address adding customization to your FrontPage Webs. Microsoft has released a FrontPage Developer's Kit, which allows you to create your own Web templates, wizards, and bots, using either Microsoft Visual C++ or Microsoft Visual Basic. If you like the way FrontPage allows you to develop your pages quickly by using these methods, why not learn to create your own? Create a Table Wizard that allows you to configure row, column, and cell widths exactly the way you want them. Create another wizard that allows you to create home pages exactly the way you want them. You can truly customize FrontPage to work in any way you choose.

You can download the FrontPage Developer's Kit from the following URL:

http://www.microsoft.com/frontpage/freestuff/fs_fp_sdk.htm

Workshop Wrap-Up

Using the HTML Markup bot, you can insert the latest and greatest features into your Web pages. Some of these features are easier than others, but you get a chance to customize your pages even further by adding your own code. You can extend your knowledge to other programming and scripting languages to enhance your pages even further. It's both fun and exciting to do things your way and to use the latest features in your pages.

Chapter Summary

In this chapter, you have learned how to customize your pages by adding special fonts, sounds, and Marquees with the HTML Markup bot. You have also learned about some other scripting languages that can be used with your Web pages. You're ready now to complete your pages by using FrontPage's features to their fullest!

Next Steps

In the next chapter, you'll combine what you've learned in this section to complete the Far Out There Web. You'll add some forms and some extra coding, and get your Web site ready to publish.

• Refer to appendix C, "Directory of Resources," for a list of sites that can help you with your own HTML code.
• Refer to appendix D, "HTML Quick Reference," for a list of the tags that will require you to use the HTML Markup bot.

Q&A