I need help with this assignment. Mine does not turn out right after multiple attempts. Ive pasted in the instructions, the base HTML file and the Base CSS file.

Linking CSS Files

Enter your name and the date in the comment section of the wm_demo.html and wm_forms.css files.

Return to the wm_demo.html file in your editor. Add a link to the wm_forms.css style sheet file to the document head. Add a script element to load the wm_script.js file.

Form Elements

Scroll down to the h1 heading and insert a form element. You do not need to specify an action or method attribute.

Text Boxes

Inside the form, insert a text area box with the ID sampleBox for the field sampleText. Add the following attributes to the text area box:

• Add the placeholder text Enter sample text and press the Tab key.
• Use the autofocus attribute so that the text area box receives the focus when the page is opened by the user.
• Set the tabindex attribute of the textarea control to 1.
• Set the wrap attribute to hard so that line returns are retained as part of the field value.

Note: Do not include a blank space between the opening and closing tags or else the placeholder text will not appear within the text area box.

After the text area box, insert a paragraph containing the text Select the CSS style values from the form below and preview the effect on the sample text in the preview box.

Field Sets

Directly after the paragraph, insert a field set with the legend Fonts that will be used to insert controls the user can use to select font styles. Note: In the steps that follow, make sure you add both a name attribute and an id attribute to each selection list giving the same value to both attributes. Also, make sure that you enter the name and ID values in lowercase letters. Finally, make sure that every selection list has both option text and option values set to the same text string.

Font Family

Within the Fonts field set, insert the label Font Family followed by a selection list for the fontfamily field. Add the following options to the selection list: default, serif, sans-serif, monospace, cursive, fantasy, Arial, Book Antiqua, Courier New, Geneva, Helvetica, Impact, Palatino, Tahoma, and Times New Roman. Set the option values equal to the option text, including the single quotes in the option value where required for the font name.

For the options created for the fontfamily selection list, enclose the generic font names in an option group named generic and the specific fonts within an option group named specific.

Font Style

After the fontfamily selection list, insert the Font Style label followed by a selection list for the fontstyle field with the option text and option values equal to normal, italic, and oblique.

Font Weight

Add the Font Weight label followed by a selection list for the fontweight field containing the option values and option text normal and bold.

Text Decoration

Add the Text Decoration label followed by the selection list for the textdecoration field containing the option values and option text none, line-through, overline, and underline.

Text Transform

Add the Text Transform label followed by the selection list for the texttransform field containing the option values and option text none, capitalize, lowercase, and uppercase.

Fonts Variant

Add the Font Variant label followed by the selection list for the fontvariant field containing the option text and values normal and small-caps.

Next, you insert controls the user can use to select both the text and background colors that will be applied to the demo text.

Colors

Create a field set with the legend Colors and containing the following labels and input elements:

• The Font Color (hexadecimal) label followed by an input box with the data type set to color, the field name and ID set to color, and the default value set to #000000.
• The Background Color (hexadecimal) label followed by an input box with the color data type, the field name and ID set to backgroundcolor, a placeholder value of #rrggbb, and the default value set to #FFFFFF. Finally, you create controls that define the typographical sizes.

Legend Sizes

Create a field set with the legend Sizes.

Within the Sizes field set, insert the Font Size (px) label. Following the label, insert a div element belonging to the slider class. Within the div element, insert a range slider with the field name and ID fontsize. Have the value of the fontsize field range from 8 to 40 in steps of 1. Give the fontsize field a default value of 14. Directly before and after the input element opening and closing tags, insert the text 8 and 40 respectively so that the user can see the range of values in the range slider control.

Repeat the previous step to create range sliders for the other typographical sizing styles and that include text before and after the slider input control opening and closing tabs to show the range of the slider:

• The Letter Spacing (px) label followed by a letterspacing field that ranges from 0 to 10 in steps of 1 with a default value of 0.
• The Word Spacing (px) label followed by a wordspacing field that ranges from 0 to 10 in steps of 1 with a default value of 0.
• The Line Height (em) label followed by a lineheight field that ranges from 0 to 4 in steps of 0.2 with a default value of 1.
• The Text Indent (px) label followed by a textindent field that ranges from 0 to 10 in steps of 1 with a default value of 0.

*********************************HTML FILE****************************************

• Home
• Tutorials
• Widgets
• Forums
• Demos

• Home
• Animations
• Buttons
• Calendars
• Cookies
• Drag & Drop
• Image Tools
• Icons
• Layout Tools
• List Boxes
• Menus
• Popups
• Ribbons
• Sliders
• Spinners
• Toolbars
• Tooltips
• Tree Views
• Tutorials
• Tips & Tricks
• White Papers
• User Forums
• External Links
• Demonstrations
• Contact Us

CSS Demo

Rendered Text

@charset "utf-8";

***************************************CSS FILE****************************************

/*

New Perspectives on HTML and CSS, 7th Edition

Tutorial 7

Case Problem 3

WidgetMage Form Styles

Author:

Date:

Filename: wm_forms.css

*/

/* Field Set Styles */

/* DIV Styles */

/* Control Styles */

/* Placeholder Styles */