COMP 2405 Assignment 1

This assignment involves the creation of some HTML pages. You are forbidden to use any HTML editor for this assignment. You should do the entire thing by editing HTML files using a text editor.

General Requirements

For full marks, all your web pages and CSS code must validate correctly and all your formatting should be done using CSS, either inline or (in Part 2) as a separate file. You will lose marks for putting (too much) formatting into your HTML. In particular, you should avoid using anything other than the class, id, name, value, and href attributes.

Note that Part 4 of this assignment is the beginning of the web application that we will be developing throughout this course. Please give yourself plenty of time to complete it fully so that you get full marks. If you don't finish it for this assignment you will have to finish it later (for no marks).

Finally, you should be aware that this assignment, and all others, will be snarfed from your account precisely at the time of the assignment deadline and moved into the TA's account. This has two consequences: (1) any modifications you make after the deadline will not be seen by the TA marking your assignment and (2) all hyperlinks and references within your documents must be relative so that they continue to work even after the assignment has been moved to the TA's account.

Placement of Assignment Files

All the files you create for this assignment should be in the directory ~user/public_html/XXXXXX/assn1 and its subdirectories. Here user is replaced with your username and XXXXXX is the secret subdirectory that was created when your account was created. This directory should contain a file called index.html that contains links to the different parts of the assignment.

The questions

  1. [2 marks] The accounts listed here have been created on the machine iap.scs.carleton.ca. If your name is not listed then you are not on the class list. You can still get an account by sending me an email, but you should make sure you are indeed registered.

    You can login to the machine using an ssh client such as OpenSsh or putty. Your initial password is your student number. On your first login, must change your password using the passwd command.

    You can transfer files to and from your account using scp (open-ssh), pscp (putty), or WinSCP.

  2. [10 marks] For the first part of the assignment, you will make a single webpage that contains a short biography about one of the Internet pioneers described in Hobbes' Internet Timeline. This page should have
    1. A photograph of the person and their last known address
    2. A brief biography that includes subsections on Education, Employment History and any other relevant information
    3. A list of awards and/or distinctions earned by this person.
    4. A list of this person's contributions to the development of the Internet.
    5. A list of relevant references, including any RFPs, standards, papers, or books authored by this person that are relevant to the discussion. If possible, this should include links to online materials.

    Each of the above items should be a level-1 heading and there should be a navigation bar that allows you to jump from the top of the page to any of these sections. All of this should be implemented in HTML/CSS without using tables. The design, layout and color scheme of the page is left up to you, but you should apply all the CRAP principles and choose a good color scheme (the browswer default is fine).

    For this part of this assignment, I don't care if you plagiarize portions of text from online sources. However, in the references section you must state clearly where the material comes from and provide links to the original sources.

  3. [10 marks] For the second part of the assignment, you will make a web site out of the book The Adventures of Sherlock Holmes.
    1. The book is divided into 12 adventures. Each adventure should become its own web page (file).
    2. At the top of each adventure (webpage) and at the bottom of each adventure you will place a menu for jumping to any of the other adventures. This menu will also have an item entitled "about" (see item (d), below).
    3. Each adventure has several chapters Each chapter number should be a first level heading.
    4. The design, layout and color scheme of the pages is left up to you, but you should apply all the CRAP principles. In a separate document, which is available from the "about" menu item you should give a short discussion describing how each of the 4 CRAP principles have been used in your design. This page should also adhere to the CRAP principles.

    Like a lot of web site projects, this part of the assignment involves a lot of tedious work. There is no reason you can not use your text editor and command-line tools to help do this work for you. Use this part of the assignment to get yourself acquainted with working in this environment. If you really can't stand working in this environment, make your pages locally and use scp to copy them to your account on the server.

  4. [10 marks] For this part of the assignment you will build an HTML form that contains all the information available on a page of a skydiver's log book.
    1. Jump number (jumpnum) is a text field in which the user enters a number number
    2. Date (date) is a text field in which the user enters a date
    3. Time (time) is a text field in which the user enters a time
    4. Dropzone (dropzone) is a text field in which the user enters a location
    5. Aircraft (aircraft) is a text field in which the user enters the type of aircraft
    6. Exit Altitude (exitalt) is a text field in which the user enters their exit altitude in meters
    7. Deploy Altitude (deployalt) is a text field in which the user enters their deploy (open parachute) altitude in meters
    8. Freefall time - minutes (ffminutes) is a drop down menu from which the user can select a number between 0 and 5
    9. Freefall time - seconds (ffseconds) is a drop down menu from which the user can select a number between 0 and 59
    10. Manoeuvres (manoeuvres) is a text field in which the user enters any manoeuvres performed during the dive
    11. Other jumpers (otherjumpers) is a text field in which the user can enter names of other jumpers
    12. Comments (comments) is a text area in which the user can enter freeform comments
    13. Signature (signature) is a text field in which the user can enter the name of an instructor
    14. When the form is submitted, the data entered in the form is posted to http://cg.scs.carleton.ca/~morin/cgi-bin/test-cgi.pl.
    The layout of the form is up to you. However, your design should adhere to the CRAP principles. In particular, make careful use of proximity and spacing so that related parts of the form are close together. If it helps, you may use HTML tables to do this, but use CSS to handle the table formatting.