Case Study & Web Development Assignment

Web Development/Assignment3.docx

Assignment Instructions

Note: It is strongly recommended that you complete all labs in Lesson 5 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 3 HTML pages by this week (so you must add at least one new HTML page this week, in addition to the two pages you submitted in Week 2).  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 table to your website.  You should add a new page to your website and put the table on the new page.  The table needs to contain appropriate information pertaining to the topic of your website.  The information needs to be appropriately displayed in rows and columns, with appropriate column headers.  Do NOT simply use a table for layout (or page structure) purposes. Instead, your table needs to contain categorical information that would logically lend itself to being displayed in a table.  

 

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, and body 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 Create a table containing data or information appropriate for display with a table and is logically organized in the table

8 Give the table a border of at least 1 pixel

9 Include a caption for your table, using the table caption tag

10 Include headers for each column, using table row and table header tags

11 Include at least three rows of data in your table, using table row and table data tags

12 Format your table as indicated in the list below, using appropriate CSS properties and values

 

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 Assignment 2, so fix any errors or omissions from the last assignment before adding the new code below to your CSS file).

2 Give your table an appropriate border width, line style, and color 

3 Give your table header and table data cells an appropriate border width, line style, and color 

4 Specify an appropriate horizontal and vertical alignment for the content in your table header cells

5 Specify an appropriate horizontal and vertical alignment for the content in your table data cells

6 Specify an appropriate amount of padding around the content in your table header and table data cells

7 Give your table an appropriate background color

8 Give your table an appropriate width (using percentage instead of pixels)

9 Add any additional CSS properties that you would like for your table (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
1. Webpages (HTML files) validate without errors at  http://validator.w3.org/	10
2. Style sheets (CSS files) validate without errors at  http://jigsaw.w3.org/css-validator	10
3. Website contains well-written, well-thought-out, creative, and well-organized content (uses paragraph, line break, heading tags, and horizontal rules appropriately to organize content)	5
4. Correct use of all basic elements in a webpage document (DOCTYPE, html, head, body, meta, title, link) on every HTML page	5
5. Appropriate navigation between pages of your website, using local hyperlinks (coded with relative paths)	5
6. Table contains data or information appropriate for display with a table and is  logically organized in the table	6
7. Correct use and correct embedding of table, table caption, table row, table header, and table data tags	6
8. Table contains appropriate caption, correctly specified with table caption tag	6
9. Table contains appropriate column and/or row headings, correctly specified with table header tags	6
10. Table contains appropriate border, specified with border attribute in HTML and  width, line style, and color properties in CSS	6
11. Table header and table data cells contain an appropriate border width, line style, and color, specified in CSS	6
12. Table header and table data cells contain an appropriate horizontal and vertical alignment, specified in CSS	6
13. CSS correctly used to specify an appropriate amount of padding around the content in your table header and table data cells	6
14. Table contains an appropriate background color, specified in CSS	6
15. Table width is specified in CSS (using percentage instead of pixels)	6
16. Correctly created zip file that contains all files for webpage (maintaining original folder structure)	5
	100
***Note: Your website must include the table element in order to receive any credit for this assignment.