HTML and CSS Exercises 1

Question 3

In this project, you build a vertical navigation bar. The code you add to the file in the following steps appears in blue.

a. Copy the ch9project3.html file from the Chapter09 folder provided with your Data Files to the Chapter09 folder in your work folder. (Create the Chapter09 folder, if necessary).

b. Start your text editor, and open the file ch0project3.html. The HTML code is an unordered list with an id of navlist.

< ul id="navlist">
< li>< a href=" ">Welcome< /a>< /li>
< li>< a href=" ">Services< /a>< /li>
< li>< a href=" ">Portfolio< /a>< /li>
< li>< a href=" ">About Us< /a>< /li>
< li>< a href=" ">Contact Us< /a>< /li>
< li>< a href=" ">FAQ< /a>< /li>
< /ul>

c. Open ch9project3.html file in a browser. The list should look like Figure 9-36.

Figure 9-36: see image.

d. In the style section, create a selector for the navigation list:

ul#navlist { }

e. Add style properties to remove the default spacing and bullets from the unordered list:

ul#navlist {
padding: 0;
margin-left: 30px;
list-style-type: none;
}

f. Create a second rule that selects the < a> elements residing within the < li> elements:

ul#navlist li a { }

g. Add style rules that set the display to block for the links. Remove the underlining from the link text with the text-decoration property. Set a width of 140 pixels, and add a 2-pixel solid border.

ul#navlist li a {
text-decoration: none;
display: block;
width: 140px;
border: 2px solid;
}

h. Finish the navigation bar by adding 5 pixels of padding to offset the link text from the borders of the button. Also add 5 pixels of top margin to separate the buttons vertically.

ul#navlist li a {
text-decoration: none;
display: block;
width: 140px;
border: 2px solid;
padding: 5px;
margin-top: 5px;
}

i. Save your file, and view it in your browser. The finished navigation bar looks like Figure 9-37.

Figure 9-37: see image.

Question 6

Find an online information resource likely to be used for research. Examine the navigation options, and describe how the navigation helps or hinders the user's information-searching process. Consider the following:

a. How cluttered is the user interface? Does it deter finding information?

b. Is navigation prominent or secondary to the page design? Does the user always know his or her location in the site? Is the linking text concise and easy to understand? Is the link destination easy to determine from the linking text?

c. How deep is the structure of the site? How many clicks does it take to get the desired information?