Lab 6: Build your own website

What we are doing: using the basic html you learned in the last lab to build a personal website.

Why we are doing it: to practice tinkering and troubleshooting and to give you a better understanding of what goes in to make a website.

Contents hide
Preparation
Getting Started
Get creative
Using Images
Other Tips
Other Ideas
Changing the background color in Twine
Reflection
Acknowledgements

Preparation

If you are still unable to see your web page from last time at http://www.cs.grinnell.edu/~yourusername/sample-html-page.html, please run through these two commands first, before starting anything:

chmod 711 /home/username

chmod 755 /home/username/public_html

There is 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 ~rodrigue8/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. 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.)

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

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.

At the end of the lab today, please email me a link to your new site, which 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 (sample-html-page.html OR a new page you create)
  • a list or a table
  • one or more images

Your site should also respect the College’s Academic Computer Usage policies.

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 more ways to find permissible images:

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. When you are in the public_html directory, You can do this with the following command (where you replace ‘webpage’ with the name of your own HTML file). 
       chmod 644 webpage.html
  • 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

There may be 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.
  • Experiment with an internal CSS style sheet.

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

Changing the background color in Twine

You can use CSS, a mark up language used to style HTML (style meaning change its appearance), to change the background color of your Twine passages.

Open one of your Twine stories in twinery.org.

In the lefthand corner, click on the title of your story. A set of options should pop up. Click “Edit Story Stylesheet.”

Add the following code to the stylesheet:

tw-story {
background-color: turquoise;
color: Black;
font: medium "Times New Roman", Times, serif;
padding: 8px;
}

Close and play your story. Can you figure out how to use this basic code to change the background color to a different color, to change the font?

Reflection

At the end of class today, please email me a link to your new site.

We will spend the last fifteen minutes of class reflecting on your experience in these labs on HTML (a free write followed by discussion). Some questions to get you started might be:

  • What did you notice?
  • What was new to you?
  • What connections did you see to things we have talked about in class?
  • What was one thing you taught yourself, and how did it feel?
  • What was one time you were frustrated, and how did you proceed from there?

Acknowledgements

Written: Marge M. Coahran, February 2008
Revised: Jerod Weinman, 2 January 2009
Revised: Jerod Weinman, 23 February 2011
Revised: Jerod Weinman 14 February 2014
Revised: Jerod Weinman 19 February 2014

Revised: Liz Rodrigues 20 February 2019
Adopted from CSC105: Make Your Own Web Site