HTML and CSS Reference
In-Depth Information
In the Lab
continued
5. Add a Heading 2 style heading, About Recycling, and set a link target named about. Type a
paragraph of text based on your research of the topic, as shown in Figure 3-52.
6. Add a Heading 2 style heading, When, and set a link target named when. Type a paragraph based
on your research of the topic, as shown in Figure 3-52.
7. Add a Heading 2 style heading, Contacts, and set a link target named contact. Type the paragraph,
as shown in Figure 3-52.
8. Create a link target at the top of the page named top.
9. Create a To top link at the bottom of the page, as shown in Figure 3-52. Set the link to direct to
the top target at the top of the page.
10. Create links from the bulleted list to the three targets.
11. Create an e-mail link, as shown in Figure 3-52.
12. Save the HTML file in the Chapter03\IntheLab folder using the file name lab3-1solution.html.
13. Validate the lab-3-1solution.html file.
14. Print the lab3-1solution.html file.
15. Enter the URL
G:\Chapter03\IntheLab\lab3-1solution.html
to view the Web page in
your browser.
16. Print the Web page.
17. Submit the HTML file and Web page in the format specified by your instructor.
In the Lab
Lab 2: Creating a Web Page with Links
Problem
: Your instructor wants you to create a Web page demonstrating your knowledge of link targets. You
have been asked to create a Web page to demonstrate this technique, similar to the one shown in Figure 3-53.
Instructions
: Perform the following steps:
1. Start Notepad++ and create a new HTML file with the title, Lab 3-2, in the head section.
2. Begin the body section by adding an h1 heading that is left-aligned.
3. Add the following code into an embedded style. Notice that all text links have the same background
color as the h1 heading at the top of the Web page. This is because of the code that you put in the
embedded style, as follows:
body
{font-family: Arial, Verdana, Garamond;
font-size: 11pt;}
h1, h2, h3
{color: #19212d;}
a
{color: black;}
a:hover
{background: #19212d;
color: white;}
img.align-right
{float: right;
margin-left: 5px;
margin-right: 5px;}
img.align-left
{float: left;
margin-left: 5px;
margin-right: 5px;}
