CISC 1100 Web Project

Create your own web page file via terminal

1. Log on to storm.cis.fordham.edu

Please see this quick howto guide about how to access storm server from any computer.

To log on to our server:

open a terminal window (which emulates the ancient monitor that was connected to main frame machine).
Type in the following command line into the terminal window, and press enter.
```
ssh your_account@storm.cis.fordham.edu
```
You will be prompted to enter your password. While you enter your case-sensitive password, the password will not be echoed back to you (why?). After you are done, press enter.
Once you login, you will see the so called prompt message (including account id, server name), something like the following:
```
[zhang@storm ~]$
```

2. A few Commands

We are now logged in. You can now issue commands to the server by entering a line of command, and then press enter. Here are a few to get started:

passwd: change your login password. You will be prompted to enter your current password, and then your new password twice.
You have done so already, no need to change your password everytime.
```
[zhang@storm ~]$ passwd
Changing password for user zhang.
Changing password for zhang.
(current) UNIX password:
...
```
pwd: to see where you are in the file system.
```
[zhang@storm ~]$ pwd
/home/staff/zhang
```

cd: allow you to go to other directory

[zhang@storm ~]$ cd public_html  //go up one level
[zhang@storm public_html]$ pwd //show current directory 
/home/staff/zhang/public_html

ls: to list all files under the current directory
```
[zhang@storm ~]$ ls
... //output omitted... 
```

3. Edit your HTML file

We will create a simple webpage (that will have the following URL:)

http://storm.cis.fordham.edu/~your_account

To do that, we will create a file named index.html under your public_html folder on storm.

You can use a text editor such as pico, or vi or emacs. If you have no experience with vi or emacs, you should use pico.

[zhang@storm public_html]$ pwd //show current directory
/home/staff/zhang/public_html
[zhang@storm public_html]$ pico index.html

The quickest way to get started is learning by example. Please copy and paste the following into your pico:

<html>
<head> 
<title>My first Web Page</title>
</head>
<body bgcolor = "white">
<h2>My first Web Page </h2>
<p>I am so happy to be at Fordham! Here are some things about me you
might like to know. 
<ul>
<li> My favorite color is blue. 
<li> John Mulcahy Hall is home away from home. 
<li>I love the Big Apple.
<li> My favorite web site is <a href="http://www.cnn.com">cnn.com
</a>
</ul> 
</body> 
</html>

Save and View your HTML file

To save your file, just press Ctrl-O(i.e., press Ctrl and o together), and press enter to confrim the file to save the changes to.

To see look and feel of your web page

Type the URL of your webpage (i.e.,storm.cis.fordham.edu/~your_username) to a browser (chrome, Safari, ...).

Now you can i) edit the index.html file using pico, ii) save the modification, iii) reload the webpage in the browser to check the look and feel, and so on.

4. Embed Pictures

A picture is worth a thousand words! To embed your favorite pictures or photos in your web page:

On your local computer (lab computer or laptop):
1. Suppose you have saved an image file (.jpg, .pic, .jpeg, .gif) in a folder on the lab computer (or your mac laptop),
  In a terminal window, use cd command to go to that folder.
```
	$cd download //suppose you save some image to the download directory 
	 
```
2. Upload the pictures files (.jpg, .pic, .gif) to the server (i.e., storm.cis.fordham.edu):
```
$scp myfile.jpg your_account@storm.cis.fordham.edu:~/public_html
```
  You will be prompted to enter your storm account password again. The scp command is a secure remote copying command that allows you to transfer files between computers.
On storm server: Modify your index.html file, to include img tag to embed the pictures. <img src="name of image file">

Here is an example: The height=140 in the example specifies an attribute for the image, here it's the displaying height in pixels.

<img src="dog.jpg" height=140/>
<img src="cat.jpg" height=140/>

List of Content