Tic-Tac-Toe

Directions

Create a Tic-Tac-Toe board that will allow two players to compete.

  1. Create a new folder in your assignments folder called tictactoe.
  2. Inside this folder, create a new file called index.html.
    1. Create a frameset modeled after the example at the bottom.
    2. Link the top pane to head.html and the left pane to dirs.html.
    3. Link each of the nine square panes to blank.html.
    4. Make each of the panes not resizeable and not scrolling.
    5. Make the borders around the nine square panes 8 pixels wide and the color of the example.
  3. Create head.html.
    1. Add a level-1 header with the text “Tic-Tac-Toe”.
    2. Match the colors to the ones shown in the example.
  4. Create dirs.html.
    1. Add the text and use formatting as shown in the example
  5. Create a subfolder called images.
  6. Save each of these images in the folder: blank.gif, x.gif, o.gif.
  7. Create blank.html.
    1. Make an imageimages/x.gif link to x.html so that when the user clicks, the ‘X’ page is loaded.
    2. Center the image blank.gif (be sure to specify the path to your images folder).
  8. Create x.html.
    1. Make an image link to o.html so that when the user clicks, the ‘O’ page is loaded.
    2. Center the image x.gif (be sure to specify the path to your images folder).
  9. Create o.html.
    1. Make an image link to blank.html so that when the user clicks, the blank page is loaded.
    2. Center the image o.gif (be sure to specify the path to your images folder).
  10. Test your page to make sure it is working.
  11. Raise your hand and ask your teacher to grade your assignment on screen.

Example