Description
Part 1
For the first part of this assignment, you are expected to create a simple web site, using only HTML. There
is no CSS or JavaScript required or allowed for this assignment. We’ll make this assignment look much
nicer in a future assignment. The general requirements are outlined below, and the specifics will be
described in the text that follows.
You are expected to choose a sport or game that you like to play or watch, and create a simple
website about that sport or game. Your website should provide useful information about people
new to the sport/game or new to the area, in finding more about local participants. Each of the
three pages should provide links to each other page.
The web site will consist of three HTML files:
1. Main Page
This page will contain information about the game or sport, including a (brief) description of its rules
and a brief description of its history (however, historical accuracy is not a requirement). Use
headings to separate sections of the web page appropriately (e.g. “Overview”, “Rules”, and
“History”). You should also include a list of relevant pages, where someone could explore to find
out more information about your sport or game.
2. Schedule
This page will use an HTML table to display a monthly calendar for some month (choose any month
that has relevant events), which shows some important events in your game or sport. If you
choose a sport that is not televised or played locally, you can make up some events, use events
happening far away, or even use your own personal plans to play as events. The calendar should
show all days of the month, using a table with 7 days per week, and each week shown as a row in
the table. Include table headers to label the month, and days of the week. Also include the day of
month either in the cell itself (with the events), or as a cell immediately above the events.
3. Comments
This page will be used by your users to submit comments, at a later time. For now, simply include
two sample comments, followed by a form to submit a comment of your own. The form will not be
functional, but should look correct otherwise. The form should include text fields for the date,
author name, title, and a multi-line text area for the comment text.
Part 2
Overview
This assignment asks you to create style and layout, using CSS, for the web pages that
you have created in part 1. Use figure 1 as a guide when styling the document.
Figure 1: The main page, with styling applied
Header
Each page should have a header section (using
from assignment #1 is acceptable) and a title. The title should be in white 24pt font,
centred vertically beside the image. The background of the whole header should be a
dark blue (e.g. #000070). Use the CSS class ‘pageHeader’ for this styling.
Navigation Bar
Each page should have a link to all three pages. The easiest way to do this is to include a
list (e.g.
- with one
- for each link, each containing an tag). This whole list will
be inside its owntag also. Use CSS to ensure that the list items are printed without
a bullet icon, and are drawn horizontally. Change the font of the links so that there is no
2
underline, and it uses bold, light blue (e.g. #f0f0ff) text. Use the CSS class ‘navigation’ for
this styling.
Main Page and Comments Page
The original main page had three sections (Overview, Rules, and History). Now, each of
these sections should be in their own window-like box. The same should be done for
comments (and the comments form) in the comments page. Put each of the three sections into a, and wrap both the header (in a div with class ‘header’) and the text (in
a div with class ‘body’) intags.
The header should use white text on a dark background. Use 0.2 times the height of a
capital M as padding around the text inside the header, except for the left side which
should use a whole capital M worth of spacing (hint: padding-left).
The body should be surrounded in a single-pixel, solid, dark blue (e.g. #000070) border.
Its background colour should be a very light blue (e.g. #f0f0ff). Around all of the text
should be padding equal to the size of a capital M.
Here is the tricky part. Between the header and body, there should be no vertical blank
space. See figure 1 for details. The trick here is to set certain margins to zero. Careful!
When using zero for a width or height value, don’t use 0px, just use 0. Browsers often ignore values such as 0px, but work properly for just 0.
Schedule
Modify the schedule table so that the table has a single-pixel, solid dark blue (e.g.
#000070) border, instead of the default outset border. Set the width of the table to be
100% of the width of its container. If you have no container, 100% of the body width
is also acceptable.
Note: Do not focus too much on the content for these pages. Just put anything in to fill
the space. The key is to understand HTML, not to demonstrate your knowledge of Bocci
ball, Go, or ultimate Frisbee.
Part 3
Overview
In this part of the assignment, you will create a simple, interactive tic tac toe game for two players playing
from the same browser.
HTML
You will create a simple 3×3 HTML table for the game board, as well as a DIV for messages to the players.
CSS
The CSS will style the table so that it has borders matching a typical tic tac toe board, as shown below. You
will also create a CSS class for the Xs and Os, so that they appear very large (to make it easier for people
to play).
X O X
O O X
O X X
Figure 2: The game board
JavaScript
The JavaScript will control the game logic. Players will alternate turns, starting with X. You should display
a message letting the users know which player’s turn it is. After each move, check if the game is done by
checking for a row of the same symbol (all Xs or all Os), columns of the same symbol, or a diagonal with
the same symbol. If the game is over, display a congratulatory message to the winning player and prevent
any further moves. Most of your game’s logic will occur in the click handler for the TD cells of the game
board table.
4
How to Submit
To submit this assignment, you should collect all HTML, CSS, JavaScript files (along with any other files
required to view and interact with these web pages, e.g. images), and compress them into a single ZIP file
(e.g. RandyFortier_100539147_Assignment1.zip). This ZIP file should be uploaded to the Assignment #1
drop box on Blackboard.
Note: As I am primarily a Linux/OS-X user, I don’t want you to use WinRAR, 7z, etc. formats. If you want a
free program that can create ZIP files, check out 7-Zip (it can generate both .zip and .7z files, but .zip is
what you need to use for this course): http://www.7-zip.org/download.html.
