General Instructions for your Website: During Week 1 through Week 7 of this c

 
General Instructions for your Website:
During Week 1 through Week 7 of this course, you will be building a personal website on a topic of your choice. Choose a topic about which you are both knowledgeable and enthusiastic, so that you will be able to easily write about the topic and share your knowledge of the topic through your website. During Week 1, you will create the home page of your website. 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). During Week 2, you will add an external style sheet to your website. During Week 3 through Week 7, you will either add additional pages to your website or you will add new functionality to your home page, as directed in the instructions for each assignment.
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 (or TextEdit on the Mac). DO NOT use GUI editors, such as FrontPage, Dreamweaver, etc. You must write the code for your web pages yourself. If you are using a PC, it is strongly recommended that you download the free Notepad++ text editor because it contains extra features which assist with debugging, such as line numbering and color coding of different elements of syntax. Mac users should use the TextEdit text editor that comes with the Mac OS. However, if you are a Mac user, make sure you set TextEdit to use Plain Text by default. You can find instructions for this here.
Make sure all of your web pages comply with the HTML 5 standards and CSS standards. DO NOT use obsolete HTML elements and attributes from previous versions of HTML. By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your HTML files here, you can be sure that your code complies with HTML 5. Starting Week 2, your external style sheet (.css file) must pass validation at the W3C CSS Validation Service. Make sure you use the “Validate by File Upload” option (and NOT the “Validate by Direct Input” option), on both of these validators since this is the way your instructor will check your pages when grading your assignments.
The home page of your website must 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 file SmithJohnHomePage.html Starting with Week 2, you will also have a CSS file linked into every HTML page on your website. Name your CSS file “LastFirstStyleSheet.css” where “Last” is your last name and “First” is your first name. Your website must only have 1 CSS file and that file should be linked into all HTML pages on your website. Additional HTML pages created for your website (During Week 3 through Week 5) should be hyperlinked together through a navigation menu that appears on all pages of your website. Naming conventions for each additional page on your website will be included in each assignment description that requires a new HTML page.
Specific Instructions for Assignment 4:
For this assignment, you will add a third page to your website named “table.html” and code a table on that page. You will also add code to your CSS file to format your table.
1) Create a new HTML file in your text editor and name the file “table.html”. Just like last week, your new file should contain all of the same basic code that is in the head section of your home page. The body section will contain your new table, which you will create by following the remaining steps of this assignment. After coding all of the basic required HTML tags in your new file, save your new file and validate it using the HTML validator. Debug and fix any errors identified by the validator until your file passes validation.
2) Make sure the external CSS style sheet you created in Assignment 2 is linked into your new “table.html” file with the tag in the head section of the file. Your website should only have 1 CSS file, and that same file should be linked into all HTML pages of your website.
3) Modify your navigation menu on your home page and your “about.html” page by adding a link to this new page. Then add your navigation menu to your new “table.html” file, so that users can navigate to your other pages from this new page.
4) In your table.html file, add the following code:
Create a table using the

tag. Your table must have a row of headings and at least three rows and three columns of data. Use the

,

tag. You can read about adding a caption to your table here (in the section entitled, “Table Caption” about half-way down the page).
Open your CSS file in your text editor and complete the following steps:
6) In your CSS file, set the “width” property for the

element, using percentage rather than pixels. You can read about setting table width here.
7) In your CSS file, give your table a background color that is different from the background color of the body of your webpage. Use the “background-color” property. You can read about table colors here.
8) In your CSS file, set the “border-style”, “border-width”, and “border-color” properties for the

,

, and	elements using the border shorthand property (do not set each property separately). You can read about the CSS table border properties here. 9) To avoid double borders, set the “border-collapse” property to indicate that table borders should be collapsed into a single border. You can read more about collapsing table borders here. 10) Set the CSS “padding” property for your table header	and table data	cells. You can read about adding cell padding here. 11) Set the horizontal alignment of your table header	and table data	cells, using the “text-align” property. Set the vertical alignment of your table header	and table data	cells, using the “vertical-align” property. Even if you like the default settings of these properties, make sure you explicitly set each of these properties for both your table header	and table data	cells in your CSS file, to demonstrate your understanding of how to set these properties. You can read about horizontal alignment and vertical alignment here. Hint: You can find examples of all of the HTML elements and CSS properties required for this assignment in the Week 4 module in the Content area of the classroom. Before submitting your web site: Validate all HTML files here, using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading. Validate your CSS file at here, using the “Validate by File Upload” option, and fix any errors that the validator identifies before submitting your web site for grading. Note: It is critical that you debug and fix ALL errors identified by these two code validators before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that your code files pass validation. Submission Instructions: Create a zip file containing all files related to your web page (.html files, .css file, image files, and/or multimedia 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. ——————————————————————————————————————- The video below will walk you through each of the steps of the assignment: Week 4: Tables: Rubric for Grading Assignment Grading Assignment Exemplary Accomplished Developing Beginning Points Available Webpages (HTML files) validate without errors here. Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 10 Style sheet (CSS file) validates without errors here. Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 10 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) Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Correct use of all basic elements in a webpage document (Ex: DOCTYPE, html, head, body, meta, title, link, etc.) on every HTML page Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Consistent navigation menu on all pages of your website, using local hyperlinks (coded with relative paths) Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 CSS style sheet containing appropriate formatting for your website, linked into all HTML pages on your website Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table contains data or information appropriate for display with a table and is logically organized in the table Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 10 Correct use and correct embedding of table, table row, table header, and table data tags Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 10 Table contains appropriate caption, correctly specified with table caption tag Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table contains appropriate column and/or row headings, correctly specified with table header tags Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table, table headers, and table data cells contains appropriate border, specified with the border shorthand property in CSS, and the border-collapse property Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table header and table data cells contain an appropriate horizontal and vertical alignment, specified in CSS Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 CSS correctly used to specify an appropriate amount of padding around the content in your table header and table data cells Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table contains an appropriate background color, specified in CSS Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Table width is specified in CSS (using percentage instead of pixels) Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Correctly created zip file that contains all files for webpage (maintaining original folder structure) Student effectively completed the assignment. Student partially completed the assignment. The student provided limited and meaningless substance completing the assignment. Student failed to complete the assignment. 5 Total 100 ***Note: Your website must include the required table, as specified in the instructions above, to receive any credit for this assignment. Websites submitted without a table will not receive credit.

, and	tags appropriately. You can see examples of the code for HTML tables here. 5) In your HTML file, give your table a caption, using the