Web Project, Part 1
— print (last updated: Sep 30, 2009) — print

1. The software tool you use should not be a WYSIWYG too; you must create the project from "code mode" using something like HTML-Kit.
2. The pages should have both text and graphical images in some attractive way.
3. One or more pages should make significant usage of tables for layout and presentation.
4. The pages must make significant usage of style rules.
5. The pages must utilize some navigational scheme whereby all (or at least 3) pages are mutually linked.
6. The name of the "main" page in your website should be index.html or index.htm.
7. The final product must be published on — i.e., uploaded to — the roadrunner server, where an account has been made available to you for this course (see below).

Due date

Friday, November 6

Additional features

1. Incorporate a variety of different HTML elements such as paragraphs, headers, style elements.
2. There should be some consistency among the pages in terms of layout style, logo images, color schemes, font choices, etc. Do not make every page of a different appearance.

   Try to use a stylesheet to incorporate common style features of the various pages (this will be required in the next part).

3. Images should be placed in subfolder(s) (at least one), separate from HTML documents. Keep track of the image sizes (see below).
4. Avoid deprecated features which have effective style replacements. Here are some examples:
   • Avoid the font element. If you want to change the font, learn to do it with a span element and style properties.
   • Avoid the text attribute; use the color style property instead.
   • Avoid the bgcolor attribute; use the background-color style property instead
   • Avoid the background attribute; use the background-image style property instead.
   • Avoid the size attribute for changing font size; use the font-size style property instead.
   • Avoid the align attribute, except for table tr or td elements.
     To align text and images within blocks, use the text-align style property.
5. For aligning block elements within other block elements, it is OK to use the deprecated align attribute or center element, since style properties don't succeed very well in this regard.
   For aligning text and images within block elements, use the text-align style property.
6. Make sure that your site renders equally well using both Internet Explorer and Firefox browsers.

Graphical Images

1. An image can be "too big" in terms of dimensions. Ask yourself what purpose the image serves. Are you making it so big just to fill up space? If so, reduce the size and rearrange things.
2. For the most part, the the width and height of the image element

   <img src="..." width="..." height="..." />
   

   should be set to the actual pixel size of the image. If you use these attributes to change the visible size, then you should really should resize the actual image in a graphics software package like Adobe PhotoShop. In particular, avoid distorting an image by setting the width and height out of proportion. You may have to clip a portion of the image to get the right dimensions.
3. An image can be "too big" in terms of the number of bytes. I attempt to get 20KB, but this is not a hard rule and it is not always possible to get the image that low, based on its function. If an image is over 60KB, think about ways to reduce the number of bytes. Usually you can make the byte-size smaller by making the dimensions smaller, but there are other ways, such as reducing the quality of a JPEG or the number of colors (like fading).

Publishing on roadrunner server

1. The root document name must be index.html, or index.htm only; neither Index.html, nor INDEX.htm will work.
2. If your document's name is My Hobbies.html, this hyperlink

   <a href="my hobbies.html">My Hobbies</a>
   

   will work on Windows systems, but fail on roadrunner.
3. Displaying the image file ski trip.JPG using the tag:

   <img src="ski trip.jpg" />
   

   will work on Windows but fail on roadrunner.