Tutorial Part 2: HTML Layouts Submission

The remaining edits must be done on your computer, in the web-tutorial-2 folder you created in part 1.

Continue to edit index.html as follows:

1. Since W3schools started this page, you should leave their name in the footer. However, since you edited this page, you should add you name on after theirs.
2. Add colored borders to the footer. To do so add the following style section to your file (choose any color you'd like for the border; a nice color picker site). Note: this style section must go in the style section of your HTML document, between the <style> and </style> tags. Even though you already have a section that includes styles for the header and footer, these styles will only be applied to the footer:

   footer {
     border: 2px solid somecolor;
     border-radius: 10px;
   }
   

3. Play with some of the style attributes. Make at least 3 changes. Make note of your changes for your submission.
4. Save your file.
5. Save this image (right-click and choose "Save as...") 
   
   
   
   into your web-tutorial-2 folder. Save the file as pyramid.png.
6. Include the image above in the header section of your HTML document, after the "City Gallery" heading.

   <header>
      <h1>City Gallery</h1>
      <img src="pyramid.png" title="CC0 Public Domain; https://pixabay.com/en/pyramid-the-design-of-the-metal-1049992/" alt="Louvre pyramid">
   </header>
   

7. Add a new link called "Home" to the top of the nav section. The link should take you to the index.html page:

   <li><a href="index.html">Home</a></li>
   

8. Modify the three other links as follows: "London" takes you to index.html (yes, the same page as "Home"), "Paris" goes to paris.html, and "Tokyo" to tokyo.html. Note: those pages don't exist yet so you'll get an error when you click the links for now. Your nav section should now look like this:

   <nav>
     <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="index.html">London</a></li>
       <li><a href="paris.html">Paris</a></li>
       <li><a href="tokyo.html">Tokyo</a></li>
     </ul>
   </nav>
   

9. Save your file (index.html)
10. Save the file as a new name (keeping the original): paris.html (in Notepad++ select File->Save As... then type the new file name).
11. In paris.html: edit the article section of the HTML so the heading reads "Paris" instead of "London", and replace the article text with the following (make sure this text is inside paragraph tags which are inside the article tags:

    Paris is the capital and most populous city of France.
    
    Paris has many important cultural institutions: its Louvre museum is the most visited in the world; its Musée d'Orsay is noted for its collection of French Impressionist art, and its Pompidou-center Musée National d'Art Moderne has the largest collection of modern and contemporary art in Europe.
    

12. Finally, save another copy of the document as tokyo.html. Change the heading to "Tokyo" and include this text for the article:

    Tokyo is the capital of Japan and one of its 47 prefectures.
    
    Tokyo was originally known as Edo. Its name was changed to Tokyo when it became the imperial capital with the arrival of Emperor Meiji in 1868.
    

You should now have a total of 4 files in your web-tutorial-2 folder: index.html, paris.html, tokyo.html and pyramid.png. Make sure you test your pages locally and that you can navigate to all of the pages correctly from each one.

Submission requirements

1. Upload your folder web-tutorial-2 to your WordPress File Manager.
2. Test your published pages. Make sure you can see the banner image on every page and that all links work as expected.
3. State what styles you changed in step 3, e.g. nav background color. 
4. Provide a link to your site, e.g., https://math.bluecc.edu/wordpress/user_data/FirstLast/web-tutorial-2/
   Be sure to check that the link works, i.e., that you can actually view the site.