Due date is the beginning of your lecture section on Friday, 2/22.

This lab will introduce you to the computer science lab and to building simple webpages in Hyper-Text Markup Language (HTML).

This assignment covers the basics of HTML. You will use the TextWrangler application to create your own web pages on the computer science web server named www.cs.middlebury.edu. Others will be able to access the page using the URL http://www.cs.middlebury.edu/~username (or via the students page). Don't forget that all HTML files and images must be in your public_html folder!

You are encouraged to discuss the assignment with other students, but you must write your own code.

1. Add enough material to your home page (index.html) so that it includes the following: text in different sizes, font styles, and colors; five or more hyperlinks (e.g., to your favorite sites), including the CS 101 home page and your interests page (see next exercise); several more images, at least two of them local images in your public_html directory; and, one or more lists. You may find it useful to refer to the webmonkey HTML cheatsheet and this HTML color chart. By the way, here's an example of how to center text (use "left" or "right" to align to the left or right):
   
   <p align="center">
   All text in here will be centered.
   </p>
   
   
2. Create a new page for an interest or hobby of yours. You can name the file anything you want, e.g., skiing.html, but you should make sure that you create a separate file in your public_html directory. (Note: The file name should not include any spaces.) Add enough information so that your page can serve as a useful starting point for anyone interested in the topic you choose. It should include at least five hyperlinks, with short descriptions for each link, a few images or icons related to your topic, and a link back to your home page.

3. Challenge problem:
   Create the graphic on the right using no more than 8 (possibly nested) HTML tables, each having no more than 2 rows and 2 columns.

   Hints and notes:

   • Use the options "border=0 cellspacing=0 cellpadding=0" with the "table" tag to avoid spaces between table cells.
   • Use the options "width=... height=..." with the "table" or "td" tags to specify the size of tables or cells. The size can be given in pixels (e.g., width=100), or as a percentage of the surrounding space (e.g., height=30%).
   • Use the option "bgcolor=..." with the "td" tag to specify a cell's backgound color.
   • The entire graphic is 200x200 pixels large.
   • For full credit, all but one of the tables you use should have the exact same structure (i.e., identical HTML code).
   Create a new page to contain your graphic. Do NOT link to this page from your other pages.

4. Use the Homework 1 online submission form to electronically submit your work.

Back to Computer Science 101 Home