tag to work with the colors of a table’s sides, you insert a style within a tag to exert the same control over the colors used for the sides of a cell. For example, to color the sides of a cell red, blue, green, and magenta, you might use the setting for the style attribute in a tag: tag changes the color of the border around the table and the borders around the cells within the table—with the exception of those cells whose tags include bordercolor settings of their own. Therefore, if you want the Web browser to draw a green border around a particular cell within the table—without regard to the color of the borders around other cells in the table or around the table itself—add a bordercolor attribute to the cell’s tag. For example, to tell a Web browser to draw a green border around a cell you would write the cell’s tag as follows: tag, many do not support the use of bordercolor, bordercolorlight, and bordercolordark attributes in tags. Therefore, design your tables under the assumption that many of your Web site’s visitors will see the border around every cell in the same color(s) as the border around the perimeter of the table itself. tag, the Web browser will “paint” the color assigned to the attribute onto the table’s otherwise transparent background. For example, setting the bgcolor attribute to the hexadecimal value “#0000FF” in the following tag tells the Web browser to paint the table background blue: tag, the Web browser will use the graphics file assigned to the attribute as “wallpaper” to cover the table’s background. For example, the background setting in the following code tells the Web browser to cover the table background with the picture in the file named picture1.gif stored in the Web site’s images subfolder: tag. Therefore, independent of the background image or color (if any) that you specified for the table, you can tell the Web browser to paint a cell’s background with a color by assigning the color’s value as a hexadecimal number to the bgcolor attribute in the cell’s tag. For example, the hexadecimal value “#00008B” assigned to the bgcolor attribute in the following tag tells the Web browser to paint the cell’s background navy (dark) blue: tag, the Web browser will use the picture in the file assigned to the attribute as “wallpaper” to cover the cell’s background. For example, the background setting in the following tag tells the Web browser to cover the cell’s background with the graphics image in the file picture1.gif stored in the Web site’s images subfolder: tag “wins”—sort of like wallpapering a painted wall, or painting over wallpaper. Whatever is applied to the background last (in other words, the layer on top) is what the viewer sees. Because they are “layered”, a cell’s background color or background image will obscure the table’s background color or image. Conversely, if a cell’s tag has neither a background attribute nor a bgcolor attribute, the Web browser will draw the cell’s background as if it were a transparent pane of glass laying atop the table’s background. Consequently, you will see the table background “through” the cell’s transparent background. Similarly, because the table’s background sits on top of the Web page background, the table’s background image or color obscures the color or picture used as the Web page background. Conversely, if you set neither the background attribute nor the bgcolor attribute in the table’s tag, the Web browser will draw the table’s background as if it were a transparent pane of glass lying on top of the Web page background. As a result, you will see the Web page background “through” the table’s transparent background. By the way, although it would be a “cool” effect, if you specify neither a color or tag. Moreover, the bgcolor attribute—deprecated since HTML 4.01—is officially illegal in the XHTML 1.0 standard. To specify the background image for a table or cell, current HTML (and XHTML) standards require that you use the CSS backgroundimage property. For example, to specify an image you want the browser to use as the table background, insert a style attribute within the tag as follows: tag to set the background-image property as shown here: tag as shown here: tag as follows: tag as follows: tag as follows: tag sets the table borders to dark blue, the “#00008B” bordercolor setting tells the Web browser to create the border color by mixing 0 red with 0 green and 139 blue. (A hexadecimal value of 8B equals a decimal value of 139.) Thus, the Web browser creates the shade of dark blue you specified by mixing no red, with no green, and just over half the maximum amount of blue. To determine the hexadecimal red-green-blue triplet for the color you want the Web browser to use, visit http://www.htmlhelp.com/cgi-bin/color.cgi, or check the font or background color menu in your favorite image editor. Most graphics programs will provide the RGB (that is, the red, green, blue) values used to create the color you select from a palette of color swatches or mix on a “custom colors” screen within the application. Or, if you use the Microsoft Office suite of programs, click the drop-down list button to the right of the Font Color button on the standard toolbar in Microsoft PowerPoint or Microsoft Word. Then, click More Colors at the bottom of the drop-down menu. The Office application, in turn, will display a Colors dialog box similar to that shown in Figure 2-9. If the Custom tab’s contents are not visible, click the Custom tab on the Colors dialog box. To “mix” a custom color, click on the color you want in the color palette at the top of the Custom tab and then on the color saturation slide-bar to the right of the palette. Each time you create a color, the dialog box will show you the color in the color swatch in the lower-right corner of the dialog box tag. By default, both cellspacing and cellpadding have a value greater than zero (0). For example, if you omit both attributes from the tag, Internet Explorer will leave a two-pixel space between each cell and between the table’s borders and its cells. Thus, Internet Explorer’s default cellspacing is two (2). Similarly, with cellpadding unset, Internet Explorer will leave a one-pixel space between each cell’s border and its contents. Table light border tag to a value greater than one (1). For example, setting the cellspacing attribute to ten (10) in the following code tells the Web browser to leave a 10-pixel blank space between each of the table’s cells and between the table’s border and its cells: tag has no cellpadding attribute.) To have the Web browser leave a five-pixel blank space between the sides of a cell (that is, the border around a cell) and its contents, for example, write the preceding tag as follows: tag in this example has both cellspacing and cellpadding attributes, you do not have to set one to set the other. Just keep in mind that most Web browsers will use a default value of one (1) or two (2) pixels for either attribute or for both attributes if you do not explicitly set the attribute’s value in the tag. tag. You can specify table dimensions either in relative terms (using percentages) or in absolute terms (using pixel counts). For example, to draw the table using the Web browser’s entire application window, write the table’s tag as follows: tag as follows: tag, keep in mind that you are really setting only the table’s minimum dimensions. The content you place in a table’s cells will determine the table’s actual dimensions. Suppose, for example, that you specify a 764×558 table, with two rows of two cells each. If you place a 450×350 pixel picture into each of the cells in the first row, the Web browser will automatically expand the table’s width to 900 pixels to accommodate the width of the data in the table—that is, the two pictures in the first row. If you then add a 450×350 pixel graphics image to either of the cells in the table’s second row, the Web browser will increase the table’s height to 700 pixels to accommodate the height of the two pictures in the table’s column. tag, you can create a table of a specific height and width by specifying the dimensions of the table’s cells. For example, if you want to create an 800×600 table with two rows of four columns each, you can specify each cell as 200×300 pixels by writing the tag for each cell as follows: tag.) tag, make sure that the width of the cells in each row add up to exactly the width of the table to avoid browser-specific “strange” behavior. Each browser handles malformed tables in its own way. Therefore, if you want to control the way your table looks in every browser, do not write table HTML in which the table’s dimensions conflict with the dimensions of its cells. tag) and relative width columns (set by the value of the width attributes in the tags and tags): tags (if any) and in the tags for a single row does not exceed 100 percent. Should the sum of the percentages be less than 100 percent, the Web browser will split the remainder evenly among the cells in the row. When specifying cell (or table) dimensions, you can specify a width without specifying a height, or vice versa. However, if you are specifying the dimensions of a cell as a percentage of the table’s width, make sure you set the table’s width as a number of pixels or as a percentage of the Web browser’s application window by setting the width attribute in the table’s tag. Similarly, if you specify the height of the cells in the table as a percentage of the table’s overall height, be sure you set the table’s height as well. To specify the table’s height, set the height attribute in the table’s tag to either a number of pixels or a percentage of the browser application window’s height. tag. The align attribute has three possible settings: tags: Alignment - Center Alignment - Left Alignment - Right Center Left Right
tag. The valign attribute has four possible settings: • top tags: Vertical Alignment - Top Vertical Alignment - Middle Vertical Alignment - Baseline Vertical Alignment - Bottom Top Middle Baseline Bottom
tag to position the cell’s content horizontally within the cell. Similarly, if you create a table that is narrower than the width of the Web page on which it is displayed, you can use the align attribute to position the entire table horizontally on the page. By default, a Web browser will render a table flush with the left side of a Web page. To change a table’s alignment, enclose the table definition between a set of start and end division tags (
). Then, set the align attribute within the tag to “left”, “right”, or “center”— depending on how you want the table aligned relative to the left and right sides of the Web page. For example, to have the Web browser display a table flush with the right side of a Web page (instead of the default, which is the left side), enclose the table’s definition within start and end division tags (
). Then set the align attribute in the
tag to “right”, such as that shown in the first line of the following Web page HTML:
Heading Heading Row 1 Row 1 Row 2 Row 2
height="50%"> 1 2 Column 1
Column 2 Column 1 Column 2 tag that includes a width attribute set to “100%” or with a pixel value greater than the pixel width of the browser’s application window, the Web browser will ignore the setting of the align attribute within the tag in the enclosing start and end division tags (
).
Controlling the Width and Height of a Cell by Inserting a Transparent GIF While drawing a table, a Web browser will expand the size of the cells (and the table overall) as necessary to accommodate their contents. Suppose, for example, that you create a cell with a
tag that has no width or height attribute. If you place a 150×100–pixel graphics image in the cell, the Web browser Menu Items Web Page Content Goes Here
tag (in the third line) tells the Web browser to place the transparent GIF stored in the file spacing.gif into the second cell in the table. The width attribute in the tag to the number of pixels of blank space you want and then leaving the cell blank—is because Web browsers handle empty table cells differently. For example, although Internet Explorer shows the cell background color in blank cells, Netscape Navigator does not—showing the table or Web page background color instead. Moreover, some browsers ignore the height and/or width attribute settings in the tag for empty cells and draw the cells such that they are only as tall as the tallest nonempty cell in the row and as wide as the widest nonempty cell in the column. Finally, neither Netscape Navigator nor Internet Explorer will draw the left and top borders on a cell that has no content— even if the table’s border attribute has a value of one or more. However, if you put a one-pixel GIF, stretched to the dimensions you want, into a table cell, all Web browsers will render the “blank” cell in the same way—with the dimensions of the GIF, the cell’s specified background color, and borders (if any)—because although the cell appears blank, it is not empty. Insert Description Insert Price Insert Description Insert Price Insert Description Insert Price
tag and href attribute in each cell that contains a thumbnail image. The tag creates a link from the thumbnail to the full-size image. For example, the following code links the thumbnail image home_1.jpg to the Web page containing the full-size image (page_1.htm): tag and href attribute in the following code link the thumbnail (specified by the src attribute in the List item 1 List item 2 List item 3 tag identifies an item in the list. List Item 1 List Item 2 List Item 3
tag’s href attribute. Therefore, in the current example, the Web browser will display the contents of the file info.htm when the site visitor clicks the picture in the table.
THIS IS THE HEADING AREA This area holds the navigation
array
This area holds the Web page content
The body text goes here Check this out..
tag to “yellow”) draws the visitor’s attention to the cell and emphasizes a portion of the text in the adjacent cell. James Markin Senior Designer Riven Productions 433 Spaeder Street Hollywood, CA 23435
Heading Inserted Here Body Text Inserted Here.
Body Text Inserted Here.
Heading Inserted Here Body Text Inserted Here.
Body Text Inserted Here.
TagMessage:
tag may have the following attributes: • value Text string passed to the Web server as the “value” portion of the name/value pair if the site visitor clicks the item in the drop-down menu (or selection list) to select it. The Web browser sends only the name (of the drop-down list) and (option) value (that is, the name/value pair) of the selected list items (or options) to the Web server when the visitor clicks Submit. If the tag has no value attribute, the Web browser will send to the Web server the selection item text (found between the start and end option tags [ tag for an item on the drop-down list, you tell the Web browser to select the item when it draws the selection list and each time the visitor clicks Reset. The Web browser indicates the selected item(s) in a drop-down list by highlighting it (or them). If the <select> tag does not have a multiple attribute, the site visitor can select only one item from the drop-down list. When the visitor is allowed to choose only one item from the selection list, the Web browser will clear the previous selection (if any) when the visitor clicks a new selection. To allow the site visitor to select more than one item from the drop-down list, include the multiple attribute in the drop-down list’s <select> tag. Moreover, if you want your site visitors to select more than one item from a drop-down list, be sure to prompt them to make multiple selections with text such as “select all that apply” and “hold down the CTRL key as you click list items to make multiple selections”. (Even if you allow multiple selections, the Web browser will deselect previous selections, if any, if the site visitor clicks a drop-down list item without holding down the CTRL key.) [email protected] WinXp=ON ShareEmail=Yes) and line break (
) tag to “top”. Next, set the height attribute for tags to the pixel-height of the multiline text box. When you are done, the Web browser will draw the label next to the upper-left corner of the text box, as shown in Figure 3-14. In addition to aligning labels with form elements, you can also use one or more tables in a form to visually group form elements. Suppose for example that you want to line up the check boxes below the text box shown in Figure 3-14. Because each of the check boxes has a single-line label, you can place both the check box and its label in the same table cell. (If a check box has a multiline label, you would put the check box and label in separate cells so that you could place the check box where you want it in relation to its label—like you did the “Message:” label next to the multiline text box earlier in this Tip.) If you place the check boxes shown in Figure 3-14 into a multicolumn, multirow table as follows, you can create the arrangement of check boxes shown below the text box in Figure 3-15: Areas of Interest:
tags to one (1), so you can see the “grid” of cells that make up the table. Then, after you have things aligned as you want, set the border attributes to zero (0) to make the gridlines disappear. Tag In the introduction at the beginning of this chapter and in the preceding tips, the “label” next to the form elements was like any other text on a Web page. Although you can place plain text next to a form element to serve as a label that lets site visitors know the purpose of the text box, radio button, or check box, the visitor cannot use the letters in the plain text labels to move around on the form, place a check mark in a check box, or select a radio button. To use text as shortcuts for navigation and form element selection, you must enclose each text label within a set of start and end label tags (
F irst Name: L ast Name: E -mail: tags has two important attributes: • for The value of the for attribute in the tag must match the id value of the form element to which you want to link the label. • accesskey The shortcut key the visitor can use to move to the text box (if the label is linked to a text box), to select a radio button (if the label is linked to a radio button), or to check or clear a check box (if the label is linked to a check box). To use the shortcut key, the visitor must hold down the ALT key while pressing the accesskey value. The accesskey value need not appear in the label text (that is, the text enclosed between the start and end label tags) nor does it modify the text in any way. However, to use the shortcut key, the visitor needs to know what it is. As such, use one of the letters in the label text as the accesskey attribute’s value and underline the letter (or number) you use to provide the site visitor with a visual cue. Notice that the start and end underline tags (Marital Status:
