The Rules — Recapped
While experimenting with all the tags you've learned thus far, you must remain mindful of The Rules of HTML and the Anatomy of a Tag (covered in Class 1). Until you're confident that you've commited to memory the proper syntax for each of the tags covered in class, you should be sure to refer to the guidelines provided in class, either on this course Web site or from another trusty HTML authoring Web site (such as those linked to from the "Further Reading" section). Some particular points to remember include:

1. Tags that require an opening and closing element work as a container. In order to display the effect you intend, the content you wish to modify must be contained within the opening and closing elements of the tag.

   Incorrect:

   Click here! <A HREF="http://www.w3c.org/"> </A>

   Correct:

   <A HREF="http://www.w3c.org/"> Click here! </A>

2. While tags can be used without attributes, attributes can never be used without tags. That is, attributes can only be employed within a tag and never alone.

   Invalid:

   <COLOR="#FF0000"> red text </COLOR>

   Valid:

   <FONT COLOR="#FF0000"> red text </FONT>

3. Only attributes valid for a specific tag can be employed. (Likewise, only values valid for a specific attribute can be employed.) You cannot mix and match!

   Invalid:

   <FONT ALIGN="center"> center-aligned text </FONT>

   Valid:

   <P ALIGN="center"> center-aligned text </P>

4. In order for your images to appear and for your links to work properly, you must employ proper UNIX Syntax. This includes naming your files appropriately:
   • All filenames should have appropriate and valid suffixes (i.e., .html, .jpg, .gif, .mov, .wav, etc.).
   • All filenames should contain no spaces. To add visual spacing in your filename, consider using the underscore ("_") character.
   • Also, remember that, unlike HTML, UNIX is case sensitive — the file naming convention is to use all lowercase letters.

     Unacceptable: Web Page 1 Web Page 2.html graphic1.psd graphic2.eps graphic fullsize.jpg graphic thumbnail.jpg Audio Clip

     Acceptable: webpage1.html webpage2.html graphic1.jpg graphic2.gif graphic_fullsize.jpg graphic_thumbnail.jpg audioclip.wav

Tables are useful not only for presenting tabular data, such as those found in spreadsheets, but are also primary technique HTML authors currently employ to position content on a page.

<TABLE>...</TABLE>
Definition: The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table the TD tag to define table cells (see below). [display]

Attributes:

CELLPADDING="#"
Determines the amount of space, in pixels, between the border of a cell and the contents of the cell. The default is 1. All cells in a table will have the same padding.

CELLSPACING="#"
Determines the amount of space, in pixels, between individual cells in a table. The default is 2. All cells in a table will have the same spacing.

BORDER="#"
Indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. The default is 2.

WIDTH="#|%"
Defines the width of the table. The default is the optimal width determined by the contents of each cell. The width value can be a number of pixels, given as an integer, or a percentage of the width of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

HEIGHT="#|%"
Specifies the height of the table. The default is the optimal height determined by the contents of each cell. The height value can be a number of pixels, given as an integer, or a percentage of the height of the page or parent element, given as an integer followed by the percent sign. The table is scaled to fit the specified height and width.

BGCOLOR="color"
Sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in TD tags. Can use either name or hexadecimal values.

ALIGN="left|center|right"
Specifies the horizontal placement of the table. LEFT aligns the table on the left. The content following the table flows to the right of the table. RIGHT aligns the table on the right. The content following the table flows to the left of the table. CENTER aligns the table in the center. Content does not flow on either side. By default, a table starts on a new line and is aligned with the following text

HSPACE="#"
Specifies the distance between the left and right edges of the table and any surrounding content.

VSPACE="#"
Specifies the distance between the top and bottom edges of the table and any surrounding content.

Instead of thinking of tables as boxes within your HTML page (like images), you can think of your entire page as a table — presenting your content in columns and/or rows, with different background colors for different areas of content. HTML authors do the real work of designing Web pages with their use of tables — there's an infinite number of ways of building a table to present your content. You can (and should!) spend a great deal of time tinkering with tables to figure out how to lay out your pages.

After you've got all the elements in your layout established, and perhaps even marked up, it's a good idea to turn to paper and pencil to block out your layout. Position your elements on the page in relation to each other:

Menu Link link link Link link link Link link link Link link link Link link link Link link link Link link link Headline: Lorem ipsum dolor Main content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Secondary content Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

While technically, the way your HTML source code looks has no effect upon the way your document will display in a browser, there are some common conventions that make HTML easier to read. By indenting your table rows and cells (using the Tab key), it's easier to scan down your HTML source code and identify the structure of your table. One style convention looks like this:

<TABLE>
     <TR>
          <TD ROWSPAN="2">
          Menu
          </TD>
          <TD COLSPAN="2">
          Headline
          </TD>
     </TR>
     <TR>
          <TD>
          Main content
          </TD>
          <TD>
          Secondary content
          </TD>
     </TR>
</TABLE>

Tables

1. Set up a basic table and practice adding columns and rows, changing the table width, and setting the border width, cell spacing and cell padding.
2. Practice setting the width and height of invidual table cells.
3. Practice aligning content in individual table cells, both horizontally and vertically.
4. Set background colors in your table and in individual table cells.
5. Try setting some table cells to NOWRAP to see the effect.
6. Try creating an "inline" table, by setting the alignment and the horizontal and vertical spacing.
7. Practice setting cells that span multiple columns and rows.
8. Remove content from one table cell and see what the effect on in the browser display is.

Tables

• The Basic, Basic Table
• The Not-So-Basic Table
• So, You Want A Table, Huh?
• Table Cell Color

Accepting input
HTML Forms