There are a few ways you can start creating a Web document. You can begin with a template and modify it to meet your needs or download and modify the source code of an existing Web document off the Internet. Web browsers, such as Netscape Navigator and Mosaic, let you display a window containing the HTML codes and text used to create documents on the Web or save the HTML codes and text to a file. The problem with this method is that it is amazing how many Web documents break the basic rules of HTML. Just because you're viewing a home page for a large company is no guarantee that the page is created correctly. This chapter takes a different approach. It discusses the basic elements used to create a simple home page and presents valid elements and procedures you can follow to construct your own HTML documents. References are made throughout this chapter to other areas in this book where you can obtain more detailed information about each subject. To help you create correct Web pages we'll focus in this chapter on inserting elements and verifying your document using HoTMetaL PRO, which is included on the Companion CD-ROM. Adding Markup to HTML Documents As mentioned in Chapter 1, "The World Wide Web & Hypermedia Publishing," the elements that specify how to display text are collectively called markup. Markup is the use of codes that tell the Web browser how to display your words. The document is composed of text that takes its cues from the markup. Using markup is a lot like using parentheses in algebra or entering a formula into a spreadsheet. Instead of parentheses, HTML markup uses codes within angle brackets. Markup typically consists of a beginning code, commonly referred to as a tag, that specifies the effect, and an ending tag that includes a forward slash to identify the end of the markup. For example signifies the beginning and marks the end. The beginning and ending tags are sometimes referred to as elements. Each element has a name that corresponds with the tags, for example, specifies the title element. When text or data appears within a beginning and ending tag the entire element is sometimes called a container. Not all elements demand a closing markup, and not all tags must contain text. Elements that don't contain text and don't require an end tag are sometimes referred to as empty elements. A few tags let you define attributes to the element specific to the element type. HoTMetaL PRO includes the Edit SGML Attributes command in the Markup menu to let you specify an attribute. For example, using an attribute you can define where text is placed next to an image or define alternative text to accommodate viewers that are unable to handle images. If you choose to use a text editor or an HTML editor other than HoTMetaL PRO that doesn't automatically insert tags it's helpful to know that markup tags are not case sensitive; for example , <TITLE> and <Title> all can be used for the title tag. There is one other point to note if you are using a standard text editor to insert markup tags. It sometimes isn't clear from HTML documentation whether you need to include an ending tag for specific markup elements. If you are in doubt, generally it's better to include one. Many browsers will allow you to get away without ending tags where the language says they should be, but you may easily end up with a page that won't display correctly on some systems. Of course, using HoTMetaL PRO will avoid this, since it handles inserting both tags where required. Because you don't know which browser will be used to view your documents, you should attempt to follow all the rules in the HTML language as closely as possible. Currently, using some HTML editors and templates you can get away with ignoring some elements and still produce a readable document. Keep in mind, however, that anyone can easily download your source code. If you don't follow HTML formatting rules, others may make judgments about you and your company from the quality of your documents. Adding Markup With HoTMetaL PRO HoTMetaL PRO is a rules-based editor that, unlike most HTML editors and text editors, protects you from making mistakes when inserting and editing markup tags. The process of inserting tags may take a little more time with HoTMetaL PRO than some HTML editors, but it saves validation time. HoTMetaL PRO automatically ensures that your document doesn't contain incorrect and unmatched tags. The Markup menu contains commands that let you add, split, join, change and remove markup tags and element attributes. Table 4-1 lists the most common operations found in the Markup menu. A unique feature of HoTMetaL PRO is that you can pin frequently used dialog boxes. Pinning a dialog box allows it to remain open and saves you from having to continually choose menu commands to display the dialog box. For example, to pin the Insert Element dialog box, press Cmd-I, click the pin icon in the upper, right-hand corner of the Insert Element dialog box. Simply clicking on the pin changes the icon from a side view of a pin to an end-on view, showing you that the dialog is pinned. You can also click on the pin icon and select Pin Dialog from the pop-up menu. HoTMetaL PRO is context sensitive, so only valid choices appear in the dialog box. Command Description Insert Element Displays the Insert Element dialog box, so you can insert a new, empty element in which you can type text or insert other elements. The shortcut key for the Insert Element command is Cmd-I. Surround Displays the Surround dialog box. The Surround command is only available when text is selected. If a portion of a document should be contained in a particular element, highlight the tags and text, and select this command to choose an element to surround the selected text. The shortcut key for the Surround command is Cmd-U. Change Changes the markup. Select this command to get a list of valid elements to replace the current element. The shortcut key for the Change command is Cmd-L. Split Splits the current element into two elements at the current insertion point or selection. The shortcut key for the Split command is Cmd-P. Join to Preceding Joins the current element with the element preceding it, provided both are of the same type. The shortcut key for the Join to Preceding command is Cmd-J. Remove Tags Removes the tag icons that delimit the current element, leaving the content unaltered. The shortcut key for the Remove Tags command is Cmd-D. Edit SGML Attributes Displays the Attributes dialog box for changing the attributes of a selected element. The shortcut key for the Edit SGML Attributes command is Cmd-]. Edit URL Displays the Edit URL dialog box, which lets you add or edit the attributes of a selected URL. There is not a shortcut key for the Edit URL command. Insert Character Entity Displays a dialog box that lists special characters, such as symbols and foreign characters. The shortcut key for the Insert Character Entity command is Cmd-E. Table 4-1: Markup menu commands. HoTMetaL PRO Editing Commands HoTMetaL PRO's Edit menu includes standard editing commands, including Cut (Cmd-X), Copy (Cmd-C), Paste (Cmd-V) and Delete (Del). At this point the one command you're bound to find most helpful is the Edit>>Undo command. The shortcut key for the Undo command is Cmd-Z. It may take a little time to become familiar with how HoTMetaL PRO lets you select tags and text. HoTMetaL PRO only lets you select tags and text as groups. In other words, you can't edit a selection of text and an end tag. Instead you must select the text only, or you must select the beginning tag, the text and the closing tag. HoTMetaL PRO lets you paste raw HTML tags and text into an HTML document displayed in HoTMetaL PRO. The raw tags are replaced with HoTMetaL PRO tag icons. This lets you cut or copy tags consisting of text in a word processor, such as Microsoft Word, and paste the text directly in as tags in HoTMetaL PRO. Conversely, you can select and copy or cut HoTMetaL PRO tags and text and paste raw tags into Word. Beginning Your HTML Document A Web document is composed of two parts: the head and the body. Each document contains some common elements: a beginning HTML tag, a title, a body, some headings and an ending tag. To begin creating a home page, start HoTMetaL PRO. A window appears named Scratch1.html. This is the default window for creating a document. You can change the name to something other than Scratch1.html later when you save your document. To start creating your page, choose Markup>>Insert Element or press Cmd-I. The Insert Element dialog box appears, as shown in Figure 4-1. Make sure that the Include Required Elements check box is turned on. Double-click HTML in the list of elements, or, if this element is already highlighted, click the Insert Element button. This inserts three beginning and ending tags: <HTML>, <HEAD> and <TITLE>. Figure 4-1: The Insert Element dialog box. An HTML Comment One element that can be included in the head or the body is the comment tag. Comments don't appear in the Web browser. HoTMetaL PRO doesn't support the comment tag, but you can include the comment tag using a text editor. The opening tag for a comment is <!-- and the closing tag is -->. Because some Web browsers balk at multiple line comments, it is best to keep comments short or use the comment element for each line you want to add. The Head Tags/The Art of Linking Every HTML document starts with the markup tag <HTML>. The initial <HTML> tag informs the browser what kind of document it's looking at, so it can be displayed properly. This becomes more important as other documents, such as SGML documents for Panorama and other non-HTML browsers, start being used. The end tag </HTML> instructs the browser that the document is complete. It's included as the last tag in your document. Immediately following the <HTML> tag is a tag called <HEAD>. The <HEAD> tag allows the HTTP server software to discover information about the document. The next item that should be included is a document title. The title of a document, contrary to what you would expect, doesn't appear at the top of your document. Typically the title appears in the title bar of the window. The title is used for index information by Web searching programs, such as Web spiders and robots. When you create a document using a HoTMetaL PRO, the words "Document Title" appear in the HoTMetaL PRO document window. This text only appears in the editing window display, it is not part of the text of the document. The insertion point appears between the beginning and ending <TITLE> tags. Type a title for your sample document. Keep the title short yet descriptive. A descriptive title is important because many browsers will use this title if the reader saves your page as a bookmark or hotlist item. When you display this document in a browser, the contents of the title element will be displayed in the window's title bar. It is possible that the title will display in some browsers on a Document Title line. The following is a sample of the head tags. <HTML> <HEAD> <TITLE> A Clean Well-Lighted Place for Books Other tags can appear in the head of a document, including the ISINDEX, BASE, LINK, NEXTID and META tags. For more information on these heading tags, see Appendix AC, "An Illustrated HTML Reference." Don't try to save your document at this point. If you do, you will get a nasty (and confusing!) message that your document isn't correctly formatted. A complete HTML document must have both and tags. At this point, your document only has a tag, and so it is incomplete. Unfortunately, the error message that you get simply says that the tag is incorrect, which is a bit misleading until you understand how this all works. The Body Tags The main part of your document is the body, contained within the BODY element. Except for the ending tag, everything from here on is a body element, including headings, paragraphs, special characters, lists, images, hyperlinks and so on. The following sections explain how to identify the beginning and the contents of the body of your Web page. Identifying the Body of Your Document Choose the Markup>>Insert Element command. Only the BODY element appears in the Insert Element dialog box. HoTMetaL PRO is context sensitive; at this point, BODY is the only valid element. Either double-click the BODY Element or choose the Insert Element button to add the BODY tags. The BODY tags are added directly before the closing tag, as shown below: A Clean Well-Lighted Place for Books Once the BODY tags are added, the Insert Element dialog box will present many additional element choices. Because you will frequently be inserting elements between the beginning and ending BODY tags, you may find it helpful to pin the Insert Element dialog box at this time. To pin the Insert Element dialog box, press Cmd-I, and click once on the pin icon in the upper right-hand corner. Organizing Your Document With Headers Like any well organized document, it's a good idea to start with a heading. There are six possible heading tags,

through

. Each tag works just like a heading style in a word processing document, or levels in an outline, providing structure and division in your document. The type style and size of the heading changes depending on how the individual browser that is displaying your document is configured. To create headers, select the

element from the Insert Element dialog box. The insertion point appears between the starting and ending H1 tags. The following is a sample heading.

Welcome to A Clean Well-Lighted Place for Books

Even though you can use up to six different levels of headings, it is best to stick to only four. Many browsers are not set up to display higher-level heads with font and character attributes that differ enough from each other to make them noticeable. Keep your headings structured like any outline. For example, you wouldn't put a lower-level heading before a higher-level heading in an outline. The same holds true for HTML headings. If you're using an editor other than HoTMetaL PRO, don't try to combine the heading and title tags for the first level of a document. For example:

A Clean Well-Lighted Place for Books

is incorrect. The TITLE tag can only ever appear inside the HEAD at the start of the document while the heading tags are only valid within the body of the document. Inserting Paragraphs & Line Breaks Pressing Enter may add line spaces to your HTML document, but the lines will not appear when displayed in a browser. Multiple spaces are also ignored. All spaces and multiple returns are collapsed to a single space. In order to specify a paragraph, you use the standard paragraph tag. The paragraph tag ends the current line and inserts additional spacing prior to the start of the next line. Although the paragraph tag in version 2 of HTML doesn't require an ending counterpart, HTML version 3 does. This is partially to make HTML more compatible with SGML, but more important, it opens the way to include attribute information for the paragraph, such as centering or justification. HoTMetaL PRO automatically adds a starting and ending paragraph tag. To start adding text, choose P from the Insert Elements dialog box. You can then enter the text you want between the beginning and ending paragraph tags. The following is the HTML source code for the first paragraph of A Clean Well-Lighted Place's home page.

Welcome to the Internet home page for A Clean Well-Lighted Place for Books -- a cathode-ray extension of our incandescently lit locations.

The line-break tag
lets you break a line without adding a space between the lines. The line-break tag is an empty element. It appears in HoTMetaL Pro with a starting and ending tag, although when displayed as raw HTML code the
tag does not have an end tag. Line-break tags commonly are used with the address tags, which are explained later in this chapter. Adding Horizontal Rules The horizontal rule element is another way to divide your document into sections. The default rule is a shaded line that when viewed with a gray background looks like an inset 3D bar drawn across the width of the page. You may see some impressive horizontal rules in Web pages. Many people use inline graphic images in place of horizontal rules. To include a horizontal rule, choose HR from the Insert Elements dialog box.
Netscape adds four proprietary extensions to the horizontal rule to let you specify the thickness, width, alignment and shading of horizontal rules. For example you could specify a rule that is a line 1/4" thick that appears centered and is 50 percent of the width of the document. Figure 4-2 shows the Edit Attributes dialog box for horizontal rules. Table 4-2 describes Netscape tag extensions that allow the document's author to describe how the horizontal rule should look. Figure 4-2: The Edit Attributes dialog box for horizontal rules. Attribute Description
Specifies the thickness of the horizontal rule in pixels. The n stands for the number of pixels.
Specifies an exact width in pixels, or a relative width measured in percent of document width. The n stands for a number of pixels.
Specifies the alignment of the rule. The three choices are LEFT (left aligned), RIGHT (right aligned) or CENTER (centered).
Specifies that you do not want any shading of your horizontal rule. Table 4-2: Attributes for horizontal rules. Just because something looks great in your browser doesn't mean it will look great when viewed in other browsers. Because we are creating a simple home page in this chapter, we recommend that you hold off on adding Netscape extensions. Once you have a handle on building pages, you can edit your pages to create a version that takes advantage of these extensions. Many of the features that the Netscape extensions bring to HTML will be available in HTML version 3. Including Lists There are four types of lists you can use in an HTML document: unordered lists, ordered lists, discursive lists and directory lists. An unordered list is another way of saying a bulleted list. An ordered list is a numbered list. A discursive or definition list is also called a glossary list. Discursive lists let you create two columns, one for terms and one for the description of the term. A directory list is a list of short items (less than 24 characters). Directory lists display a list of items with no bullets and without a hanging indent. Because lists are so common to HTML documents, we'll briefly cover these lists in this chapter. Many home pages, however, typically only include the unordered (bulleted) list. It's possible to nest lists in a Web document for an outline effect. Chapter 6, "Creating Your Text Appeal," explains creating nested lists. Unordered (Bulleted) Lists The unordered list tag,