HTML 4_01 Weekend Crash Course - G. Perry

Why isn’t a width of 100 percent used, as was used for the header table in the previous session? Problems sometime arise with percentage width measurements in tables. The left-hand table column is squeezed down to fit any other columns whose widths are specified in pixel measurements. In other words, the center column of the table must be exactly 105 pixels to ensure that enough room appears for the thumbnail pictures the Barkleys want to put before most of their announcements on the home page. Given that this column is a fixed width, the 100 percent would mean that the browser would adjust other columns if necessary. It would turn out that the browser would adjust the left column in this situation, making the navigation bar thin and squeezed and messing up the spacing of the text. By specifying all three columns by an exact pixel measurement, and by keeping the total width less than the screen size of most computers in use today, you can keep your columns an accurate size. By giving the far right table a width of 2,000 pixels,

you ensure that the heading will fill the entire Web page no matter how great the user’s screen resolution is.

Remember that this bottom table begins the body of the home page. The header section holds the table that you created in the previous session.

The Navigation Bar

This Web page’s navigation bar would have been a great use of a frame; the window with the navigation bar remains on the screen while the user scrolls the content in the large window. You already know the frame feature’s problems and limitations.

Given the problems with frames, such as the fact that some browsers still in use don’t even support frames, the Barkleys decided that their home page should stick with tables, which have been around since the first version of HTML. Fortunately, the Web page looks much better without the frame.

The cell on the left of the page’s bottom table will hold the navigation area for the page. The left column consists of a single cell. This cell must span three rows because the rest of the page uses three rows by design; the Barkleys want their top two messages to their friends and family to appear in the large content area of the body and other notes to appear throughout other pages on the site.

Figure 24-3

The navigation bar spans three rows to extend down the page.

Obviously, the navigation bar requires links to pages. In the next session, you will add hyperlink anchor tags to each of the navigation entries.

The Final Two Columns: Images and Text

The two final columns are rather simple to add. The middle column’s primary job is to hold thumbnail images the Barkleys will use next to their home page announcements. In addition, to make heading text run across the top of the center column’s graphic and into the third column where most of the text content lies, the middle column will hold the first few letters of the headings, as you’ll see here. The two columns of cells in the white, content section finish out the three columns that the bottom table displays. In other words, the large section below the heading is just a three-column table, with the first column being the navigation bar and the second and third holding content.

Listing 24-2 contains the code for the top cell in the first row of the middle column. It holds the thumbnails and some heading text.

Figure 24-4 shows the Barkleys’ home page as it now appears. The final cell helps fix the spacing properly for the page. The third column maintains the white background and continues the gold headline that began in the previous column.

The middle column’s align=right attribute ensures that the text, Welcome to, appears above the graphic, and the third column’s align=left attribute ensures that the remaining text, our family - Eight years in the making!, completes the headline. By the way, the align=left attribute is the default alignment, but specifying it here helps show your intention of merging the heading together and spanning two cells with the heading. The remaining text falls under the heading and uses nonbreaking characters to add some needed spacing between the thumbnail pictures and the text.

HTML programmers often break text across table cells, starting in one and completing in the next one.

Note

Figure 24-4

The top row of the navigation bar and content area is now complete.

The remaining two rows of the content table are just more of the same. Fortunately, the same format and spacing are required, and you will format the remaining cells just as you did the cells in the first row. By keeping this structure, the Barkleys help keep their Web site consistent and familiar to users who view

Continued

<td width=2000 height=80 bgcolor=white valign=top> <p align=left>

<font face=Arial size=3 color=#CC9900> <b>or our new address!</b>

</font>

<font face=Arial size=2><br> We don’t want to be omitted <br> from your gift lists!</font></p>

</td>

</tr>

Figure 24-5 shows the completed home page. Notice that each figure includes alternative text, with the alt= attribute, that appears even when the user’s browser’s graphics are

Figure 24-5

You’ve just completed the layout for the home page.

4.Why is Arial a safe font to use a lot? (See “Simplicity Is the Key.”)

5.Although the center column is primarily for graphic images, why do the Barkleys store some text in that column? (See “The Final Two Columns: Images and Text.”)

S E S S I O N

25

Creating and Connecting

the Web Site’s Pages

Session Checklist

Get the Barkleys’ Web site noticed by search engines

Turn the Barkleys’ logo into a hyperlink to their home page

Link the Barkleys’ thumbnail images to larger images

Add hyperlinks to the Barkley home page’s navigation bar and create subsequent Web pages

In this session, you continue to hone the Barkleys’ home page by embedding meta tags to gain the attention of search engines and activating the home page’s links to the logo and navigation bar. You also learn how to create the

links from the thumbnails to larger images as well as how to create the linked pages for the Barkley Mom’s and Dad’s Web pages.

Getting the Barkleys’ Site Noticed by Search Engines

The Barkleys obviously intend that their friends and family view their site. In fact, they want their hard work to be seen by as many people as possible. Therefore,