Question

In: Computer Science

How do I add the information below to my current code that I have also posted...

How do I add the information below to my current code that I have also posted below.

<!DOCTYPE html>

<html>
<!-- The author of this code is: Ikeem Mays -->
<body>

<header>

<h1> My Grocery Site </h1>

</header>
<article>

This is web content about a grocery store that might be in any town. The store stocks
fresh produce, as well as essential grocery items. Below are category lists of products you can find
in the grocery store.

</article>
<div class = "myColumns">

<ul>

<li>Bread</li>

<li>Juice</li>

<li>Cereal</li>

</ul>

</div>

<div class="myColumns">

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Avocados</li>

</ul>

</div>

<div class="myColumns">

<ul>

<li>Rice</li>

<li>Olive Oil</li>

<li>Lettuce</li>

</ul>

</div>
</body>
<style>
.myColumns {

float: left;

margin: 0 20px 0 0;

}
</style>
</html>

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

GroceryHome.html :

<!DOCTYPE html>

<html>

<!-- The author of this code is: Ikeem Mays -->

<head>

<!-- Embedded styles -->

<style>

/* style rule for myColumns */

.myColumns {

float: left;

margin: 0 20px 0 0;

}

/* style rule for nav */

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>

<header>

<h1> My Grocery Site </h1>

</header>

<article>

This is web content about a grocery store that might be in any town. The store stocks

fresh produce, as well as essential grocery items. Below are category lists of products you can find

in the grocery store.

</article>

<div class="myColumns">

<ul>

<li>Bread</li>

<li>Juice</li>

<li>Cereal</li>

</ul>

</div>

<div class="myColumns">

<ul>

<li>Apples</li>

<li>Bananas</li>

<li>Avocados</li>

</ul>

</div>

<div class="myColumns">

<ul>

<li>Rice</li>

<li>Olive Oil</li>

<li>Lettuce</li>

</ul>

</div>

</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;

}

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

GroceryHome.html :

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

Products.html :

venereology answered 1 year ago
Next > < Previous

Related Solutions

I Have posted my Java code below. Fix the toString, add, and remove implementations so that...
I Have posted my Java code below. Fix the toString, add, and remove implementations so that the following test cases work. Note: I have removed all the unnecessary inherited List implementations. I have them to: throw new UnsupportedException(); For compilation, you could also add //TODO. Test (Main) List list = new SparseList<>(); list.add("0"); list.add("1"); list.add(4, "4"); will result in the following list of size 5: [0, 1, null, null, 4]. list.add(3, "Three"); will result in the following list of size...
Write code in SAS to do each of the following I have posted the data below...
Write code in SAS to do each of the following I have posted the data below from a pace delimited data set consisting of 66 randomly selected cars Upload the data set to SAS and store it as a SAS data set called cars. Make sure the full values are stored for all character variables. Create a comparative bar chart (with appropriate title and labels) displaying the brands of each car by fuel type (so that fuel type is on...
In Python I have a code: here's my problem, and below it is my code. Below...
In Python I have a code: here's my problem, and below it is my code. Below that is the error I received. Please assist. Complete the swapCaps() function to change all lowercase letters in string to uppercase letters and all uppercase letters to lowercase letters. Anything else remains the same. Examples: swapCaps( 'Hope you are all enjoying October' ) returns 'hOPE YOU ARE ALL ENJOYING oCTOBER' swapCaps( 'i hope my caps lock does not get stuck on' ) returns 'I...
How do i get the code below to add an element before another without making the...
How do i get the code below to add an element before another without making the array off one element? (javascript) public void addBefore(double element) { itemCount++; double data[] = new double[this.data.length]; if(currentIndex <= itemCount) { if(currentIndex != 0) { for(int index = currentIndex; index >= itemCount; index ++) { data[index] = this.data[index]; } currentIndex--; data[currentIndex] = element; } if(currentIndex == 0) { data[0] = element; currentIndex = 0; } } }
Python I want to name my hero and my alien in my code how do I...
Python I want to name my hero and my alien in my code how do I do that: Keep in mind I don't want to change my code except to give the hero and alien a name import random class Hero:     def __init__(self,ammo,health):         self.ammo=ammo         self.health=health     def blast(self):         print("The Hero blasts an Alien!")         if self.ammo>0:             self.ammo-=1             return True         else:             print("Oh no! Hero is out of ammo.")             return False     def...
How do I add white space in the beginning of my printf statement in C? I...
How do I add white space in the beginning of my printf statement in C? I also need the white space to be dynamic by using an int value as reference for the amount of spaces. Thanks!
I am trying to do edge detection using matlab. I have posted code here. It does...
I am trying to do edge detection using matlab. I have posted code here. It does not give any error but it's not running it at all. So please help me to fix it and also exaplin each line of this code pls. Thanks! i = imread('C:\Users\Amanda\Desktop"); I = rgb2gray(1i); BW1 = edge(I,'prewitt'); BW2= edge(I,'sobel'); BW3= edge(I,'roberts'); subplot (2,2,1); imshow(I); title('original'); subplot(2,2,2); imshow(BW1); title('Prewitt'); subplot(2,2,3); imshow(BW2); title('Sobel'); subplot(2,2,4); imshow(BW3); title('Roberts');
HOW DO I FIND THEORETICAL DISTRIBUTION if I have information from my collected data?
HOW DO I FIND THEORETICAL DISTRIBUTION if I have information from my collected data?
HOW DO I ADD ON TO THIS CODE SO THAT IT DISPLAYS ALL THE VALUES INPUT...
HOW DO I ADD ON TO THIS CODE SO THAT IT DISPLAYS ALL THE VALUES INPUT BY THE USER AS SPECIFIED IN THEH FIRST PART OF THE QUESTION? Ask the user to enter a number and display the number, followed by ***, followed by the number squared, followed by &&&, and followed by the number cubed. Allow the user to enter as many numbers as he/she wishes. So, use a reasonable sentinel value to end the loop (for example, -999)....
How would I add an automatic please fill out this info to my complete code. Something...
How would I add an automatic please fill out this info to my complete code. Something similar to this code. <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Untitled Document</title> <script>    function phonenumber(inputtxt){           var phoneno = (\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4};       if(inputtxt.value.match(phoneno)){        document.getElementById("yourEntry").innerHTML = document.getElementById("myphone").value;    }    //if(!inputtxt.value.match(phoneno)){        // alert("Does not Work!")        //}    } </script> </head> <body> <form name="form1" action="#"> <input type="text" name="myphone" id="myphone" value="" pattern= "(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="(555) 555-1212" required /> <input...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT