EarthWeb sites:

Chapter 27

Creating HTML Documents with Netscape Gold

CONTENTS

• Editing HTML With Netscape Gold
  • Example: Checking Under the Hood
  • Creating HTML List Items
  • Changing List Types
  • Creating Definition Lists
  • Inserting <BR> and <HR>
• Hyperlinks, Images, and Head Elements
  • Adding Hyperlinks
  • Adding Images
  • Editing the Head
  • Example: Putting it All Together
• Summary
• Review Questions
• Review Exercises

Up until now, all of the HTML page creation you've done has been with a standard text editor and a Web browser for viewing. But that isn't the only way to go. In this chapter and the next few chapters, you'll learn about some of the programs that are now making it possible for you to create HTML documents without resorting to hand entering tags. While some of these products are still developing, they're at least a great way to create basic sites, which you can hand edit later.

In this chapter, you'll learn specifically about Netscape Gold, the special edition of Netscape Navigator that includes the Netscape Editor. This editor allows you to create HTML documents in a what-you-see-is-what-you-get (WYSIWYG) environment.

Editing HTML With Netscape Gold

To begin the Netscape Gold HTML Editor, simply choose File, New, Blank. What appears next is the Netscape Gold HTML Editor (see fig. 27.1). From here, you can simply begin typing your HTML document.

Figure 27.1 : The WYSIWYG HTML Editor in Netscape Gold.

The Netscape Gold Editor is really designed to be used much like a standard word processor. Notice that the toolbar across the top gives you the option of making text bold, italic, or teletype; choosing different font sizes; and even inserting images and creating hyperlink anchors by simply pressing buttons. Using just the toolbar, it's simple to create a basic HTML page.

For instance, to create a header for your page, enter the text for the header, like the following:

Welcome to my Page

Then, highlight the text by dragging the mouse pointer from one end to the other. Now, using the pull-down menu in the Editor's toolbar, change the text from Normal to Heading 2, or another heading level. The text will change in the editor window to suggest the new "look" of your text (see fig. 27.2).

Figure 27.2 : HTML `markup' in Navigator Gold.

Of course, like a good word processor, you could also choose to change the text to a heading level first and then type. For instance, use that same pull-down menu to change the appearance to Heading 6. Now, back in the Netscape Editor window, type some text like:

Copyright 1996. Do not duplicate without permission.

Notice that it comes out looking just as if it were between <H6> tags (see fig. 27.3).

Figure 27.3 : Changing the HTML types before typing.

In fact, that's exactly what Netscape Gold is doing-it's putting your text between HTML tags. To prove it, let's try the following example.

Example: Checking Under the Hood

In this example, you'll create a simple HTML document in the Netscape Gold Editor. Then, you'll take a look at it with your trusty text editor (like Notepad). You'll see that all Netscape Gold is really doing is basic HTML markup-it just has a fancy interface.

Enter Listing 27.1 in the Netscape Gold Editor.

Listing 27.1  goldtest.html  A Sample Netscape Gold Document

Products
All of our products here at BigCorp are designed with the consumer in mind. It's more important to us that you be happy with our products and services than it is that we make a profit. If we can make money, so much the better, but we like to think of ourselves as a charitable organization.
The following is a list of our more popular product lines:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction

With that entered, there's some formatting you should do. For instance, highlight the word "Product" and change it to a heading (perhaps Heading 2) with the pull-down menu in the Editor button bar. Then, as your heart desires, change text in the document to bold, italics, or teletype using the appropriate buttons. Then, choose File, Save to save the document as goldtest.htm. Now is when you see Netscape Gold's secret.

Using WordPad or a similar text editor, open the document goldtest.htm. Anything look familiar (see fig. 27.4)? Again, this is just regular HTML markup.

Figure 27.4 : Netscape Gold just creates standard HTML documents.

Creating HTML List Items

The convenience of the Gold Editor doesn't really stop with basic HTML markup, either. One of the typical HTML elements you may want to add to your documents is an HTML list. This is done in two steps, and you can go about it a number of ways. Start by entering the text from the previous example:

Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction

Now, highlight all of the above items using the mouse. When you've got them all selected, choose List Item from the pull-down menu you used earlier for heading tags. This changes all of the text to list items, just as if you'd typed them after the list item tags. It also automatically encloses the list in <UL> tags, so that the items appear with bullet points next to them (see fig. 27.5).

Figure 27.5 : Creating lists in the Gold Editor.

As with other markup in the Gold Editor, it's also possible to select the list item option from the pull-down menu first, then type your text. All the text you enter will be of type list item until you change it back to normal or another tag type.

Changing List Types

Once you have all of your text entered as list items, changing the type of list (ordered or unordered) is only a menu item away. Open the Properties menu and choose Text. The Properties dialog box appears. Then click the Paragraph tab (see fig. 27.6).

Figure 27.6 : The Properties dialog box with the paragraph tab open.

Changing the list type is simple. In the Additional style drop-down list box, choose List. Then, in the section marked List, choose a Style for the list and a Bullet or Number style if appropriate. Click OK and you've got yourself a new list type!

Creating Definition Lists

Definition lists work only slightly different than our other list types. Starting with the same sample text, let's change it to a definition list:

Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction

It's okay if you still have this text in the form of another list. Simply select all of the above text and use the pull-down menu to change it from normal or list item text to description title (DT) text. Now this text is treated as if it's <DT> text between <DL> (definition list) tags. So far so good.

The next step is to add text between each <DT> line. Just use the Return key to create a space between the list items, and type the text you want to define as your description text (DD). Then, select that text with the mouse and use the pull-down menu to change it to DD text. It's that simple (see fig. 27.7).

Figure 27.7 : Creating a definition list.

Inserting <BR> and <HR>

This one isn't quite as obvious from the outset. It's clear that Netscape Gold creates new <P> paragraph tags whenever you simply hit Return in the Editor window (except when <P> is inappropriate, as with list elements). But how do you create a <BR> tag?

Just press Shift+Return on your keyboard. That's all there is to it. For instance, try entering the following:

How do I love thee?

Press Shift+Return, and then enter the following

Let me count the ways.

Were you to view this in Notepad or WordPad, you'd see that the <BR> tag has been inserted where you hit Shift+Return. If you only use the Return key, then Netscape will use the <P> tag instead.

Inserting an <HR> tag is even easier. Simply place the cursor at the point in the document where you'd like the horizontal ruler to appear, then select Insert, Horizontal Line from the menu. Your line is then inserted in the document.

To change the style of your horizontal line, select it in the Editor window, and then choose Properties, Horizontal Line. In the Horizontal Lines Properties dialog box that appears, you can change the dimensions, alignment, and shading for the line. Click OK when you're done, and the line will change in the Editor window.

Hyperlinks, Images, and Head Elements

Of course, the Gold Editor allows you to add both hyperlinks and images to your documents. Both are accomplished through commands in the Insert menu. You can also create clickable images rather easily. And, while you can designate a graphic as an image map, there is currently no way to use the USEMAP attribute to create client-side image maps in the Gold Editor. (You can always manually edit files created otherwise in the Gold Editor.)

Adding Hyperlinks

Adding a typical hypermedia or hypertext link is just about as easy as regular markup in the Gold Editor. Simply highlight the text, choose Insert, Link from the menu, and you're presented with the Properties dialog box (see fig. 27.8). (You can also click the Make Link button on the button bar.) Make sure that the Link tab is selected. Now you can either enter the name of the URL to the linked document (or file) or you may use the Browse File button to find the file on your hard drive.

Figure 27.8 : The Properties dialog box.

When you've completed entering the URL and clicked OK, the highlighted text will now act as a link in your Web document.

Adding Images

To add an image file to your document, place your cursor at the point in the editor where you would like the image to appear. Then, choose Insert, Image. (You can also click the Insert Image button on the button bar.) The Properties dialog box should appear with the Image tab selected. In this dialog box, enter the URL to the graphic that you want to include. Or, you can use the Browse button to find the file.

Now, you have some more choices to make. First, you can use the Alignment section of the Properties dialog box to decide how text will be aligned relative to the graphic. Remember that only top, bottom, and middle are recognized in HTML 2.0. (Left and right are HTML 3.0 level standards.) In the Dimensions section, specify the height and width for the image. In the Space around image section, you can decide how much space to put between the image and surrounding text (see fig. 27.9).

Figure 27.9 : The Properties dialog box with the image tab open.

To cause this graphic to be a clickable image, click the Link tab and enter an URL in the Link to section. When you click OK, your graphic should appear in the document, and clicking it should cause it to appear to act as a clickable image (although your linked page won't load). To test this for sure, click the View in Browser button in the Gold Editor's button bar, and test the document in Navigator.

Editing the Head

The Gold Editor automatically adds <HEAD> and <BODY> tags to your document, but since you can't edit the HTML directly, the Editor gives you the opportunity in a dialog box. Choose Properties, Document. The Document Properties dialog box that appears allows you to enter various head properties (see fig. 27.10).

Figure 27.10 : Adding information to the document's head.

Notice that this dialog box uses a tabbed interface that will also allow you to add more advanced head elements as well as background images and document color information.

Example: Putting it All Together

Let's take the document you created in Listing 27.2 and add some of the things you've learned. Enter Listing 27.2 in the Netscape Gold editor-or use the document you created in the first example.

Listing 27.2  gold2.html  Advanced Editing in Netscape Gold

Products
All of our products here at BigCorp are designed with the consumer in mind. It's more important to us that you be happy with our products and services than it is that we make a profit. If we can make money, so much the better, but we like to think of ourselves as a charitable organization.
The following is a list of our more popular product lines:
Fine Jewelry
Luxury Automobiles
Cruises and Exotic Vacations
Deforestation Services
Chemical Pollutants
Indoor Mall Construction

If you've already turned the product lines into list items, great. If not, highlight them all together, then choose List Item from the pull-down menu in the button bar.

Now, select each product line name individually and give each a hypertext link. Click the Link button in the button bar or choose Insert, Link from the menu. In the Links dialog box, enter an URL for your link, or click Browse to choose a local file. Click OK to change the text to a link.

Next, you'll enter a graphic (use anything handy). Find a good place in your document for it, andthen click the Image button or choose Insert, Image. In the Image tab of the Properties dialog box, give an URL or path for the image, or choose to Browse for the graphic file. If you'd like this image to be clickable, choose the Link tab and then enter an URL.

Finally, choose Properties, Document. In the Document Properties dialog, give your document a title and enter any other information you feel like giving (name, description, etc.). Click OK and, as far as this example is concerned, you're done. Try viewing it in the Netscape Browser (see fig. 27.11).

Figure 27.11 : The final product in Navigator.

Summary

You've spent most of this book learning about raw HTML text-how to create Web documents using nothing more than a text editor. More and more programs are appearing, though, that try to make creating HTML documents easier and more friendly. Netscape Gold is one of those programs.

Creating basic HTML pages is fairly easy, since Netscape Gold features an Editor interface that's a lot like popular word processors. Bold, italics, teletype, and other text manipulation is easy. You can also create HTML lists, add horizontal rulers, and use the <BR> tags to end lines.

The heart of your Web site-hyperlinks and images-are easy enough in Netscape Gold as well. Gold doesn't have great support for image maps (and no client-side support), but the basics are easy enough. Plus, once you've created an HTML document in Netscape Gold, you can always open in a text editor for further enhancements.

Review Questions

1. Is it possible to change HTML styles in Netscape Gold before typing the text for a particular style?
2. To what other sort of computer application is Netscape Gold similar?
3. In what type of file does Netscape Gold save your HTML? Can you edit this with other programs?
4. True or false. Changing text to a list item in Netscape Gold automatically creates an HTML list.
5. What menu command allows you to change from an unordered to an ordered list type?
6. What does Netscape Gold call HTML definition lists?
7. Is there a menu command for <BR>?
8. Why should you be careful when using the Browse button to create hypertext links?
9. How is the Browse button for images different from the Browse button for hyperlinks?
10. Can you type the Title of your document directly in the document
    window?

Review Exercises

1. Use Netscape Gold's definition lists and hyperlinks to create a page of book reviews. Clicking the book's name shows the user a graphic of the book. For instance, an entry might be the following:
   
   HTML By Example
   The best book ever written for learning HTML the right way.
   
2. Based on the example above, add another definition (DD) line that includes a link to order the book, the author's name, copyright information, and price. For instance:
   
   HTML By Example
   The best book ever written for learning HTML the right way.
   Todd Stauffer, Copyright 1996, $34.99. Order this book.
   
3. Create a button bar interface using Netscape Gold. (No image map is necessary; just create a series of clickable images.)
4. Add client-pull abilities to your Web page using Netscape Gold.