LIS 610Creating an e-Portfolio In-Class Web Exercise

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 the Internet. In the LIS program area all of the computers have Internet connections. You can only use your own laptop for this exercise if you have wireless access and are willing to download and install SSH, available from the UH website at http://www.hawaii.edu/askus/778.

Once you have your Internet connection, either through a wireless connection or through the LIS computer, 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 (ls) 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 please 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 the web pages you create 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: Move into Your public_html Directory

In order to move into your public_html directory you will need to use the “change directory” command (cd):

cd public_html

Use the “print working directory” command to verify that you have moved one level down into your public_html directory:

pwd

When you hit the Enter key the system should let you know that you are now in the public_html directory by listing that directory last.

Step 6: Create a New File Using Pico

Now you’re going to create the file in which you will encode a web page. To do this you will use Pico, a text editor. Type the following command to activate Pico and create a new file:

pico lis610_exercise.html

(Be sure to include the underscore (_) in the name. UNIX does not tolerate names with spaces.)

Step 7: Start inputting HTML Code in Your New File

Now we're going to enter a pair of HTML tags. 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 staring at 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 head and body tags. Between the head tags we can include metadata or formatting for our web page. Anything we wish to appear in our web page should be placed between the two body tags.

<html>

<head>

</head>

<body>

</body>

</html>

Next we’re going to enter a line of text. Because we want this text to appear in our web page, we need to place it between the beginning and ending body tags.

<html>

<head>

</head>

<body>

I’m learning how to create an e-portfolio!

</body>

</html>

At this point you need to save your file. To do that hold down the Control key and hit the letter o.

Ctrl + o

When we hit the Enter key the system should ask us if we want to use the file name we have already chosen. We answer in the affirmative by hitting the Enter key again.

Having saved our file we need to exit Pico in order to open the file for public viewing:

Ctrl + x

Step 8: Open Your New File for Public Viewing

In order for anyone to see your newly-created web page the file must be open for public viewing. We do that using the Change Mode command. At the % prompt type the following command:

chmod 755 lis610_exercise.html

Now let’s see what your web page looks like. Open a Web browser such as Mozilla Firefox or Internet Explorer. The address of your newly created file is:

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

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

Not much there but it’s a start!

Step 9: Re-Open Your File and Add a Header

Re-open your file for editing using the same command you used earlier:

pico lis610_exercise.html

Let’s add a header. A header needs to be between the beginning and ending body tags.

Headers come in different sizes. Although individual users can change the way headers display in their browsers, usually the size of the header is inversely proportional to the header type number. In other words, the largest header is:

Header h1The next size down is:

Header h2And so on.

Headers are created by surrounding the text of your header with a pair of header tags. For example, to create an h1 header we use: <h1> Text of header </h1>

Let's add a header to your document:

<html>

<head> </head>

<body>

<h1>Having Fun Creating an e-Portfolio</h1>

I’m learning how to create an e-portfolio!

</body>

</html>

At this point you need to save your file. To do that hold down the Control key and hit the letter o.

Ctrl + o

When we hit the Enter key the system should ask us if we want to use the file name we have already chosen. We answer in the affirmative.

Now return to your browser. Hit the refresh button to see your addition.

Step 10: Add Formatting

So far your new web page is looking a bit plain. We can change that by adding a cascading style sheet.

Please return to your open file.

We start by adding our beginning and ending style tags. These should be placed between our beginning and ending head tags, as this is information about what is to be displayed, not material to be displayed.

<html>

<head>

<style type=”text/css”>

</style>

</head>

<body><h1>Having Fun Creating an e-Portfolio</h1>I’m learning how to create an e-portfolio!</body>

</html>

Just adding an empty style sheet doesn’t do anything. Now it’s time to put some instructions in the style sheet. First let’s add some background color. To do that we will add a rule in that style sheet. We will need to identify the element we want formatted, then add our formatting information. Let’s turn the background color a pretty plum color:

<html>

<head>

<style type=”text/css”>

body { background-color : plum ; }

</style>

</head>

<body><h1>Having Fun Creating an e-Portfolio</h1>I’m learning how to create an e-portfolio!</body>

</html>

If you would like a different color for your background, visit: http://www.w3schools.com/html/html_colornames.asp and pick a color!

Save the file:

Ctrl + o

Refresh your browser and view your web page. That’s better!

While we’re in the formatting mood let’s add formatting to our header. We’ll give it a different background color, turn the text white, and center the text horizontally all with one rule:

<html><head>

<style type=”text/css”>

body { background-color : plum ; }

h1 { background-color : purple ; color : white ; text-align : center ; }

</style>

</head>

<body><h1>Having Fun Creating an e-Portfolio</h1>I’m learning how to create an e-portfolio!</body></html>

Save the file:

Ctrl + o

Refresh your browser and view your web page. Notice the changes?

Step 11: Add a Table

Tables are quite useful for organizing information on a web page.

Before we build our table let’s put beginning <p> and ending </p> paragraph tags around our “learning to create” statement (see below).

Then to start building our table we put in our beginning and ending table tags.

<html><head><style type=”text/css”>body { background-color : plum ; }h1 { background-color : purple ; color : white ; text-align : center ; }</style></head>

<body>

<h1>Having Fun Creating an e-Portfolio</h1>

<p>I’m learning how to create an e-portfolio!</p>

<table border=3>

</table>

</body></html>

Using HTML we build a table from top to bottom and left to right. We’ll start with the top row of the table, inserting our table row tags:

<html><head> <style type=”text/css”> body { background-color : plum ; } h1 { background-color : purple ; color : white ; text-align : center ; } </style></head>

<body> <h1>Having Fun Creating an e-Portfolio</h1> <p> I’m learning how to create an e-portfolio! </p>

<table border=3>

<tr>

</tr>

</table>

</body></html>

Now we add cells to our row using the table data tags. Let’s put some content the cells while we’re at it.

<html>

<head>

<style type=”text/css”>

body { background-color : plum ; }

h1 { background-color : purple ; color : white ; text-align : center ; }

</style>

</head>

<body>

<h1>Having Fun Creating an e-Portfolio</h1>

<p>

I’m learning how to create an e-portfolio!

</p>

<table border=3>

<tr>

<td>

Good things.

</td>

<td>

Happy things.

</td>

</tr>

</table>

</body></html>

Save the file:

Ctrl + o

Refresh your browser and view your web page. Did your table appear?

Now let’s add a second row to the table. In the box below I’ll just include the table coding to save space in this handout.

<table border=3> <tr> <td> Good things. </td> <td> Happy things. </td> </tr>

<tr> <td> Wonderful things. </td> <td> Beautiful things. </td> </tr></table>

Just for fun, let’s add another line to our style sheet:

<style type=”text/css”>

body { background-color : plum ; }

h1 { background-color : purple ; color : white ; text-align : center ; }

table { background-color : #EEBAFF ; }</style>

Save the file:

Ctrl + o

Refresh your browser and view your web page. See the difference in your table?

#EEBAFF is hexadecimal coding for a color. If you’d like to see more hexadecimal codes visit: http://www.december.com/html/spec/color.html

Step 12: Turn Text into a Link

Finally, create a link. To create a link we use “anchor” tags because we are anchoring two websites to each other by creating a link between them. Again, these are paired tags. The first tag includes the address of the link. Let’s use text already present in your table to form the text of the link.

<table border=3> <tr> <td> <a href=”http://solarsystem.nasa.gov/index.cfm”>Good things.</a> </td> <td> Happy things. </td>

</tr>

<tr>

<td>

Wonderful things.

</td>

<td>

Beautiful things.

</td>

</tr></table>

Save the file:

Ctrl + o

Refresh your browser and view your web page. Try your link and see if it works.

Enjoy the pictures.

Use Ctrl + x to exit Pico.

Type logout to exit UHUNIX.