Description
Specific Instructions
Perform all of the following steps to complete this task
1) Begin by creating a new file in your text editor and include all of the basic HTML code like you did in your previous assignments. Or you can simply make a copy of your HTML file from last week and name the new copy UboguVictoryAssignment6.html, but be careful not to overwrite your file from last week because you will need it again when you do your Final Project during Week 8.
2) Make sure you change the contents of the <title> tag to “Assignment 6” (just the words not the quotation marks) and make sure your full name is inside of the <h1> heading, just like in your previous assignments. Also, delete the contents of the <script> tag — everything between the <!– and //–> tags, if you created your new file by making a copy of your previous file, because you will be creating a brand new page with different JavaScript code for this assignment. Save your file.
3) Upload this file to the HTML validator to check for compliance with the HTML5 standards. Your file should pass validation. If you receive any errors or warnings, then go back through the previous steps of the assignment again until you have corrected all errors and your file passes validation.
4) Create another new file in your text editor and save it as Assignment6.css or make a copy of last week’s CSS file, being careful not to overwrite last week’s file.
5) In your CSS file, write code to set the background color of your page to #FFFFE6 and write code to center the h1 element. Save your CSS file.
6) Access your webpage again in your browser and confirm that your page has a light yellow background and that the heading is centered. Upload your CSS file to the CSS validator to check for compliance with the CSS standards. Your file should pass validation. If you receive any errors or warnings, debug your CSS code until you have corrected all errors and your file passes validation.
7) Open your Assignment 6 HTML file for editing. If you need a refresher on creating an HTML form, make sure you look at the Week 6 Lessons in the Lessons area of the classroom.
Create a form that contains text inputs for the user’s first name and last name. Add an email input for the user’s APUS email address. Add a select element that lists 5 school subjects and asks the user to choose their favorite subject. Make sure you have descriptive text before each input so that the user knows what they are supposed to enter or select for each input field.
Next, use JavaScript to validate each form input and print an alert message to the user for each field that fails validation. Write a function similar to the checkForm() function in Lab 10-5 that checks to make sure the user has not left any fields blank.
Note: Do not use the “required” keyword on your HTML form inputs. Although this is one way of requiring user’s to complete certain form inputs, you are specifcially being asked to use JavaScript to validate your form inputs instead. Follow the code examples in your textbook for this.
8) Use pattern matching to verify that the user has entered an APUS email address. Look at the example in the sections, “the email object” in Chapter 10.5 of your textbook for an example of how to code this.
9) You may add any additional HTML, CSS, or JavaScript content that you wish, to practice more of the features that you have learned about in your online textbook, as long as all of your code files still pass validation. However, do not add anything to your files that would make them invalid according to the standards. You can confirm this by making sure your files still pass validation.
10) validate your HTML and CSS files one last time at Validation Service AND W3C, using the “Validate by File Upload” option. Note: It is critical that you debug and fix ALL errors identified by the validator before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that all of your code files pass validation.
11) Create a zip archive containing all pages pertaining to your website (.html files, .css files, .js files, image files, etc). Make sure you maintain the necessary directory structure in your zip archive so that your webpages will refer correctly when unzipped. In other words, if your images are in a sub-folder, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip archive, too, including the sub-folder.
