CISC106 Fall 2008 Lab07

A Different Type of Lab

We've been writing a lot of programs and creating files. Every webpage you look at with a browser is a file you have downloaded to the computer you are using. The world-wide-web is nothing but these collection (and the sharing) of files created by, essentially, the world. This is a very powerful idea.

We will create files using a text "markup" language called html so that we can have them look nice in a web browser. You will be given a template in html; all you have to do is change it slightly.

Creating your own web pages

A directory named ~/public_html is special to software looking for web pages. Any and all files that you put into this directory can become available on your web page. (If your user id is foobar, your web page is http://udel.edu/~foobar). If the web browser finds a file there called index.html, it automatically displays that file.

To see if you have this directory, change your working directory to your home directory and then see if the directory "public_html" is listed. If you don't have the directory already, create the public_html directory.

Go into the public_html directory and create a cisc106 directory. The public_html/cisc106 directory will store your CISC106 web page. In a later step in this lab, you will create a personal web page (if you don't already have one) AND a web page specifically for this course.

The files for your personal web page go into the directory "~/public_html", and will be accessed via the URL http://udel.edu/~userid (where userid is your UDelNet ID).

The "CISC106 web page" goes into the folder "~/public_html/cisc106", and will be accessed with the URL http://udel.edu/~userid/cisc106. You can use this same technique to create as many web pages as you like under your main web page, just by creating new subdirectories to store the content. Only limitation (if you were to put lots of images and movies), would be your available disk space for this directory.

Creating a personal web page

If you already have a personal web page on strauss (one that comes up when you type http://udel.edu/~userid, where userid is your UDelNet ID), then skip to the next goal (creating your CISC106 web page). Otherwise, cd into your ~/public_html directory.

Use pine to create a file in that special directory. The file must be named "index.html". The contents of that file should be something like the following:

<html>

  <head>

    <title>Sara Sample's Web page</title>

  </head>

  <body>

    <h1>Sara Sample's Web page</h1>

    I had to do this <b>web page</b> for my <a

   href="http://www.udel.edu/CIS/106/chandrak/08F/index.html">CISC106 class</a>.

   Its always under Construction!!

  </body>

</html>

3. Here's what that looks like once it is formatted by a web browser:

Sara Sample's web page

I had to do this web page for my CISC106 class. Right now it is pretty lame, but I hope to make it better later.

After you save the file, you need to type in the following command:

chmod a+rx ~/public_html/*

The chmod command makes files and directories in your public_html directory accessible to all users on strauss, as well as all users on the World Wide Web. You need to repeat this command each time you add new files under public_html that you want users of the Web to be able to access. NOTE: it only fixes the permissions of the files in this directory! If you have a subdirectory, you need to execute the command there.

More details:The asterisk in the above command matches every file name in the public_html directory. You can also use chmod on individual files and directories by replacing the asterisk with a single name. You need to repeat this command each time you add new files under public_html that you want users of the Web to be able to access. chmod is short for "change mode", where the "mode" of a file is the part that specifies who can edit/read/execute the file. To see file modes, use the shell command "ls -al".

To see that it works, type into a web browser:

http://copland.udel.edu/~userid

If it doesn't come up, make sure you set all your file permissions correctly. The most common problem is not changing permissions correctly. If you try that again, and it still doesn't work, check with your TA or with a classmate for help. Be sure to understand how to use the chmod command on both files and directory names.

Creating a CISC106 web page

cd into ~/public_html/cisc106. Now, create an index.html file in this directory containing html code similar to the personal page. (Yes, that is two different files with the same name, but they are in different directories so it's ok.)
Now, add an image to your web page. Find an image on the Web (or from wherever you want; I put two .jpg pictures in the labs directory that you can use until you find something better) and copy it into your public_html/cisc106 directory. Then, put a reference to the image in your CISC106 Web page, using the HTML tag <img src="imagename.jpg">, where "imagename.jpg" is the (case-sensitive) name of your file. The browser will then include the pic in your page. If the picture doesn't show, check the file name, directory, and permissions.
After you have created the index.html file and/or copied your image file into your public_html/cisc106 subdirectory, you may need to repeat the chmod command to get the web page to come up when you use the URL http://udel.edu/~jsample/cisc106.

Adopted from Terry Harvey. Parts of this lab were borrowed from Phill Conrad with permission.