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.
| Note |
Netscape Gold is actually a commercial product available from Netscape Corporation. Netscape offers a shareware "try and buy" deal or (sometimes) a free beta test version of Netscape Gold for general downloading. You might want to visit http://www.netscape.com/ to see what's currently available. |
| Why Edit By Hand at All? |
I wouldn't be surprised if you were wondering why I bothered to write an entire book about editing HTML by hand when tools like Netscape Gold exist. Well, In my defense, I've got some answers to that. First, without a pretty solid knowledge of how HTML works, using many HTML editors, especially Netscape Gold, could get you into some trouble. Netscape is particularly bad about giving you options in its menu and button bar without making it clear what standard they adhere to. Netscape extensions are rolled right in with HTML 2.0 and HTML 3.0 level tags and attributes. Also, many editors, Gold included, don't offer complete support for all of the tags and HTML constructs you might want to use. The Gold editor has no easy way to create HTML tables, for instance, and only a few nods to creating frames. While it's true that editing basic HTML in these editors can be easier and more convenient than using a plain text editor, I feel like you should know what you're doing, and what's happening behind the scenes. Having read this book, you know how HTML and extension tags work. If Netscape Gold (or others) makes that easier, fine. Chances are you'll still need to get your hands dirty with HTML to make your pages great. |
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.
| Tip |
Choosing From Template or From Wizard in the New Document menu gives you access to templates and walk-throughs designed by Netscape to make Web document creation easier. |
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.
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.
| Note |
Notice something else about this document? It doesn't quite follow all of the conventions that you've set up for HTML documents in this book. Most documents created by the Gold Editor and others will have slight variations in the way they use HTML tags, especially where the standard itself allows for some flexibility. This isn't necessarily bad, although I believe the way you've learned it in this book is the most complete and elegant. If you disagree with the HTML layout created by a special editor, here's your chance to change it. Just edit away in Notepad! |
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.
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!
| Note |
Notice that this dialog box allows you to use Netscape-specific HTML extensions for bullet types and numbering schemes. If you elect to use these, realize that not all of your users will be able to see them. |
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.
| Note |
For some reason, Netscape has decided to call HTML definition lists (DL), terms (DT), and definitions (DD) "description lists," "description titles," and "description text," respectively. I guess that makes some sense, but I've never heard those names before either. Don't let them confuse you. |
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.
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.
| Note |
Again, these <HR> properties are Netscape-specific. If you change <HR> properties, realize that not all your users will be able to view the modified line. |
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 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.
| Note |
If you're currently not working with files resident on the Web server, remember that you'll need the correct relative path to your files (once they're on the Web server) in this dialog box. So take special care when using the Browse File button. |
When you've completed entering the URL and clicked OK, the highlighted text will now act as a link in your Web document.
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.
| Note |
With images, using the Browse button actually causes the graphic file to be copied to the current directory. If this isn't what you want, check the Copy image to the document's location checkbox at the bottom of the dialog to turn this feature off. You should also enter absolute URLs in the Image file name field when using graphics already on the Web (or in specific directories on your own Web server). |
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.
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.
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.
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.