Question

In: Computer Science

HTML I would like you to create a three paged website, where you can navigate to...

HTML

I would like you to create a three paged website, where you can navigate to any page using a navigation bar.

One page must include an ordered list, one page must include an unordered list.

One page must include a picture. (please keep it appropriate.)

Each page much include a header and a footer, please have your name on each footer with the copyright symbol next to it.

Each page must be styled using CSS, and I would like you to use an external style sheet.

The content of the site can be of your choosing

Solutions

Expert Solution

Hi Please find the code below

NOTE: Please save all the files in same folder.

I have used an image of my system you can use as per your convenience

#1 home.html

<!DOCTYPE html>

<html>

<head>

    <!-- to add an external css file use link tag as used below -->

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

</head>

<body>

<!-- create a div having class mainNavigation -->

<div class="mainNavigation">

    <!-- use anchor tags for navigating to other pages -->

  <a class="current" href="/home">Home</a>

  <a href="advantages.html">Advantages of Sports</a>

  <a href="about.html">About Us</a>

  

</div>

<!-- add header -->

<header>

    <h2>Sports and Games</h2>

    

  </header>

<div style="padding-left:16px">

<!-- oddered list -->

<ol>

    <li>Football</li>

    <li>Basketball</li>

    <li>Hockey</li>

    <li>Polo</li>

    <li>Cricket</li>

  </ol>

</div>

<!-- footer with name and copyright symbol -->

<div class="centerAlign">  

    <footer class="myFooter">

       <p> MyName ⓒ</p>

    </footer>

    </div>

</body>

</html>


#2 advantages.html

<!DOCTYPE html>

<html>

<head>

    <!-- to add an external css file use link tag as used below -->

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

</head>

<body>

<!-- create a div having class mainNavigation -->

<div class="mainNavigation">

    <!-- use anchor tags for navigating to other pages -->

  <a  href="home.html">Home</a>

  <a class="current" href="advantages.html">Advantages of Sports</a>

  <a  href="about.html">About</a>

</div>

<!-- add header -->

<header>

    <h2>Advantages of Sports</h2>

    

  </header>

<div style="padding-left:16px">

<!-- un-ordered list -->

<ul>

    <li>One can learn how to work as a team member.</li>

    <li>Physical Fitnees</li>

    <li>Reduce pressure</li>

    <li>Self Development</li>

    <li>Leaership</li>

</ul>

</div>

<!-- footer with name and copyright symbol -->

<div class="centerAlign">  

<footer class="myFooter">

   <p> MyName ⓒ</p>

</footer>

</div>

</body>

</html>


#3 about.html

<!DOCTYPE html>

<html>

<head>

    <!-- to add an external css file use link tag as used below -->

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

</head>

<body>

<!-- create a div having class mainNavigation -->

<div class="mainNavigation">

    <!-- use anchor tags for navigating to other pages -->

  <a  href="home.html">Home</a>

  <a  href="advantages.html">Advantages of Sports</a>

  <a class="current" href="about.html">About Us</a>

</div>

<!-- add header -->

<header>

    <h2>About Us</h2>

    

  </header>

<div style="padding-left:16px">

<p>

     We have provide training for all types of sports. For further information please visit our training center.

</p>

<!-- image  -->

<img src="images.jpg"/>

</div>

<!-- footer with name and copyright symbol -->

<div class="centerAlign">  

    <footer class="myFooter">

       <p> MyName ⓒ</p>

    </footer>

    </div>

</body>

</html>


#4 externalStyle.css"

/* to add margin and font-family to body */

/* you can use as per your convenience */

body {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

  }

  

  /* main navigation class */

  .mainNavigation {

    overflow: hidden;

    background-color: #333;

  }

  

  /* apply styling for anchor tags inside navigation bars */

  .mainNavigation a {

    float: left;

    color: #f2f2f2;

    text-align: center;

    padding: 12px 16px;

    font-size: 15px;

  }

  

  /* apply color for hover */

  .mainNavigation a:hover {

    background-color: #ddd;

    color: black;

  }

  

  /* current class specify the current page in navigation bar */

  .mainNavigation a.current {

    background-color: #4CAF50;

    color: white;

  }

  /* add styling to footer */

  .myFooter{

      

     bottom:0;

     position: absolute;

  }

  /* class to provide left margin of 50% */

  .centerAlign{

      margin-left: 50%;

  }

OUTPUT
#1

#2

#3

Thanks

Hope it helps!!

venereology answered 7 months ago
Next > < Previous

Related Solutions

Using HTML/Javascript (if needed) I want to create a table for a website that pulls data...
Using HTML/Javascript (if needed) I want to create a table for a website that pulls data from another website where the data is being updated on. Example: https://investors.coca-colacompany.com/stock-information/historical-data I cannot just put in the numbers to a table as they will be getting updated daily. So it needs to link the the website elements. DATE OPEN HIGH LOW CLOSE VWAP VOLUME % CHG CHANGE TRADE VAL TOTAL TRADES 2020-10-13 -- -- -- 51.09 -- -- 0.00% -- -- -- 2020-10-12...
I would like you to take a look at a company website of your choice. The...
I would like you to take a look at a company website of your choice. The company must be publicly traded. Explore their website to learn more about the company. After researching the company answer the 4 questions listed below. Be sure to provide specific details in your post that you found on the website for the company you chose. Be sure to provide a link to the website of the company you chose to use for this assignment. 1....
I would like to create a Memory Game using JCreator. But am unsure where to start....
I would like to create a Memory Game using JCreator. But am unsure where to start. Please help. I would like to start with a basic code so I can add and change designs and colors ect... Any help would be greatly appreciated. I do want to use pics such as .jpg in my code.
Choose a product that you would like to create and introduce for sale - it can...
Choose a product that you would like to create and introduce for sale - it can be pretty crazy so have some fun here if you'd like. Now your job is to create your advertising campaign for that product. What is your product? What is your target market, and how will you make sure that your ads reach that market and resonate with them? What are your advertising objectives? What sort of artwork/visuals will you include in your advertisements? What...
Create an imaginary healthcare department or institution where you would like to be the administrator/manager. You...
Create an imaginary healthcare department or institution where you would like to be the administrator/manager. You may choose to lead a department in a large healthcare organization, or you may choose to be the administrator of a smaller healthcare entity such as an ambulatory surgery center, walk-in ambulatory care center, or a long-term care memory care center. Be sure to include: The name of the department/institution you created An explanation as to why you chose the department/institution How you see...
using PDO, MYSQL, and Html, how can i create a simple registration and login form for...
using PDO, MYSQL, and Html, how can i create a simple registration and login form for cPanel?
Think win/win. Create a scenario and select a specific relationship where you would like to develop...
Think win/win. Create a scenario and select a specific relationship where you would like to develop a Win/win agreement. Try to put yourself in the other person’s place, and write down explicitly, how you think that person sees the solution. Then list from your own perspective, what results would constitute a win for you.
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocks
Create a welcome website in html/css for the fictional college elliott university, this website will consist of at least 4 in-page-content-blocksElliott university welcome block :2-3 pictures with bordersThree paragraphs describing a student experience the collegeAppropriate for the contentGallery page block:Consisting of 8 to 10 imagesFormatted for best loading on the web across all devicesText paragraph under each imageRemaining Two blocks can reflect content that you choose:Consisting of 3 paragraphs of text per blockConsisting of at least one image per blockLook...
Question 21 ​ In Chrome, you can save the location of a website you like as...
Question 21 ​ In Chrome, you can save the location of a website you like as a(n) ____. a. ​cookie b. ​favorite c. ​history link d. ​bookmark 1 points Question 22 ​ In Private browsing mode, all of the following are deleted from the computer you are using when you close the file EXCEPT: a. ​searches b. ​cookies c. ​downloads d. ​temporary files 1 points Question 23 ​ In most browsers, the Back button and Forward button are located on...
, I would like for you to address three main questions: 1) In valuing a project,...
, I would like for you to address three main questions: 1) In valuing a project, or even a firm, we work off of projections. This means that we must make assumptions. What are the biggest areas of assumptions in a valuation exercise? 2) How can we address these assumptions? 3) Now that you have learned the science of finance, how will you master the art of finance so that you can improve your work life? Your home life? Long...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT