CISC 1100 Computer Project

Instructor: Xiaolan(Ellen) Zhang

1. Introduction

To create a web site you need three things:

1.          A machine connected to the Internet with the ability to host web pages

2.          A set of "web page" documents that contain HTML content

3.          A program within which to create the web documents.

The Web Server

In order to have a web site you need a web server. This is a machine that is specially set up to be connected to the Internet and can give out the web pages that are asked of it. While this type of machine is not too difficult to set up, it is beyond what this course does. There are many for free or for pay sites out on the Internet that will happily host your pages, but in this case the computer science department has a machine that will hold your pages at least for the duration of this course and perhaps longer. This machine happens to be called storm and we will be learning how to interact with it later.

A Set of Web Pages

You will be creating many web pages using an underlying format called HTML which is short for "HyperText Markup Language". Go ahead and select the View menu right in your web browser and then select Page Source beneath it. A box should open that should have what at first to appear to be gibberish but if you look closely has the very content that you are reading now.  Basically all of the gibberish is defining all the formatting that is going on in the document. Your instructor may explain more about this but for today you won't need to worry about the details much.

A Program to work In

HTML is challenging but certainly not impossible to work directly with. In this project, we will use basic text file editor to directly created HTML content, which will allow us to learn the nuts and bolts of HTML. Note that there are many WYSIWYG (What You See Is What You Get) programs for Web site development, for example, DreamWeaver, FrontPage, and even MS Word. With any of these programs you just type and format as you would a normal document and the HTML will be created automatically for you.

2. Creating your Storm/OpenMail Account

  1. Use you browser (just clink on this link) to go to storm.cis.fordham.edu/Student-Account.html.
  2. Fill out the account creation form, be sure to include all the information required including your instructor's name and the course number.
  3. When you are done return to this page. We will provide you with your account username and password in a few minutes.

3. Creating a web page

2.1. Login using OpenMail

 

To get to your account, use your web browser to go to storm.cis.fordham.edu/mail.html .Type in your username and password to login  This will brings you to an OpenMail interface(I don't understand what this openmail thing is and I want an explantion).

2.2 Change your password

On your very first time into openmail you may encounter a preferences screen. If you are not in the preferences screen then you need to click on the button labeled "Pref" that appears at the top of the screen.

What we want to do first is change your password. Your instructor may briefly instruct you as to what makes a good password. But now you want to click on the "ChangePassword" button at the top of the screen. You will then be prompted for your old (current) password, and then asked to enter in your new password twice. Once you have done that click on the change password button.

Now back on the preferences screen there is nothing else on this screen that is of immediate concern, so just scroll to the bottom of the screen and click on save.

You can play around with the open mail interface later. For now we are going to create a simple web pagethrough openmail

2.3 What is a HTML Document?

HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  These markup tags tell the Web browser how to display the page  Each HTML file must have an htm or html file extension, andcan be created using a simple text editor

The following is a short example of what the html for a simple page might look like. When appearing in your browser, this page would look like this. 

<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>
 

You should note that all formatting takes place via use of tags. HTML tags such as <b> and </b> or <html> and </html> generally come in pairs and are wrapped around the text that you wish to have formatted in a particular way. For example, <b>HELLO </b> would make the word HELLO appears in boldface in your browser.

There are many different tags that one can learn to use, however, with a very small set you can create reasonably complex web pages. We will discuss a few important tags here, but for further information check out this online html tutorial.

HTML tags that everyone needs to know

  • <html> and </html> It is standard to wrap these two tags around your entire document. They serve to identify that your document is an html document.
  • <head> and </head> This tag is also a wrapper tag (like the previous tag). It will not cause any visible changes to your web page. However, it defines a special region which only certain other things should be placed. For now, you will just put the title in this space.
  • <title> and </title> Defines what will be viewable on the titlebar of the browser.
  • <body> and </body> This tag, like head, is another wrapper invisible tag. Most of the important tags you write will go within the region defined by the body. The body tag also gives you the ability to control things like the background color and other colors that might appear on your page.
  • <b> and </b> (also <i> and <tt>) Performs different types of formatting on the text it surrounds
  • <a> and </a> Creates a link on your web page. To link to another web page you must also provide the web address (called a URL) of the page to link to. This is done by adding the web address as follows
    • <a href="http://enter web address">add the text of your link</a>
  • <ul> and </ul> Create a bulleted list. Each item in the list should begin with the <li> tag.
  • <img src="name of image file"> Add an image to your web page.
  • <h1> adn </h1> Make a header in your document. There are different types of headers, and you can play around with changing h1 to h2, or h3 etc...

2.4 Create your own HTML file

Now with that brief introduction it is time to make your own web page. To begin, you first create a file in the storm server as follows:

  1. In OpenMail, find the button at the top that says WebDisk and click on it.
  2. There should be a listing of folders. Click on public_html. You must ALWAYS go into this folder in order to make web pages.
  3. To create a new file you first click inside OpenMail near the bottom that is labeled "DestinedName:" and type in the name of your file. What you call a file is very important and sometimes I will tell you exactly what I want you to call it. For you first page, call the file index.html
  4. Now click on the NewFile button that is just below the text field you typed the name into.
  5. The file called index.html should now appear in the listing of files (in fact it will probably be the only file there. We can edit the file by clicking on the [Edit] link just to the right of the file name.
  6. Note: It is possible to view the file by clicking on the name, HOWEVER, we do not want to do this as it may not show us everything we want to see. We will explain below how to view your file.

2.5 Editing and Previewing your own HTML file

So go ahead and click on the [Edit] button, an “Edit file” window will appears in which we can start to write our web page. You should type up what you would like your web page to look like using the html tags. A good way to get started is first to copy the above HTML file example, and make small changes each time.

You could get feeling about what your web page will look like by clicking on the “Preview” button at the bottom of the window. This way, you can try different tags with your HTML file, see how it looks and make more changes.

2.6 Saving and Viewing your HTML file

If you are done with the changes or need to stop for today, you could save the file by clicking on the “Save” button, and then opening a second browser window and typing into storm.cis.fordham.edu/~your_username. It should be noted that you can view your web page and use the OpenMail interfact anywhere that you have internet access.

2.7 Uploading files to your web page

Sometimes you will want to add other files to your web page, like images, that you are not going to create on your own. To put these on your web page you have to get the files into the public_html directory via the OpenMail interface. To do this you should:

  1. Go to the openmail interface and login, if you are not already there.
  2. Click on the button WebDisk
  3. Click on the folder public_html
  4. On the lower left, where it says upload, click on Browse and find the file that you want to add to your web page.
  5. Click the upload button.
  6. You have now added the file.
  7. If you have you index.html web page linked to that file (or image) then it should function on your web page now.

Your Assignment

Now here is what you need to have completed by the start of class one week from today.

  1. Create and publish a personal home page. Your page should contain
    • Information about yourself
      • Your name
      • Your email address
      • Your possible major
    • A title
    • At least one header
    • A picture
    • A bulleted list (maybe containing the name, location, time of the courses you are taking, or containing the list of your favorite artists, etc.)
    • At least three links to outside web sites.
    • A reasonable usage of text formatting on at least three occassions.
    • Some creativity

We will be continually expanding on this web page over the entire course. But feel free to spend as much time as you like on it now.

You should email me at xzhang@fordham.edu, including the URL (as described above) of your web page on the due date.