Create a HTML page with the following: Add a header section to your page and pla

ID: 3719362 • Letter: C

Question

Create a HTML page with the following:

Add a header section to your page and place some navigational links in it. The links do not have to be valid URLs. Make the URL’s relative.

Add 5 paragraphs of text

Within each paragraph place 3 links. The href attribute value for each should have an absolute link to sites of your choice. You will have 15 links in total.

Each link should also contain a title attribute with a value

Add 5 images to your page. It doesn’t matter where on the page they are. The src attribute for your images should point to random images located on the web. Include an alt attribute and ensure that some value is set for it.

Now add two blocks of text using the blockquote element. Each blockquote should have 3-5 sentences.

Create an empty div that has the id of “summary”

Place a footer on the page and put some content in it.

Now that the HTML file is made, use jQuery to accomplish the following:

Use jQuery to collect all of the links and display the links and their associated href and titles in the “summary” div. Display them using an unordered list and also add “Links On This Page” before you display the list. The links do not need to be active HTML links.

Use jQuery to collect all of the images and display their src and alt attribute values. Do this as well in a list. Display them using an unordered list and also add “Images On This Page” before you display the list. You should then append this to the HTML generated for the links in the step above.

Use jQuery to collect the text of each of the blockquotes and display the text below the ordered list of image attributes created in the prior step. Display them using an unordered list and also add “Quotes on This Page” before you display the list. You should then append this to the HTML generated for the links in the step above.

Lastly, place a button on the page that allows the user to manually regenerate summary information.

Explanation / Answer

<!DOCTYPE html>
<html>
<head>
<title>HHTML Jquery Assignment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

header li {
float: left;
}

header li a {
    display: block;
    padding: 8px;
    background-color: #dddddd;

}
header li a:link {
    text-decoration: none;
}
.mainWrapper{
       display: grid;
       grid-template-columns: 2fr 1fr;
       grid-gap: 2em;
       margin-top: 20px;
       margin-right :10%;
       margin-left: 10%;
        margin-bottom: 20px;

       /*margin-right 20%;*/
   }
   .secondWrapper{
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-gap: 2em;
       margin-top: 20px;
       margin-right :10%;
       margin-left: 10%;
        margin-bottom: 20px;

       /*margin-right 20%;*/
   }
   .finalWrapper{
       display: grid;
       grid-template-columns: 1fr;
       grid-gap: 2em;
       margin-top: 20px;
       margin-right :10%;
       margin-left: 10%;
        margin-bottom: 20px;

       /*margin-right 20%;*/
   }
   img{
       height: 300px;
       width: 400px;
   }

</style>
</head>
<body>
<header>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</header>
<div class="mainWrapper">
   <div class="para1Div">
       <P class="para1">
           Lorem Ipsum is simply dummy <span class="para1link1"><a href="https://www.facebook.com" title=”facebook”>the</a></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span class="para1link2"><a href="https://www.twitter.com" title="twitter">when</a></span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <span class="para1link3"><a href="https://www.youtube.com" title="youtube">survived</a></span>survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
       </P>

   </div>
   <div class="img1">
       <img src="https://cdn.pixabay.com/photo/2016/11/26/23/45/dog-1861839_960_720.jpg" alt="Image one of Dog">
   </div>
   <div class="para2Div">
       <P class="para2">
           Lorem Ipsum is simply dummy <span class="para2link1"><a href="https://www.facebook.com" title=”facebook”>the</a></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span class="para2link2"><a href="https://www.twitter.com" title="twitter">when</a></span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <span class="para2link3"><a href="https://www.youtube.com" title="youtube">survived</a></span>survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
       </P>
   </div>
   <div class="img2">
       <img src="https://cdn.pixabay.com/photo/2016/02/19/15/46/dog-1210559_960_720.jpg" alt="Image Two of Dog">
   </div>
   <div class="para3Div">
       <P class="para3">
           Lorem Ipsum is simply dummy <span class="para3link1"><a href="https://www.facebook.com" title=”facebook”>the</a></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span class="para3link2"><a href="https://www.twitter.com" title="twitter">when</a></span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <span class="para3link3"><a href="https://www.youtube.com" title="youtube">survived</a></span>survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
       </P>
   </div>
   <div class="img3">
       <img src="https://cdn.pixabay.com/photo/2018/04/13/19/37/dog-3317366_960_720.jpg" alt="Image Three of Dog">
   </div>
   <div class="para4Div">
       <P class="para4">
           Lorem Ipsum is simply dummy <span class="para4link1"><a href="https://www.facebook.com" title=”facebook”>the</a></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span class="para4link2"><a href="https://www.twitter.com" title="twitter">when</a></span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <span class="para4link3"><a href="https://www.youtube.com" title="youtube">survived</a></span>survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
       </P>
   </div>
   <div class="img4">
       <img src="https://cdn.pixabay.com/photo/2018/04/11/18/05/dog-3311245_960_720.jpg" alt="Image Four of Dog">
   </div>
   <div class="para5Div">
       <P class="para5">
           Lorem Ipsum is simply dummy <span class="para5link1"><a href="https://www.facebook.com" title=”facebook”>the</a></span> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<span class="para5link2"><a href="https://www.twitter.com" title="twitter">when</a></span> when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has <span class="para5link3"><a href="https://www.youtube.com" title="youtube">survived</a></span>survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
       </P>
   </div>
   <div class="img5">
       <img src="https://cdn.pixabay.com/photo/2018/04/11/09/37/animal-3310012_960_720.jpg" alt="Image Five of Dog">
   </div>
</div>
<div class="secondWrapper">

   <div>
   <blockquote class="textOne">
       It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
   </blockquote>
   </div>
   <div>
   <blockquote class="textTwo">
       Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
   </blockquote>
   </div>
</div>
<div class="finalWrapper">
<div id="summary">
   <p>

   </p>
</div>
<button id="regenerate">Regenerate Summary</button>
</div>

<footer>
© 2003-2018 All rights reserved.
</footer>

   var para2link1,para2link2,para2link3;
   var para2link1href,para2link2href,para2link3href;
   var para2link1title,para2link2title,para2link3title;

   var para3link1,para3link2,para3link3;
   var para3link1href,para3link2href,para3link3href;
   var para3link1title,para3link2title,para3link3title;

   var para4link1,para4link2,para4link3;
   var para4link1href,para4link2href,para4link3href;
   var para4link1title,para4link2title,para4link3title;

   var para5link1,para5link2,para5link3;
   var para5link1href,para5link2href,para5link3href;
   var para5link1title,para5link2title,para5link3title;

var img1src,img2src,img3src,img4src,img5src;
var img1alt,img2alt,img3alt,img4alt,img5alt;

var text1,text2;

para1link1= $(".para1link1 a").attr('href');
para1link1title = $(".para1link1 a").attr('title');

para1link2= $(".para1link2 a").attr('href');
para1link2title = $(".para1link2 a").attr('title');

para1link3= $(".para1link2 a").attr('href');
para1link3title = $(".para1link3 a").attr('title');

para2link1= $(".para2link1 a").attr('href');
para2link1title = $(".para2link1 a").attr('title');

para2link2= $(".para2link2 a").attr('href');
para2link2title = $(".para2link2 a").attr('title');

para2link3= $(".para2link2 a").attr('href');
para2link3title = $(".para2link3 a").attr('title');

para3link1= $(".para3link1 a").attr('href');
para3link1title = $(".para3link1 a").attr('title');

para3link2= $(".para3link2 a").attr('href');
para3link2title = $(".para3link2 a").attr('title');

para4link3= $(".para4link2 a").attr('href');
para4link3title = $(".para4link3 a").attr('title');

para4link1= $(".para4link1 a").attr('href');
para4link1title = $(".para4link1 a").attr('title');

para5link2= $(".para5link2 a").attr('href');
para5link2title = $(".para5link2 a").attr('title');

para5link3= $(".para5link2 a").attr('href');
para5link3title = $(".para5link3 a").attr('title');

para1link1= $(".para1link1 a").attr('href');
para1link1title = $(".para1link1 a").attr('title');

para1link2= $(".para1link2 a").attr('href');
para1link2title = $(".para1link2 a").attr('title');

para1link3= $(".para1link2 a").attr('href');
para1link3title = $(".para1link3 a").attr('title');

para1link1= $(".para1link1 a").attr('href');
para1link1title = $(".para1link1 a").attr('title');

para1link2= $(".para1link2 a").attr('href');
para1link2title = $(".para1link2 a").attr('title');

para1link3= $(".para1link2 a").attr('href');
para1link3title = $(".para1link3 a").attr('title');

img1src =$(".img1 img").attr('src');
img1alt =$(".img1 img").attr('alt');

img2src =$(".img2 img").attr('src');
img2alt =$(".img2 img").attr('alt');

img3src =$(".img3 img").attr('src');
img3alt =$(".img3 img").attr('alt');

img4src =$(".img4 img").attr('src');
img4alt =$(".img4 img").attr('alt');

img5src =$(".img5 img").attr('src');
img5alt =$(".img5 img").attr('alt');

   text1= $(".textOne").text();
   text2= $(".textOne").text();

   var str=`
      <strong>Links On This Page</strong>
      <ul>
      <li>Href value of the Link: `+para1link1+`<br>
      Title value of the link: `+para1link1title+`
      </li>
     <li>Href value of the Link: `+para1link2+`<br>
      Title value of the link: `+para1link2title+`
     </li>
      <li>Href value of the Link: `+para1link3+`<br>
      Title value of the link: `+para1link3title+`
      </li>

      <li>Href value of the Link: `+para2link1+`<br>
      Title value of the link: `+para2link1title+`
      </li>
      <li>Href value of the Link: `+para2link2+`<br>
      Title value of the link: `+para2link2title+`
      </li>
      <li>Href value of the Link: `+para2link3+`<br>
      Title value of the link: `+para2link3title+`
      </li>

      <li>Href value of the Link: `+para3link1+`<br>
      Title value of the link: `+para3link1title+`
      </li>
      <li>Href value of the Link: `+para3link2+`<br>
      Title value of the link: `+para3link2title+`
      </li>
      <li>Href value of the Link: `+para3link3+`<br>
      Title value of the link: `+para3link3title+`
      </li>

      <li>Href value of the Link: `+para4link1+`<br>
      Title value of the link: `+para4link1title+`
      </li>
      <li>Href value of the Link: `+para4link2+`<br>
      Title value of the link: `+para4link2title+`
      </li>
      <li>Href value of the Link: `+para4link3+`<br>
      Title value of the link: `+para4link3title+`
      </li>

      <li>Href value of the Link: `+para5link1+`<br>
      Title value of the link: `+para5link1title+`
      </li>
      <li>Href value of the Link: `+para5link2+`<br>
      Title value of the link: `+para5link2title+`
      </li>
      <li>Href value of the Link: `+para5link3+`<br>
      Title value of the link: `+para5link3title+`
      </li>
      </ul>

      <strong>Images On This Page</strong>
      <ul>
       <li>Src value of the Image `+img1src+`<br>
      Alt value of the Image `+img1alt+`
      </li>
     <li>Src value of the Image `+img2src+`<br>
      Alt value of the Image `+img2alt+`
     </li>
      <li>Src value of the Image `+img3src+`<br>
      Alt value of the Image `+img3alt+`
      </li>

      <li>Src value of the Image `+img4src+`<br>
      Alt value of the Image `+img4alt+`
      </li>
      <li>Src value of the Image `+img5src+`<br>
      Alt value of the Image `+img5alt+`
      </li>

</ul>

      <strong>Quotes on This Page</strong>
       <ul>
       <li>`+text1+`<br>
      </li>
      <li>`+text2+`<br>

      </li>

</ul>
`;
$("#summary p").html(str);

});

$(document).ready(function(){
$("#regenerate").click(function(){

           var para1link1,para1link2,para1link3;
           var para1link1href,para1link2href,para1link3href;
           var para1link1title,para1link2title,para1link3title;

           var para2link1,para2link2,para2link3;
           var para2link1href,para2link2href,para2link3href;
           var para2link1title,para2link2title,para2link3title;

           var para3link1,para3link2,para3link3;
           var para3link1href,para3link2href,para3link3href;
           var para3link1title,para3link2title,para3link3title;

           var para4link1,para4link2,para4link3;
           var para4link1href,para4link2href,para4link3href;
           var para4link1title,para4link2title,para4link3title;

           var para5link1,para5link2,para5link3;
           var para5link1href,para5link2href,para5link3href;
           var para5link1title,para5link2title,para5link3title;