Today you start applying the theory of scripting. Web pages are written in hypertext markup language (HTML). This chapter starts a crash course on HTML. You will learn how to design a basic Web page with nothing but your brain, this chapter, and a text
editor. In addition to learning basic HTML functions, you will also learn the mechanics of inserting scripting language and ActiveX objects on your Web pages. You are going to have fun today, so lets get started.
HTML is related to (or rather, descended from) another formatting standard for text documents called standard generalized markup language (SGML). SGML is used as a standard to share data across diverse systems. HTML is a document type definition(DTD)
of SGML. DTD is a fancy way of saying subset. So, HTML is a subset of SGML.
Remarkably, HTML files are written in plain ASCII text. It is probably an accident that something so useful didn't wind up in an obscure format. Or it could be that HTMLs usefulness derives from its format, which is common enough for any text editor to
generate. So fire up your text editor and launch your browser. Lets make Web pages!
Type listing 2.1 into your text editor.
Listing 2.1. The traditional Hello World introduction .
<HTML> <HEAD> <TITLE>Hello World</TITLE> </HEAD> <BODY> Hello World </BODY> </HTML>
Save your file as hello.html, then launch your Web browser .
Note
The standard filename extension for HTML files is *.html. In operating systems that support three letter file extensions, the standard is .htm. Other extensions won't cause the system to crash, but can cause confusion. I recommend that you stay with the standard extension.
Your creation should look something like Figure 2.1.
Figure 2.1 Your first Web page.
Not bad for your first try. Lets learn how to improve on this simple start.
HTML uses tags to convey ideas to the Web browser. Listing 2.1 is full of tags, such as <HTML> and <BODY>. Tags are enclosed in brackets (<>). You will look at tags during the next several pages. You will start with the most common
tags, and end with the tags <SCRIPT> and <OBJECT>. <SCRIPT> and <OBJECT> are the keys to using scripting language and ActiveX components. While this chapter does not cover every element of HTML, it should cover enough to build a
foundation for your knowledge of how a Web page is constructed. Each HTML element that we examine will appear in the following format:
The <TAG> Tag
Description: Contains a brief description of the tag. Some tags take the form <TAG>...</TAG> to indicate the elements affected by the tag. Other tags appear as <TAG>, which normally sets an attribute of the element on the page
that follows it.
Appears As: <TAG> </TAG> or <TAG>
Attributes: Properties that can be set for the tag, such as color and position. Not all tags have attributes.
Can Contain: Other tags that can be used within this tag. (Not all tags will have entries in this section.)
Can Be In: Other tags that this tag can be used in.
Example: Contains an example that illustrates the capabilities of a given HTML tag .
There are three tags used in almost every web page , <HTML>, <HEAD>, and <BODY>. All the action in your web pages will take place inside these tags. Take a look at how to use them.
Description: The beginning and ending of an HTML document.
Appears As: <HTML> </HTML>
Attributes: None
Can Contain: <BODY>, <HEAD>
Can Be In: N/A
Example: Reduce your Hello World page to just three lines using the <HTML> tag (see Listing 2.2).
Listing 2.2. The simplified Hello World page .
<HTML> Hello World </HTML>
Notice the output shown in Figure 2.2 is the same as that shown in Figure 2.1.
Figure 2.2. The simple Hello World.
All your HTML documents will be enclosed with the <HTML> tag.
Description: This section is where you can save information about the Web page. The information stored here is not displayed. This section is loaded before other sections of the document, which makes it a great place to put <SCRIPT> tags
and <OBJECT> tags (I'll discuss these tags later in this chapter).
Appears As: <HEAD> </HEAD>
Attributes: None
Can Contain: <BASE>, <ISINDEX>, <LINK>, <META>, <NEXTID>, <TITLE>, <SCRIPT>, <OBJECT>
Can Be In: <HTML>
Example: Give the Web page a title inside the <HEAD> tags, as shown in Listing 2.3.
Listing 2.3. Giving a title to a Web page .
<HTML> <HEAD> <TITLE>MY WEB PAGE</TITLE> </HEAD> <BODY> This is My Very Own Web Page </BODY> </HTML>
Notice in figure 2.3 that the title doesn't show up on the form.
Figure 2.3. The phantom title.
You might be saying, "If is doesn't show up, what good is it?" Well, for one thing, if someone wants to remember where your page is and adds it to their browser's "favorites" list, the browser will use the text inside the
<TITLE> tags. In this case, MY WEB PAGE would be added to the list. Examine the Start bar pictured in Figure 2.4. It shows that the browser has extracted the title from this Web page and is using it as a Start bar button.
Figure 2.4. The title on the Start bar button.
Description: Contains all the content of your Web page.
Appears As: <BODY> </BODY>
Attributes: BACKGROUND
Can Contain: <H1>, through <H6>, <P>, <OL>, <UL>, <DIR>, <MENU>, <DL>, <PRE>, <BLOCKQUOTE>, <FORM>, <ISINDEX>, <HR>, <ADDRESS>
Can Be In: <HTML>
Example: Aside from containing all the content of your page, the BACKGROUND attribute is set within the <BODY> tags (see Listing 2.4).
Listing 2.4. Setting the background inside the <BODY> tags .
<HTML> <HEAD> <TITLE>STARS!</TITLE> </HEAD> <BODY BACKGROUND = "GoldStar.gif"> I see Stars! </BODY> </HTML>
The result of Listing 2.4 is shown in Figure 2.5.
Figure 2.5. Setting the BACKGROUND attribute .
Notice the Start bar at the bottom of the picture. It contains the STARS! attribute that you saw in the <TITLE> tag. Also notice that the single star contained in the GIF file ("GoldStar.gif") was tiled to fill the entire screen.
The <HTML>, <HEAD>, and <BODY> tags are the backbone of the HTML page.
Now that you have mastered the skeleton of the HTML page, take a look at some of its vital organs.
Description: Those of you with a programming background were probably hoping that HTML wouldn't have any comments. The merits of comments have been debated in break rooms across the world. One school of thought is that the lack of comments has
probably made more work for programmers (in general, a good thing if one wants to make a living by programming). Admittedly, I have never seen anyone lose a job due to lack of comments, but if you want to make your Web-page-building life a little easier,
comments are important. When asked what a particular poem meant, the great poet Robert Frost is supposed to have said, "When I wrote this poem, only God and I knew what it meant. Now only God knows." That is because his poems didn't have
comments.
Appear As: <!...>
Example: Add a comment to the previous STARS! example.
Listing 2.5. Using comment tags inside the <BODY> tags .
<HTML> <HEAD> <TITLE>STARS!</TITLE> </HEAD> <BODY BACKGROUND = "GoldStar.gif"> <! Goldstar.gif came from the QuickStart Collection of Gifs > I see Stars! </BODY> </HTML>
The result is the same as Figure 2.5, but when you have to maintain this page you will know where the picture came from. Comments can speak to future programmers tasked to maintain or learn from your pages. The comment tags can also be used in
conjunction with the <SCRIPT> tags: To keep older browsers that don't recognize the <SCRIPT> tag from seeing the code inside the <SCRIPT> tags, the <SCRIPT> tags themselves are placed inside of comment tags.
Description: Heading tags provide you the ability outline your Web page. Visually, the lower the number, the bigger the print. Avoid using heading just to achieve the visual effect. A program building an index from you page might use the text in
your index as the entry in the index.
Appear As: <H1> </H1>, <H2> </H2>, <H3> </H3>, <H4> </H4>, <H5> </H5>, <H6> </H6>
Attributes: ALIGN
Can Contain: <A>, <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <B>, <I>
Can Be In: <BLOCKQUOTE>, <BODY>, <PRE>, <ADDRESS>, <FORM>, <TH>, <TD>
Example: Create headings in your text (see Listing 2.6).
Listing 2.6. Using headings .
<HTML> <HEAD> <TITLE>SPEECH</TITLE> </HEAD> <BODY> <H1>SPEECH OUTLINE </H1> <H1>INTRODUCTION </H1> <H2>TELL THEM WHAT YOUR ARE GOING TO TELL THEM</H2> <H1>MAIN POINT</H1> <H2>DETAIL</H2> <H3>SUB DETAIL</H3> <H4>REALLY DETAILED</H4> <H5>SO DETAILED NO ONE UNDERSTANDS IT</H5> <H6>SO DETAILED NO ONE CARES</H6> <H1>CONCLUSION</H1> <H2>TELL THEM WHAT YOU TOLD THEM</H2> </BODY> </HTML>
This example shows another common use for heading tags. The title to a form is often echoed in an <H1> Tag, as shown in seventh line of Listing 2.6. Listing 2.6 produces the page shown in Figure 2.6.
Description: Paragraph tags provide a way to separate the content of your page. A paragraph tag ends any previous section, then puts some space after that section. Finally, the text inside the tag is printed as a new section.
Appear As: <P> </P>
Attributes: ALIGN
Can Contain: <A>, <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <B>, <I>, <TT>
Can Be In: <BLOCKQUOTE>, <BODY>, <PRE>, <ADDRESS>, <FORM>, <TH>, <TD>
Example: Lets throw a couple of paragraphs together and see what happens (see Listing 2.7).
Listing 2.7. Fun with paragraphs .
<HTML> <HEAD> <TITLE>PARAGRAPHS</TITLE> </HEAD> <BODY> <H1>PARAGRAPHS </H1> <H1>FIRST PARAGRAPH </H1> <P>Paragraph tags provide a way of separating the content of your page. A paragraph tag first ends any previous section. Then it puts some space after the last section. Finally the text inside the tag is printed as a new section.</P> <P>Notice the separation between this section and the last section. Also notice how this section interacts with the plain text that follows</P> Plain text that follows </BODY> </HTML>
Listing 2.7 produces the page shown in Figure 2.7
Figure 2.7. Paragraphs in action.
Description: The <A> tag is the bread and butter of current Internet pages. It allows you to specify a new page to jump to when the user selects a certain area of the Web page.
Appears As: <A> </A>
Attributes: HREF, NAME
Can Contain: <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <B>, <I>, <TT>
Can Be In: <ADDRESS>, <B>, <CITE>, <CODE>, <DD>, <DT>, <EM>, <H1> through <H6>, <I>, <KBD>, <LI>, <P>, <PRE>, <SAMP>, <STRONG>, <TT>,
<VAR>, <TH>, <TD>
Example: Make two pages. The main page source code is shown in Listing 2.8. The source code for the page you will jump to is in Listing 2.9.
Listing 2.8. Links: the main page .
<HTML> <HEAD> <TITLE>LINKS MAIN PAGE</TITLE> </HEAD> <BODY> <H1>LINKS MAIN PAGE </H1> <H1>An Example of links </H1> <P>Links are what make the internet interesting. How often have you started looking for one piece of information and wound up looking at something like a Llama Ranch Home Page? <A HREF="linkref.html">Click Here to Go to another page.</A></P> </BODY> </HTML>
Listing 2.9. The page referenced .
<HTML> <HEAD> <TITLE>LINKS REF PAGE</TITLE> </HEAD> <BODY> <H1>LINKS REF PAGE </H1> <H1>An Example of links </H1> <P>We made it to another page! Congratulations on your first link. <A HREF="linkmain.html">Now lets go back.</A></P> </BODY> </HTML>
Notice the syntax for the <A> tag. The filename of the link is placed with the beginning tag, like this: <A HREF="linkmain.html">. The text you want to associate with the tag is placed between the <A> tag and the </A>
tag. The main form is shown in Figure 2.8.
Figure 2.8. The original document.
Clicking the line Click Here to Go to another page displays the page shown in Figure 2.9.
Figure 2.9. The referenced document.
Clicking the phrase Now lets go back returns you to the main document.
A list is a very common way of presenting data. HTML provides two mainstream ways to show them: the <OL> tag and the <UL> tag.
Description: An ordered list. Items in this list are numbered by the Web browser.
Appears As: <OL> </OL>
Attributes: TYPE, START
Can Contain: <LI>
Can Be In: <BLOCKQUOTE>, <BODY>, <PRE>, <ADDRESS>, <FORM>, <TH>, <TD>
Description: An unordered list. This doesn't mean the data in the list is chaotic. It means that the Web browser designates the item with a symbol.
Appears As: <UL> </UL>
Attributes: TYPE
Can Contain: <LI>
Can Be In: <BLOCKQUOTE>, <BODY>, <PRE>, <ADDRESS>, <FORM>, <TH>, <TD>
Example: Listing 2.10 shows how these two tags are used.
Listing 2.10. An ordered and unordered list .
<HTML> <HEAD> <TITLE>LISTS</TITLE> </HEAD> <BODY> <H1>LISTS</H1> <H1>An Example of Lists </H1> <P>Lists are another way of organizing the content of your page. An ordered list of three items looks like this:</P> <OL> <LI> Thing One <LI> Thing Two <LI> Thing Three </OL> <P>An unordered list of same three items looks like this:</P> <UL> <LI> Thing One <LI> Thing Two <LI> Thing Three </UL> </BODY> </HTML>
The <LI> tag denotes the items placed on the list. The output is shown in Figure 2.10 .
Figure 2.10. Displaying lists.
The TYPE attribute is browser dependent. TYPE allows you to change the numbering system or symbol depending on the kind of list you are building. The START attribute allows you to start the list at a particular number. See Exercise 2 at the end of this
chapter for an example of the START attribute.
Tables are a useful way of showing any data that can be put into rows and columns. Using the <TABLE> tag allows you to do this.
Description: A <TABLE> Allows you to present the contents of your pages in column and row format.
Appears As: <TABLE> </TABLE>
Attributes: BORDER
Can Contain: <CAPTION>
Can Be In: <BLOCKQUOTE>, <BODY>, <DD>, <LI>, <FORM>
Example: Create your own table. Listing 2.11 shows the source code for a simple table in a Web page.
Listing 2.11. Web page with table .
<HTML> <HEAD><Title>TABLES</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>Tables</H1> <H3>A table of Phone Numbers</H3> <TABLE BORDER> <TR> <TH>NAME</TH> <TH>STATE</TH> <TH>PHONE</TH> </TR> <TR> <TD>Valerie</TD> <TD>CA</TD> <TD>555 555-5551</TD> </TR> <TR> <TD>Jeff</TD> <TD>FL</TD> <TD>555 555-5552</TD> </TR> <TR> <TD>Alton</TD> <TD>CA</TD> <TD>555 555-5553</TD> </TR> <TR> <TD>Ruth</TD> <TD>CA</TD> <TD>555 555-5554</TD> </TR> </TABLE> </BODY></HTML>
Three tags, <TR>, <TH>, and <TD>, work inside a table. Rows in the table are defined between <TR> and </TR>. Within these rows, headings are denoted using <TH> and </TH>, and data is enclosed by <TD> and
</TD>. The primary difference between a data element and a heading element is the heading element is bolded by the browser. See Figure 2.11 for the resulting page.
Figure 2.11. A table of phone numbers.
Notice the use of the BORDER attribute . If the BORDER attribute was left out, the border shown in Figure 2.11 would disappear.
The <FORM> and <INPUT> Tags work hand-in-hand to provide a way to get information from the user and pass it to your server. The <FORM> tag provides the framework and the <INPUT> tag provides the user interface elements.
Description: <FORM> provides a section of page where the user can input data; that data can be collected and sent back to your server.
Appears As: <FORM> </FORM>
Attributes: ACTION, METHOD, ENCTYPE
Can Contain: <H1> through <H6>, <P>, <OL>, <UL>, <DIR>, <MENU>, <DL>, <PRE>, <BLOCKQUOTE>, <ISINDEX>, <TABLE>, <HR>, <ADDRESS>, <INPUT>, <SELECT>,
<TEXTAREA>
Can Be In: <BLOCKQUOTE>, <BODY>, <DD>, <LI>, <TH>, <TD>
Description: These are the user interface objects allowed by HTML. There are five user interface objects, CHECKBOX, HIDDEN, RADIO, RESET, SUBMIT, TEXT, and IMAGE.
Appears As: <INPUT>
Attributes: TYPE, NAME, VALUE, SRC, CHECKED, SIZE, MAXLENGTH, ALIGN
Can Contain: N/A
Can Be In: <FORM>
Example: You will do two examples for these tags. The first will show all the user interface elements available from the <INPUT> tag, and the second will show how <FORM> and <INPUT> work
together to collect data and pass data back to the server.
Listing 2.12. Sample source code for <INPUT>.
<HTML> <HEAD><Title>INPUTS</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>INPUTS</H1> <H3>These are the Grapic Elements available through the INPUTS Tag</H3> <! The INPUT tag only works inside a form> <FORM> <P>TEXT <INPUT TYPE ="TEXT" NAME ="TextBox1" SIZE = "20" MAXLENGTH ="15"> </P> <P>RADIO Buttons <UL> <LI><INPUT TYPE ="RADIO" NAME ="RadioButton1" VALUE = "Thing1" > Thing1 <LI><INPUT TYPE ="RADIO" NAME ="RadioButton1" VALUE = "Thing2" > Thing2 </UL> <INPUT TYPE ="RADIO" NAME ="RadioButton2" VALUE = "Item1" > Item1 <INPUT TYPE ="RADIO" NAME ="RadioButton2" VALUE = "Item2" > Item2 </P> <P>CheckBoxes (Choose all that apply) <UL> <LI><INPUT TYPE ="CHECKBOX" NAME ="Tinker" VALUE = "Thing1" > Tinker <LI><INPUT TYPE ="CHECKBOX" NAME ="Taylor" VALUE = "Thing2" > Taylor </UL> </P> <P>Image: <INPUT TYPE ="IMAGE" NAME ="BitMapBtn" SRC = "GoldStar.gif" > </P> <P>RESET AND SUBMIT <INPUT TYPE ="RESET" VALUE = "RESET VALUES" > <INPUT TYPE ="SUBMIT" VALUE = "SEND STUFF TO SERVER" > </P> <P>Hidden: <INPUT TYPE ="HIDDEN" NAME ="HiddenValue" > </P> </FORM> </BODY></HTML>
There are a couple of things you should look at here. Notice the use of the attributes SIZE and MAXLENGTH in the line <INPUT TYPE ="TEXT" NAME ="TextBox1" SIZE = "20" MAXLENGTH ="15">. This sizes the text
box at 20 characters and limits the user to 15 characters. If MAXLENGTH is left out, the user can type an unlimited amount of text. In general, the attribute VALUE is what is submitted along with the attribute NAME when the <FORM> is sent back for
processing. Also note how the two sets of radio buttons are grouped by their respective names. The page looks like Figure 2.12.
Figure 2.12. An <INPUT> sampler.
Lets see how a script is submitted using the <FORM> tag. Listing 2.13 shows how <FORM> does this.
Listing 2.13. Sending data back to the server .
<HTML> <HEAD><Title>HTML document for the World Wide Web</Title> </HEAD> <BODY BGCOLOR="#FFFFFF"> <CENTER><IMG SRC="Goldstar.gif" ALT=" "></CENTER> <H1 Align = "Center"><FONT FACE="Arial" FONT COLOR="#000000"> My Test Page</H1></Font><BR> <FONT FACE="Arial" FONT COLOR="#000000">This is additonal text </Font><BR> <FORM ACTION="/scripts/testdata.idc" METHOD = "POST" > <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TD ALIGN="RIGHT">ContactName</TD> <TD><INPUT NAME="ContactName"</TD></TR><P> <TD ALIGN="RIGHT">CompanyName</TD> <TD><INPUT NAME="CompanyName"</TD></TR><P> </TABLE> <P><INPUT TYPE="SUBMIT" VALUE="Search" ALIGN="MIDDLE"> <INPUT TYPE="RESET" NAME="reset" VALUE="Clear all fields" ALIGN="MIDDLE"></P></FORM> </BODY></HTML>
Pages like this can also be generated by several software tools. The IIS add-in for Access 95, which I will talk about in some detail tomorrow, is one such tool. Remember, this is a crash course in HTML, not CGI. Between this example and tomorrow's
description of the tool that created it, you will cover some CGI basics. For now, note that this form is passed to a script called testdata.idc, shown in listing 2.14, and returned via a template called testtata.htx, shown in listing 2.15.
Listing 2.14. testdata.idc .
Datasource: TestCust Template: testdata.htx DefaultParameters: ContactName=%%, CompanyName=%% SQLStatement: +Select "CompanyName", "ContactName", "Address", "City", "Region", "PostalCode", "Phone" +From "Customers" +Where "ContactName" LIKE '%ContactName%' +AND "CompanyName" LIKE '%CompanyName%' #IDC-Search FrontHTM-testdata.htm ReportHTX-testdata.htx
Listing 2.15. testdata.htx .
<HTML> <META NAME="GENERATOR" CONTENT="IIS Add In For Access 95"> <HEAD><Title>HTML document for the World Wide Web</Title></HEAD> <BODY BGCOLOR="#FFFFFF"> <%begindetail%> <%if CurrentRecord EQ 0 %> <TABLE BORDER BGCOLOR="#FFFFFF"> <TR> <TH><B>CompanyName</B></TH> <TH><B>ContactName</B></TH> <TH><B>Address</B></TH> <TH><B>City</B></TH> <TH><B>Region</B></TH> <TH><B>PostalCode</B></TH> <TH><B>Phone</B></TH> </TR> <%endif%> <TR> <TD Align=Left><%CompanyName%></TD> <TD Align=Left><%ContactName%></TD> <TD Align=Left><%Address%></TD> <TD Align=Left><%City%></TD> <TD Align=Left><%Region%></TD> <TD Align=Left><%PostalCode%></TD> <TD Align=Left><%Phone%></TD> </TR> <%enddetail%> <%if CurrentRecord EQ 0 %> <HR=2><P> <CENTER><B>No records were selected!<B></CENTER><P> <%endif%> </TABLE> <HR=2> <CENTER>This page was produced by using the <B>IIS Add-In for Access 95</B>.<BR> <I> Copyright 1996 Microsoft Corporation</I>.</CENTER> </BODY></HTML>
You have seen enough HTML to understand the basics of the template file (testdata.htx). Notice how testdata.htx sets up a <TABLE> tag to put the data the server finds into. Those of you with database backgrounds will understand the database query
set up in the testdata.idc file pointed to in the <FORM> tag (FORM ACTION="/scripts/testdata.idc" METHOD = "POST"). Hands are waved, some pixie dust is thrown, and the page comes up looking like Figure 2.13.
Figure 2.13. Searching for records.
The user indicates a need to see all companies with that start with the letter "B" by entering b% in the company name <INPUT> field. (Notice in Listing 2.13 how the <INPUT> tags are placed in a table). The server returns the list
seen in Figure 2.14.
Figure 2.14. All the companies that start with the letter "B".
Description: There are some pretty neat things you can do with <FORM> and <INPUT>, but the processing and error checking is still being conducted by the server. <SCRIPT> was created make your Web pages smarter.
Appears As: <SCRIPT> </SCRIPT>
Attributes: LANGUAGE, SRC
Can Contain: JavaScript VBScript
Can Be In: <HEAD>
Example: Lets do a form that uses <SCRIPT> to compute and display a value.
Listing 2.16. A sample script .
<HTML>
<HEAD>
<Title>First Scipt</Title>
<SCRIPT LANGUAGE ="JavaScript">
<!--
function calc(form)
{
form.answer.value = form.number1.value * form.number2.value;
}
-->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H1>First Script</H1>
<H3>Enter two Numbers and Press the Calculate Button</H3>
<! The INPUT tag only works inside a form>
<FORM>
<P>First Number:
<INPUT TYPE ="TEXT" NAME ="Number1" SIZE = "5" MAXLENGTH ="5">
</P>
<P>Second Number:
<INPUT TYPE ="TEXT" NAME ="Number2" SIZE = "5" MAXLENGTH ="5">
</P>
<P>Answer:
<INPUT TYPE ="TEXT" NAME ="Answer" SIZE = "5" MAXLENGTH ="5">
</P>
<P>
<INPUT TYPE ="BUTTON" NAME ="Calculate" VALUE = "Multiply"
onClick = "calc(this.form)">
</P>
</FORM>
</BODY>
</HTML>
Don't worry about the scripting language syntax yet. Remember, you will have four days to study scripting in detail (one each on VBScript and JavaScript, and two projects). The important thing here is how to fit scripts into HTML. Notice that the
<SCRIPT> was placed inside the <HEAD> tag. This ensures the code is loaded before the page has a chance to do anything else. Also notice that the code is enclosed in a remark tag. This prevents older browsers from trying to figure out what to
do with the code. If you want to use comments inside the code, use the notation native to the language. Call this script up in your browser, enter a couple of numbers, and push the Multiply button. This form isn't long on format, but it computes well.
Description: The relatively few user interface objects supported by HTML are augmented by the <OBJECT> tag . <OBJECT> can also be used to bring in self-contained, non-visual programs that have functions and values you can access via
scripting.
Appears As: <OBJECT> </OBJECT>
Attributes: ID, CLASSID, DATA, PARAM, NAME
Can Contain: N/A
Can Be In: <BODY>
Example: The next example is a simple ActiveX textbox control. It illustrates the difference between using the HTML components and the ActiveX components.
Listing 2.17. Using <OBJECT>.
<HTML> <HEAD> <TITLE>Inserting Objects</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> <H1>First ActiveX Object</H1> <H3>This used to be an OCX but now it's ActiveX!</H3> <P>ActiveX Text Box: <OBJECT ID="ActiveXTextBox" WIDTH=120 HEIGHT=30 CLASSID="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"> <PARAM NAME="VariousPropertyBits" VALUE="746604571"> <PARAM NAME="Size" VALUE="2540;635"> <PARAM NAME="FontCharSet" VALUE="0"> <PARAM NAME="FontPitchAndFamily" VALUE="2"> </OBJECT> </P> </BODY> </HTML>
Notice the overhead has increased. And there is one very puzzling attribute, CLASSID, that looks like a cross between a Visa number and the national debt! CLASSID is an identifier for an ActiveX control. These numbers can be found by finding a control
in the Windows Registry under the CLSID subdirectory. Figure 2.15 shows some of the CLASSID's on my system, including the one used in Listing 2.17.
Figure 2.15. CLASSIDs found on my system.
Run the page in your Web browser; your screen should look like figure 2.16.
Figure 2.16. Your first ActiveX object.
Not very impressive visually, but it does along with scripting, start a whole new era for Web pages .
Now you have some practical knowledge of basic HTML. You have also solved the mysteries of how <SCRIPT> and <OBJECT> tags are used. If you stopped reading this book today, you would have a good foundation for understanding and using current
HTML technology. But do not stop, because tomorrow you will focus on several tools that go well beyond the text editor, including the most important tool available today for ActiveX programming, the ActiveX Control Pad. Before the end of the week, you'll
have written two projects using scripting and ActiveX controls.
Rewrite the ordered part of Listing 2.10 to start numbering the list at 5 (hint: use the START attribute).
Note Refer to the Appendix, "Answers to Quiz Questions," for the answers to these questions.
