Creating A Home Page

What To Do With Web Page Authoring Software

By Robert Moskowitz

Putting up a home page is very much like publishing a newspaper or a magazine. And not surprisingly, many of the same rules and guidelines ought to apply. In these early days of Web publishing, it's refreshing to feel that the little guy can have a home page every bit as nice as the one from Hewlett-Packard or Microsoft.

According to many professional home page designers, for example, before you ever type a single line of home page information it's important to decide exactly why your home page should even exist. Once you determine what you want it to accomplish for you, to whom it should appeal, and what information it should deliver, you can begin to consider how to put it together.

Most Web users seem to prefer pages that are relatively simple, if only because they are much faster to download and view than home pages containing huge graphics files that take minutes--or even tens of minutes--to transfer over the net.

In addition, your home page will be more understandable and thus better utilized if you organize it in some consistent fashion. For example, many popular home pages contain a title and brief introductory sentence or paragraph, followed by a quasi-menu of choices, each of which links to relevant information. Readers scroll through the home page, click on items they wish to investigate, and are instantly transported to other files or other network sites that will be of interest.

Because life is constantly evolving, and the Internet is constantly evolving, it's considered "bad form" to leave a Web page unchanged for too long. At least three or four times a year you should update the page with new or clearer menu options, and also check to make sure all the links you've placed on your page are still operative.

Creating A Home Page Of Your Own

To begin, it's important to understand that a home page only looks great. Underneath all that snazzy appearance, it's still just another text file.

The appearance of this file looks different on the Web, however, because it is being interpreted and displayed by means of special "browser" software that responds to standardized formatting codes, called HTML (HyperText Markup Language) codes, that you have placed in your text file.

Basically, these HTML codes are simply text phrases, often called "markers" or "tags," that your browser knows how to interpret. HTML specifications are already up to Level 3, but most browsers still interpret only HTML Level 2. They simply ignore the markers or tags they don't understand.

These markers or tags always begin with a "greater-than" sign and end with a "less-than" sign, like this: <TITLE> and </TITLE>.

Almost every tag or marker actually consists of two tags or markers: one to indicate its beginning or opening point, and another to indicate its ending or closing point. The two tags are identical, except that the second tag in the series begins with a "/" character.

Some of these markers tell the software how to format the enclosed text. But others tell the software about another file, or even another site on the Internet to which it should connect. Text you place in between the markers will be formatted and displayed, and/or used to specify a location.

Inserting location specifiers in your home page file allows those who browse it to jump quickly from computer to computer, even country to country, without actually knowing what their computer is doing.

Thus, a sample line of HTML code might look something like this:

<TITLE>Title Of Your Home Page</TITLE>

The tag <TITLE> indicates the name of your Web page, and does not show up when the browser displays the page.

If you don't want to use <TITLE>, you can use other tags, such as <U>, <STRONG>, or <EM>. These give browsers specific commands about how to display the text enclosed between them. Just remember to follow the text for each of these tags with the same tag, using the "/" as a prefix.

Some of the tags that don't require a second, "closing" tag include: <LI>, which indicates an item in a list; <P>, which indicates the start of a new paragraph; <IMG>, which indicates the name of an image file to be loaded and displayed by the browser at that point on the home page; <DT>, which tells the browser to indent that line of text; and <BR>, which tells the browser to display an extra blank line.

One good way to create a home page file is to start with a file containing all the text you want to display. You can enter this text in any convenient word processor, or you can use one of the many HTML authoring programs now available, if you prefer.

Once you get the text polished and organized just the way you want it, without any formatting, of course, you can begin to add the HTML tags you need to make your new home page display the way you want.

One set of tags, <HTML> and </HTML>, can be used to enclose your entire text file. They tell the browser this file is to be interpreted as an HTML document. But since the browser does that anyway, the tags are not really necessary.

Another set of tags to add to your original text file are <HEAD> and </HEAD>, which simply set off the "title" and other introductory material of your file, and <BODY> and </BODY>, which enclose the bulk of your file. The arrangement looks something like this:

<HTML>

<HEAD>

</HEAD>

<BODY>

I'm glad you clicked onto my home page. Where would you like to go next?

</BODY>

</HTML>

But of course, your home page will probably have considerably more text than this example.

To make the design come alive, you'll want to experiment with different combinations of various HTML commands, such as:

* Headings

* Text formatting tags

* Images

* Lists

* Links

Let's look at each one in turn.

Headings

Headings in HTML documents are just like headings in books and magazines. They set off separate parts of a document, and let the reader scan more quickly to find something of interest.

In HTML, you've got six levels of headings, numbered from H1, the largest, through H6, the smallest.

On some browsers, the <H1> tag produces letters so big that they actually disrupt the design. That's why many HTML coders prefer not to use this tag at all.

On some browsers, text formatted with the <H4> and <H5> tags don't appear very different from ordinary text, and text set off by means of the <H6> tag actually turns out smaller than normal!

Text

Text formatting tags are much like the style tags used in desktop publishing and some word processing applications.

Basically, there are two kinds of formatting tags: logical tags and physical tags.

Two logical styles are <STRONG> and <EM>. <STRONG> makes text appear bold on Mosaic, Netscape, and most other browsers. <EM> makes text appear to be in italics.

Physical tags provide another way to tell browsers how to interpret the marked text. <B> marks text as bold. <I> marks text as italic. <U> marks text as--you guessed it--underlined.

Always be sure to include the closing tag with any of these formatting styles. If you don't, it will continue to be displayed until the browser does encounter a closing tag somewhere in your home page text file.

If you're not sure how your page will look with various header tags and text tags in place, you can check out the appearance of your file by viewing it with your own browser. If you collect several different browsers, you can study any differences that show up on your home page when viewed through one browser or another, and make your decision about what styles to use in your home page to get the appearance you want for an imaginary "average" browser.

Images

Images offer a very graphical way to add interest and excitement to your home page.

The <IMG> tag is different from most other HTML tags because the tag itself contains more specific information pointing to where the browser can find the graphic data it is required to display.

For example, a sample <IMG> tag might look something like this:

It's important to enclose your image filename with quotation marks.

If you're afraid your image won't be displayed for everyone working with every conceivable type of browser, you can use a variation of the <IMG> tag called <IMG ALT>. With this tag, you give the usual reference to the graphic file you want displayed. But you also include a line of text that serves as a description of the image for readers whose browsers won't display the file you've provided.

Under the rules of HTML, you can add graphics of any size in your home page. However, since many people are still receiving Web information at relatively low speeds, it's better not to include any more graphic data than you really need. HTML browsers generally support GIF, JPEG/JPG, and XBM graphics formats. But only GIF images are anything close to universally accessible.

Lists

Lists are a good way to create visual interest when naming more than three items in a row. HTML currently offers you three different kinds of lists: ordered lists, unnumbered lists, and definition lists.

Ordered lists use the tag <OL>, and automatically insert numbering for each item on the list. The codes look like this:

Here's The List Title

<OL>

<LI>Here's Item 1

<LI>Here's Item 2

<LI>Here's Item 3

</OL>

If you put in a <UL> tag instead of an <OL> tag, browsers will display the items as bullets instead of as numbered items.

The <DL> tag tells browsers to indent the text, without bullets or numbers. You can also use this tag to indent a paragraph of text that's a quote or that should otherwise stand out from the rest of the material on your home page. Between the opening and closing <DL> tags, you can use <DD> to indicate normal text and <DT> tags to indicate text that should be indented.

Links

Links are the biggest advantage of HTML. They allow you to connect readers of your home page to other sites on the Internet. They serve other important purposes, as well.

For example, by providing links to other HTML documents on the same computer as your home page, you can effectively increase the size of your home page without forcing every reader to download a megabyte or more of information every time they connect to your site.

The tag that links to another HTML document is called an "anchor": <A> </A>. It's very important to close out every anchor tag. If you don't, everything that occurs on your home page after the opening <A> tag will become a "clickable" item that will lead--along with everything else on your home page--to the one Internet resource you've most recently specified.

Assuming you've done it correctly, here's what an anchor tag on your home page might look like:

<A HREF="My_other_page.html">My Other Page</A>

This would make the text: "My Other Page" into a reference that, when clicked on with the mouse, would connect the reader to the file "My_other_page.html".

In addition to text, images can also be made into references to other Internet resources. For example, if you want to establish a picture of your cat as the button that takes a reader to your other HTML page, you might set things up like this:

This tells the browser to display the "My_cat" image, and to treat it as a clickable item that, whenever a reader clicks on it with the mouse, triggers an immediate connection to the file "My_other_page.html".

Notice that none of these references contains Internet address information. By default, the browser looks around within the current Internet address space for other resources to which it is told to link.

But if the link contains Internet address details, the browser is capable of connecting there, too. This means your link can take people anywhere on the Internet. Just edit your anchor link to look something like this:

<A HREF="http://my.friends.computer. com">My Friend's Home Page</A>

Now the words "My Friend's Home Page" will be displayed as a clickable item, and when clicked, will tell the browser to connect to the home page of the Web computer whose Internet name is "my.friends.computer.com".

Obviously, there's a great deal more to HTML coding than just this short description. But this is all you need to get started, and to make a viable home page you can show to your friends or business acquaintances with pride.

As you need more capability, you can begin to work with any of several very good HTML editors now available. They can automatically convert a text document to an HTML one, and can also facilitate the placement of codes within a document. All this makes it easier to develop prettier and more sophisticated home pages without really knowing too much about how to code in HTML.

Important: This file is provided as a courtesy by MicroTimes. Individuals are licensed to store this file on their computers, or print this file on paper, for reference or reading. Duplication or distribution of the information in any form, whether for free or for payment, is prohibited without explicit written authorization in advance from the author. Thank you.

Robert Moskowitz
Box 6375, Woodland Hills, CA 91365
818-224-4224 fax: 818-224-4343
email: Robertam@ix.netcom.com

Available world-wide for consulting, speaking, and strategic planning on a wide variety of white-collar productivity and technology issues.