Unit 6. Review "A" Sblogger

Unit 6. Review "A" Sblogger

Tutorial 6 Review - A

Sblogger

1.    In your text editor, open the sblogtxt.htm and commtxt.css files from your student 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 attribute title= “” with the text Supply your username.  Note: The title attribute provides an advisory title for the element.

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 attribute with the text 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 attribute with the text 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 directly below the closing </fieldset> tag 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 the labels as blocks floated on the left once the left margin is clear of elements.  Set the font size to 0.9em 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.9em and the width to 55%.  Set the left and right margins to 10 pixels.  In addition, set the height of the 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 is contained within the input box.

18.Close the style sheet, 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.Next 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.