Question

In: Computer Science

PRG/280 Week Two Assignment: Adding Navigation and CSS This assignment walks you through the steps of...

PRG/280 Week Two Assignment:

Adding Navigation and CSS

This assignment walks you through the steps of adding one more page to your website and writing navigation (i.e., adding hyperlinks) between the two pages. The starting point will be the GroceryHome.html page from Week One.

Hint: Copy the GroceryHome.html file to a new folder (suggested name for the folder: Week_2_Assignment) for Week Two.

Step 1) First, modify the Week Two GroceryHome.html page to add the navigation. After the opening <body> tag, but before the opening <header> tag, add the following code:

            <nav>

               <a href="GroceryHome.html">Home</a> |

               <a href="Products.html">Products</a> |

               <a href="AboutUs.html">About Us</a> |

               <a href="Contact.html">Contact</a>

            </nav>

Step 2) Save and open the modified page in a web browser, such as IE or Chrome. The page will render like the image below with the navigation links at the top of the web page. If you recall from the Week One mock-up, we wanted the navigation to be at the top right of the page, but the navigation we just added appears at the top left.

Step 3) To align the navigation to the right, add the following CSS code to the <style> tag at the bottom, placing the code before the closing </style> tag. Be sure to leave the styling for the .myColumns elements as it is.

nav {

     float: right;

     display: block;

}

Step 4) Save and refresh the GroceryHome.html page in a browser. The page will render like the image below with the navigation now nicely positioned at the top right of the page.

Note: If you haven’t already, try resizing your browser window from full-screen to small and back again and notice how the links move automatically.

Step 5) To add a new page to the website, open a new blank document in NotePad++. Just as you did in the Week One instructions, begin your new web page with the following code:

<!DOCTYPE html>

<html>

</html>

Step 6) From the menu, select File à Save As, and name the file Products.html, making sure to select the correct file extension to save the file as an HTML file (see the screenshot below of the Save dialogue box).

Note: Be sure you spell this filename properly, as it must exactly match the value of the <a> tag’s HREF attribute that you typed into the navigation section earlier in this assignment.

Hint: Be sure to save your file in the same location on your computer where you saved the home page.

Step 7) Using what you learned from Week One, add the body, title, and article to the Products.html page, as follows:

<body>

<header>

            <h1> My Products Page</h1>

</header>

<article>

This web page shows an example of using a table to display seasonal vegetables. Below is an example of what the grocery store might stock during the spring, summer, fall, and winter.

</article>

</body>

Step 8) Save and open the Products.html file in a browser. The page will render similar to the image below with a title and article text below.

Step 9) Add the same navigation you added to the GroceryHome.html page to the Products.html page. Be sure to place the code between the opening <body> and the opening <header> tags, as follows:

            <nav>

               <a href="GroceryHome.html">Home</a> |

               <a href="Products.html">Products</a> |

               <a href="AboutUs.html">About Us</a> |

               <a href="Contact.html">Contact</a>

            </nav>

Step 10) Although the navigation is not properly formatted on the Products.html page, this is a good time to test the navigation between the two web pages.

Open the GroceryHome.html page, and click on the Products link at the top (the image below highlights the Products link in the navigation).

The Products.html page will render like the image below. Clicking on the Home link will navigate back to the GroceryHome.html page (the image below highlights the Home page link on the Products page).

Note: Clicking the About Us or Contact links will result in a File Not Found error, because the HTML file names (pages) associated with those links have not yet been created. You will add those pages in future assignments.

Step 11) To format the <nav> block so the navigation floats to the right, add an external CSS file. Open a new blank window in NotePad++ and add the following code at the top:

nav {

     float: right;

     display: block;

}

Note: Adding an external CSS file gives you a single place to specify formatting rules that you can then apply to multiple web pages by pulling in that CSS file (instead of copying-and-pasting CSS formatting code multiple times). Having all the formatting code in a single place means fewer errors!

Step 12) From the menu, select File à Save As, and name the file MyStyle.css, making sure to select the correct file extension to save the file as a Cascading Style Sheets file (see the screenshot below of the Save dialogue box).

Step 13) To pull in the MyStyle.css file and make that formatting rule available to the Products page, modify the Products.html page and add the following code between the <html> and <body> tags at the top of the page. Be sure to spell the CSS filename correctly.

<head>

   <link rel="stylesheet" href="MyStyle.css">

</head>

Step 14) Save and refresh the browser for the Products.html page. Using the external CSS, the page renders like the image below with the navigation floating to the right.

Step 15) Test the navigation between the Home and Products page. The About Us and Contact links will result in a “page not found” error, as you haven’t built those pages yet.

Step 16) Now it’s time to present some organized text on your web page. You’ll use an HTML table to do this, beginning with a single table row and multiple table header tags. In the Products.html page, insert the following code for a <table> after the closing </article> tag, but before the closing </body> tag:

<table>

     <tr>

<th>Spring</th>

<th>Summer</th>

<th>Fall</th>

<th>Winter</th>

     </tr>

</table>

Step 17) Save the Products.html page and refresh the web browser. Your page should look like the image below with the seasons aligned at the bottom of the page.

Step 18) Now begin to lay out the table text more attractively. Add the following code to the end of the MyStyle.css page, after the closing curly brace } that completes the nav declaration:

td, th {

     border: 1px solid #dddddd;

     text-align: left;

     padding: 8px;

     width: 75px;

}

Step 19) Save the MyStyle.css page, and refresh the Products.html page. Your page should render like the image below with the seasons evenly spaced and outlined in a table format.

Step 20) To the Products.html file, add the following <tr> table rows and <td> table detail data. The code will go after the closing </tr> table row for the <th>Winter</th> table header, but before the closing </table> tag.

   <tr>

      <td>Asparagus</td>

      <td>Squash</td>

      <td>Pumpkins</td>

      <td>Potatos</td>

   </tr>

   <tr>

      <td>Scallions</td>

      <td>Tomatoes</td>

      <td>Cabbage</td>

      <td>Leeks</td>

   </tr>

   <tr>

      <td>Green Peas</td>

      <td>Carrots</td>

      <td>Broccoli</td>

      <td>Turnips</td>

   </tr>

Step 21) Save and refresh the web browser. Your <table> should render like the image below with all of the vegetables laid out neatly in a table.

Step 22) Verify that the files (GroceryHome.html, Products.html, and MyStyle.css) are in the same folder. Keeping related files together is extremely important to avoid broken links (the screenshot below shows all three files: GroceryHome.html, Products.html, and MyStyle.css).

Step 23) To zip the files together, select the three files then right-click (alternately, press the Alt key while the files are highlighted, then F to bring up the File menu, navigate to the Send To menu with the up/down arrow keys, then arrow right to navigate to Compressed Folder). From the pop-up menu, select Send To à Compressed (Zip) Folder. Give the zip file an appropriate name with your name or initials at the end (the screenshot below shows all the files along with the ZIP file).

Hint: Verify that there are three files in the Week2.zip file before you submit the ZIP file. To do so, double-click Week2.zip file to view the three compressed files (or press the Enter key while the file is selected).

Step 24) Submit the website as a ZIP file using the Assignment Files tab.

Solutions

Expert Solution

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

NOTE :GroceryHome,html page is not provided only added new code in the GroceryHome.html

Here a new web pages with name "GroceryHome.html" and "Products.html" is created, which contains following code.

GroceryHome.html :

<!DOCTYPE html>

<html lang="en">

<head>

<!-- title for home page -->

<title>Grocery Home</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Embedded styles -->

<style>

nav {

float: right;

display: block;

}

</style>

</head>

<body>

<nav>

<a href="GroceryHome.html">Home</a> |

<a href="Products.html">Products</a> |

<a href="AboutUs.html">About Us</a> |

<a href="Contact.html">Contact</a>

</nav>

</body>

</html>

**********************************

Products.html

<!DOCTYPE html>

<html>

<head>

<!-- link is used to refer to external css file -->

<link rel="stylesheet" href="MyStyle.css">

</head>

<body>

<nav>

<a href="GroceryHome.html">Home</a> |

<a href="Products.html">Products</a> |

<a href="AboutUs.html">About Us</a> |

<a href="Contact.html">Contact</a>

</nav>

<header>

<h1> My Products Page</h1>

</header>

<article>

This web page shows an example of using a table to display seasonal vegetables. Below is an example of what the

grocery store might stock during the spring, summer, fall, and winter.

</article>

<table>

<tr>

<th>Spring</th>

<th>Summer</th>

<th>Fall</th>

<th>Winter</th>

</tr>

<tr>

<td>Asparagus</td>

<td>Squash</td>

<td>Pumpkins</td>

<td>Potatos</td>

</tr>

<tr>

<td>Scallions</td>

<td>Tomatoes</td>

<td>Cabbage</td>

<td>Leeks</td>

</tr>

<tr>

<td>Green Peas</td>

<td>Carrots</td>

<td>Broccoli</td>

<td>Turnips</td>

</tr>

</table>

</body>

</html>

*************************

MyStyle.css :

/* style rule for nav */

nav {

float: right;

display: block;

}

/* style rule for th ,td */

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

width: 75px;

}

======================================================

Output : Open web page GroceryHome.html in the browser and will get the screen as shown below

Screen 1 :Products.html

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

venereology answered 1 year ago
Next > < Previous

Related Solutions

PRG/280 Week Three Assignment – Input Types and Form Designation Based on the readings for this...
PRG/280 Week Three Assignment – Input Types and Form Designation Based on the readings for this week, list the input types supported in HTML in general, and input types supported only in HTML5. HTML Input Types HTML5 Input Types    Study the HTML code snippet that appears below and answer these questions: Based on the code below, where will this form be sent after the user clicks the Submit button? How would the HTML code need to be changed if...
Week 1 Assignment Complete this two page assignment by the end of week 1! Download and...
Week 1 Assignment Complete this two page assignment by the end of week 1! Download and open the Word document below....fill in the blank and highlight the answer to the questions or fill in the blank. Resubmit here when you're finished by adding your completed assignment as a file! BIO 212 Assignment 1.docx BIO 212 Assignment 1 Fill in the Blank: Use the table on pg. 848-853 in your textbook to help you fill in the blank. Drug Classification Action...
PUBH 6033—Week 5 Assignment: Steps to Hypotheses Testing (Rubric included) Instructions For this Assignment, review this...
PUBH 6033—Week 5 Assignment: Steps to Hypotheses Testing (Rubric included) Instructions For this Assignment, review this week’s Learning Resources, including the 5 step approach to hypothesis testing document. Read the research scenario, below, and then answer the questions related to the steps that must be followed to make the appropriate decision as to reject or fail to reject the null hypothesis. Submit this Application Assignment by Day 7. --------------------------------------------------------------------------------------------------------------------- Research Scenario Hemoglobin levels (g/dL) from the general population of adult...
This week we covered the details of Cellular Respiration. Your assignment this week is in two...
This week we covered the details of Cellular Respiration. Your assignment this week is in two parts. Using Excel (or some other Table creating program) create a table that describes the four sub-steps of cellular respiration. Insert the table into a Word document and provide a discussion of how each sub part contributes to overall process of cellular respiration.
Your assignment this week has two parts: First, you will create a timeline or infographic to...
Your assignment this week has two parts: First, you will create a timeline or infographic to address the following questions: Research and provide examples or comparisons that demonstrate these changes over time from each of the categories: Print, Radio/Music, Cinema, Television, and the Internet. Include images of each artifact. How have these various forms of communication have evolved since they were first introduced? (Give a “before” and “after”) Second, you will write a mini-statement answering the following question. In 300-500...
This week, you will complete the "Decision Making Dilemma" assignment. This assignment asks you to imagine...
This week, you will complete the "Decision Making Dilemma" assignment. This assignment asks you to imagine that you are a captain of a ship that is sinking. All but one of your passengers can escape on the lifeboat. You and one other passenger will sink with the ship. You have to decide which passenger will die with you on the ship. Note that this decision does not need to be based on the perceived value of a life, but could...
The Week 7 Case Study Assignment is an individual assignment that requires you to analyze a...
The Week 7 Case Study Assignment is an individual assignment that requires you to analyze a select group of alternative industries to determine which is most likely to perform best over the next 12 months. Factors to consider when comparing the industry groups include how the current and prospective economic conditions over the next year will affect them and the current and prospective domestic and global supply and demand conditions in their markets. Review briefly the list of industries below...
Sally is a 68-year-old woman who walks three times per week and attends yoga class two...
Sally is a 68-year-old woman who walks three times per week and attends yoga class two times per week. As an older athlete and post-menopausal woman she’s concerned about her nutrient intake. Therefore, she makes an appointment with you to find out if she is eating adequately to support her exercise program and her health. She also asks you if she should be taking a vitamin supplement. After assessing a 3- dayfoodrecord,itappearsasifSallyislowinfoodsrichin vitaminD,B12and phytochemicals. 1. Provide Sally with tips/suggestions how...
Two parallel paths 20 m apart run east–west through the woods. Brooke walks east on one...
Two parallel paths 20 m apart run east–west through the woods. Brooke walks east on one path at 7 km / h, while Jamail walks west on the other path at 5 km / h. If they pass each other at time t = 0 , how far apart are they 11 s later, and how fast is the distance between them changing at that moment?
The written assignment this week is for you to thoroughly discuss the pros and cons of...
The written assignment this week is for you to thoroughly discuss the pros and cons of the plea bargain as used in the American court system, and to describe why the plea bargain is used so often, the mechanics of how a plea bargain comes about, and what some of the positive and negative outcomes of using it are. For reference material, use at least your text and two or more of the following sources, and remember to identify passages...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT