CISC 105 Fall 2006 Lab06 Part 1

CISC105 Fall 2006 Lab06 Part 1

A Different Type of Lab

We've been writing a lot of programs and creating files. Now, it's time to kick things up a notch (bam). Every webpage you look at with a browser is a file you have downloaded to the computer you are using. 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 cisc105 directory. The public_html/cisc105 directory will store your CISC105 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 "CISC105 web page" goes into the folder "~/public_html/cisc105", and will be accessed with the URL http://udel.edu/~userid/cisc105. 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.

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 CISC105 web page). Otherwise, cd into your ~/public_html directory.

Use emacs 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/105/tharvey/07S/index.html">CISC105 class</a>. Right now it is pretty lame, but I hope to make it better later. </body> </html>

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 CISC105 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 CISC105 web page

cd into ~/public_html/cisc105. 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/cisc105 directory. Then, put a reference to the image in your CISC105 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/cisc105 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/cisc105.

Remember, this is only part one of the lab.

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