If your main HTML editor is Microsoft Word, or you have a copy
of Microsoft Word and you've been using something else, you may
really like Internet Assistant. Although Internet Assistant (IA)
only offers basic support for HTML tags in your documents, that
might not be so bad. Especially since there's nothing wrong with
editing the rest of the document by hand.
| Note |
Internet Assistant is a free add-on for Microsoft Word version 6.0 and above. A separate version is available for either Windows 3.1 or Windows 95. (A Mac version should also be available by the time you read this.) You can download them from Microsoft's Web site at http://www.microsoft.com/. |
Internet Assistant actually adds two different elements to Microsoft Word. After installation, a few new menu items exist for your use, including Insert, Hyperlink. But Internet Assistant also adds the ability to view basic HTML documents from within Microsoft Word with the command File, Browse Web (see fig. 28.1).
Figure 28.1 : The MS Word/Internet Assistant browser.
Creating HTML documents in Internet Assistant isn't really much different from creating a typical Word document. The key is to use the HTML template. In Word, choose File, New. In the new document, select the HTML template for use with your new document. Then place your cursor and begin typing. You can use bold, italics, or underlining as you type.
You can also use the HTML style sheet definitions to help you change basic text to HTML markup. Consider the example, just typed directly into a new HTML-template Word document, like the following:
BigCorp's Customer Service Pages
To change this text from normal text to a Heading 2 (<H2>), select the text with the mouse in Word, and then pull down the style menu and select Heading 2. Word automatically formats the selected text to conform to the HTML standard for Heading 2. As an added bonus, you can see how it might look in a browser window (see fig. 28.2).
Figure 28.2 : Changing text to an HTML header.
| Tip |
As with Word templates in general, you can always select the style first, then type your text. |
Creating a list in Internet Assistant is pretty easy, too. For an ordered or unordered list, all you need to do is enter the text for your list, hitting Enter after each. An example might be:
Downloadable Support Files
Frequently Asked Questions
Send Us a Note
Toll-Free Numbers
The next step is to select the entire list with the mouse. With all of the above highlighted, you can either select the appropriate list button in the buttonbar or select the list type in the pull-down style menu. For instance, if you click the Bullet List (UL) button in the button bar, you'll get something like what's shown in figure 28.3.
Figure 28.3 : Changing regular text to a bulleted list.
If you're interesting in indenting list items, like when creating an outline, the Internet Assistant will let you do that, too. Use an unordered list like the following:
Section 1
Chapter 1
Part 1
Part 2
Chapter 2
You can use the Internet Assistant button bar to move some of these over. First, you can select all of the text under Section 1 and click once on the Increase Indent button to move everything over once. You can also choose Format, Increase Indent. Select Part 1 and Part 2, or Chapter 1, and you can click the button once more to indent those, too (see fig. 28.4).
Figure 28.4 : Indenting (nesting) your lists.
Some HTML mark up in Internet Assistant requires that you follow special instructions, depending on the Windows version you're using. Internet Assistant 1.0 for Windows 3.1 handles definition lists differently from IA 2.0 for Windows 95. Start by typing the first word from your list, then press Tab and type the definition. You do this for your entire list, as in the following example:Mr. Ted Smith
President, CEO. Ted's a huge Cubs fan, an avid golfer,
father of three daughters and Carol's husband. He also works here.
Ms. Gina Miles
CFO. Gina enjoys hiking, mountain biking and weekend lecturing. Also a Cubs fan, Gina enjoys attending the games with her husband Mike.
Mr. Rick Felps
EVP, Marketing. Rick's passion is his '67 Mustang
Convertible, which he often drives to the lake on weekends for fishing outings. Rich hates the Cubs, preferring the Phillies.
Now, by selecting the text and choosing the definition list (DL) option from the pull-down menu, the names will become definition terms (DT) and the descriptions become definitions (DD).
In Windows 95, things are a little more involved. Using the sample text, choose all of the text and make it a definition list using the pull-down menu. Then, select each element separately and make it either a definition item or definition, as appropriate. That will cause the definitions to standout from the definition terms (see fig. 28.5). You can also hit Return after each DT to place the definitions below their respective terms.
Figure 28.5 : Changing regular text to DL terms and definitions.
| Tip |
You can also assign shortcuts to common HTML styles. Choose Format, Style to open the Style dialog box. Pick the correct style, choose Modify, and then select the Shortcut key. Then you just enter a keyboard combination for that style. |
Notice that Internet Explorer's pull-down style menu will also let you create a <DL COMPACT> list. To do this, follow the appropriate procedure above, but choose definition compact instead of definition list.
Microsoft Word defaults to the HTML file format when you use the HTML template (in Internet Assistant) to create your document, so you can basically save your Web page in the same way that you might save a regular MS Word document.
With an HTML document active, choose File, Save. The Save As dialog box appears (see fig. 28.6). Give your file a name in the File name box. Make sure HTML Document is selected in the Save as type menu at the bottom of the dialog box. When you're finished, choose Save. Now you've got an HTML document for your Web site.
Figure 28.6 : Saving your HTML documents.
Let's create a simple page in Internet Explorer and use what you've learned so far to create a new HTML document. To begin, create a new Word file based on the HTML template. You may also want to save this file to give it a name. Then, just type Listing 28.1 (or something similar).
Listing 28.1 iatest.htm A Sample Page for Internet Assistant
BigCorp's Customer Service Pages
To help you get the most out of our products, or just help if you're having a problem, we've created the following Web pages with downloading files, tips, tricks, fixes and answers to your questions. Just click any link to get to that page.
Downloadable Support Files Fixes, drivers, free stuff, utility programs, documents and even a game or two written by our engineering and tech support staffs. If you can't find it here, BigCorp hasn't written it. (Or you'll have to buy it from us!)
Frequently Asked Questions Listing of questions that our tech support reps hear all the time. They're willing to answer them again, but that just means they get frustrated and take more breaks.
Send Us a Note Send email directly to the most prolific answer guy on our support staff.
Toll-Free Numbers Phone numbers for tech support, customer service, and, for good measure, we've even thrown in our toll-free, 24 hour sales numbers. Good of us, eh?
Now the trick is to turn this into a more interesting page. You can start with the heading by selecting the entire heading and changing it to a Heading 2 using the pull-down style menu.
In the descriptive text (first paragraph), there's nothing particularly special you need to do. You can always add bold and italic text where it seems appropriate by highlighting the text and clicking the buttons in the Word/Internet Assistant button bar. You could also experiment by turning the entire paragraph into blockquote text or other HTML mark up.
| Tip |
The Horizontal Rule button-or the Insert, Horizontal Rule menu command-can be used to insert an <HR> line in your document. |
In the next section, notice that I've used <TAB> to prepare it to be a definition list. Select the entire section of text and change it to a definition list, DL in the pull-down style menu. (In IA 2.0, you also need to select each element separately to assign it as a DT or DD.)
Now, save the file as an HTML document, along with the appropriate file extension. You're set. To view the document in Word's built-in browser, click the Switch to Browser button (far left on the second row of the button bar), or select View, Web Browse. It should look something like what's shown in figure 28.7.
Figure 28.7 : Your example in Word's new built-in browser.
| Note |
You can also use the Preview in Browser button (the rightmost button on the first row of the button bar) to load the document directly into the default Windows 95 browser. Or, choose File, Preview in Browser. To work with your document as a plain text file, choose the View, HTML Source command. Word will close the HTML document (and HTML template) and re-open the file as a text file, complete with the tags and other markup. |
After you've viewed the document, you can switch back to edit mode by clicking the Switch to Browser button again, which has now changed to a pencil icon.
Internet Assistant also gives you the ability to add the trappings of good Web pages, including hypertext links, images, and <HEAD> information. For the most part, you can do just about anything possible in HTML 2.0, and it's all fairly straightforward.
To insert a hypertext link, highlight that text and click the Hyperlink button, or choose Insert, Hyperlink. The Hyperlink dialog box opens allowing you to enter or edit text for the link and choose a local file or URL as the document (or multimedia file) this link references (see fig. 28.8). Enter or edit the text and choose a file. Click OK when finished and your hypertext link will appear in the document.
Figure 29.8 : Creating hypertext links.
Word calls local HTML NAME anchors "bookmark" links, and allows you to create them with the help of Internet Assistant. Remember that NAME links have two different components: a calling link and a NAME anchor to which the link points.
You need to start by creating the bookmark link (NAME anchor). To do this, place the cursor where you want the bookmark anchor to be in the document. Then, you can click the Bookmark button on the button bar or choose Edit, Bookmark from the menu. In the Bookmark dialog box that appears, enter a name for this bookmark.
To create the calling link, use the same Hyperlink button or choose Insert, Hyperlink. After entering text for the link, choose the bookmark name from the pull-down menu at the bottom of the dialog box. Make sure it's selected, and then click OK.
Inserting an image in an Internet Assistant HTML document is similiar to inserting a hypertext link. Start by placing your cursor in the document where you'd like the image to appear. Next, click the Picture button or choose Insert, Picture. In the resulting dialog box, choose the name of an image. You can also enter ALT text for displaying instead of the graphic in text-based browsers.
To determine whether or not this image will be a server-side image map and how text will align to it, click the Options tab in the Picture dialog box (see fig. 28.9). Now you can choose the Image is a sensitive map option to add the ISMAP attribute and how you want the image aligned. (Remember that LEFT and RIGHT are not HTML 2.0 values.) Click OK in both dialog boxes and you've inserted your image.
Figure 28.9 : Adding a picture with advanced settings.
Notice that you can also enter video clips with the Picture dialog box (click the Video tab). This uses Microsoft Explorer's proprietary tags for adding and playing AVI files.
Since Internet Assistant doesn't give you direct access to the HTML tags in your document, you'll need to use a special command for <HEAD> elements. On the button bar, click the Title button, or choose File, HTML Document Info. The HTML Document Head Information dialog box appears.
In this dialog box, enter the Title for your Web document. Click OK if that's all you need to add. If you need to add a Base address, click the Advanced button in this dialog box. Enter the URL in the HTML Document Head Info-Advanced field. You can also click the Is Index checkbox if you'd like this page to be an index.
To enter custom HTML text in the head of your document, click the Meta button (this isn't just for the <META> tag, as used for client-pull, but any <HEAD> tags). In the Insert HTML Markup textbox, you can enter any HTML code you'd like to have appear in the head of your document. When you're finished, click OK.
| Note |
You can use a similar command to add your own tags within the body of your document. With the cursor placed at the point in your document where you want to enter the special tag, choose Insert, HTML Markup. In the Insert HTML Markup dialog box that appears, enter the special HTML markup and click OK. |
Now, let's take the page you created in the first example and add links, images, and a title. If you use the same document (complete with markup) that you used in the original example, that's great. If not, re-enter the text from Listing 28.1 and save it as iatest2.htm.
Let's start by adding an image to this page just before the heading. Place the cursor, and select the Picture button or choose Insert, Picture. The Picture dialog box should appear with the Picture tab open. In this dialog box, choose a graphic file. When you click OK, the picture will appear in your document. (You may want to press Return after the graphic to place the heading text on the next line.)
Now let's create the hypertext links for the definition terms. Highlight each term with the mouse (e.g., Downloadable Support Files) and click the Hyperlink button, or choose Insert, Hyperlink. Your text will appear in the Text to Display textbox. Now you can enter the file, URL, or bookmark to which this link should point.
Finally, let's give your document a title. Click the Title button or select File, HTML Document Info. In the dialog box, enter a title for this page and click OK. You're done. It should look something like figure 28.10 in Word's built-in browser.
Figure 28.10 : Your example page.
To create a form and add your first form field, choose Insert, Form Field command. In the New Form dialog box that appears, you'll get a little bit of instruction for entering form elements. If you don't want to see this dialog every time you add forms to a new document, click the Don't Display This Message Again checkbox. Then click OK.
In the list of radio buttons that appears, choose a field type to add. (I'm starting with a text field.) Next stop is the Text Form Field dialog box, which allows you to name the element and set some basic characteristics (see fig. 28.11).
Figure 28.11: Adding a form field.
To add more fields, you can go straight to the Forms controls and click the type of field you want to add. Make sure you give each a unique name, just as if you were hand editing the form.
In order to get the form data to your form script, you need to set up the Submit button. When you've finished adding other script elements, click Submit in the Forms control window. In the Submit Button Form Field dialog box that appears, you can name the button, change the button's label (value), and enter an URL for the ACTION attribute (see fig. 28.12). You can also use the pop-up menu to choose the METHOD for sending form data.
Figure 28.12 : Creating the Submit button.
You can't do much of a listing here, since you're not dealing in much raw HMTL or text. Let's create a new document that includes just two form fields and a Submit button.
If you want to, you can start by jazzing the form up with a logo graphic. Then, underneath it, type something like the following:
Customer Service Form
Your name:
Your email:
Change the first line to a Heading 2 using the pull-down menu, but leave the other text as is. Place the cursor to the right of the second line and choose Insert, Form Field to create a form. Select Text from the Form Field menu and enter a name for this field in the Text Form Field dialog box.
Go through the same thing just to the right of the third line, except this time you can use the Forms controls to create the text field (use the top left button). Remember to name it something different, like "e-mail."
Back in the document, press Return after the second text field and click the Submit button in the Forms controls. In the Submit Button Form Field dialog box, name the button, give it a label, enter an URL for your ACTION, and choose a METHOD. Click OK and you're done. Figure 28.13 shows this form in Word's Web browsing mode.
Figure 28.13 : Your form through the MS Word browser mode.
Internet Assistant is designed to add Web browsing and editing functionality to the Microsoft Word word processor. Downloading this free add-in adds two different components. One allows you to view HTML documents from within Word. The other adds an HTML template and special menu/button bar commands for creating and editing Web pages.
Basic HTML is about as simple as creating a regular Word document-just type text and apply styles. Generally speaking, everything can be done a couple of different ways. You can choose to click the Bold button, for example, or you can choose Style, Bold.
Creating lists is also fairly simple in Internet Assistant, although creating definition lists can be a little tricky. Hypertext links, images, and head elements are all added via menu items and dialog boxes. For NAME hypertext links, IA uses Word's bookmark system.
The key to IA is its ability to save files in HTML format. It's this "translator" that does the real work once you've created your page. By saving your document as an HTML file (the default when you use the HTML template), you're able to edit it in a text editor and display it on the Web.