Introduction

Today we are operating in the Age of the World Wide Web. Thus we need to know how to create at least a basic Web page in order to be able to disseminate knowledge through this medium. This and the following exercises will provide you with the basic skills needed to create a Web page, as well as a basic understanding of how Web pages work.

In this exercise you'll perform a variety of tasks:

  1. First, you'll log onto UHUNIX using SSH to see whether or not you have a public_html subdirectory in your personal home directory. Your public_html subdirectory is where the files for both this assignment and your Web portal will reside. If you do not have a public_html directory, you'll create such a directory using the "make directory" command.
  2. Next, if you have not previously done so for another class, you'll open both your public_html directory and your personal home directory for public viewing using the "change mode" command.
  3. After logging off UHUNIX, you'll create an ASCII file using a Word processor. We'll see what an ASCII file is later in the instructions.
  4. Once your ASCII file is ready, you'll upload it to UHUNIX using the file transfer utility of SSH.
  5. Next you'll open your uploaded ASCII file for public viewing.
  6. Finally, you'll view your work using a Web browser and send the URL to your instructor to receive credit for your work.

Preliminary Step

Throughout this assignment you will be using SSH (the acronym stands for Secure Shell). SSH is a program that encrypts data as it passes from one computer to another. It allows you to securely log onto the UH servers to manage your personal directory, create web pages, and transfer files. SSH is already available on most University of Hawai`i computers. If you wish to work at home, however, you will need to download and install SSH from the UH ITS website.

If you are working on a pc you can download a free version of SSH from the UH website: http://www.hawaii.edu/askus/778

For Mac users:

SSH is already present on your computer. When the instructions say to click on the SSH Secure Shell Client icon you should open your Macintosh HD and go to the Applications folder. Within the Applications folder open the Utilities folder. Within the Utilities folder you should see Terminal. Click on Terminal to open a terminal session.

A prompt should appear. This may take the form of a % sign. To the right of the prompt type
ssh username@uhunix.hawaii.edu
(substituting your UH user id for "username." My UH user id is donnab so I would type ssh donnab@uhunix.hawaii.edu.) If the system asks you if you wish to proceed type yes. When prompted to do so type in your password. The instructions from then on should be the same as those for pc users.

In order to transfer files using an encrypted transmission you will need to download and install Fugu. Fugu places a graphical user interface on top of Mac OS X's command-line Secure File Transfer application. This is available at no cost to UH students, faculty, and staff. Go to http://www.hawaii.edu/askus/575. Scroll down to the Mac section. Click on the Fugu link.

Now, this is important. If your computer is newer than 2003 you must use the newer version of Fugu: Fugu 1.2 (736 KB) for Mac OS 10.2.3 or later. And I highly recommend that you download the IT instructions for working with Fugu entitled "Getting Started with Fugu" before you download Fugu itself.

Step 1: Log onto UHUNIX Using SSH Secure Shell Client

In order to log onto UHUNIX you will first need to establish a connection to your Internet Service Provider, just the way you do when you are going to surf the Web—or use a computer with a networked connection to the Internet. In the LIS program area all of the computers have Internet connections, as do ICS computer lab computers.

Once you have your Internet connection, either through your ISP or the UH, click on the "SSH Secure Shell Client" icon on your desktop.

You should get a screen that looks something like this:

From the File menu select Connect.

For Host Name type: uhunix.hawaii.edu.

For User Name type in your UH user id, the same one you use to read your UH e-mail. (Mine is donnab). Leave the Port Number at 22. You can change the Authentic Method to Password but this is not absolutely necessary as the software will usually do that for you.

Click on the Connect button.

The first time you log onto the UH server it may ask you if you wish to save the public key on the computer you are using.

Click on Yes.

For security reasons, you should be presented with a message telling you that unauthorized access to this server is prohibited by law.

As a student at the University of Hawai`i you are authorized to access this server. Click on the OK button.

When requested to do so type in your UH password. Then press Enter.

When the % sign appears on your screen, you have successfully logged onto UHUNIX and the system is waiting for your first command.

Step 2: Open Your Personal Directory and Check for Your public_html Directory

Next you need to see if you already have a public_html directory. To do this, use the list files command.

Type ls then press the Enter key.

The system should present you with a list of the files and subdirectories in your home directory. Check to see if your have a public_html directory.

If you do not have a public_html directory create one now.

Create a public-html Directory

To create a public_html directory we use the "make directory" command.
Type the following exactly. The character between the "public" and "html" should be an underscore.

   mkdir public_html

To check to see if the directory was created, use the "list files" command:

   ls

You should see your public_html directory listed.

Step 3: Open Your public_html Directory to the Public

Your public_html directory needs to be open to the public in order for your exercises and later your Web portal to be seen. To check the access permissions on your public_html directory use the long option with the list files command.

Type ls followed by a space, followed by hyphen l (ell):

  ls -l

The listing for your public_html directory will begin with the letter d, signifying that this is a directory, followed by the permissions should be as they appear here:
drwxr-xr-x

This gives full access rights for the owner, signified by rwx; read-and-execute only rights for your group and the public, signified by r-x for each of them.

If the access rights to your public_html directory are exactly as the ones shown you need not change the permissions. If they are different you will need to change them.

Change the access permissions for your public_html directory

Type the following:

  chmod 755 public_html

Then press Enter.

Check to see that your access rights are now correct using the long option with the list file command:

  ls -l

The first ten characters on the left for your public_html directory listing should look like this:

drwxr-xr-x

Step 4: Open Your Personal Directory for Execution Only

Once you have opened your public_html directory for public viewing, you need to open your personal directory for executing files or directories within it. We'll do that using the chmod command. However, this time we'll use 711 to allow the group and public only execution rights.

To open your personal directory to the public for execution only, type chmod followed by a space followed by 711 followed by a space followed by a single period.

  chmod 711 .

How does this work?

First, remember that the numerical coding for the permissions are decimal equivalents of binary numbers. To open your personal home directory to the public for execution only we're actually saying 111 001 001. Converting these binary numbers to decimal we get 7 1 1.

The period represents the directory you are working in. We can use the "all" option with the list files command to see this:

  ls -a

When you use the "all" option you see that there are two names that consist only of a single dot and two dots. The two dots refer to the directory one level up in the hierarchy. The single dot refers to the current directory. Thus, when we type chmod 711 followed by a single period we're telling the system to change the permissions to allow execution of files or subdirectories in the current working directory.

Step 5: Log out of UHUNIX

Now that both your public_html and personal directories are ready, close your connection to UHUNIX using either the logout or exit command. The system should then give you the message that you are now logged out.

  logout

If you're working at home, you can also close your connection to your ISP, as we're now going to work offline to create an ASCII file.

Step 6: Create an ASCII File

What Is ASCII?

ASCII, the American Standard Code for Information Interchange, is a set of standardized codes for upper- and lower-case English letters, the digits 0 through 9, a set of punctuation marks, and for certain standard functions necessary to display textual data, such as carriage return and line feed. ASCII allows communication between applications that normally encode textual data with proprietary coding. It's like a language of diplomacy for computers. The commercial word processors you use to do your papers can both read and produce ASCII-encoded text.

ASCII is not the only standard for character representation on personal computers. There are other standards, such as the ANSI standard. And Microsoft uses different coding than other vendors in the extended ASCII characters, meaning the extra characters that were added when we went from 7 to 8-bit bytes. This multiplicity of standards is why an e-mail message you receive may contain odd symbols or stray characters. The e-mail program that produced the message used a different standard than the program you're using to read it.

Here are a few of the ASCII codes:

ASCII Code Character or Action ASCII Code Character or Action
007 (beep) 048 0 (zero)
010 (line feed) 049 1 (one)
013 (carriage return) 050 2
032 (space) 065 A
033 ! 066 B
034 " 067 C
035 # 097 a
036 $ 098 b
037 % 099 c
038 & 120 x
039 ' 121 y
040 ' 122 z

Note that the number 7 codes for a beep. This is from the olden days when teletype machines were used—a teletype machine had a bell.

An ASCII file is also referred to as a "text" file. This is because it consists primarily of text with the few punctuation marks and control characters we mentioned earlier. This text is encoded using the ASCII codes. Unlike your standard word-processor-produced files, there are no proprietary formatting codes in an ASCII file. Therefore the contents are plain text—no codes for font sizes, styles, or colors—also no columns or tables, no page headers or footers, and no graphics.

We are interested in creating ASCII files in this course because ASCII files with HTML tags (you'll learn what those are later) are used in creating Web pages. In fact, the ASCII file you'll create in this exercise will be an HTML document that you will view using a Web browser.

There are two ways to create an ASCII file:

  1. The first is to use a text editor such as Pico. This type of program only produces ASCII files. We'll use a text editor later to edit our ASCII file online.
  2. The other way to produce an ASCII file is to use a standard word processor such as WordPerfect or Microsoft Word to input the contents, then save the document as a "text" file. We're going to use the second option here.

Enter the Contents of Your File

Open a blank document using your customary word processor. For most of you this will be Microsoft Word.

First we're going to enter an HTML tag. A tag is simply another word for a code that is going to tell a Web browser how to display a Web page.

Each tag must be enclosed in angular brackets. For those with mathematical backgrounds, a tag begins with a "less than" symbol and ends with a "greater than" symbol.

At the beginning of your document type <html>

This first tag will tell a browser that this is an HTML document. HTML stands for Hypertext Markup Language.

The HTML tag is a paired tag. This means that there is a beginning and ending version of the tag and both must be present in order to work. The ending version of a paired tag always starts with a forward slash. Let's hit the Enter key several times to give us space to work in, then type in the second of the paired tags: </html>

<html>


</html>

Hint: in coding any document input paired tags at the same time. This way you won't accidentally leave off the ending tag. This will help to minimize the time you spend pouring over your HTML document looking for what's preventing your Web page from displaying properly.

Now that we've got our beginning and ending tags, we can type our message in between the two tags.

<html>

Aloha, world! This is the test file of [your name].

</html>

This is a variation on the "Hello, World" message traditionally used by programmers. Substitute your name for the bracketed material.

Save Your File as a Text File

Open the File menu.

From the File menu select Save As.

Selecting "Save As" causes a window to pop up.

Now, you need to do this next part in order.

Click on the Save as type arrow to display the selections.

You'll notice that there is a choice to save as an HTML file. Do NOT select HTML. Selecting HTML file at this stage would cause the word processor to add duplicate codes to your document.

Instead, select Plain text.

Once you've selected Plain text you are now ready to name your file.

For file name type:

test_file.html

Don't use any spaces in your file name.

Click on the Save button.

The system will ask you which type of encoding to use. Select MS-DOS.

Troubleshooting

Sometimes you follow the directions above exactly and the software insists on putting a .txt extension on the end of your file. This is easy to fix in uhunix.

Skip immediately to Step 7. Upload your file to uhunix.hawaii.edu following the instructions in that step. Then return here for the following instructions:

Disconnect from uhunix.hawaii.edu and exit the SSH Secure File Transfer program.

Log onto uhunix.hawaii.edu using the SSH Secure Shell Client.

Move into your public_html directory:

cd public_html

Make a copy of your file, giving the copy the same name but without the .txt extension:

cp test_file.html.txt test_file.html

How does this work? The cp is the copy command. The name immediately following cp is the name of the source file—the file you wish to copy. The second name is the name you wish to give the destination file—the copy of your old file.

Use the change-mode command to open your new file for public viewing:

chmod 755 test_file.html

Proceed to Step 9.

View Your File in Your Browser

Now that you've saved your document as an ACII file, let's take a look at it to make sure that the codes were inputted properly before we transfer the file to the UHUNIX server. To do this we'll open a browser.

Open a Web browser such as Mozilla Firefox or Internet Explorer.

If you are using Firefox from the File menu select Open File. Move into the directory where you have stored your test_file. Click on your test_file. Click on the Open button.

If you are using Internet Explorer from the File menu select Open, then click on the Browse button. Move into the directory where you have stored your test_file. Click on your test_file. Click on the Open button. Then click on OK.

Your file should look like this when viewed with a browser.

Step 7: Upload Your File to UHUNIX

First, establish a connection to your Internet Service Provider or use a computer with a permanent Internet connection such as those here at LIS.

Once you've connected to your ISP or are seated at a computer with an Internet connection you'll need to use SSH to connect to UHUNIX. Unlike your previous connection, this time we'll use the SSH Secure File Transfer utility. Click on the SSH Secure File Transfer Client icon.

The opening screen should look something like this:

From the File menu choose Connect.

Once again, a window will pop up. For the Host Name enter uhunix.hawaii.edu.

Enter your UH userid for User Name.

Leave the port number at 22 and authentication method as password.

Then press the Connect button.

Enter your Password and click OK.

When UHUNIX is busy with many connections the system may take several minutes to complete the login process.

When the login process is complete in the right-hand window you should see the files and subdirectories already present in your UHUNIX personal directory. Double-click on public_html to move into that subdirectory. If you already have files in that directory they will be listed. If you do not have any files in that directory yet, the right side will be blank, as in the graphic below.

In the left-hand window you should see files and folders that exist on your computer.

Double-click on the name of the directory in which you have stored your test_file.

If you have stored your test_file in a subdirectory you will need to continue to double-click down through your directory structure until the name of your ascii file appears.

In the left-hand window use your mouse to click on the name of your test file (test_file.html), then drag it into the right-hand window.

When the upload is complete your test_file should appear in the right-hand window. Check to see that this is so. If it is not listed, try the upload procedure again.

Step 8: Open Your File for Public Viewing

Now, in this step you're going to use a short-cut to open your file for public viewing. Unfortunately, the instructions for pc users are different for pc users and mac users.

For pc users:

In the right-hand window right-click (click on the right-hand button of your mouse) on the name of your test_file.

From the pop-up menu that appears select Properties.

In the Permissions Mode box type 755.

Click on OK.

For mac users:

Log onto uhunix.hawaii.edu using the SSH Secure Shell Client.

Move into your public_html directory using the command:

cd public_html

Now use the change-mode command to open your file for public viewing:

chmod 755 test_file.html

Step 9: View Your Uploaded File

To view your uploaded ASCII file, use either Firefox, Netscape, or Internet Explorer.

The address is:

http://www2.hawaii.edu/~[your UHUNIX userid]/test_file.html

For example, if your userid is jdoe then your address would be:
http://www2.hawaii.edu/~jdoe/test_file.html

Step 10: Send an e-Mail to Your Instructor

Once you have completed all the previous steps in the exercise, send me an e-mail message with the full URL of your ASCII file. The full URL includes the protocol portion of the address (http://). So it would be like http://www2.hawaii.edu/~jdoe/test_file.html, substituting your user id for jdoe. My e-mail address is: donnab@hawaii.edu.

This is also the address you can use to send me questions. If something goes wrong, try troubleshooting as best you can using the instructions above. If you are unable to find or fix the problem, e-mail me, telling me what you did and what the results were, along with your file name.

This is the end of the instructions for Exercise 2. Good luck!


Click here to return to the Assignments page.