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 9 months ago
Next > < Previous

Related Solutions

Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can...
Task 1: HTML and CSS Create a website using HTML5 and CSS3 only. Website theme can be anything you want: a country, a town, a place, a hobby, people (yourself, your family...), pets, flowers, food, or anything that you find interesting or useful. It may be about real people/places/things or fictitious. Part 1: Content (HTML) After you decide the theme of your website, create HTML pages with the content you want to present. Remember to separate content from presentation. The...
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.
HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a...
HTML 5 (Website Registration Form with Optional Survey) Create a website registration form to obtain a user’s first name, last name and e-mail address. In addition, include an optional survey question that asks the user’s year in college (e.g., Freshman). Place the optional survey question in a details element that the user can expand to see the question.
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.
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...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT