CS 101 Homework 1
An Introduction to HTML
To demonstrate the use of the lab computers,
and to build simple webpages in HTML.
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
Don't forget that all HTML files and images must be in your
You are encouraged to discuss the assignment with other
students, but you must write your own code.
- 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
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):
All text in here will be centered.
- 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.
- 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:
Create a new page to contain your graphic. Do NOT link to this page
from your other pages.
- 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
- 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).
online submission form to electronically submit your work.
Back to Computer Science 101 Home