Date: Tue, 05 Nov 1996 21:47:58 GMT Server: NCSA/1.5 Content-type: text/html Last-modified: Mon, 19 Sep 1994 21:56:41 GMT Content-length: 12327 8 Easy steps to having your own WWW Page

8 Easy steps to having your own WWW Page on the CS UNIX Machines

In this document we will go through a step-by-step procedure for creating a simple WWW Home page on the departmental workstations. It should take you about 30 minutes to complete the steps described here. The page you create will probably not be exactly what you want, but going through these instructions will give you a general idea of what is involved in creating Web pages, and after you understand more of how the system works you can go back and edit or replace it. Some of what is said in this document isn't strictly true, as you will see when you continue learning about the Web.

Note: The term Home Page has come to mean two different things. Some people refer to a page that describes a person or institution as its "Home Page." Others think a "Home Page" is a page you create for your own use that contains a list of links to the sites you visit frequently. The page you are creating is of the first type.

Step 0: What you should have in front of you.

Chances are you have probably completed most of this step already. This document assumes you are logged into the console of a UNIX workstation in the CS department, and that you are running Mosaic for X to view this page. If you are using some other browser or you aren't logged into a CS machine, some of the instructions below won't work and might not make sense, and you will have to move or be prepared to improvise.

You will probably want to read both this document and the page you are editing at the same time, so to make that easier you can create a second Mosaic window. Keeping in mind that you will have to put the first window back on top to continue reading, press the "New Window" button on the bottom of Mosaic. We'll use this other window later.

In addition to Mosaic, you should have a window with a shell available because you will be typing a few commands. Finally, you should have your favorite text editor in a fourth window. This document doesn't assume any HTML-specific editor modes; you will be editing the file directly. Make sure you can switch between the windows easily.

Step 1: Create your public WWW directory.

If you have never put a document on the Web, you will need to create your publicly accessible WWW directory. In your shell, execute the following command:

mkdir ~/public/html

This directory is where you will keep all of your Web documents. It has a special place in the namespace of our Web server. If this command did not work because you do not have a ~/public directory, you have to do a little more work. Please see this note.

Step 2: Copy the sample home page.

In your shell, run the following command:

cp /common/www/home-sample.html ~/public/html/username.html

where username is your own UNIX login name. This file contains a WWW home page for you to personalize.

Step 3: Edit the home page file.

What you do to accomplish this will depend on what editor you use. The first few lines of the file should look like this:

<HTML>
<HEAD>
<TITLE>Felix's Home Page<TITLE>
<HEAD>
<BODY>

Don't change anything yet.

Step 4: View the document in Mosaic.

In the other Mosaic window you created, click on the Open... button at the bottom. A dialog box with a text field and some buttons will appear. If there is anything in the text field, press the Clear button. Now type

http://www.cs.wisc.edu/~username/

in the text field. If you make a mistake, the Backspace key should delete the character before the cursor, and the Delete key should delete the character after it.

In the other Mosaic window there should be a short list of directories and files, one of which is username.html. Just as the string ~username/public/html/ is a complete path in the filesystem pointing to the directory you created, the string http://www.cs.wisc.edu/~username/ is a complete path (or full URL) to that same directory in the Web namespace. If you had wanted to load the document directly, you could have entered

http://www.cs.wisc.edu/~username/username.html

However, the server was nice enough to make a directory listing for you, so you can just click on the name of the file to view it.

Step 5: Examine the file.

The file you are editing is written in HTML, the Hypertext Markup Language. We are not going to go into detail about HTML here, but there is a reasonably complete description in another document. Here is an over-simplified summary of HTML markup. As you read it, look for examples in the file:

Also notice that tabs, spaces, and newlines separate words, but are otherwise interchangeable. You can format your HTML document however you want to, and any combination of "whitespace" characters will not have an effect on the finished product. While there is a blank line between paragraphs in the sample file, it is the <P> tags that cause space to be included in the Mosaic window.

To make an HTML document, you simply need to know the elements and entities and how to use them. The use of entities is very simple. Whenever you need to enter a character special or markup character into your document, instead of typing the character itself you type the entity. The use of elements is more complicated, so for now we will just tell you what you need to know to alter the sample home page.

There are a number of tags that get included in every document that we will not discuss. Here we will only discuss the Title, and the Body.

Step 6: Edit the title.

The third line of the sample home page looks like this:

<TITLE>Felix's Home Page</TITLE>

If you look at the top of your Mosaic window where it says "Document Title:" you will see that the string in the TITLE container is displayed there. Different browsers use the title in different ways. The title should be short and summarize the contents of the document. In this case you can replace "Felix" with your own name.

After you have made the change, save the file without exiting your editor and press the Reload button on the bottom of the other Mosaic window. The new title should appear. From now on, whenever you make changes to the file you can save it in your editor and reload it into your browser to see the result.

Step 7: Edit the body.

The body is everything between the <BODY> and </BODY> tags (if you look at the end of the document, you will see the </BODY> tag). The body is where you put your text, entities, and most of the elements. The sample file has a number of elements you might want to use in your own home page. Don't delete a sample element until you have left at least one example of its use in the file or decided you don't want to use it.

As you look at the sample page in your editor and in Mosaic it should become clear what the different elements do in Mosaic for X. Different browsers have different interpretations of the tags. Here is a list of the elements in the document and what they do in Mosaic:

There are also a number of elements not included in the sample document. Here is a list of some of them:

Two of the included tags, <A> and <IMG>, had attributes. The A container was used to create a link to another document, which was specified in the HREF="/cgi-bin/finger?keeper@spacely" attribute. In this case, that document is a script that fingers a user (keeper@spacely) and creates a document with the result. Note that path (URL) to the document starts with a "/". When you link from one document to another in the Web, you can refer to the new location relative to the current one. In this case, we could omit the http://www.cs.wisc.edu because both documents are on the same server.

The <IMG> tag, as we said before, is used to include a picture. The picture must be either an X bitmap, or a GIF file. The SRC attribute is used to specify the location of the picture. The filenames of X bitmaps must end with the extension .xbm and GIF filenames must end in .gif. If you had a GIF file called me.gif, and you wanted to include it in your document, you could put it in the same directory where the document is located, and use the tag <IMG SRC="me.gif">. The ALT attribute specifies a string to be printed if a browser cannot display pictures.

Now that you know what the elements do, you should figure out what you want to say (the hard part), and then use the tags and text to create the "look" you want. Remember that you can preview what you create in Mosaic as you go along by saving the document and clicking the Reload button.

Every night, every page that matches the pattern ~username/public/html/username.html is mapped into the master list of home pages.

Step 8: Read the other documents.

You don't have to read them now, but before you do more work with HTML or the server you should get the complete description of how they work. In particular, read the HTML document. Using Mosaic to test your HTML for correctness can leave your documents looking pretty in Mosaic, and non-sensical in other browsers.