Laboratory: Make Your Own Web Site

CSC 105

The Digital Age

Spring 2009

Summary: In this laboratory, you will have the opportunity to design and develop your own Web site.

Contents

Exercise 0: Preparation
Exercise 1: Getting Started
Exercise 2: Get Creative!

Exercise 0: Preparation

I have made a basic html template page that you can use to get started. Please begin by copying it into your public_html directory with the following steps.

Open a terminal window, and then move to your public_html directory:
```
  cd public_html
```
Copy the template page into your current directory:
```
  cp ~weinmman/courses/CSC105/labs/index.html .
```
Make your copy of the file readable by everyone:
```
  chmod 644 index.html
```

Notice that the template Web page is named index.html. You will recall that the main page for your Web site should have this name. (If someone tries to view your Web page, but only specifies the directory it is in as the URL, then the web server will automatically look for a file named index.html.)

Exercise 1: Getting Started

Open the file index.html with the editor gedit:
```
  gedit index.html &
```
Find the "title" tags, and replace the title text with the correct title for your Web page. Recall that the "title" will appear on the tab icon if someone has multiple tabs open in their browser when they view your page.
Open a second tab on your browser, and use it to view your Web page. Recall that your Web page will have the following URL (where you replace username with your own username).
```
  http://www.cs.grinnell.edu/~username/
```
Open a third tab and use it to view the "HTML Demo" page that we generated in lecture. You can find it by surfing to the course Web page, and following the link to "HTML Demo."
Remember that you can view its html source by right-clicking on it and selecting View Page Source. You may find this useful for reminding yourself of various html tags that you would like to use.

Exercise 2: Get Creative!

Here is where you get to make your own Web site! Your site may be serious or goofy. It may be about you, an interest you have, or a pretend organization or interest.

Some last-minute tips...

Please keep in mind that your Web site will be completely public, and be sure that you only publish material you are comfortable with letting anyone see.
It is wise to avoid putting your exact email address on the Web. (This is a sure way to increase the amount of spam you get.) If you want to post your email address, there are various ways to modify it such that humans can read it, but computer programs searching for addresses might be fooled.
Please remember to scale any images you use to a size that can be downloaded quickly (say a maximum of 600 pixels on a side). Recall that you learned how to do this in a previous lab about digital images.
Any images you use must be free of copyright restrictions. One place to get such images is http://public-photo.net
Also remember to set the permissions on each of your Web pages (and images) such that everyone can read them. You can do this with the following command (where you replace 'webpage' with the name of your own html file).
```
   chmod 644 webpage.html
```

Your site should have at least the following items:

two Web pages that are related to one another
a link from your index.html page to your second page
one or more images
a list or a table

Other things you might like to do...

Set a background color or image for your pages.
Place images inside a table to arrange them in rows.
Post artwork you may have made in a previous lab.

If you have an idea of what you would like to do, but don't know how to do it in html, you can try some of these strategies:

Ask me or a colleague for help.
Find a Web page that does what you want to do, and view its page source.
Search for instructions on Google.

Written: Marge M. Coahran, February 2008
Revised: Jerod Weinman, 2 January 2009
Adopted from CSC105: Make Your Own Web Site