HTML pages are constructed using a set of standard tags which control the structure and look of the page. Authors experienced in the intricacies of HTML tagging can create web pages by manually inserting the tags at the correct locations using an ordinary text editor. Fortunately, it is possible to create simple HTML-encoded pages without having to deal with the tags at all using specially designed editing programs that behave very much like a word processor. One such editor is Composer, a program that is bundled with the Netscape/Mozilla package of network applications that also includes a browser and email client. The version of Composer described here is essential the same in both the Netscape and Mozilla versions of the software.

If your needs are simple and you'd prefer to avoid the HTML editing process altogether, you might want to consider using AU's automated personal web page creation system, which makes it possible to create and maintain a basic personal home page simply by filling out a form. For more information, see the FAQ page at www.aurora.edu/its/autoweb-faq.htm.

Some Essential Concepts

Using Composer is very similar (but not quite the same as) using a word processor. It's important to recognize a few basic differences between word processing and html editing:

1. In a word processor, you normally view your work in the editor exactly as it will appear in printed form. In Composer, however, editing is usually done in the "Normal" display, which does not attempt to display the final look of the page. Use the "Preview" screen or Navigator to see how the page will look in the typical browser.
2. There are a few components, particularly Page Title, that are not present in a word processing document but which need to be present in an HTML file.
3. HTML does not provide for the same degree of control over page design as a word processor. In simple terms, the final appearance of your HTML page is under the control of the users viewing your page through the browsers on their desktops. This means that it is not worth your effort to try to define every graphical detail of your page. Features such as page width, page breaks, and margin size are not generally applicable to the web environment. The best approach is to keep your design simple for maximum error-free display in a variety of browsers.
4. An encoded HTML document is constructed purely of standard keyboard characters. Graphical images included in a web page are actually stored as separate files, and are only incorporated into the page when it's displayed in a browser window. As editor, all you need to do to add an image to your page -- say a digitized photograph -- is to create a reference in the page at the location where you want it to appear using the correct HTML tag.

Setting up a Storage Location for your Web Pages

AU's system for supporting personal web pages is based on the assumption that users will not edit their HTML files directly on the server. Instead, a full replica of that user's web site is stored locally, typically either on the user's PC hard disk (the C: drive) or on the network server (the K: drive). All changes and revisions to the web site are made on the local version of the files, and those files are then published to the server using a file transfer process. Your first action after deciding to build a personal web site should be to create a local folder for storing your web pages, and store there only those files that you want to publish on your website.

For security reasons, the file transfer process used to publish web pages will only work from campus computers (offices, labs, and dormitories), not from off-site locations. If you want to work on your web pages at home, a good solution would be to transport files-in-progress back and forth on floppy disk. Where the files are actually created does not matter, as long as they are ultimately stored on the campus computer from which they will be published to the server.

Creating a New Page in Composer

Creating a new page in Composer requires the following steps:

1. Open Netscape as you normally would to browse the Internet. Open a Composer window by selecting the menu options Window > Composer. You should now see the Composer editor in a new window with a blank workspace ready to be turned into an HTML document.

   

2. Begin creating your document as you would with a word processor. You can control the features of the document with the various icons on the toolbar, giving you tools to change fonts and colors, control the alignment of blocks of text, add italics, bold, or underlining, create numbered or bullet lists, etc. Most of these functions will already be familiar to you from your word processing experience.
3. As with a word processor, you will need to save your work to a file. The process is similar: select File > Save (or click the "floppy disk" icon). When the Save As dialog box appears, navigate to your designated web page storage folder and enter a file name in the appropriate box. Make sure the Save as type: box is set to HTML files. There are some special requirements regarding file names. One is that the file must have an .html or .htm extension (if you don't add an extension the system will do it for you.) A second is that your file name should contain no spaces or special characters. Finally, web file names are case-sensitive so it's it's best to use all lower-case characters. When you've entered a file name, click Save.
4. The first time you save the file, the system will present you with another dialog box inviting you to enter a page title. This is a very important step so don't skip it. The page title has several uses: it is used as the label that appears in the top border of the browser window in which it appears, and also plays an important role in indexing. Enter a short phrase that describes the content of your page and click OK. Note that you won't actually see the page title in the regular page display -- it goes into a hidden field that is used by the software.

Most of your editing will be done using the Normal view (views are selected using the tabs along the bottom border of the workspace. It's important to note that the page as displayed in the Normal view is not the same as it will appear in a browser. However, as you are editing, you can check on the actual appearance of your page by using the Preview view tab, which displays the page as it will appear in the typical browser. The other two views, Show All Tags and <HTML> Source are useful for editors who are comfortable working with tags, but are not required to create new pages.

Modifying an Existing Page in Composer

In many cases you will be editing an existing page, or possibly creating a new page by adapting an existing one. Follow these steps to open one of your locally stored pages for editing or to use as a template for creating a new page:

1. Open Netscape Composer and select File > Open File. Use the dialog box tools to browse to the local directory or folder where your file is stored. Locate the file, select it, and click Open.
2. If you are opening the file for editing, make your changes and then use the File > Save option to save your work, overwriting the old version of the file.
3. If you are opening the file in order to use it as a template, you'll want to save the file with a new name. Use the menu item File > Save As, give the file a new name, and click Save. Make sure you are saving the file in the proper folder. This technique is particularly useful if you need to create a number of different pages with a similar look. Create the template first, and then clone it as many times as necessary.

Creating Links

The essence of the web is being able to create hot links that tie pages together into a network of documents. There are several ways to create links in Composer. Here are two examples:

1. In many cases you'll want to link from the current page to another page located in the same directory. In the Normal view, place the cursor where you would like the link to appear and click the Link icon on the toolbar. The Link Properties box will appear requesting two additional pieces of information:
   • The Link Text -- a brief descriptor for the target page which will appear blue underlined characters in the resulting page.
   • The Link Location -- file name or address of the target page.

   Here's an example of a Link Properties box that associates the link text "minutes for the meeting of Jan. 10" with the HTML file minutes-110502.htm. In this case, because the minutes files is located in the same directory as the current page, all you need is the file name is itself. Note: case matters and file names should not contain any spaces.

   

2. You can also create a link out of text you've already entered on the editing screen. In this scenario, highlight the text you want to convert into a link, and then click the Link icon. In this case, the dialog box that appears will only as for the Link Location, since the Link Text as already been defined -- see example below.

   If your target link is not on the local server, the Location will need to be the complete URL. In this example, because the link points to a page on a different server, the Link Location requires the "http" prefix and server name as well as the file name.

   

If you need to revise the properties of a link you've already created, right-click on the link text from the main Composer editing screen and select Link Properties to bring back the Link Properties box.

Inserting Images

Adding graphics to your page is very similar to adding links. The graphics images must be stored in a standard format such as .jpg, .gif, or .png. Note that with HTML pages the image is always stored separately from the page in which it appears. What you're going to do is insert a reference in the page that instructs the browser to insert the image at the designated location when the page is displayed in a browser. Follow these steps to create a new image reference:

1. Click the Image icon on the tool bar. This will bring up a new Image Properties dialog box.
2. On the Location tab, inter in the Image Location box the name of image file. Just as with link targets, if your graphic file is stored in the local folder or directory you're working in, all you need is the file name. Instead of entering the file name directly, you can use the Choose File option to browse your files in order to select the correct image. This method is especially recommended if your image is stored on a different folder within your storage area because it automatically records path information.
3. In the box labeled Alternate text, enter a one or two word description of your image. This is optional, but it's a good idea because some people with disabilities use special browsers that need this label to identify links to the user. Click OK to insert the image reference.
4. To modify the properties of an image that has already been inserted, right click on the image and select Image Properties.

Note that an HTML page with references to image files must always have access to those files. If you move your HTML page to another location, make sure you remember to also include any associated image files.

Publishing your web pages

Once your personal web page is ready for the public you'll need to move the files to the server so that other people on the Internet will be able to see them. Here are a few quick facts about the publishing process:

• Personal web pages for AU staff and students are published on the server web.aurora.edu, which happens to be the same server that hosts AU email accounts.
• Your uploaded files must be placed in a special directory named "public_html" that has already been configured for HTML pages. Every user already has one of these directories in their personal storage area on the server. Only pages stored in this special folder will be accessible from other browsers.
• You cannot edit your pages directly on the server. Instead, revisions must first be made to our local copy, and then uploaded to the server as a separate step.
• When you publish your web pages you will be asked to provide an username and password (the same ones you use for email).

Composer comes with a built-in file transfer (FTP) tool, but for security reasons cannot be used with AU's web servers. Instead, you will need to use a separate file transfer application that supports the secure, encrypted FTP process. A variety of applications can be used for this purpose, but the one currently in use at AU is WinSCP. A copy of this program is available on the machines in the AU computer labs, and you can also get a free copy to install on your own computer.

An advantage of using WinSCP is that it offers a more complete set of tools for managing your web site. Several operations are possible using WinSCP that you cannot do in Composer, including removing files already posted on the server, creating a web site with subdirectories, and adding non-HTML file types to your site (such as PDF documents).

Please consult the document cited above for details on using WinSCP. Here's a brief summary of the HTML page publishing process:

1. Make sure the HTML files you have created in Composer are complete and ready to publish.

2. Open WinSCP, click New, and type in the following information in the appropriate fields:

   Host name: web.aurora.edu
   User name: [type your AU email username here]
   Password: [type your AU email password here]
   

3. Click Login. (If you see a security message, just click Yes and move on). You should now be looking at a dual-directory display. On the left is the directory of your local PC, and on the right is a display of your personal storage area on the server. It will look something like this:

   

   The directory you want on the right (server) side is public_html (circled in red in the display above). Your new page must be copied into this directory in order for them to work. Double-click on the directory icon to open it. You should now see a mostly empty directory display. You know you're in the right place if the name "public_html" is displayed in the dark blue area at the top of the directory display. If you're in the wrong directory, click the directory icon with the up arrow to return to the parent directory.

4. Of the left side of the display is your local directory. Use the various folder icons to navigate to the directory location where your new HTML page is stored. In the display above you can see a file called index.htm ready to be transferred to the server. When both directory displays are correct, select the file on the left side with the mouse and either press F5 or click the F5 Copy command at the bottom of the display. When this operation is complete you should be able to see a copy of your HTML file in the right side of the display. You can now close WinSCP.

WARNING: when using FTP, be very careful not to delete or move any files on the right sight of the screen. If you're careless you can damage or delete essential system files.

When you have published your page, open your browser and go to your personal URL, which takes the form http://web.aurora.edu/~username, where "username" is your regular email username. If you don't see your new page, try the browser refresh/reload button. If you still don't see your new page, something may have gone wrong with the file transfer. If you see errors in the page, you may need to return to Composer to made the necessary changes, copy the new version to the server, and view it once again in the browser.