Programming Assignment 1
Fun with HTML Forms and Style Sheets

Due on Tuesday September 29 before midnight
Worth 3% of your final grade


This project must be done individually. No copying is permitted. The goal of this project is to learn HTML Forms and Style Sheets.

This project must be done individually. No copying is permitted. Note: We will use a system for detecting software plagiarism, called Moss, which is an automatic system for determining the similarity of programs. That is, your program will be compared with the programs of the other students in class as well as with the programs submitted in previous years. This program will find similarities even if you rename variables, move code, change code structure, etc.

Note that, if you use a Search Engine to find similar programs on the web, we will find these programs too. So don't do it because you will get caught and you will get an F in the course (this is cheating). Don't look for code to use for your project on the web or from other students (current or past). Just do your project alone using the help given in this project description and from your instructor and GTA only. Finally, you should not post your code nor deploy your project on a public web site.


You will do this project on your own PC/laptop on any platform. For this project (as well as for all class projects), you have to use the Mozilla Firefox web browser. If you do not have Firefox installed, you can install it from Firefox comes with Web Developer Tools for debugging HTML and JavaScript.


The following web pages contain various tutorials. Use them as a reference only. The class slides contain enough information on HTML and Styles Sheets.

Project Description

First, you need to download the file Right-click (or Control-click on Mac) on this link and select "Save Link As..." to download this file on your PC. Your project is to edit this file to include more HTML Form widgets that change the CSS properties of some text. You must use a plain text editor to edit this HTML file, such as Notepad, TextEdit, Emacs, etc. Do not use any HTML/web authoring system, such as Dreamweaver or FrontPage. Do not edit/add JavaScript code. Do not post your HTML file on a web server. Instead, you should let your browser download the HTML file as a local file (for example, using a URL that starts with file://, such as file:///C:/WINDOWS/proj1.html on Windows).

More specifically, you need to add at least 15 menu widgets in the HTML form to control various aspects of the text displayed below the form. These widgets can only be menus (ie, "select" widgets). Other widgets (checkbox, radio, etc) will not work. These form widgets must have names that are valid CSS element properties, such as font−family, while the selected value must be a valid value for this property, such as the value Helvetica for font−family. You must control various groups of CSS properties, such as for text, font, color, border, margins, etc. You must organize your form inputs in groups, for example, one for changing text properties, another one for changing font properties, etc, with headings and borderlines between them. In other words, your web page must look functional, well-organized, self-explained, and visually appealing.

What to Submit

Use the form below to submit your proj1.html file only. We do not accept email or hardcopy submissions. You may submit multiple files, if you like, as long as they have different names. These files are automatically uploaded directly into your personal class account for this particular project, so you don't have to include your name or student ID or project number in the file name. You may submit your files as many times as you like, but only the most recently submitted files will be retained and evaluated (newly submitted files replace the old files under the same file name). After you submit the files, please double-check that your submitted files are correct by clicking on the Status link and by displaying your submitted file on your browser. If you cannot login or have a problem submitting the project using this form, ask the GTA for help.

Submit Project #1:

Last modified: 09/15/2015 by Leonidas Fegaras