HTML Project

Web Page Project Instructions

Web Page Projects are due on the day of the final exam, not on the day of the PowerPoint presentations. The topic of each web page is your free choice, so long as the material is not illegal or offensive.

You must use basic text editing programs such as Notepad, TextEdit, Notepad/++, or Fraise to make the pages. You may not use any WYSIWYG programs, such as SeaMonkey/Composer, KompoZer, or Dreamweaver. I strongly advise against Aptana if you are using a Japanese-language computer. If the program you are using is not in the list above, then CHECK WITH ME to make sure the editor is OK.

Web pages can be on any topic you like . If you want, it can be the same topic as your research or PowerPoint projects.

In the Web Page Project, you must do the following:

  1. Create at least two web pages, which are connected by links (all pages should link to each other)
  2. Web pages must have backgrounds. One must have a background color, another must have a background image.
  3. There must be images on each page. At least two images per page, not counting the background image. Try not to have too many large images. DO NOT USE BMP IMAGES!! Only JPG (JPEG), GIF, and PNG are acceptable.
  4. Each image MUST be SMALLER than 100 KB in size. See me for help if you need to shrink an image. You can use free programs like Picasa, Gimp,, PhotoFiltre, FastStone Photo Converter/Resizer, or others to do this (Mac users: the "Preview" program Apple gave you is good enough for what you need). You can use other image editing software, if you have it.
  5. Have at least three links to outside web pages (not in your own web pages, or to those of classmates). You can link to other pages on the same topic, or to information pages (e.g., maps, recipes, specific data on your topic, etc.).
  6. Make a link to (our class' main web site).
  7. Use at least one table somewhere (for layout/formatting with a "0" border is fine).
  8. Use at least one list (ordered or unordered) somewhere (for layout/formatting with a "0" border is fine).
  9. Also, use at least one horizontal line somewhere.
  10. Extra credit: use CSS!
  11. Try your best to create a nice style! Use different text sizes, colors in text, tables and backgrounds, nice images, and so on. Don't be shy--try something interesting!!

IMPORTANT: Do NOT copy and paste ANY code from another source. The code must be your original work!

NOTE: You will be graded on EFFORT--do not simply follow the above instructions and make the minimum page. Make the page as interesting as you can, giving information about your topic.

REMEMBER: When creating a home page:

  • Before you begin, make sure your filename extensions are not hidden!
  • When you begin, create a special folder for the site.
  • Put ALL the images you will use into that folder, and save all web pages there. DO NOT USE PHOTOS WHICH ARE LOCATED IN A DIFFERENT FOLDER!!!
  • Open your text editor, and IMMEDIATELY save the blank page in that folder
  • Make sure the main page is titled "index.html" (other pages can take any name)
  • NEVER put a space or punctuation mark in the page or image filename
    (although a dash - or underscore _ is OK)
  • Do not use capital letters in the filename

Here is a short, incomplete list of errors many students make when they submit their projects. Before handing in the project, check to make sure you did not make these errors:

  • Large images -- many students include images bigger than 100 KB.
  • BMP images -- many students include BMPs, which are usually much more than 100 KB anyway.
  • Saving from the Browser -- many students open their web site in a browser, then use the browser to save the page. Do not do this!. Browsers save web pages in strange ways.
  • Filenames -- many projects have files that have names with capital letters, spaces, or symbols. Make sure that you get rid of these BEFORE you use them in your project. If you change them after you have finished your web pages, then you need to go into the HTML and change the filenames used in links or image commands.
  • Index File -- many students do not have a file named "index.html" in their project. It is necessary to have one.
  • Bad Formatting Style -- look in the html for the   code. If you see two or more of them together, erase the extras so there is only one. Make sure you use tables and/or alignment commands for formatting.

To make sure you are doing things correctly, READ THIS WORKSHEET!

Good luck!

Mr. Poza