Principles of Web Design Sklar Chapter 6 Hands-On Projects 3 4 CIT-150

Availability: In stock

Regular Price: $15.00

Special Price: $12.00

OR

Chapter 6 Hands-On Projects 3 floatactivity1 CIT-150

Double click on above image to view full picture

Zoom Out
Zoom In

More Views

Quick Overview

Principles of Web Design Sklar Chapter 6 Hands-On Projects 3 4 CIT-150


3. In this project, you will create a floating text box.
a. Copy the floatactivity.html file from the Chapter06 folder provided with your Data Files to the Chapter06 folder in your work folder. (Create the Chapter06
folder, if necessary.)
b. Open the file floatactivity.html in your HTML editor, and save it in your work folder as floatactivity1.html.
c. In your browser, open the file floatactivity1.html. When you open the file, it looks like Figure 6-30.
Figure 6-30 Original HTML file for Project 3
d. Examine the page code. Notice that an existing style rule sets a background-color for a floatbox class, as shown in the following code fragment:
.floatbox {background-color: #ccddee;}
e. This class is applied to the first <p> element in the document, as shown in Figure 6-30. Your goal is to use a variety of box properties to create a finished page that looks like Figure 6-31.
Figure 6-31 Completed HTML file for Project 3
f. Use the following properties to create the finished floating text box:
• width
• height
• float
• padding
• margin-right
• border
• text-align
Experiment with the different properties until you achieve results that look as close to the finished page as possible.


4. In this project, you will have a chance to test the border properties. Save and view the file in your browser after completing each step.
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains heading and paragraph elements. Save the file in your Chapter06
folder as borders.html.
b. Add a <style> element to the <head> section as shown in the following code:
<head>
<title>CSS Test Document</title>
<style type="text/css">
</style>
</head>
c. Experiment with the different border styles. Start by applying any of the following style rules to your document’s elements:
h1 {border: solid 1px black;}
h2 {border-top: solid 1px; border-bottom: solid 3px;}
p {border-left: double red; border-right: solid 1px;}
d. Experiment with adding padding properties to your style rules to off set the borders from the text. The following style rules have sample padding properties
to try:
h1 {border: solid 1px black; padding: 20px;}
h2 {border-top: solid 1px; border-bottom: solid 3px;
padding-top: 15px; padding-bottom: 30px;}
p {border-left: double red; border-right: solid 1px;
padding-left: 30px; padding-right: 20px;}
e. Continue to experiment with the border and padding properties. Try adding color and margin properties to see how the elements are displayed.

Regular Price: $15.00

Special Price: $12.00

Details

Principles of Web Design Sklar Chapter 6 Hands-On Projects 3 4 CIT-150

3. In this project, you will create a floating text box.
a. Copy the floatactivity.html file from the Chapter06 folder provided with your Data Files to the Chapter06 folder in your work folder. (Create the Chapter06
folder, if necessary.)
b. Open the file floatactivity.html in your HTML editor, and save it in your work folder as floatactivity1.html.
c. In your browser, open the file floatactivity1.html. When you open the file, it looks like Figure 6-30.
Figure 6-30 Original HTML file for Project 3
d. Examine the page code. Notice that an existing style rule sets a background-color for a floatbox class, as shown in the following code fragment:
.floatbox {background-color: #ccddee;}
e. This class is applied to the first <p> element in the document, as shown in Figure 6-30. Your goal is to use a variety of box properties to create a finished page that looks like Figure 6-31.
Figure 6-31 Completed HTML file for Project 3
f. Use the following properties to create the finished floating text box:
• width
• height
• float
• padding
• margin-right
• border
• text-align
Experiment with the different properties until you achieve results that look as close to the finished page as possible.

4. In this project, you will have a chance to test the border properties. Save and view the file in your browser after completing each step.
a. Using your HTML editor, create a simple HTML file (or open an existing file) that contains heading and paragraph elements. Save the file in your Chapter06
folder as borders.html.
b. Add a <style> element to the <head> section as shown in the following code:
<head>
<title>CSS Test Document</title>
<style type="text/css">
</style>
</head>
c. Experiment with the different border styles. Start by applying any of the following style rules to your document’s elements:
h1 {border: solid 1px black;}
h2 {border-top: solid 1px; border-bottom: solid 3px;}
p {border-left: double red; border-right: solid 1px;}
d. Experiment with adding padding properties to your style rules to off set the borders from the text. The following style rules have sample padding properties
to try:
h1 {border: solid 1px black; padding: 20px;}
h2 {border-top: solid 1px; border-bottom: solid 3px;
padding-top: 15px; padding-bottom: 30px;}
p {border-left: double red; border-right: solid 1px;
padding-left: 30px; padding-right: 20px;}
e. Continue to experiment with the border and padding properties. Try adding color and margin properties to see how the elements are displayed.

Product Tags

Use spaces to separate tags. Use single quotes (') for phrases.