CS 1011
Introduction to Computers and Software

Lab 12

Creating a Simple Web Page

Due: Wednesday, May 7th

40 points

 

Creating a Simple Web Page

For this lab you will create a simple web page containing basic HTML elements, including pictures, lists and hyperlinks. The goal for this lab is for you to become familiar with the HTML markup language.

What is a web page?

Web pages are text files. 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.

Required Elements:

Your Web page must include all of these these elements:

Additionally, your web page must include the following

For extra credit (5 points), you can include a table with at least three rows and two columns. Every cell in the table must have content.

Accessing your UNIX account on bulldog

You will need to use your UNIX account to prepare for loading your website onto ub or 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 your login was incorrect, you will be prompted for your login and password again. So, repeat steps 2 through 5.
  7. Chose the 
    u UNIX
    option from the umenu system by pressing u on the keyboard, then press enter.
  8. You will be at a prompt that should look similar (but not necessarily exactly) to 
    bulldog3.d.umn.edu%
  9. Type 
    cd www
    and press enter to change from your home directory to your Web directory.
  10. Then type 
    ls
    and press enter to see what files are contained in your Web directory.
  11. When you are finished, type 
    exit
    and press enter to leave the UNIX system.

Your account is now ready to receive HTML and image files for your website. You will need to repeat these steps later on, so remember where you saw them.

Creating a HTML file

To create a web page we will use the simple text editor NOTEPAD. 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 the content in a web page is 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 square brackets (<>). The tags 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>

These tags denote the beginning and end of the HTML file. All the content for the web page goes between these two html tags, including both the head and body subsections.

head and body Subsections

Every web page contains head and body subsection. The head section defines variables and elements of the web page which do not appear in the page. The body section contains elements that will appear in the web page.

Type the following between the two html tags.

<head>
</head>
<body>
</body>

Your document should now have the head and body tags enclosed within the html tags. Like this:

<html>
<head>
</head>
<body>
</body>
</html>

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 would see a blank page. Not very interesting.

Now you need to add content within the head and body subsections. The various tags you will need to use are described in the section "HTML Tag Reference" below.

A detailed HTML tag reference may be found at http://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. This file name is very important! (Don't include the second period that indicates the end of the sentence.)
  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 text box.
  3. Type your username and password into their respectively labeled text boxes.
  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 visible in the web browser, print out a copy. The webpage should have all 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 Tag Reference

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

Title
The title tag, 
<title>Your title</title>
. The title tags can only appear within the head subsection, all other tags must appear within the body subsection. This tag puts a title for your Web page in the title bar of the browser.
Images
The image tag, 
<img src="filename">
to add a picture to your web page.
Links
The anchor tag, 
<a href="web address">link text</a>
adds a link to the website web address where the clickable content is link text. Note that link text could be an image.
Lists
The unordered and ordered list tags, Allows you to create a bulleted list or a numbered list of items. You start with <ul> or <ol> and then list each of the items you want to appear in the text. To get a new bullet or number you add the list item tag 
<li>
followed by the text you want to go with that tag. The list item tag does not need a closing tag, but you can include one for completeness. Once you are done with the list you add the appropriate ending tag (either </ul> or </ol> matching what you started the list with).
Align
The divide tag can be used to align the following items to the left 
<div align="left">
right 
<div align="right">
or center 
<div align="center">
Headers
The header tags, 
<hn>your text</hn>
where n is 1, 2, 3, 4, 5 or 6 creates a section header. The closer the number is to 1, the larger the text will be.
Horizontal Rules
The horizontal rule tag, 
<hr>
draws a horizontal line across the page (see the top of this document).
Colors
Use the font tag to change the attributes of the text. Simply use 
<font color="#colorCode">your colored text</font>
to color the text "your colored text". colorCode must be a six digit hexadecimal number specifying the amount of red, green, and blue in the color you want. Here is a page that shows the codes for several colors.

Required Items For Your Web Page

  1. Your name and class name
  2. Just include your name and the class name as regular text within the page. No special formatting or use of HTML tags is needed for this part.
  3. Title
  4. You should set up an appropriate title tag, 
    <title>your page title</title>
    where your page title should be appropriate for your web page. Remember, this tag goes in the head section of your Web page.
  5. Email
  6. Use the anchor tag as described above, but use the form mailto:somebody@somewhere.edu for "web address".

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 choosing View->Source or View->Page 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 <your_name>@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 file permissions 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, you must be logged in to your UNIX account. See instructions above. Once logged in, and at the UNIX command prompt, move to your web directory by typing

cd ~/www

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

chmod 644 index.html

followed by enter.

Q: My webpage loads, but my pictures do not

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

Second, 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 (if you are not already there) by typing

cd ~/www

followed by enter. Now type

chmod 644 *

followed by enter. This will give everybody permission to read (but not to change nor delete!) all of the files in your web directory.

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 a closing bracket). for instance, the Bold tag, <strong>, needs a closing tag, </strong>, 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

Last modified: Fri Dec 27 00:08:07 CST 2002