Web Development Assignment

Web Development/Assignment Instructions.docx

Assignment Instructions

 

Note: It is strongly recommended that you complete all labs in Lesson 6 of your textbook, for practice, before attempting this assignment.  Although you will not submit the labs from your textbook, they will give you the foundation to understand how to correctly code in CSS and HTML.

 

You must write the code files by hand for all assignments in this class.  A simple text editor, such as Notepad or Notepad++ will suffice.  DO NOT use web page programs, such as FrontPage, Dreamweaver, etc.  You must write the code for your web pages yourself.

 

Make sure all of your web pages comply with the HTML 5 standards and CSS standards.  DO NOT use deprecated (outdated) tags and attributes from previous versions of HTML.  By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your HTML files at  http://validator.w3.org , you can be sure that your code complies with HTML 5.  All external style sheets (.css files) must pass validation at the W3C CSS Validation Service:  http://jigsaw.w3.org/css-validator/

 

Create your HTML and CSS files using a text editor, such as Notepad or Notepad++.  Your home page (which you created during Week 1) should still be named "LastFirstHomepage.html" where "Last" is your last name and "First" is your first name.  For example, if your name is John Smith, you would name your home page SmithJohnHomepage.html  The other pages of your website should be named descriptively according to the content on each page.  All pages will be linked together using appropriate navigation so that I can navigate to and from each page of your website from your home page.

 

Instructions:

 

For this assignment, you should continue to build on the website you have been building since the first week of this course.  You are creating an informative web site about a topic that interests you.  Use this as an opportunity to teach me something new about a topic which you are knowledgeable about!  Make sure that you write the content (the paragraphs of information about your topic) yourself.  Do not copy content from other web pages.  Your website should contain at least 4-6 paragraphs of information, arranged in a logical manner (using headings and sub-headings appropriately), and it should contain at least 4 HTML pages by this week (so you must add at least one new HTML page this week, in addition to the three pages you submitted in Week 3).  However, at no time may your website contain more than a maximum of 10 HTML pages (this is the limit that I will be able to validate and grade each week).

 

This week you will add a form to your website.  You should add a new page to your website and put the form on the new page.  The information that the form gathers should be relevant to the theme of your website. For example, your form could be used as a survey, asking visitors to your website to share their opinions or preferences with you on items or issues relevant to the theme of your website.

 

The HTML pages of your website must include all of the following:

 

1 Contains the HTML 5 DOCTYPE declaration on each page

2 Correctly uses html, head, body, and link tags on each page

3 Includes charset, author, keywords, and description meta tags on each page

4 Use title tags to give each page an appropriate title

5 Link all pages to an external style sheet (.css file)

6 Appropriate navigation between pages of your website, using local hyperlinks (coded with relative paths)

7 Your page must contain only one form, with an opening and closing form tag. Your form must use the post method, and for the action attribute use "http://ss1.ciwcertified.com/cgi-bin/process.pl".

8 Your form must contain each of the following types of form fields:

· textbox

· radio button

· set of check boxes

· multiple-option select list

· text area

· password field

· file upload

· submit button

· reset button

9 Make sure descriptive text precedes each form field, as well as descriptive text for each input value or on each button.

10 Be sure to create relevant and informative content and to design your website attractively.

 

Your external style sheet (.css file) must include all of the following:

 

1 Appropriate CSS for main elements in your page (body, headings, horizontal rules, images, etc.), such as page background color, text color, font types, font sizes, font colors, width, height, float, margin, etc. (Basically, this refers to the CSS you added to your website in Assignments 2 & 3, so fix any errors or omissions from the last assignment before adding the new code below to your CSS file).

2 Add any additional CSS properties that you would like for your form (optional)

 

Note:  Keep in mind that  you may only have one CSS file for your website in this class.  All CSS code will go in one file which you will link into each of your HTML pages.  By using only one CSS file you harness the power of CSS by ensuring that your entire website has a consistent look and feel, and you make your website easier to maintain since you will only have to update one file in order to make a change to the formatting and appearance of your entire website.  If you have formatting that you wish to apply only to certain pages, it is recommended that you create CSS classes in your CSS file for that formatting so that you can apply those specific classes to specific elements on specific pages of your website.

 

Before submitting your web site:

 

1 You must validate  all  HTML files at  http://validator.w3.org/  and you  must fix any errors that the validator identifies before submitting your web site for grading.  All files that you submit are required to pass validation without any errors.   Note:  Keep in mind that the points allocated in the rubric below for HTML validation are  "all or nothing."  In order to receive the points for passing validation, all HTML files submitted as part of your website must pass validation against the HTML5 standard without any errors.   Thank you for your compliance with this important requirement!

2 You must validate  all  CSS files at  http://jigsaw.w3.org/css-validator/  and you  must fix any errors that the validator identifies before submitting your web site for grading.  All CSS files that you submit for grading are required to pass validation without any errors.   Note:  Keep in mind that the points allocated in the rubric below for CSS validation are  "all or nothing."  In order to receive the points for passing validation, your CSS file submitted as part of your website must pass validation against the CSS3 standard without any errors.   Thank you for your compliance with this important requirement!

  

Submission Instructions: Create a zip file containing all files related to your web page (.html files, .css files, and/or image files).  Make sure you maintain the necessary directory structure in your zip file so that your webpages will view correctly when unzipped.  In other words, if your images are in a sub-folder on your computer, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip file, too.  Submit only the zip file for grading.

 

Rubric for Grading Assignment	Points
10 points 1. Webpages (HTML files) validate without errors at  http://validator.w3.org/	10
10 points 2. Style sheets (CSS files) validate without errors at   http://jigsaw.w3.org/css-validator	10
5 points 3. Website contains well-written, well-thought-out, creative, attractive, and well-organized content (uses paragraph, line break, heading tags, and horizontal rules appropriately to organize content)	5
5 points 4. Correct use of all basic elements in a webpage document (DOCTYPE, html, head, body, meta, title, link) on every HTML page	5
5 points 5. Appropriate navigation between pages of your website, using local hyperlinks (coded with relative paths)	5
5 points 6. CSS style sheet containing appropriate formatting for your website	5
5 points 7. Correctly coded form tag with method and action attributes	5
5 points 8. Correctly coded textbox	5
5 points 9. Correctly coded radio button	5
5 points 10. Correctly coded set of check boxes	5
5 points 11. Correctly coded multiple-option select list	5
5 points 12. Correctly coded text area	5
5 points 13. Correctly coded password field	5
5 points 14. Correctly coded file upload	5
5 points 15. Correctly coded reset button	5
5 points 16. Correctly coded submit button	5
5 points 17. Descriptive text preceding each form field, as well as descriptive text for each input value or on each button	5
5 points 18. Correctly created zip file that contains all files for webpage (maintaining original folder structure) and also contains screenshot of quiz score	5
Total 100 Points	100
***Note: Your website must include the form element in order to receive any credit for this assignment.