CIT CS Workshop: June 2001

Lab 2

Computer Science Department

Lab Assignment 2

The purpose of this assignment is to introduce you to HTML; Hopefully, some of you had time to look at Web page HTML source code at the end of Lab yesterday; For those of you who did not, here's a page that demonstrates a number of HTML features; When you click on View/PageSource for this page; you can see the underlying HTML file that creates this page
Instructions

Reviewing what you learned yesterday:

Log into one of the HP machines, just as you did yesterday

Open a Terminal Window

List the files in your directory using ls

Now type ls -l for a long listing
Notice that this style of ls provides the size and
the creation/modification date of the files

Removing or deleting files:

If you still have more than one Poem file in your directory,
delete one of them by typing rm Poem2
where Poem2 represents the name of the extra poem file
If you called the second poem file verse,
you would want to type rm verse
instead

A safer way to remove the file would be
to add the interactive option to the command
e.g. rm -i Poem2
(for remove) where the i stands for interactive
This means that the system asks you if you are sure
that you wish to delete the file
before actually deleting the file
Just type y for yes and n for no

Follow this by an ls command to be sure the file is gone

Preparing a directory for HTML:

Now you need to set up a new subdirectory (or folder) for your HTML files
By convention for all Unix systems,
your HTML files should be in a subdirectory named public_html

To create this new subdirectory, type mkdir public_html
(for make directory)

To double-check that the new directory is there,
do another ls -l command

Notice that there is a d at the beginning of the line describing public_html
This is for directory

Adjusting permissions for a HTML directory:

Part of the purpose of creating your own Web pages
is to allow other people to see them
In order to have Unix HTML pages accessible to all,
special permissions need to be set on both the files and the directory

To set up the correct permissions for your HTML directory, type chmod 711 public_html
(for change permission mode)
This opens the directory to all users
without allowing them to list the contents of that directory

Now type another ls -l command
Notice that the first ten characters on the public_html line
are drwx--x--x
This means that this directory can be read from
written to, and executed by you, the owner
However, other people can only execute the directory

Creating a basic HTML page:

Again by Unix convention,
the home page in your HTML directory
is assumed to be a file named index.html

So you need to create a new file of this name

Click on the HP CDE editor and start a new file

Put in the <HTML> tags
at the beginning and end of the file
Remember that the ending tag must include a slash (/)

Insert the <HEAD> tags between them

Follow the <HEAD> tags by the <BODY> tags

Save the file as public_html/index.html

Making your Web page readable:

Your new Web page contains nothing but structure
however, you would still like to bring it up on your browser

To do so, you need to adjust the file permissions
to make them world-readable

First get into your HTML directory cd public_html
(for change directory)

If you now type pwd
you'll find your working directory is your HTML directory

If you type ls -l,
you'll find only one file in that directory
namely, index.html

To fix the permissions for this file, type chmod 644 index.html

Now when you type ls -l,
you should see that you have read/write permissions (rw-)
but others can only read the file
-rw-r--r--

Viewing your Web Page:

Open your browser
(See Lab 1 notes if you can't remember how)

Click on File
Then click on Open Page

Type in http://www.cs.colostate.edu/~yourLoginName/
which should bring up your empty Web page

Adding stuff to your Web Page:

Go back to the editor and open index.html

Add TITLE tags between the two HEAD tags
Name the title what you would want to show up
when this page is bookmarked

Between the BODY tags, add other information
See the sample page for ideas

Re-save the file

Click on Reload (or Refresh) on your browser
to view the modified page

Repeat these last five steps (a. through e.) several times
until you are reasonably happy with your Web page appearance

Adding clip art to your Web Page:

First you need to find some clip art

Check out the following Web sites
http://www.nzwwa.com/mirror/clipart/
http://www.clip-art-center.com/
http://www.clipart.co.uk/ Many other sites exist as well

Download whatever images you want
into your public_html directory

Be sure to make the permissions for each of these
the same as the permissions for index.html

In order to incorporate these into your page,
use an IMG tag
with the SRC equal to the name of the clip art file
e.g. <IMG SRC="newClipArt.jpeg">

Re-save your index.html file

Click on Reload (or Refresh) on your browser
to view the modified page

Changing font color and size:

There is a FONT tag
that can change the size and/or color of a line or more of text

For example, add the following lines <FONT COLOR=RED> This line contains red text </FONT>
to your index.html file
Re-save it and re-view it to see what happens

Try other colors as well, such as DARKGREEN

Also to change the font size, add the following lines <FONT SIZE=+2> This line contains larger text </FONT>
to your index.html file
Re-save it and re-view it to see what happens

Try other sizes as well, such as -2 or +5

Changing the background of your Web Page:

The background color of your page can be set using the BODY tag
e.g. <BODY BGCOLOR=YELLOW>

Or you can put an image as your Web page background
e.g. <BODY BACKGROUND="http://www.cs.colostate.edu/workshop/Figures/csucs.gif">

Try one or both of these
Continue to edit your Web page until you are satisfied with it