HTML 4_01 Weekend Crash Course - G. Perry

the top of the page easily by inserting these items in cells, adding new cells, and resizing cells that need to be resized. Without the table’s format, modifying one item in the header may negatively affect the formatting of the other items, and simple changes will become difficult.

The header shown in Figure 23-1 contains five rows and three columns. Not all the columns will be used on each row, but the three columns enable you to align all the data properly. For example, the first row contains only the hyperlink Home. On subsequent pages, Home will form a link back to this page. On this page, the link simply reloads the current page.

The second row is a thin strip of white that separates the first and third rows. Table rows are rarely the same height except when they contain numerical data in a spreadsheet-like format.

The third row in the header table more obviously shows the three cells that make up the header. The cells will hold, from left to right, the family logo, the mailbox (which is a hyperlink to the family’s e-mail address in case anybody clicks the mailbox), and a gold-colored message that the Barkleys can easily change by altering the contents of the cell.

This tutorial’s CD-ROM contains all the graphic images used in the Barkley Web site.

Cross-Ref

Two more rows in Figure 23-1 contain two additional lines: one white and one golden. The golden text and lines work well with the green background of this Web

The width= attribute is huge to ensure that the line spans the entire width of the user’s screen.

The rest of the code that you’ll add defines the row with the logo and mailbox. This is the most detailed row in the table, as the next section explains.

Completing the Header Table

The rest of the header fills in the remaining three rows of the header table. The third row is the most complex because the row holds the logo, mailbox, and opening message. To the user’s eye, this row becomes the actual header; the rest of the rows are just decoration except for the lone Home hyperlink in the corner.

The logo falls into the first cell easily with this code:

<tr align=left> <!-- Logo -->

<td align=left width=”179” height=”24”>

<img src=”barkleys.gif” width=149 height=66 align=”absmiddle” alt=”Family Logo”>

</td>

As is virtually always true for graphics on your site, you should include the image’s width (width=) and height (height=) attributes so that the browser does not have to slow down to compute the dimensions. In addition, the alt= attribute ensures that something appears even when the user has turned off graphics in the browser. The alt= attribute also yields a pop-up ToolTip that reads Family Logo if the user rests the mouse pointer over the logo.

The next cell holds both a graphic image of the mailbox and a hyperlink to the family’s e-mail address. Although the Barkleys plan to add an e-mail link elsewhere, one here is nice and the GIF image performs a dual role: It acts as the hyperlink image and also conveys the idea “Here’s a Web page with Barkley news delivered to you.”

The following code defines the cell:

<td width=169 height=24> <p align=center>

<a href=”mailto:Barkleys@email.mn.net”>

<img border=0 src=”mailbox.gif” align=middle width=120 height=77 alt=”Mailbox”>

</a>

</td>

Continued

Listing 23-4 Continued

<!-- First row only contains a Home link --> <tr>

<td height=21 width=179 align=left> <font face=Arial size=2>

<a href=”http://www.BarkleyFamilyPage.com/”> <b><i>Home</i></b></font></a>

</td>

<!-- Table needs two more cells defined --> <td width=169 height=21>

</td>

<td width=788 height=21> </td>

</tr>

<tr> <!-- Blank Line as a thin row -->

<td colspan=3 bgcolor=white width=100% height=2 align=left> </td>

</tr>

<tr align=left> <!-- Logo -->

<td align=left width=”179” height=”24”>

<img src=”barkleys.gif” width=149 height=66 align=”absmiddle”

alt=”Family Logo” border=0> </td>

<td width=169 height=24> <p align=center>

<a href=”mailto:Barkleys@email.mn.net”>

<img border=0 src=”mailbox.gif” align=middle width=120 height=77>

</a>

</td>

<td height=24>

<font face=Arial size=6 color=#CC9900>     All the news<br>

An HTML template helps you get your Web page started.

Documentation makes your HTML code clearer and easier to maintain.

The header is often a table that spans the user’s entire screen width.

Contact information in a header hyperlink enables users to contact you about your site.

QUIZ YOURSELF

1.What can happen if you place undivided comments throughout the sections of an HTML Web page? (See “The Initial HTML Template.”)

2.Why should you not always include your address and phone number in the opening comment section of your Web page? (See “Document the Code.”)

3.What width advantage can a table provide for the header? (See “Starting the Header Table.”)

4.What is an advantage to activating same-page hyperlinks? (See “The Top Table.”)

5.Why do you often see nonbreaking spaces scattered throughout HTML code? (See “Completing the Header Table.”)

The Home Page’s Bottom Table

As noted in the previous session, the Barkley home page consists of two tables: one for the header and the other for the navigation bar and the contents. The graphics program mark-up lines, repeated in Figure 24-1, show the three cells of the lower table and how the cells hold and help place and align their contents. The three cells contain the navigation bar, thumbnail images, and text.

Figure 24-1

The table’s cells enable you to manage a Web page more easily.

Although the Barkleys chose white on green letters for the heading and the navigation menu down the left side of the page, they wisely decided on a white background for the central content’s table background color. All the Web site’s content appears in this large, central area. Nothing works better than a white background. Other colors will make your users hesitate somewhat because the eye does not adjust well to many text and background color combinations. Some color combinations can slow the reading of a Web page by 10 percent or more. To be safe, use a white background.

<table border=0 width=2000 height=3 cellspacing=0 cellpadding=0>