Question

Please use markup language HTML5 please.

For this homework assignment, you will create a Web site made up of three different pages and links between those pages

Index.htm

• The Web pages in a site should have a similar look-and-feel. For this site, you should create a simple menu as follows:
  • Create a horizontal line across the very top and bottom of the page.
  • Also on the home (Index) page, create links to the other two pages. The links should appear just below the line at the top of the page. You must use relative links between the pages in your site. Create another horizontal line just below the menu. The menu should appear on every page and appear just like it does on the home page.
  • Wrap the above code (menu) in the appropriate semantic navigation tag.
• The home page should have a level 1 heading containing your full name. Your name should appear below the links to the other two pages (navigation area).
• Add a picture of your choosing to the home page such that it appears below the level 1 heading. You must use a relative reference for the image. Make sure that you have alternate text for the image for accessibility. Wrap the image in the appropriate figure and figure caption tags. Create a caption for the figure as you see fit. You can use any image you want.
• Add a second picture of your choosing to this page. However, do not download this picture. Use and absolute reference to the picture on the Web. Make sure that you have alternate text for the image for accessibility. Wrap the image in the appropriate figure and figure caption tags. Create a caption for the figure as you see fit.
• Put a copyright notice using the appropriate named entity at the very bottom of the page below the last horizontal line. It should have the copyright symbol, followed by your name. You can use a named or numbered entity to do this. The copyright notice should appear on all the pages and be wrapped in the appropriate semantic footer tag.
• Write the necessary tag so that the text Home appears in the browser's title bar.

Content.htm

For this page, you have considerable flexibility. You can use any content that you want. Pick a subject in which you are interested, and teach me something or inform me about it. You do not need to write all of the content yourself. You can cut and paste it from the Web.

To get full credit, your page MUST meet the following minimum requirements.

• Create a horizontal line across the very top and bottom of the page, just as you did on the first page and wrap the menu in the appropriate navigation tags.
• Also on the page, create relative links to the other two pages. The links should appear just below the two horizontal lines at the top of the page.
• Create a level 1 heading as you did on the first page. The text of the heading should describe the purpose or meaning of your site. Your heading should be wrapped in an <article> tag.
• Your page must have at least three sections <section> tags and corresponding <h2> tags. Put your content in the sections.
• Your page must have at least two images excluding the image required for the validation report. They must have semantic figure, figure caption, and alternate text.
• Your page must have at least three links to pages that somehow relate to your page. One of those links must operate as a clickable image.
• A billeted list must appear somewhere on the page.
• Write the necessary tag so that the text Content appears in the browser's title bar.
• Just below the menu and before the top <h1> tag, create bookmarks to the various sections. The number of bookmarks will vary based on the number of sections.

Copyright.htm

• Again, create horizontal lines at the top and bottom of the page.
• Create links to the other two pages. The links should appear just below the line at the top of the page.
• Use the proper semantic tags to describe the reviewer or author. (that's you).
• Use the proper tag to represent the article date. The date you submitted your assignment
• Write the necessary tag so that the text Copyright appears in the browser's title bar.
• Somewhere in the copyright notice, you must used the copyright symbol (named entity).

Answer 1

index.htm

<!DOCTYPE html>
<html>
<head>

   <!--Appears on the title bar of browser-->
   <title>Home</title>

</head>
<body>

   <!--top horizontal line-->
   <hr>
   <center>

       <nav>
           <a href="content.htm">Contents</a><br>
           <a href="copyright.htm">Copyright</a>
       </nav>

   </center>
   <!--horizontal line after menu-->
   <hr>
   <!--Level 1 heading with your name-->
   <center><h1>Your Full Name</h1>
       <br>
       <figure>

           <!--relative reference is used-->
           <img src="image1.jpg" >
           <figcaption>Figure Caption for Image 1 with relative reference</figcaption>
       </figure><br><br>

       <figure>
           <!--absolute reference is used-->
           <!--use the url of image in src-->
           <img src="image1.jpg" >
           <figcaption>Figure Caption for Image 2 with absolute reference</figcaption>
       </figure>

   </center>
   <!--bottom horizontal line-->
   <hr>
   <!-- copyright-->
  
       <footer>
           <center>
               &copy; Your Name
           </center>
       </footer>

  
</body>
</html>

contents.htm

<!DOCTYPE html>
<html>
<head>

   <!--Appears on the title bar of browser-->
   <title>Content</title>

</head>
<body>

   <!--top horizontal line-->
   <hr>
   <center>
       <nav>
           <a href="index.htm">Home</a><br>
           <a href="copyright.htm">Copyright</a>
       </nav>
   </center>
   <!--horizontal line after menu-->
   <hr>

   <!--Bookmarks-->
   <a href="#notes">Key Notes</a><br>
   <a href="#syntax">Basic Syntax</a><br>
   <a href="#useful">Useful Links</a>
   <!--Level 1 heading with Purpose of site-->
   <center>
       <article>
           <h1>HTML Basics</h1>
       </article>
       <br>
<!--image
       <figure>
           <!--relative reference is used-->
           <img src="image3.jpg" >
           <figcaption>Figure Caption for HTML Logo </figcaption>
       </figure>
   </center>

   <!--Section 1-->

   <section>
       <center>
           <h2 id="notes">Key Notes</h2>
           <p align="center">HTML is a markup language. It stands for <strong>Hypertext Markup Language..</strong></p>
       </center>
   </section>
   <!--Section 2-->
   <section>
       <center>
           <h2 id="syntax">Basic Syntax</h2>

       <xmp>
          
   <!DOCTYPE html>
   <html>
       <head>
           <title></title>
       </head>
       <body>
       </body>
   </html>

</xmp>

       </center>
   </section>

   <!--Section 3-->
   <section>
       <center><h2 id="useful">Useful Links</h2></center><br>
       <!--Bullet list-->
       <ol>
           <li><a href="">link 1</a></li>
           <li><a href="">link 2</a></li>
           <li><a href="">link 3</a></li>
       </ol>

       <center>
           <a href=""><img src="ClickMe.jpg" ></a>
       </center>
   </section>

   <!--bottom horizontal line-->
   <hr>
   <!-- copyright-->
  
       <footer>
           <center>
               &copy; Your Name
           </center>
       </footer>

</body>
</html>

copyright.htm

<!DOCTYPE html>
<html>
<head>

   <!--Appears on the title bar of browser-->
   <title>Copyright</title>

</head>
<body>

   <!--top horizontal line-->
   <hr>
   <center>
       <nav>
           <a href="index.htm">Home</a><br>
           <a href="content.htm">Contents</a><br>
       </nav>
   </center>
   <!--horizontal line after menu-->
   <hr>
   <center>
       Author : Your Name<br><br>
       Date Submitted :
       <time >Tuesday, 31 October 2017</time><br>
       </center>
   <!--bottom horizontal line-->
   <hr>
   <!-- copyright-->
  
       <footer>
           <center>
               &copy; Your Name
           </center>
       </footer>

</body>
</html>

Output :