HTML TablesAssignment #4 Solution

Before you begin this assignment, you should download the assignment’s starter file from Canvas. This is the file you will be working on and eventually submitting into Canvas. It is a Microsoft Word 2013 file, so you must have access to Word in order to edit that assignment file.

Part 1: Video -- Creating and Styling a basic Data Table for Groceries

For this part you will watch an introductory tables video and create the same Web page and style sheet as done in the video. Follow the directions below carefully to maximize your score.

Watch the “HTML Tables Tutorial” video and perform the identical steps yourself. The video is available on YouTube and lasts for 9 minutes, 37 seconds. There are two files you will have to build from scratch, one an HTML 5 web page and the other a CSS style sheet. The link to this video is given below.

Link to the video: http://www.youtube.com/watch?v=BczLWImAmBk



Before you begin working with the video, do the following initial steps to ready yourself for success with the video:
a) Create a new folder named “a4p1”. You will work inside that folder for this part of the assignment. Next, create an HTML file from scratch and save it as “index.html” inside that a4p1 folder.

b) Inside this HTML file, begin by creating the usual recommended HTML 5 structure as shown in the figure, as we have done in previous assignments. (If you are using Brackets and the HTML Skeleton extension, this code is just one click away.)

c) For the “title”, write in your own full name and the word “Tables Video”. For the html “lang” attribute, fill in “en” or “en-us”. When that is all complete, save the file as “index.html” and leave it open in your editor.

d) Next, create a new (blank) file in your editor and save it as “main.css” in that same “a4p1” folder where your “index.html” page already exists. Leave this (blank) “main.css” file open in your editor too.

e) Back in your index.html file, within the “head” section, you need to write a “link” tag to connect “index.html” to its style sheet “main.css” (again, the HTML skeleton extension can help you to create this “external” style sheet link tag:

<link rel="stylesheet" href="main.css"


f) Save your work but leave it open in the editor. Note that at this point you have a good starting point for the video. Your HTML file is a little different from the one in the video, but the differences are only in the top portion of the HTML file and don’t affect anything done in the video. The rest of the HTML changes you will be making (by following the steps in the video) will be within the “body” section of the page and should be done exactly as shown in the video. Toward the end of the video, you will also be making changes to your “main.css” style sheet file as well.

Now watch and do what the video does. When you have completed all the steps shown in the video and have successfully created the same styles in your “main.css” file, you will be ready to return to the next step below for further instructions to complete this part of the assignment.
After completing the video work, you need to insert one more grocery item into the correct row within your existing groceries table. Insert this new "Peanut Butter" row below the “Whole Wheat Bread” row and above the “Carrots” row:
Peanut Butter
$2.69
1
B4




Next, insert your own full name into the beginning of the “h1” heading above the table. As a result, the heading should read “Joe Student’s Groceries” where you put your own actual name in place of “Joe Student”.
Make sure that your table styles are working and look much like they do in the video. Note how the alternating table row background colors adjusted nicely to the addition of a new row of data. That is because of the flexibility built into the “odd” and “even” rows that were the basis of those styles. Even though your styles may appear to be working fine (and especially if they are not), you should validate those “main.css” styles using the W3C's CSS Validation Service. If you receive validation errors, you should investigate them, fix them, and retest them before moving on. Once your code is well tested, you are ready to place the relevant items into your Word file as indicated in the steps below:
Screenshot Needed: When your “Groceries table” page is complete, capture a screen shot of your page displaying in the browser so that the entire page is showing up. Use 2 screenshots if you cannot capture it all with one. The page needs to be fully visible to earn you full credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the (Windows) “Accessories Group” or just use the “PrintScreen” key. Paste your screenshot(s) into your downloaded Word submission document in the indicated area. After pasting, crop/resize the pasted screen shot as needed to eliminate unnecessary areas and bring focus to the page for grading purposes. (There should still be some of the surrounding browser visible.)



HTML Code Needed: With your completed groceries table page (index.html) open in your editor, copy and paste all of the HTML code from your editor into the “part 1 HTML code” area of the Word document you will be submitting for this assignment. No screen shot here – copy and paste the code text. Change the font of this code to “Courier New” or another monospace font and bold it (in Word) if that helps to make it more readable.



CSS Code Needed: With your style sheet file “main.css” open in your editor, copy and paste all of the CSS code from your main.css file in the editor into the “part 1 CSS code” area of the Word document you will be submitting for this assignment. No screen shot here – copy and paste the CSS code text. Make sure to get it all. Adjust the font of this code to “Courier New” or another monospace font and bold it (in Word) if that helps to make it more readable. Do not include any HTML at all – this is just a CSS code check.




Part 2: Textbook Chapter 4 -- Creating Tables in a Web Site

Read and follow along the steps and instructions given within chapter 4 (pages HTML 155 - 208). In completing this chapter tutorial, you will work with the "Oceanside Hotel and Sports Club" Web site that makes use of tables and an external style sheet. Work your way through this tutorial with following notes in mind.

Do not follow any instructions within the chapter that might ask you to print your pages. You do not need to be printing anything.
You will need to have the textbook files downloaded onto a local drive (such as your computer’s hard drive or your flash drive) to be able to complete this part of the assignment. You can obtain them from the link below as needed:

http://www.faculty.rcc.edu/mcleod/html/handouts/ch4-files.zip
After you download the given zip file, you should extract the folder and files within it and use them as you work through the tutorial in your textbook.
The actions you need to take (from the book) will be indicated by the red circled and numbered steps.
When you reach step 1 on page 170, make the following change. When entering the HTML code for line 6 (the "title" tag appearing at the bottom of page 169), insert your own first and last name into the title text right before the word "Oceanside" so that the title will display as follows: if your name is Joe Smith, the title would read "Joe Smith's Oceanside Hotel and Sports Club". That way your name will appear in your eventual completed "oceanside.html" page.
When you reach step 1 on page 183, make the following change. When entering the CSS code for the external style sheet, enter the assignment and part numbers and your own full name as shown below (including the slashes and asterisks) at the very top of the style sheet file:

/* Assignment 4 Part 2 Joe Student */

This is known as a CSS comment and will be ignored by the browser but allows you to include information that is helpful to humans that view your CSS code and is used here to identify you for grading purposes. Comments in CSS always begin with /* and always end with */.
When you reach step 1 on page 204, and are entering the "caption" for the table, instead of entering the caption "Additional menu items available upon request", enter this caption shown below, where you use your own actual name instead of "Joe Student":

Menu created by our head chef, Joe Student.
When you complete the main chapter on page 208, continue on to do the "Special Feature 1 -- Attracting Visitors to your Web Site" on pages 219 - 225. By doing so you will be making a few last modifications to your oceanside.html file that you saved in the chapter. You will be adding "meta" tags to make the page more useful for search engines. More about this below:

The book introduces you to both a “keywords” meta tag and a “description” meta tag. These tags go in the “head” section of the page. Keep in mind that the “keywords” meta tag is no longer used by search engines for ranking purposes but the “description” meta tag is still very useful. So for the purposes of this assignment, be sure to do at least the description meta tag to get full grading credit.
When you have completed the main chapter and the Special Feature discussed above, you are ready to make your screenshot(s) and code copying to your assignment’s Word file for later submitting into Canvas.
Screenshot needed: When your “Oceanside.html” is complete and displaying in the browser, capture a screenshot of it so that the entire page is showing up. Use 2 screenshots if you cannot capture it all with one. The page needs to be fully visible to obtain full grading credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the “Accessories Group” or the “PrintScreen” key. Paste your screenshot(s) into your Word document in the indicated area. After pasting, you can use Word’s features to crop or resize the screenshot as needed to make sure it is easy to see for grading purposes.
Code needed: With your completed “oceanside.html” page’s code open in your editor (including the “description meta tag” discussed above), copy and paste its HTML code into the “part 2 code” area of the Word file you will be submitting later for this assignment. No screen shot here – just copy and paste the code text. After pasting, with your code selected, use Word’s features to change the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable.







Part 3: Entertainment Table for the Coffee House Site

For this assignment part, there is no associated video or textbook tutorial. Instead, you will apply your knowledge of tables from parts 1 and 2. You are given a partially completed Web “Entertainment” page and are asked to write the HTML code to create a table to complete the page. The goal of your work is to complete the page so that it looks like the screen shot below:



Note that in the above screen shot, the arrows indicate something you need to create or change from the starter files in order to get credit for that feature. In this case, the table (surrounded by 4 red arrows) is worth most all of the points and placing your full name in the title and footer areas instead of "Joe Student" is worth another few points (one arrow points to each of these at the top and bottom of the screen shot.) Follow the steps below to complete the required work.
First of all, you need to download the files for this coffee house web site. You can do so from the link provided below.

http://www.faculty.rcc.edu/mcleod/html/handouts/a4p3.zip

Once it downloads, extract the folder and files it contains and familiarize yourself with them. There should be a partially completed web page file, a completed style sheet file, and 2 image files. Double check that this is the case before proceeding to the next step.
Open the "a4p3-start.html" and "a4p3.css" files in your editor and familiarize yourself with their code. In particular, notice the area in the html file where you need to add the code for the table. This will be the primary focus of your work.
As you work through the steps below, test your page in the browser to confirm the proper results, validate your code to avoid any errors, and take care to format your code in a manner that is easy to read (indent and space your code appropriately). This is an HTML 5 document, so your code must conform to HTML 5 rules.
Locate the "title" tag and replace "Joe Student" with your own full name.
Add an appropriate description "meta" tag into this page's "head" section (as you did toward the end of part 2 above.) Use a specific description that matches the content of this coffee site as if you were really trying to describe the business accurately for potential customers. You will be graded not only on the meta tag being written correctly, but also on the description it contains. Assume that your description is what a prospective customer would see in the browser as the result of a Google search.
Save your page as "a4p3.html" in the same a4p3 folder. Continue your work in this new copy of the file. This way you will leave the original starter file "a4p3-start.html" intact while using the new "a4p3.html" file as your final version of the page.
Locate the "footer" tag and replace "Joe Student" with your own full name.
Locate the blank area under the "comment" that indicates where the table needs to be placed.
Create the open and close "table" tags needed to surround the table's data. To trigger the given CSS formatting already coded into the linked style sheet, give the table an "id" of "datatable" (this will help you achieve the formatting shown in the screen shot.)
Create a "caption" using the words "Weekly Entertainment Schedule", which should then appear above the first row of the table (as shown in the screen shot.). If you are unsure of how to use "caption" tags, review some sample table code. Note that the CSS is already in place to format the caption as needed.
Next, create the first row of the table, which should contain table headers ("th" tags) for "Day" in column 1, for "9am - 1pm" in column 2, for "1pm - 6pm" in column 3, and for "6pm - close" in the last column, as shown in the screen shot.
Create the appropriate table related code for the last 3 rows of the table. Note: to get the "In store music" and "Children's book readings" entries to extend across multiple columns or extend down through multiple rows, as shown in the screen shot, you will need to make appropriate use of "colspan" or "rowspan" attributes in those table cells. These colspan and rowspan attributes are discussed in your textbook in several pages within chapter 4.
Double check that your code is complete, valid, easy to read, and producing the desired result in the browser. (You will lose points for anything that is not easy to read valid HTML 5 code and for anything that is not looking correct in the browser.)
Screenshot Needed: When your “Entertainment table” page is complete, capture a screen shot of your page displaying in the browser so that the entire page is showing up. Use 2 screenshots if you cannot capture it all with one. I need to see it all to give you full credit. To capture a screen shot in windows, you can use the “Snipping Tool” from the “Accessories Group” or the “PrintScreen” key. Paste your screenshot(s) into your Word document in the indicated area. After pasting, you can use Word’s features to crop or resize the screenshot as needed to make sure it is easy to see for grading purposes.
HTML Code Needed: With your completed entertainment table page (html file) open in your editor, copy and paste all of the HTML code from your editor into the “part 3 HTML code” area of the Word document you will be submitting for this assignment. No screen shots here – copy and paste the code text. After pasting, with your code selected, use Word’s features to change the font of this code to “Courier New” or another monospace font and bold it if that helps to make it more readable. (You should also fix any strange tabbing that might cause some of your code lines to be aligned to the right hand side of the page in Word. Deleting the tab is usually all that is needed.)