HTML and CSS Reference
In-Depth Information
Hands-On Practice Case
1. Configure the CSS.
Modify the external style sheet, painter.css. The form is styled
with CSS. Review Section 9.4. See Figures 9.30 and 9.32. Open painter.css in
Notepad. Add the style rules as follows:
●
Notice how the text labels for the form controls are on the left side of the con-
tent area but are right-aligned. Create a class called
labelCol
that will float to
the left, has a width of 100 pixels, aligns text to the right, and has 10 pixels of
padding on the right.
●
Configure space around the rows of form controls. Create a class named
myRow
with bottom padding set to
20
pixels.
●
Configure extra space surrounding the submit button by creating a class called
mySubmit
with a left margin set to
110
pixels and all other margins set to
10
pixels.
Save the painter.css file.
2. The Free Estimate Page.
Use the Testimonials page as the starting point for the
Free Estimate page. Launch Notepad and open the testimonials.html file in the
paintercss folder that you previously created. Save the file as estimates.html.
Modify your file to look similar to the Free Estimate page, shown in Figure 9.32,
as follows:
Change the page title to an appropriate phrase.
●
Delete the Testimonials page content from the
rightcolumn div
(but leave the
phone number and page footer in place).
●
The Estimate page will contain an
<p>
element and a form in the
rightcolumn div
.
●
Add a
<p>
element that contains the following text: Request a Free Estimate.
●
Prepare to code the XHTML for the form area. Begin with a
<form>
tag that
uses the
post
method and the
action
attribute to invoke server-side process-
ing. Unless directed otherwise by your instructor, configure the
action
attrib-
ute to send the form data to
http://webdevfoundations.net/scripts/painter.asp.
●
Configure the form control for the Name information. Code a
<div>
that is
assigned to the
myRow
class. Create a
<label>
element that is assigned to the
labelCol
class. Code the text,
Name:.Cr
eate a text box named
myName
.
●
Configure the form control for the E-mail information. Code a
<div>
that is
assigned to the
myRow
class. Create a
<label>
element that is assigned to the
labelCol
class. Code the text,
E-mail:
. Create a text box named
myEmail
.
●
Configure the Type of Job area on the form. Code a
<div>
. Create a
<label>
element that is assigned to the
labelCol
class. Code the text,
Type of Job
:.
Create a
textarea
named
myJob
with rows set to
2
and cols set to
20
.
●
Configure the submit button on the form. Code a
<div>
that is assigned to the
mySubmit
class. Code an input element with
type="submit"
and
value="Free Estimate"
.
●
Save your page and test it in a browser. It should look similar to the page shown in
Figure 9.32. If you are connected to the Internet, submit the form. This will send your
Search WWH ::
Custom Search