HTML and CSS Reference
In-Depth Information
In the Lab
Lab 2: Creating Two Linked Pages
Problem:
Your manager at Clocks Beyond has asked you to create two Web pages, similar to the ones
shown in Figures 4-48a and 4-48b. The first Web page is a home page that presents information about
Clocks Beyond, together with two links. The Prices link on the first page will be linked to a price list
of items found at the clock store. The second link, called Links, should direct the Web page visitor to
another Web page of your choosing that has to do with clocks. You may select a museum or another
similar site of your choosing. For this project, use a combination of inline style sheets and external (linked)
style sheets in order to accomplish the tasks.
Instructions:
Perform the following steps:
1. Start a new HTML file with the title Lab 4-2a in the main heading section.
2. Create a one-row, two-column borderless table with the image clock.jpg in the left-hand data cell.
Use the box-shadow property to create the two-tone shadow around the top and bottom of the
image. The values are: -20px -20px 15px #122973 and 20px 20px 15px #9a9391. (
Hint:
Make sure
to separate the two value strings with a comma.) Insert the words Clocks Beyond using text color
#122973 and font size xx-large in the right-hand data cell.
3. Create a second one-row, two-column borderless table with border-spacing of 10 pixels. In the
first column, use the background color #eddaa7 and include two text links: Prices (which links to
lab4-2bsolution.html) and Links (which links to a clock-related Web site of your choosing). In the
second column, add the text and an e-mail link, as shown in Figure 4-48a.
4. Create an external style sheet with the following styles. Save it as lab4-2styles.css. Link this external
style sheet into the Web page.
body {font-family: Arial, Verdana, Garamond;
font-size: 11pt;}
a {text-decoration: none;
color: #122973;}
table {width: 65%;
margin-left: auto;
margin-right: auto;}
.menu {text-align: left;
width: 20%;}
.content {width: 80%;}
5. Save the HTML file using the filename lab4-2asolution.html in the Chapter04\IntheLab folder.
Validate the file using the W3C validator service. Print the HTML file.
6. Start a new HTML file with the title Lab 4-2b in the main heading section. Link the external style
sheet lab4-2styles.css into the file.
7. Create a five-row, two-column table with a border of 1, padding of 15 pixels, and border-spacing
of 5 pixels.
8. Span the first heading across both columns, as shown in Figure 4-48b, using a text color of
#122973, a background color of #eddaa7, and font size large.
9. Enter the headings, Item and Price, along with the additional information, in the appropriate table
cells, as shown in Figure 4-48b. Make sure to include a link (font size small and center-aligned)
back to the home page.
