by Brian Johnson
To understand VBScript, you should first have a fairly good understanding of Hypertext Markup Language (HTML). If you are already well versed in HTML, you can probably skim this chapter. We'll start to get into the details of the VBScript language in Chapter 2 "The VBScript Language."
In this chapter, you will
There are too many important facets to the language of the World Wide Web to say that any one is the most important. That language is called HTML. In the years since its inception, the HTML specification has been fairly dynamic. So far, each feature added to the standard has made HTML better. Succeeding specifications make pages more attractive, more informative, and richer in content-so much so that Web pages are quickly becoming the interface of choice for retrieving information from computer screens.
This book is about a scripting language called VBScript. VBScript is used to control content and objects in HTML pages designed for the World Wide Web and corporate intranets. VBScript is not about creating applications; it's about creating active HTML. If your pages look and work like applications, that's fine. The most important thing that you're doing when you're using VBScript in your Web pages is bringing the pages to life. Dead, static pages on the Web are about as exciting as slides on television. In the future, pages will be designed on the fly, tailored to the profile of the individual user.
If you're new to creating content for the World Wide Web, there are a few concepts that you should be familiar with. The first is the URL, or Uniform Resource Locator. The URL is the address of a particular item on the Internet. This address can be part of either a domain name or an IP (Internet Protocol) address. A URL using a domain name would look something like www.microsoft.com, and the file you're looking for might be in the directory /vbs. You can just as easily use the IP address to get the file you're looking for. For the address www.microsoft.com, the numbers would be 198.105.232.5. A complete URL contains a protocol prefix, such as http:// or ftp://, followed by the address and a port number-for example, http://www.microsoft.com:80.
The second concept that you should understand is client/server. The server is a machine that contains the content and the associated server software. The client is a machine that is usually not a server but that connects to the server to retrieve content. In this book, you'll read a lot about what's happening on the server side versus what's happening on the client side. In the case of the World Wide Web, the server is the machine that contains your published Web pages, and the client machines are those of people who are viewing your pages.
The final concept that you should be familiar with is bandwidth. Bandwidth determines speed at which you can move an amount of data between machines. Three broad types of bandwidth exist: low bandwidth, middleband, and broadband. Low-bandwidth connections are analog connections with modems. Analog connections use sounds that must be translated into digital signals before a machine can understand them. A middleband connection might be an ISDN or other digital connection. Digital connections are faster because they require no translation step, and the signal itself is usually cleaner. A broadband connection might be a T1 connection or a cable modem. Right now, most client machines hook into the Internet in the low-bandwidth connection range. Over the next few years, middleband and broadband connections will become much more common. This should open up great opportunities for you as a content author.
Scripting is about controlling objects. In the same way that a movie script helps to determine what actors do and say, the scripts that you write to control your HTML pages are plans for what the objects in your pages will do. To start, let's quickly review HTML.
HTML isn't really a computer language in the strictest sense of the term. For the most part, HTML is a page-description language that determines how a page will look on the screen.
The page defined in Listing 1.1 and shown in action in Figure 1.1 can be described as static, because it doesn't do too much. It can take you somewhere else, but the point of designing pages isn't so much to send someone somewhere else (although half the Web probably does that). You design a page so that people will come to the page and stick around for a while. You want to distribute information, you want to entertain, and most importantly you want your page to be worthy of a link on someone else's page.
Figure 1.1 : Listing 1.1, as viewed from Internet Explorer.
Listing 1.1. A basic HTML page.
<HTML><HEAD> <TITLE>Basic HTML Page</TITLE> </HEAD> <BODY> <H1>This is a level 1 Heading</H1> <BR> This is a <A HREF="HTTP://WWW.MICROSOFT.COM/">hyper-link</A> to Microsoft. </BODY> </HTML>
Scripting can help to make this happen. The scripts that you write will control the objects on your page.
Look at Listing 1.1. What tag in that listing do you think is most important? If you do a lot of writing, you might say that the Heading 1 <H1> tag is most important. If you're new to HTML and you're not sure how it works, you might think that the <HTML> tag is most important. If you consider what HTML offers, you'll realize that the most important tag in the listing is the <A HREF="... tag. This tag allows your document to be linked to any other document on the Web. This is important, because before HTML there was no standard way of linking two different document files on the Internet.
HTML is a standard that is maintained by the World Wide Web Consortium (W3C). W3C is a group of individuals and companies that develop and approve standards for the Web. HTML isn't the only standard maintained by W3C. Transport protocols, graphics formats for the Web, objects for the Web, and of course the implementation of scripting languages such as VBScript are also maintained by W3C.
Before you begin writing in Visual Basic Script, you need a little expertise in HTML. Let's review the basics now. For more detailed information, you can check out the reference information and links on the CD.
The way most HTML is written is with tags. Most of the time you will use two tags, placing your content between them.
The base tag for an HTML document is the <HTML> tag. All tags are enclosed by the less than (<) and greater than (>) characters. Closing tags are usually the same as opening tags except that they're preceded by a slash:
<HTML></HTML>
This line produces a legal HTML document. Of course, there is nothing to see in the document. The point is that the tags don't show up in the document; only the formatted text does.
The <HEAD> tag sets initial document information off from the rest of the document. That information can include <TITLE>, <META NAME>, and other document administration tags.
The <TITLE> tag tells the browser what you've named your page. The title of the page usually shows up in the title bar of the browser with which you're viewing the page. The <TITLE> tag is part of the <HEAD> tag in the HTML page.
The <BODY> </BODY> tags hold the content of your HTML document. Text that is between these tags is formatted to the browser's default style. Listing 1.2 shows a document that contains a line of body text. The style of text in the body of a document is determined by the tags that surround the text.
Listing 1.2. HTML page with a title and body text.
<HTML> <HEAD> <TITLE>Document Titles</TITLE> </HEAD> <BODY> This is a titled document. </BODY> </HTML>
Heading levels in HTML documents range from <H1> to <H6>. In most browsers, the size and weight of heading text is largest at <H1> and smallest at <H6>. (See Figure 1.2.) Listing 1.3 shows you how the heading levels are set in the HTML document.
Figure 1.2 : Heading levels in an HTML document.
Listing 1.3. Headings in an HTML document.
<HTML> <HEAD> <TITLE>Heading Levels in an HTML Document</TITLE> </HEAD> <BODY> <H1>Heading 1</H1> <H2>Heading 2</H2> <H3>Heading 3</H3> <H4>Heading 4</H4> <H5>Heading 5</H5> <H6>Heading 6</H6> </BODY> </HTML>
| TIP |
Don't use heading tags to change the size of text on the page. There are other, more appropriate tags for that task. Use the heading tags as needed, in documents where an outline makes sense. |
Heading tags are handy for setting off heading levels in an HTML page. Keep in mind, though, that what someone viewing your document sees can be completely different from what you see when you review your pages in your own browser.
Paragraphs are the default groupings of text in an HTML page. The paragraph tag, <P>, can be used with or without a closing tag. Like the heading tags, the <P> tag can be used to create a break, but so can the break (<BR>) tag. It's up to you to choose the tags for your own pages, but as with the heading tag, logic should override aesthetics. The paragraph tag should be used to separate groups of text. If you're creating a break just so that the next item is on the following line, you should probably use the break tag.
The <FONT> tag is used with attributes to set the properties for text inside the tags. Let's go over some of the properties that you can easily change inside the font tags.
The SIZE= attribute is similar to the heading tag. The size of the text inside the tags is set in the same manner. The difference is that the size tag is a formatting tool, as opposed to an organizational tool. It sets the size of text from 0 (smallest) to 7 (largest):
This is a <FONT SIZE=6>Large</FONT> example. This is a <FONT SIZE=1>small</FONT> one.
The FACE= attribute allows you to set the font that is displayed in your reader's browser. For this tag to work, the font that's called must be installed on the client machine. Several different fonts can be specified. If one of the specified fonts is not installed on the client machine, the default font is used:
<FONT FACE="Arial, Sans">This text is displayed in Arial or Sans Serif if these fonts are installed.</FONT>
The COLOR= attribute allows you to set the color of text inside the font tags. There are two ways to set the color of a particular font. First, you can use the RGB value of a color, converted to hexidecimal:
<FONT COLOR=#FFFFFF>
You can also set the color of text by using color names. (See
Table 1.1.) By using these names, you can be sure that colors
are the same across machines.
| Black | White | Green | Maroon |
| Olive | Navy | Purple | Gray |
| Red | Yellow | Blue | Teal |
| Lime | Aqua | Fuchsia | Silver |
These color names can also be used with other tags, including the BODY, HR, MARQUEE, and TABLES tags. If you view Listing 1.4 in your browser, you can get a look at these colors. (See Figure 1.3.)
Figure 1.3 : Colorname values in Internet Explorer 3.0.
Listing 1.4. Colornames.htm.
<HTML> <HEAD> <TITLE>Colornames in Explorer 3.0</TITLE> </HEAD> <BODY> <FONT SIZE=6>These are the colornames available to you using the COLOR tag.</FONT> <P> <FONT COLOR="BLACK">BLACK</FONT><FONT COLOR="WHITE">WHITE</FONT> <FONT COLOR="GREEN">GREEN</FONT><FONT COLOR="MAROON">MAROON</FONT> <P> <FONT COLOR="OLIVE">OLIVE</FONT><FONT COLOR="NAVY">NAVY</FONT> <FONT COLOR="PURPLE">PURPLE</FONT><FONT COLOR="GRAY">GRAY</FONT> <P> <FONT COLOR="RED">RED</FONT><FONT COLOR="YELLOW">YELLOW</FONT> <FONT COLOR="BLUE">BLUE</FONT><FONT COLOR="TEAL">TEAL</FONT> <P> <FONT COLOR="LIME">LIME</FONT><FONT COLOR="AQUA">AQUA</FONT> <FONT COLOR="FUCHSIA">FUCHSIA</FONT><FONT COLOR="SILVER">SILVER</FONT> </BODY> </HTML>
Links are the basis of HTML. They allow you to jump to different documents on the Web or at your local web site. In addition, links enable you to jump to specific parts of documents.
A link works by specifying the URL of the linked file. You use the <A> tag along with the HREF= attribute:
This is a link to <A HREF="HTTP://www.microsoft.com/">Microsoft</A>.
| TIP |
Some UNIX Web servers are case-sensitive. For this reason and others, you should get used to calling URLs in a precise manner. For example, a URL that doesn't specify a filename should always end with a forward slash. |
To link to a specific location within an HTML file, you need to have tags inside the file to set the places to which you would like to go. These tags are called anchors. You set an anchor using the NAME= attribute with the <A> tag:
<A NAME="Anchor">This line will be at the top of the page</A>
To set a link to that anchor, simply reference the anchor as you would a URL, using the HREF= attribute:
<A HREF="#Anchor">Link to Anchor</A>
If the anchor is in another file, place the URL to the file in the reference, followed by the anchor:
<A HREF="http://www.someaddress.com/anchor.htm#anchor">Link</A>
For files that are at the same Web address as the file containing the link, all that is needed to open a particular file is the relative path and filename:
<A HREF="page.htm">Page in same directory.</A> <A HREF="\docs\page.htm">Page in subdirectory.</A> <A HREF=".\pages\page.htm">Page in another directory.</A>
Graphics in Web pages are what has made the Internet popular. Before the Web and its graphically rich HTML, the Internet was useful mostly for its newsgroups and Gopher database. Graphics have put a face on the Internet, and the graphics you put into your Web pages should receive careful consideration.
The two most popular graphics types on the Internet are GIF (Graphics Interchange Format) and JPEG (Joint Photographic Experts Group). There are subtypes of each of these formats that progressively render the graphic image. We'll take a quick look at graphics now, but you should get a good HTML reference to study the subtleties of graphics in HTML. One of the best is Teach Yourself Web Publishing with HTML 3.2 in 21 Days by Laura Lemay, published by Sams.net.
GIF was designed by CompuServe. It is able to use only 256 colors, so it is usually reserved for certain items on the page, such as logos and icons. To display a photograph in a page, you'll most likely use the JPEG format.
To place a graphic image into your HTML file, you use the <IMG> tag. The SRC= attribute contains the URL to the file you want to display:
<IMG SRC="logo.gif">
You can use the ALT= attribute to display a name for the file while it's being loaded by the browser. If the reader is using a nongraphical browser, the text in the ALT= attribute is displayed instead of the image.
Other attributes that you might find useful are ALIGN= and VALIGN=. These attributes determine how text next to an image will be displayed. Possible values for the ALIGN= tag are top, middle, and bottom.
Images in JPEG format are displayed in exactly the same way as images in GIF. JPEG images are different from GIF images in a few ways, though:
As mentioned, in most cases you'll want to use JPEG for photographic images. Keep in mind that increasing the amount of compression in a JPEG file will affect the clarity of the image. Take a look at your JPEG image at a number of compression ratios to determine the best amount of compression for your needs.
In addition to JPEG and GIF, a new standard file format has been created for the Web: the PNG (Portable Graphics Network) format. PNG was created when questions arose about whether GIF was legally usable in the public domain or whether CompuServe had retained rights to the format. Even though CompuServe has said that GIF is usable on the Internet, the development and adoption of PNG has gone forward. PNG promises to add JPEG-like compression capabilities to GIF-like files.
The BMP or bitmap format should be familiar to most Windows users. Because these images are uncompressed, they're usually not suitable for anything less than middleband use. On a local system, though, the bitmap format could prove useful to companies that don't want to convert large catalogs of existing images.
Creating a link from an image file is much like creating a hyperlink in text. Simply place the <IMG SRC= > tag in the same place that you would usually have text:
<A HREF="http://www.microsoft.com/"><IMG SRC="bestwith.gif" ALT="Internet Explorer 3.0" BORDER=0></A>
Notice that we've added the BORDER=0 attribute to keep a border from being displayed around the link. In addition, we've added the ALT= attribute so that text will be displayed during the graphics download and in case the user stops loading the page before the download is complete.
Multimedia is one of the main topics of this book. A large part of creating active content in HTML has to do with utilizing the multimedia features of HTML.
In HTML, there are two ways to use sound in native formats with Internet Explorer 3.0. One way is to simply link a URL to a sound file in the Web page for playback on the client machine. The other way is with the <BGSOUND= > tag, which allows you to specify a WAV or a MID file to be played as a background sound while the page is being viewed. The file can be played once (by default) or repeated.
Video files can be used within a Web page in the same way as image files. The <IMG> tag, along with the DYNSRC= attribute, is used to place an AVI file into a Web page, as shown in Listing 1.5. Placing an SRC= attribute in the tag allows an image to be placed in the file for browsers that aren't capable of playing AVI files or for low-bandwidth machines where the user has opted to turn off the browser's video capabilities.
Listing 1.5. Inline AVI.
<HTML> <HEAD> <TITLE>Inline AVI Example</TITLE> </HEAD> <BODY> <H1>AVI file plays inline.</H1> <HR COLOR="RED"> <IMG DYNSRC="myvideo.avi" SRC="myvideo.gif" CONTROLS> </BODY> </HTML>
| NOTE |
One of the characteristics that sound and video files share is large file size. Current bandwidth considerations make multimedia a tough sell on the Internet. Because it takes longer, in most instances, to download a multimedia file than it does to view it, specialized formats have been developed to make using multimedia in Web pages worthwhile. These new formats enable streaming of audio and video. Streaming allows video and audio to be played on the client machine before the file is completely downloaded. Streaming formats include Internet Wave, RealAudio, and VDOLive. The clients for these new applications are usually free. These formats require specialized server applications, though, which cost money. |
If you want to make a small file play indefinitely, you would use the LOOP=INFINITE attribute. You can set the starting point of an AVI file with the START= attribute. Choices for the START= attribute include FILEOPEN, which runs the file as soon as it's loaded, or MOUSEOVER, which runs a file when the mouse passes over it.
It's amazing how creative Web page designers have become with an element as simple as a table. Tables are now used to place content nearly anywhere on a Web page, with a fair amount of control on the designer's part.
The <TABLE> tag is fairly straightforward but not as intuitive as some of the other tags. You create a table by inserting a table tag and then inserting tags for the rows in your table. You can then place content in the cells of your table and set other parameters. Listing 1.6 shows a simple table.
Listing 1.6. A simple table.
</HTML>
<HEAD>
<TITLE>Simple Table Page</TITLE>
</HEAD>
<BODY>
<H1>This is a simple table</H1>
<HR COLOR="BLUE">
<TABLE BORDER>
<TR>
<TD>Cell 1,1</TD>
<TD>Cell 1,2</TD>
</TR>
<TR>
<TD>Cell 2,1</TD>
<TD>Cell 2,1</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The BORDER attribute in this table creates a grid into which the table data tag, <TD>, is inserted. Another row would be added with another <TR> tag containing the <TD> tags.
In addition to deciding whether you want a grid to show up in your page, you can set the width of cells. To do this, you use the WIDTH= attribute in the <TD> tag. You can set the width value either in pixels or as a percentage of table size:
<TD WIDTH="50%">Wide cell</TD>
Other attributes available to you when working with tables include CELLCOLOR=, BORDERCOLOR=, and BACKGROUND=. The BACKGROUND= attribute takes a URL to a graphics file as a value. CELLCOLOR= and BORDERCOLOR= can use either a color name or a HEX value.
HTML 3.0 tags include the THEAD, TBODY, and TFOOT attributes. Listing 1.7 creates a table using these features.
Listing 1.7. Table with header and footer.
<HTML>
<HEAD>
<TITLE>HTML Table with Header and Footer</HEAD>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Table with Header and Footer Attributes</H1>
<TABLE>
<THEAD>Header for the table.
<TR>
<TD>Data 1 in Header</TD>
<TD>Data 2 in Header</TD>
</TR>
</THEAD>
<TBODY RULES=ROWS>
<TR>
<TD COLSPAN=2>Data in Body 1</TD>
</TR>
</TBODY>
<TFOOT>
<TR>Throughout the book you'll see examples of
<TD></TD>
<TD>This is my footer</TD>
</TR>
</TFOOT>
</TABLE>
</BODY>
</HTML>
| TIP |
As you browse the Web, you'll see all sorts of HTML layouts using tables. Whenever you see something that strikes you as interesting, take a look at the source code and save it. Later on, if you need to do something similar, you'll have a library of demo code to browse for ideas. |
Finally, what makes HTML tables extremely versatile is that you can place a table within a table for a desired effect. For example, say that you want to use a table that contains a large graphics image and you want to set up some links in a table right next to the graphics image. Listing 1.8 shows how you would accomplish this task, and Figure 1.4 shows the results.
Figure 1.4 : Table within a table.
Listing 1.8. Table in a table.
<HTML>
<HEAD>
<TITLE>Table in a Table</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>A nested table</H1>
<HR COLOR=RED>
<TABLE BORDER>
<TR>
<TD><IMG SRC="myimage.gif" ALT="My Image"></TD>
<TD>
<TABLE>
<TR>
<TD>ITEM 1</TD>
</TR>
<TR>
<TD>ITEM 2</TD>
</TR>
<TR>
<TD>ITEM 3</TD>
</TR>
<TR>
<TD>ITEM 4</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
In the past, if you were doing anything interactive on the Web, it was usually with HTML forms. For the most part, forms allow for client input that is processed on the server machine. Output from an HTML form is usually sent to the Web server's CGI_BIN directory, where it is processed by a CGI script. A CGI script is a program that runs on the server and usually processes parameters sent from forms on the Web. CGI scripts can be written in any language that can be compiled or run on the server. The most popular languages for creating CGI scripts have been Perl and Bourne shell, a batch-processing language on UNIX machines.
To create a form in an HTML document, you enclose the graphical elements of the form in the <FORM> </FORM> tags. The ACTION= attribute contains the URL of the CGI script to be run. Using METHOD=, you can determine how things are sent to the server. Possible values for this attribute are GET and POST.
Forms are created with the basic elements of the graphical user interface common to most GUI operating systems. These elements include buttons, textboxes, radio buttons, checkboxes, and listboxes.
The form elements are named differently in HTML than in a language such as Visual Basic. Most of the elements are created by setting the TYPE= attribute of the <INPUT> tag. Let's go over each element and then run through a few scenarios in which you might use HTML forms.
Buttons are created by setting the value of the TYPE= attribute of the <INPUT> tag to SUBMIT. You can set the caption of a button using the VALUE= attribute. The NAME= attribute is passed to the CGI script along with the value. Listing 1.9 shows these tags and attributes at work.
Listing 1.9. Form with a button.
<HTML> <HEAD> <TITLE>Form with button</FORM> </HEAD> <BODY> <H1>This is a button</H1> <FORM> <INPUT TYPE="SUBMIT" NAME=Button1 VALUE="This is Button1"> </FORM> </BODY> </HTML>
A textbox is created using the TYPE=TEXT attribute. The name of the textbox is set with the NAME= attribute, and the returned value is held in the VALUE= attribute:
<INPUT TYPE="TEXT" NAME="Text1" VALUE="(default value)">
Additional attributes associated with the TEXT type include SIZE=, which determines the size of the textbox, and MAXLENGTH=, which sets a limit on the amount of text that can be typed into the control.
A textarea is like a textbox except that it contains more than a single line of text. Like a textbox, a textarea has a NAME= attribute and a VALUE= attribute. In addition, because the textarea is multilined, you can specify the number of columns and rows in the control using the COLS= and the ROWS= attributes:
<INPUT TYPE=TEXTAREA NAME="TextArea1" COLS=25 ROWS=20>
Radio buttons are also created using the <INPUT> tag. The TYPE= attribute is set to RADIO, and the NAME= and VALUE= attributes set the name and return value of the control. A caption for the radio button is set by placing text outside the <INPUT> tag, to the left or right:
<INPUT TYPE=RADIO NAME=Radio1 VALUE="YES" CHECKED>Question here.
Radio buttons are usually set in groups, and only one of the buttons can be set to CHECKED at a time. In forms, groups are determined by control placement. To create a group of radio buttons, you code them together, with no other controls in between.
A checkbox is different from a radio button in that any number of checkboxes may be set to CHECKED at the same time, whether they're grouped or not. To create a checkbox, you set the TYPE= value of the <INPUT> tag to CHECKBOX. The NAME= and VALUE= attributes work the same way for both radio buttons and checkboxes.
Listboxes are set up in HTML forms using the <SELECT> </SELECT> pair. Items between the <SELECT> tags become the items in the list. The NAME= attribute sets the name value of the listbox, and <OPTION> indicates an item within the listbox. The <SELECTED> attribute sets the default return value for the list. SIZE= determines the number of elements to display. If there are more elements than the SIZE= attribute value, the box will scroll automatically. Finally, the VALUE= attribute returns the selected item(s) from the list. Listing 1.10 shows how to set up a listbox, and Figure 1.5 shows the results.
Figure 1.5 : A form containing a listbox.
Listing 1.10. Form with a listbox.
<HTML>
<HEAD>
<TITLE>Form with a Listbox</TITLE>
</HEAD>
<BODY>
<H1>This is a listbox</H1>
<SELECT NAME=List1 SIZE=5>
<OPTION SELECTED>Item 1</OPTION>
<OPTION>Item 2</OPTION>
<OPTION>Item 3</OPTION>
<OPTION>Item 4</OPTION>
<OPTION>Item 5</OPTION>
<OPTION>Item 6</OPTION>
<OPTION>Item 7</OPTION>
</SELECT>
</BODY>
</HTML>
The text area in an HTML form is a multiline text-entry field. As with the text input control, the NAME= and VALUE= attributes are passed to the CGI script for processing. To set up the text area on the form, use the ROWS= and COLS= attributes to set the number of rows and columns that show in the form:
<TEXTAREA NAME="MyText1" ROWS="20" COLS="75">This is a text area.</TEXTAREA>
As mentioned, CGI scripts are executed on servers. What CGI programs do depends on what values you send to them via the METHOD= value of a form in an HTML document.
Listing 1.11 is like any common form you might find on the Web. This page uses a script called formmail.pl that takes all the values submitted through the form and returns them to an e-mail address.
Listing 1.11. Form that returns its values via e-mail.
<HTML> <HEAD> <TITLE>ABC FX Survey</TITLE> </HEAD> <BODY> <H1>ABC FX Survey </H1> <HR> <P> You can help create a better site by answering the following questions. These are simply questions to determine where most of our readers are in terms of experience with ABC Graphics Suite for Windows 95 and where they would like more help. <FORM ACTION="/cgi-bin/formmail.pl" METHOD="POST"> <P> <INPUT NAME="recipient" VALUE="kattdev@gate.net" type=hidden> <INPUT NAME="subject" VALUE="ABC FX Reader Survey" type=hidden> <P> What is your current experience level with Windows graphics tools? <P> <INPUT TYPE="RADIO" NAME="Experience" VALUE="Expert">Expert <INPUT TYPE="RADIO" NAME="Experience" VALUE="Advanced">Advanced <INPUT TYPE="RADIO" NAME="Experience" VALUE="Beginner">Beginner <INPUT TYPE="RADIO" NAME="Experience" VALUE="Help!">Help! <P> What application from ABC Graphics Suite do you use the most? <P> <INPUT TYPE="RADIO" NAME="Application" VALUE="Picture Publisher 6.0">Picture Publisher <INPUT TYPE="RADIO" NAME="Application" VALUE="Designer 6.0">Designer <INPUT TYPE="RADIO" NAME="Application" VALUE="ABC FlowCharter">FlowCharter <INPUT TYPE="RADIO" NAME="Application" VALUE="ABC Media Manager">Media Manager <P> What types of tips are you most interested in seeing? <P> <INPUT TYPE="RADIO" NAME="Tips" VALUE="Picture Publisher">Picture Publisher <INPUT TYPE="RADIO" NAME="Tips" VALUE="Designer">Designer <INPUT TYPE="RADIO" NAME="Tips" VALUE="Flowcharter">FlowCharter <INPUT TYPE="RADIO" NAME="Tips" VALUE="Media Manager">Media Manager <P> Are you a graphics professional? <P> <INPUT TYPE="RADIO" NAME="Pro" VALUE="No">No <INPUT TYPE="RADIO" NAME= "Pro" VALUE="Yes">Yes <P> If you are using plug-ins, which ones? <P> <TEXTAREA NAME="plug-ins" ROWS=10 COLS=75> </TEXTAREA> <P> Do you have any suggestions or tips you'd like to submit? <P> <TEXTAREA NAME="suggestions/tips" ROWS=10 COLS=75> </TEXTAREA> <P> <INPUT TYPE=SUBMIT VALUE="Send Info"> </FORM> </BODY> </HTML>
The tags that we've discussed so far by no means compose an exhaustive
list of those that you can use with HTML. Table 1.2 lists a number
of text formatting tags that you might find useful.
| Tag | Purpose |
| <EM></EM> | Emphasis |
| <CODE></CODE> | Monospace type |
| <KBD></KBD> | Monospace |
| <DFN></DFN> | Definition |
| <CITE></CITE> | Citation |
| <B></B> | Bold |
| <I></I> | Italic |
| <TT></TT> | Typewriter text |
| <ADDRESS></ADDRESS> | Signature |
| <BLOCKQUOTE></BLOCKQUOTE> | Long citation |
Some of these tags may seem redundant, but having precise tags available can be very helpful when converting HTML to and from a typeset format.
One last type of tag that should be mentioned is the tag that creates lists. The <OL> </OL> combination creates a numbered list automatically. Terms within the list are separated by the <LI> tag:
<OL> <LI>First <LI>Second <LI>Third <LI>Fourth </OL>
Other types of lists available to you include menu (<MENU>), directory (<DIR>), and unordered (<UL>) lists.
The frame tag allows you to open multiple HTML documents and OLE-enabled applications inside the same browser window. Frames can be complicated, but they offer a level of flexibility that's not available in tables to lay out pieces of an HTML document.
To set up a page with frames, you first need to decide how you want the frames to be inserted. The <FRAMESET> </FRAMESET> tag pair encloses <FRAME> tags. The <FRAMESET> tags determine how the group of frames will be displayed on the page. Like tables, frames are set up by column and row. The COLS= attribute allows you to set up your frameset by percentage, relative size, or pixels. The dimensions for ROWS= can be set in the same way.
Using the <FRAME> tag itself is fairly straightforward. The SRC= attribute names the URL of an HTML document to be placed in the frame. You can use the MARGINWIDTH= and MARGINHEIGHT= attributes to place the document within the frame. The FRAMESPACING= attribute determines spacing between frames. The FRAMEBORDER= attribute sets the width of the border between frames, if a border exists. If you want to give the frame scrolling capabilities, use SCROLLING="YES". Finally, the NAME= attribute allows you to take control of a frame from within a script. Using the NAME= attribute, you can change the URL of the document in the frame or change other attributes. Listing 1.12 shows HTML pages in frames.
Listing 1.12. HTML pages in frames.
<HTML>
<HEAD>
<TITLE>HTML Pages in Frames</TITLE>
</HEAD>
<BODY>
<FRAMESET COLS=25%>
<FRAME SRC="list.htm">
</FRAMESET>
<FRAMESET COLS=75%>
<FRAME SRC="content.htm">
</FRAMESET>
<NOFRAMES>
Sorry, you need a frames based browser to see this page.
</BODY>
</HTML>
Notice in Listing 1.12 that the <NOFRAMES> tag is used to set content for the document if the page is being viewed in a browser that's not capable of using frames. We'll use frames a lot when working with HTML and VBScript.
Scripting allows you to take control of content in an HTML document. Like any other tag in HTML, the <SCRIPT> tag uses attributes and allows you to define a scripting language to control the objects in your document. Objects in your document can range from active controls and Java applets to OLE server applications.
The LANGUAGE= attribute sets the scripting language in the <SCRIPT> tag. For VBScript, the language tag is "VBScript". The VBScript code itself is closed with the </SCRIPT> tag. To keep browsers that cannot use the code from displaying the code in a page, comment tags should surround the code:
<SCRIPT LANGUAGE="VBScript">
<!--
SUB Button1_OnClick()
MsgBox "Welcome to the future.", 0, "Internet Explorer 3.0"
END SUB
-->
</SCRIPT>
When the HTML document is loaded into the browser, the browser sees the <SCRIPT> tag, and the code is sent to the interpreter. VBScript then compiles the code and runs the program.
Although VBScript is the subject of this book, any language can be used to add scripting capabilities to your Web pages, if you have an interpreter installed. If you're using Internet Explorer 3.0 or later, you also have the choice of using the Java Script interpreter.
Objects are controls or small programs that you can add to your HTML document. They are inserted with the <OBJECT> tag and are defined by their class identification number as stored in the Windows 95 Registry. An object can be an ActiveX control, a Java applet, or an OLE server program. (For Java applets, the <APPLET> tag is used.) In addition to the class id number, other properties can be set for the control that's being inserted. A property is the value for a part of a control. For example, the color property for a circle control might be "RED".
Taking what you've learned so far, here is what it would look like to insert a control into our HTML document:
<OBJECT
clsid="clsid{clsid goes here}"
height=20
width=20
id=Btn1
</INSERT>
| Objects in Internet Explorer 3.0 |
If you've been using Explorer 2.0 for a while, you might wonder how Microsoft was able to add so many features to Explorer 3.0 so quickly. Microsoft converted Internet Explorer 2.0 from a single, do-all program into a shell that hosts components. The components are everything that make up an HTML page. So instead of a GIF routine being coded into the browser, it is a component that does the job just as easily. The same has been done with object controls and the scripting engine. The scripting engine doesn't really know anything about VBScript; all it knows is that it has hit a scripting tag for a language called VBScript. If it finds a script with the VBScript language tag, it hands off to VBScript, which takes over processing of the script. |
Any type of object can be placed into an HTML document. As long as the object is on the client machine or can be downloaded from the Internet, it can be run on the client. That's where VBScript comes in. The VBScript language enables you to take an object in your HTML page and control it with a subset of the Visual Basic language. It's a subset of the language because, with HTML documents being loaded dynamically from the Internet, you want to be sure that the page itself isn't capable of any mischief. For example, you wouldn't want the scripting language to be able to format a hard drive, insert a virus, or gather information from your machine without your knowledge.
ActiveX controls are what used to be called OCXs or OLE Custom
Controls. The OCX replaced the VBX (Visual Basic Control) in 32-bit
programs for Windows 95 and Windows NT. ActiveX controls are special
because they are programmed with an interface that allows them
to be used in other programs.
| ActiveX Controls and the Web |
The interesting thing about ActiveX controls is that they weren't really developed to be distributed network objects, but they fit into that role rather nicely. As interest in the Web grew, Netscape took a leading role in the browser market, partly by making its browser extensible through the use of plug-ins. Using Netscape's plug-in technology, a software developer can create programs that can run inside the Netscape browser. When Microsoft took a hard look at its own technology, the company decided that it already had a great pluggable technology in the form of OLEs and OCXs, which it renamed ActiveX to better reflect the larger role that the controls would play in HTML authoring. |
Chapter 7 "Using ActiveX Controls," takes a closer look at ActiveX controls and how they can be used in your HTML pages.
In this chapter, you read about creating HTML documents. You learned that documents and files on the World Wide Web are found using a URL. You also learned that a client machine usually retrieves data from a server. You took a look at HTML and reviewed the common tags and the layout of an HTML page. We also discussed scripting and how it is used to control objects in active HTML pages. Finally, we discussed ActiveX controls for the Internet.
In the next chapter, you'll learn more about the VBScript language and how it's connected to content in HTML pages.