New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 6 Case 1

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 6 Case 1 Sblogger

$ 15

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 6 Case 1

Sblogger Sports enthusiast Steve Lavent is working on a Web site called Sblogger that will contain articles and commentary on the world of sports. He’s asked for your help in designing the page on which users can submit their own comments on the articles that Steve posts to his blog. Your job will be to create a prototype for the commentary form, and to include HTML code and CSS styles to help validate user input. A preview of the Web form you’ll create is shown in Figure 6-78.

Complete the following:
1. In your text editor, open the sblogtxt.htm and commtxt.css files from the tutorial.06\case1 folder included with your Data Files. Enter your name and the date in the comment section of the file. Save the files as sblogger.htm and comments.css, respectively.
2. Go to the sblogger.htm file in your text editor and review the contents and structure of the document. Link the file to the comments.css style sheet.
3. Scroll down to the h2 heading title Post Your Comments, and directly below this heading insert a form element with the action www.sblogger/cgi-bin/subcomments using the post method.
4. Within the form element, create a field set with the name and id commentFS.
5. Create a label element with the text Username. Within the label element, insert an input box for the username field. Make the field required and add the title Supply your username.
6. Create a label element with the text E-mail. Within the label element, insert an input box for the email field. Set the data type to email and make the field required. Add the title Supply a valid e-mail address.
7. Create a label element with the text Password containing an input box for the password field. Set the data type to password and make the field required. Add the title You must provide your password.
8. Create a label element with the text Comment (500 character limit), placing the parenthetical text on a new line, and within the label element insert a text area box for the commentBox field. Limit the number of characters that can be typed into the text area box to 500 characters.
9. Add a submit button with the text Submit Comment.
10. Save your changes to the file and then go to the comments.css file in your text editor. Create style rules for the styles described in the following steps.
11. Display the field set with a background color of (245, 245, 255). Set the top and bottom margins to 15 pixels and the left and right margins to auto. Add 5 pixels of padding and set the width of the field set to 90%.
12. Display labels as blocks floated on the left once the left margin is clear of elements. Set the font size to 0.9 em and the width to 100%. Set the top and bottom margins to 5 pixels.
13. Display input boxes and text area boxes as blocks floated on the right margin. Set the font size to 0.9 em and the width to 55%. Set the left and right margins to 10 pixels. In addition, set the height of text area boxes to 150 pixels.
14. Display the submit button as a block once both margins are clear. Do not float the submit button. Set the dimensions of the button to 200 pixels wide by 30 pixels high.Set the top and bottom margins to 5 pixels, and the left and right margins to auto.
15. When input boxes and text area boxes receive the focus, change the background color to the value (225, 225, 240).
16. When input boxes receive the focus and are valid, change the background color to (225, 240, 225) and display the background image go.png in the bottom-right corner of the box with no tiling. Resize the background image so that it is contained within the input box.
17. When input boxes receive the focus and are invalid, change the background color to (240, 225, 225) and display the background image stop.png in the bottom-right corner of the box with no tiling. Resize the background image so that it’s contained within the input box.
18. Close the style sheet file, saving your changes.
19. Open sblogger.htm in your Web browser and test the form. Verify that you cannot leave the username, email, and password fields blank and still submit the form. Also verify that the form is rejected if an invalid e-mail address is submitted in the email field.
20. If you have access to the Google Chrome browser, test the Web page in that browser and verify that the title text you entered for the input boxes in Steps 5 through 7 is included in the error box supplied by the browser when those input boxes fail the validation test.
21. Submit your completed files to your instructor, in either printed or electronic form, as requested.

82 in stock

SKU: DHTML5TUT6CASE1SPORTS Category:

Description

New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 6 Case 1

Sblogger Sports enthusiast Steve Lavent is working on a Web site called Sblogger that will contain articles and commentary on the world of sports. He’s asked for your help in designing the page on which users can submit their own comments on the articles that Steve posts to his blog. Your job will be to create a prototype for the commentary form, and to include HTML code and CSS styles to help validate user input. A preview of the Web form you’ll create is shown in Figure 6-78.

Complete the following:
1. In your text editor, open the sblogtxt.htm and commtxt.css files from the tutorial.06\case1 folder included with your Data Files. Enter your name and the date in the comment section of the file. Save the files as sblogger.htm and comments.css, respectively.
2. Go to the sblogger.htm file in your text editor and review the contents and structure of the document. Link the file to the comments.css style sheet.
3. Scroll down to the h2 heading title Post Your Comments, and directly below this heading insert a form element with the action www.sblogger/cgi-bin/subcomments using the post method.
4. Within the form element, create a field set with the name and id commentFS.
5. Create a label element with the text Username. Within the label element, insert an input box for the username field. Make the field required and add the title Supply your username.
6. Create a label element with the text E-mail. Within the label element, insert an input box for the email field. Set the data type to email and make the field required. Add the title Supply a valid e-mail address.
7. Create a label element with the text Password containing an input box for the password field. Set the data type to password and make the field required. Add the title You must provide your password.
8. Create a label element with the text Comment (500 character limit), placing the parenthetical text on a new line, and within the label element insert a text area box for the commentBox field. Limit the number of characters that can be typed into the text area box to 500 characters.
9. Add a submit button with the text Submit Comment.
10. Save your changes to the file and then go to the comments.css file in your text editor. Create style rules for the styles described in the following steps.
11. Display the field set with a background color of (245, 245, 255). Set the top and bottom margins to 15 pixels and the left and right margins to auto. Add 5 pixels of padding and set the width of the field set to 90%.
12. Display labels as blocks floated on the left once the left margin is clear of elements. Set the font size to 0.9 em and the width to 100%. Set the top and bottom margins to 5 pixels.
13. Display input boxes and text area boxes as blocks floated on the right margin. Set the font size to 0.9 em and the width to 55%. Set the left and right margins to 10 pixels. In addition, set the height of text area boxes to 150 pixels.
14. Display the submit button as a block once both margins are clear. Do not float the submit button. Set the dimensions of the button to 200 pixels wide by 30 pixels high.Set the top and bottom margins to 5 pixels, and the left and right margins to auto.
15. When input boxes and text area boxes receive the focus, change the background color to the value (225, 225, 240).
16. When input boxes receive the focus and are valid, change the background color to (225, 240, 225) and display the background image go.png in the bottom-right corner of the box with no tiling. Resize the background image so that it is contained within the input box.
17. When input boxes receive the focus and are invalid, change the background color to (240, 225, 225) and display the background image stop.png in the bottom-right corner of the box with no tiling. Resize the background image so that it’s contained within the input box.
18. Close the style sheet file, saving your changes.
19. Open sblogger.htm in your Web browser and test the form. Verify that you cannot leave the username, email, and password fields blank and still submit the form. Also verify that the form is rejected if an invalid e-mail address is submitted in the email field.
20. If you have access to the Google Chrome browser, test the Web page in that browser and verify that the title text you entered for the input boxes in Steps 5 through 7 is included in the error box supplied by the browser when those input boxes fail the validation test.
21. Submit your completed files to your instructor, in either printed or electronic form, as requested.

Reviews

There are no reviews yet.

Only logged in customers who have purchased this product may leave a review.

Related products