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.

1. Open a terminal window, and then move to your public_html directory:

   cd public_html

2. Copy the template page into your current directory:

   cp ~weinman/courses/CSC105/labs/index.html ./

3. Make your copy of the file readable by everyone, but writeable only by you:

     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

1. Open the file index.html with the editor gedit:

     gedit index.html &

2. Find the <title> tags, and replace the title text with the whatever title you wish 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.
3. 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/

4. 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.

5. Open a fourth tab and navigate to the W3C (World Wide Web Consortium) Markup Validation Service. Enter the URL for your web page and click "Check."

   By leaving this tab open, you will be able to click "Reload" to regularly verify you have written valid HTML.

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.

Requirements

• 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

Using Images

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

Here are some ways to find permissible images:

• Public Domain Photos provides "free photography for commercial use."
• Another source 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.
  
• You may also search Google Images using the "Advanced Search" feature to find images that are free to use and share.

To cite the source of an image, give a link to the original source and the name of the creator, if known, in the text of your Web page.

Other 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.
• 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

• The World Wide Web Consortium (W3C) provides a convenient HTML validator you can use to verify (or debug) whether your HTML is correct. In addition, Iceweasel/Firefox/Mozilla has a developer mode that can also help you see how things are being interpreted. Use the Tools pull down menu, find the Web Tools option, choose either Inspector or Debugger and explore.
• If you prefer your web page to only be accessible from computers on campus, you may copy the following configuration file to your public_html directory:

    cp ~weinman/courses/CSC105/labs/.htaccess ~username/public_html/

Other Ideas

• 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.

• 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
• Try the primer A Beginner's guide to HTML, a very old but still accurate guide written by Marc Andreessen, co-author of the first web browser and founder of Netscape.
• Read a more in-depth tutorial

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

Copyright © 2009-2014 Marge Coahran, Jerod Weinman, and Janet Davis.
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License .