HTML and CSS Reference
In-Depth Information
created. Save the file as jobs.html. Modify your jobs.html file to look similar to
the Jobs page, shown in Figure 9.29, as follows:
Change the page title to an appropriate phrase.
The Jobs page will contain a paragraph and a form in the content div . Delete
the current contents of the content div (but leave the opening and closing
div tags in place).
Add a paragraph that contains the following text: Want to work at JavaJam?
Fill out the form below to start your application.
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/javajam.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: . Create 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 Experience area on the form. Code a <div> . Create a <label>
element that is assigned to the labelCol class. Code the text, Experience: .
Create a textarea named myExperience 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="Apply Now" .
Save your page and test it in a browser. It should look similar to the page shown in
Figure 9.29. If you are connected to the Internet, submit the form. This will send your
form information to the server-side script configured in the <form> tag. A confirmation
page that lists the form information and their corresponding names will be displayed.
Fish Creek Animal Hospital
See Chapter 2 for an introduction to the Fish Creek Animal Hospital Case Study. Figure
2.30 shows a site map for the Fish Creek site. The Home page, Services page, and Ask
the Vet page were created in earlier chapters. You will work with the Web pages in the
fishcreekcss folder in this case study.
You have two tasks:
1. Add style rules to the fishcreek.css file that will configure a form.
2. Create a Contact page (contact.html) as shown in Figure 9.31.
Hands-On Practice Case
1. Configure the CSS. Modify the external style sheet, fishcreek.css. The form is
styled with CSS. Review Section 9.4. See Figures 9.30 and 9.31. Open
fishcreek.css in Notepad. Add the style rules as follows:
 
Search WWH ::




Custom Search