It is fairly easy to create and publish a set of documents to the World Wide Web using a familiar application such as Microsoft Word--the same application many people use to create their printed documents. The goal is not to learn how to create a fancy Web site with beautiful images and graphics, but rather simply to learn the basic principles of linking documents together such that they can be accessed over the Internet (i.e. to create hypertext documents).
(Note that this tutorial assumes that you have Microsoft Word 97
or above on your computer, and that the "Save as HTML" component was installed.
If you go to the File menu and "Save as HTML" does not appear immediately
below "Save As" you will need to install this component from your original
installation CD.)
Step 1: Collecting the documents
Create a folder on your hard drive or on a Zip or floppy disk devoted to your Web project. (It is always wise to backup work you do on your hard drive to a Zip disk or floppy and vice versa. Just keep track which is the most recent version)
Collect or create the documents that you want to publish using Microsoft Word as you would normally and put them all in your Web project folder. Give them short, contiguous names (no spaces), thus "docone.doc" or "document_one.doc," not "document one.doc." Use all lowercase letters for consistency; the server we use at Wells (running UNIX) will treat lower- and uppercase letters as different.
This would be a good time to check to see that you are using a consistent style throughout your documents (the same font and font size, all documents left justified, etc.). It is a good practice to use styles for your various levels of headings, not just different font types and sizes.
This would also be a good time to make sure each document has an appropriate title.
When you have finished editing the ordinary Microsoft Word version of a document, you are ready to save it as hypertext (HTML). To do this, simply go to File - Save As HTML. Make sure the document has an appropriately short, contiguous name (see above), and to be 100% sure, type in a .htm extension. (Microsoft Word would automatically supply an extension, but this way you are completely sure how the document is named.) If Word is hiding extensions, you can make them visible by clicking on the folder you are working with and going to View | Folder Options | View, and taking the check off the box "Hide extensions of known file types." Being able to see the full names of your files, including extensions, is essential for your Web project.
You now have two sets of documents in your Web project folder, the original
Word documents with .doc extensions and your new hypertext documents with
.htm extensions. From now on you will only work with the .htm
documents. You can edit them in Word like any other texts, and as long
as you do an ordinary File - Save, they will stay in their hypertext form.
You may want to move your original Word (.doc) documents to another folder
to make sure you don't confuse them with your new documents.
Step 2: Creating a top-level page
Using Microsoft Word, create a new document that will serve as a top-level table of contents page for your other pages. (Or perhaps you may already have an existing document that you can augment to make into your top-level page.) When you are finished, do a Save as HTML instead of a regular Save. This top-level page must have the filename index.htm. The server is set up to expect a file of that name as your top-level page.
Your top-level page could be as simple as just a table of contents of the other documents in your collection (i.e. the titles of your other documents). Or you may want to add introductory or other text, or provide a brief abstract of your other documents.
To give your Web pages titles that will show up at the top of viewers'
browsers and in their bookmarks or favorites lists, go to File - Properties
and type the title you want for each page in the Title box (or do a Copy
of the document's title and then a Paste into the File - Properties box).
Step 3: Creating links
Adding links to your other pages
You can now create links to your other document pages. Simply select (highlight) the title of one of your documents [or whatever you want to serve as your link], then press the link icon at the top of the Word screen (the globe with a link of chain).
Since you are linking to another of your own documents, simply press the Browse button, which should show you the other HTML documents in your Web project folder. Double-click on the one to which you want to link and press OK. Be sure the box at the bottom "Use relative path for hyperlink" is checked.
Go ahead and create links to your other documents in the same way. They are now all accessible from your top-level page.
Adding a Statement of Responsibility link
At the bottom of your top-level page add a Statement of Responsibility such as the following:
This page belongs to Jane Doe, who is solely responsible for its content. Please see our Statement of Responsibility.
Add the link to the more detailed statement of responsibility governing
pages on aurora.wells.edu by selecting (highlighting) the words Statement
of Responsibility and pressing the Link icon at the top of the
page. This time instead of using the Browse feature, type a full URL (Uniform
Resource Locator = "address") into the "Link to File or URL" box: http://aurora.wells.edu/responsibility.htm
It is good practice to put a Last updated: statement at the bottom
of the page as well. By convention, material such as the statement of responsibility
and last updated are considered "Address"; select (highlight) them and
go to the Style box at the top of the page and select Address. This will
put all of your end matter into italics.
Adding Responsibility and navigation links to your other pages
Since Word allows you to Copy and Paste easily, you can now simply select all the material at the bottom of your top-level page your Statement of Responsibility and Last updated notice), do an Edit - Copy, and then Paste the material in at the bottom of one of your other pages.
At this point you should also add a link back to your own top-level page, so that your readers can easily find their way back there as well. Create the link by typing whatever link text you want (e.g. "Return to Jane Doe's main page"), select the text, press the Link icon, Browse to the filename of your main page (index.htm), double-click it, and press OK.
Having created the end matter the way you want it on one
of your lower-level pages, you can now simply do a Copy and Paste it to
the bottom of each of your other pages. When you later create new
pages, you can copy the bottom matter to them as well.
Note that each of your pages must have a Statement
of Responsibility at the bottom.
Adding other links
On any of your pages you can also add links to other information resources
you have discovered on the Internet. Use the same technique as on the link
to the Statement of Responsibility described above: type the text you want
to function as the link text, select (highlight) it, press the Link icon,
type in the full URL to the page to which you want to link, and press OK.
Note that the full URL includes the ubiquitous http:// so you need
to type http://www.wells.edu, not just www.wells.edu. One good way of being
sure that you have the full and exact URL is by using your Web browser
to go to the page you are interested in, doing a Copy of the text in the
location bar near the top of the screen, then doing a Paste into your document.
Step 4: Viewing Your documents with a Web browser
You are now ready to see what your miniature site will look like when seen on the Web. Open Netscape and go to File - Open Page and press the Choose File button. Now browse to your Web project folder on your hard drive or on your Zip or floppy disk. Double-click on your index.htm file and press the Open button.
What you see should look very much like what you have been seeing in Microsoft Word--but not necessarily exactly. At this point if there are small formatting differences or problems you should probably simply ignore them. Microsoft Word's translation into HTML is not exact, and sometimes has oddities that cannot be easily corrected without editing the underlying HTML code.
Note that all your links (including those to outside resources as well as those to your own pages) should work fine from your hard drive or floppy or Zip disk. Your site functions perfectly from your own disk--it does not need to be on a Web server to work. (Of course your pages cannot yet be accessed by other people until you put your files on a server.)
IF a link does not work, check to be sure that it has the exact
file name and location that you are referencing. Even the slightest error
(an uppercase letter instead of a lowercase letter, a spelling mistake,
or a space between words) will cause the link to be "broken."
Step 5: Putting Your documents on a Web server with FTP
Note: the instructions below assume you are running a PC that has the WS_FTP Limited Edition program. If you do not have WS_FTP Limited Edition already, you can download it at http://www.ftpplanet.com/download.htm. Note that the Limited Edition version is available free to educational users. Check the box "Download the WS_FTP LE," fill in your email address, and when asked where to save the installation file, make a note of the directory into which you are saving it. After the download is complete go to Start | Run, then browse to that directory, select the file, and run it. Running the file will begin the installation process. When the installation is complete the program will be ready to use.
In order for other people to be able to see your hypertext documents over a network or the Internet, you must put them on a Web server.
To put files on a server you will need an account (user name and password) for that machine. Note that this user name and password may not be the same as those you use for email on our mail server. The system administrator who set up your account will let you know your user name and password. As always, it is essential not to give your password to anyone.
You can put files on a remote computer without actually going physically to the machine by using the File Transfer Protocol (FTP). Microsoft Word now has a built-in FTP program ("Publish to Web"), but in many ways it will be easier to see and understand exactly what you are doing with your files (and what may be going wrong) if you use a separate FTP program such as WS_FTP, available on all the IBM-compatible computers in the computer labs.
Note that if you are using a Macintosh computer in your office or in a Macintosh lab, the equivalent FTP program is called "Fetch." It functions in a very similar way.
Start WS_FTP by double-clicking on its icon on the Windows desktop. You will see a Sessions Properties window in the foreground and the main WS_FTP window in the background. In the Sessions Properties window, look in the Profile Name box for "Aurora." The Host Name/Address box should have "aurora.wells.edu" If you don't find these, press the New button and fill in this information in these two boxes.
Fill in the User ID and password boxes with your user name and password for this server (not necessarily the same you use for email), then press OK. You will be asked to fill in your password a second time.
You will now see the main WS_FTP interface, which consists of two window panes. The pane on the left shows the file structure of your Local System (i.e. the computer at which you're sitting); the pane on the right shows the file structure of the Remote Site (i.e. the remote computer into which you have just FTPd). You can navigate around in each pane by double-clicking on folders to go into them (i.e. down a level) and clicking on the two little dots at the top of each window (..) to go back up a level into the "parent" folder. Notice that you can navigate freely throughout both the local and remote computers. On the Local System all the drives besides the hard disk are listed at the bottom of the window. Thus you can get to your floppy drive by double-clicking on a, and can get to a Zip drive by double-clicking on d. (On some computers the Zip drive may have a different drive letter; you can find out by exploring My Computer.)
Before transferring files you need to navigate to the appropriate folder on both the local and remote system. On the Local System side, navigate to whichever removable disk drive or hard drive you are using and into the Web project folder where you have your hypertext documents. On the Remote System side, navigate down into the folder called public_html.
Now you are ready to transfer your files from one computer to the other. In this case, you will want to move copies of the files you have created on your floppy, Zip, or hard drive to the remote server by selecting (highlighting) them, clicking on the ASCII button below the panes, and then clicking on the arrow pointing to the Remote Site. You will be able to watch your files being transferred over the network to the server, and then see them appear in the Remote Site window. Note that they must be in your public_html folder; if they are anywhere else they will not be accessible over the Web. Of course you can also transfer files from the Remote Site back to your Local System by just doing the reverse and clicking on the arrow going the opposite direction.
You can test to see whether you have succeeded in publishing your files to the Web server by accessing them over the Internet with a Web browser. Start your browser and type in the URL of your site in the location bar. Your site's URL will have the form: http://aurora.wells.edu/~yourusername (e.g. http://aurora.wells.edu/~klarson).
IF the pages do not come up, check in your WS_FTP window (on the Remote Site side) that the files you want have been successfully transferred into the public_html folder and that they are named exactly as they are supposed to be (all small letters, short and contiguous filenames with no spaces, .htm extension, etc.). Lack of precision is fatal. The pages will not be accessible. If you see any problem with the file names, you can change them on the Remote System by selecting the file and pressing the Rename button, then renaming the file. But be sure that your local copy of the file is also named correctly.
Even after putting up the files on the remote server where others can read them over the Web you will want to keep your copy of them on your Zip, floppy, or hard drive (with a back-up copy). Always consider your local version (the one on your local disk) as the primary version. When you want to make changes to your site, edit the HTML files on your local disk, check them locally with a Web browser, and then (after you know they are exactly the way you want them) go through the above procedure to FTP copies of them to the server.
You can experiment with the HTML editing features of Word (to put in colored backgrounds for the pages, colored text fonts, etc.), but Word '97 is not a particularly powerful HTML editor in terms of exact placement and handling of images and other more advanced features. Your HTML files can be edited using any editing tool. Once you have converted your regular Word documents to HTML you might want to edit them with the built-in Web page editor in Netscape (go in the menu bar at the top of any Netscape screen to Communicator, pull down the menu and click on Composer. Netscape Composer provides some editing features not available in Word, and of course makes it particularly easy to check to see how the page will look in a Web browser. It is also possible to edit the page "by hand," using a plain text editor such as Notepad. Editing the HTML code directly in Notepad is the only way to assure complete control over all details of the page. There are numerous sites on the Web and books in the computer section of book stores that explain how to edit HTML. Nevertheless, for purposes of creating a simple Web site, Microsoft Word should provide what you need.
Prepared by Kenneth E. Larson; File: c:\My Documents\aurora\compserv\simple_site.htm;
Revised: December 12, 2001