Laboratory: Make Your Own Web Site

CSC 105 - The Digital Age

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

If you have not already created your public_html directory in the previous lab (because you did it with someone else on their account), please go to the previous lab and complete steps 8 and 9.

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 ~weinman/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 (HTML) pages that are related to one another
a link from your index.html page to your second page
a list or a table
one or more images

If you did not create images on your web page, you must make sure you have permission and cite the source.

One source of permissible images is the Creative Commons section of Flickr. To find it, use advanced search and limit your search to Creative Commons images. Look here for more information about Creative Commons licenses.

Other options include Public Domain Photos, or searching Google Images using the "Advanced Search" feature for images with appropriate usage rights.

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.
Examine the list of HTML Tags

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

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License .