$**$Please$,$ include pictures of the steps.$**$

In this exercise, you'll view and modify a web page for a survey. This should

give you some hands$-$on experience with working with HTML and CSS$.$

Review the HTML and CSS

$1.$ Start your IDE and open the ch$04\_$exl$\_$survey project in the ex$\_$starts

directory.

$2.$ Open the index.html page and review its HTML$.$

$3.$ Open the survey.css page in the styles subdirectory and review its CSS$.$

Test the page

$4.$ Run the project. This should display the web page in your web browser. In the

browser's address bar, the URL for the page should use the Tomcat server.

$5.$ Open the Windows Explorer $($PC$)$ or Finder $($Mac$)$ and double$-$click on the

index.html file that's in the ch$04$survey$/$web folder to display the page in your

web browser. This time, the URL for the page should use the file system, not

the Tomcat server.

$6.$ Run the project again. When Tomcat displays the web page, click the Submit

button. Since you didn't enter the required fields, this should cause the browser

to display an error.

$126$ Section $2$ Essential servlet and JSP skills

$7.$ Fill out all required fields and click the Submit button again. This should

request this URL:

http:$//$localhost:$8080/$ch$04\_$ex$1\_$survey$/$survey

For now, this should display an error that indicates that no resource exists at

this URL. In the next chapter, you'll learn how to map a servlet to this URL.

Modify the page

After each step that follows, run the page to make sure the changes are correct.

If necessary, click the browser's Refresh button to refresh the page.

$8.$ Edit the survey.html page so it displays the image for the Murach logo at the

top of the page. This image is in the images directory of your web application.

$9.$ After the label and text box that let the user enter an email address, add

another label and text box that let the user enter a date of birth. This data

should be optional, not required.

$10.$ Turn the Search engine button on as the default button for the group of radio

buttons.

$11.$ Add a Social Media radio button before the Other radio button.

$12.$ After the check box, add another check box with a name of emailOK and text

that says, "YES, please send me email announcements." Then, modify both

check boxes so that neither one is checked by default.

$13.$ When you've got everything working right, close the project.