HTML and CSS Reference
In-Depth Information
Apply Your Knowledge continued
4. Use an inline style to create the h1 heading, Dorm Room Doctors, and make it blue.
5. Using the <div></div> container, right-align the image garbage.jpg (width=560, height=420). Give
the image right- and left-margins of 10 pixels. ( Hint: Make sure to use the alt attribute.)
6. Make the first paragraph a large font. Color the word YES red in that paragraph. ( Hint: Use the
<span> tag.)
7. The second paragraph should be normal font, but make the word sanity blue and italic.
8. In the third paragraph, make the phone number and e-mail address red and in a bolder
font-weight.
9. Save the revised HTML file in the Chapter03\Apply folder using the file name apply3-1solution.html.
10. Validate your code.
11. Print the revised HTML file.
12. Enter G:\Chapter03\Apply\apply3-1solution.html as the URL to view the revised Web page in
your browser.
13. Print the Web page.
14. Submit the revised HTML file and Web page in the format specified by your instructor.
Extend Your Knowledge
Extend the skills you learned in this chapter and experiment with new skills.
Creating Targets and Links
Instructions: Start Notepad++. Open the file extend3-1.html from the Chapter03\Extend folder of
the Data Files for Students. See the inside back cover of this topic for instructions on downloading the
Data Files for Students, or contact your instructor for information about accessing the required files.
This sample HTML file contains all of the text for the Web page shown in Figure 3-50. You will add
the necessary tags to make this Web page appear with left- and right-aligned images, text formatting,
and links, as shown in Figure 3-50.
Perform the following tasks:
1. Insert the following embedded styles:
body
{font-family: Garamond, Arial, Verdana;
font-size: 12pt;}
h1, h2
{color: red;
font-variant: small-caps;}
.align-right
{float: right;
margin-left: 15px;
margin-right: 15px;}
.align-left
{float: left;
margin-left: 15px;
margin-right: 15px;}
a
{text-decoration: underline;
color: red;}
a:hover
{background: red;
color: white;}
Search WWH ::




Custom Search