CS 1011
Creating A Simple Web Page
Final Lab, Due May 7th by 4pm (NO LATE LABS ALLOWED)


For this lab you will create a simple web page containing most of the basic HTML elements, including pictures, lists and hyperlinks. After completing this lab you will have become familiar with the HTML markup language, using FTP clients and setting file permissions in a UNIX environment.

What is a web page?

Web pages are text files. Pure and simple. All the fancy graphics, flash animations and movies one can view on the web are controlled, in fact, by a simple text document. This simplicity allows virtually anyone to create his or her own web site with relative ease.

Your web page must include five of these these elements:

Additionally, you web page must include the following

Accessing your UNIX account on bulldog

You will need to use your UNIX account to prepare for loading your website onto bulldog later on. To ensure that everything works correctly, follow these steps:
  1. From a Windows machine, choose "Connect to ub" or "Connect to bulldog" from the Start->Program Files->UMD Communications folder.
  2. A window will open and a 
    login:
    prompt will appear.
  3. Type in your user name and press 
    enter
  4. A 
    password:
    prompt will now appear
  5. Type in your password and press 
    enter
  6. If your username/password was correct you will be logged into the umenu system. If it was incorrect, you will be prompted for your login and password again.
  7. Chose the 
    u UNIX
    option from the umenu system
  8. You will be at a prompt that should look similar (but not exactly) to 
    bulldog3.d.umn.edu%
  9. Type 
    ls
    followed by enter at the command line.
  10. Look for a name "www" in the list of files
  11. If the file "www" does not exists, type the following sequence, followed by enter after each line
    mkdir www
    chmod 755 www
  12. Type 
    exit
    to leave the UNIX system

Your account is now ready to receive HTML files for your website.

Creating a HTML file

To create a web page we will use the NOTEPAD program. You can find this program under the Start->Program Files->Accessories menu. When you open the program, you should be presented with a blank page.

The Fundamental Parts of a Web Page

A web page has 3 main parts

All of your content, the items of a web page you see in a web browser are described within the BODY subsection, however both the HTML and HEAD section are required for a web browser to understand your web page properly.

Each of these sections are delimited by tags. A tag is some word enclosed within a set of brackets (<>). The tages for each of these sections are

The tags which start with the '/' character are called closing tags and let the web browser know when a section ends.

HTML Section

This is the first part of your web site and is required. In your blank document type 

<HTML>
</HTML>
Your web page is going to be defined by what you place between the starting and ending HTML tag.

HEAD and BODY Sections

Move your cursor to the left of the closing HTML tag and type 

<HEAD>
</HEAD>
<BODY>
</BODY>
Your document should now have the HEAD and BODY tags enclosed within the HTML tags. You have now created a bare minimum web page. If you upload this page to your school account and view it in a web browser you will see a blank page. Not very interesting.

Now you need to add content within the HEAD and BODY subsection. The various tags you will need to use are described in the section "HTML Tags" below. Once you have written your web page, you will need to save it to your data disk before uploading it.

A more detained reference to HTML tags may be found at www.htmlhelp.com/reference/html40/olist.html

Saving your web page

  1. Chose File->Save from the menu in NOTEPAD.
  2. Save the file with the name "index.html", without quotes. This is very important! The file must be named "index.html"
  3. Click save

Uploading your web page with FTP

Now that you have created your web page, you will need to upload it, along with any pictures, to your account on bulldog or ub. To do this, we will use the WS_FTP client which can be found on all lab machines. To upload your files, follow the following sequence.

  1. Open WS_FTP from Start->Program Files->UMD Communications
  2. Once the program launches, type "bulldog" into the host data field.
  3. Type your username and password into their respective data fields
  4. Click the "Connect" button in the lower left-hand corner
  5. If you do not connect, verify you have the correct host name, username and password entered
  6. Once your are connected, you will see all the files in your UNIX account appear in the right-hand window.
  7. Change to the "www" directory in your UNIX account by double-clicking the folder with that name. You may have to scroll the window to find it.
  8. Click the "ChgDir" button on the left-hand side to move to your data disk. (A:/)
  9. Now your HTML files and pictures should be listed in the left-hand window and the right-hand window should not have any files except for the ".." pseudo-file.
  10. One-by-one single-click on the files in the left window and then single click on the "->" button to transfer them over to your UNIX account.
  11. Repeat for all of your files.
  12. Click the "Close" button and exit WS_FTP
Congratulations! Your web site should now be functional. To view it, open a web browser and go to http://www.d.umn.edu/~username (where username is your login name). If everything has worked correctly, your web page should appear.

Printing your webpage

Once your webpage is visibly in the web browser, print out a copy and turn it in. The webpage should have 5 of 7 optional elements and all the required elements clearly visible. Make sure your name appears on the web page as well. Turn it in with a cover sheet as usual.

HTML Tags

These are the tags you will need to learn about to implement each of the options above.

Required Items For Your Web Page

A Sample HTML File

This is an absolute bare-bones HTML file. You may use it as a starting point or as a check against your own work. 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Click on this link to view a page which contains all of the elements we have talked about. You can see the HTML code by chosing Edit->View Source in you web browser.

Trouble-shooting

Q: I don't know what my "login name" is!

A: Your login name should be identical to your email name. The part before the '@' in @d.umn.edu is your username.

Q: I don't know what my password is!

A: Your password is the same one you use when checking your email. If you have never checked you email on the university system before, you will need to go to the Library and get a temporary password there.

Q: I get a message saying "Forbidden" and that I don't have permissions to access the file in my web browser when I try to access my webpage

A: You do not have your permission set correctly. Even though it is your file, when a web browser attempts to load it, the browser appears as "somebody else". To set the proper permissions, move to your web directory by typing 

cd ~/www

followed by a return on the UNIX command line. Now change the permissions on the file "index.html" by typing 

chmod 644 index.html

followed by a return.

Also, the directory "www" my have proper permissions set as well. If changing the permissions on the file "index.html" does not solve the problem, move to your home directory by typing 

cd

followed by a return in the UNIX command line. Now type 

chmod 755 www

followed by return. All you permissions should now be set properly.

Q: My webpage loads, but my pictures do not

A: First check that you have spelled the names of you pictures properly in your <IMG> tags. If they are misspelled, then the web browser will not be able to locate them.

Secondly, the permissions on the pictures may be incorrect. To fix this, follow the instructions above for setting correct permissions on the "index.html" file, but substitute your picture's filename for "index.html"

Alternately, you can set all the file permissions at the same time with only one command. First move to your web directory by typing 

cd ~/www

followed by a return on the UNIX command line. Now type 

chmod a+r *

followed by a return. This will give everybody permission to read all your files (but not delete them!) in the web directory. 

chmod a+r *
|   ||| |
|   ||| +- match all the files
|   ||+--- (r)ead permission
|   |+---- add this permission to the files
|   +----- grant to (a)ll users
+--------- (ch)ange the (mod)ification flags

Q: Only part of my webpage shows up and I know I've typed everything in!

A: Make sure that you have closed all of your brackets. Every '<' must have a matching '>'. Also, some tags require a closing tag (which is different than closing brackets). for instance, the Bold tag, <B>, needs a closing tag, </B>, to know when to turn off bold text. Every closing tag is the same as the opening tag except with the character '/' prepended.

Check the online HTML guide to check if your tags require a closing tag.

Official HTML 4.01 specification:
http://www.w3.org/TR/html401/

Quick List of web tags:
http://www.htmlhelp.com/reference/html40/olist.html