HTML and CSS Reference
In-Depth Information
Table 11-2 HTML Code to Create the Table to Contain a Navigation Bar (continued)
Line
Code
81
<a href=”chapter11-1trailssolution.html”>
82
<img src=”chapter11-1trails_up.jpg” id=”trails” alt=”trails“ /></a>
83
</td>
84
</tr>
85
</table>
Line 66 starts the table that holds the navigation bar. The class attribute centerItems
will center the table on the page based on a style sheet selector and rule. Line 67 starts the
only table row. Lines 68, 72, 76, and 80 start a new column or data cell tag (<td>) to hold
each image. Lines 71, 75, 79, and 83 close the data cell </td> tag. Lines 69, 73, 77, and 81
include an <a href> tag to link to each of the four Web pages. Lines 70, 74, 78, and 82
contain the <img> tag with the image of the button in its “up state.” Line 84 closes the
row </tr> tag and line 85 closes the </table>.
To Create an HTML Table to Contain the Navigation Bar
The following step enters the HTML code to create the navigation bar.
1
•
Click line 66 (the
blank line after
the </div> tag).
•
Enter the HTML code
shown in Table 11-2 to
create the HTML table
for the navigation bar,
indenting as shown.
Do not press the
e n t e r
key after the
</table> tag on line 85
(Figure 11-3).
table contains the
initial images for
navigation bar
do not press
ENTER key
Figure 11-3
